Add VueJS UI

jah118 · Aug 13, 2018 · a945842 · a945842
1 parent 09a743f
commit a945842
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@
 .idea/
 release/
 build/
+gcloud/
diff --git a/Dockerfile b/Dockerfile
@@ -6,7 +6,7 @@ RUN addgroup -S app \
     curl openssl netcat-openbsd
 
 WORKDIR /home/app
-
+COPY ./ui ./ui
 ADD podinfo .
 
 RUN chown -R app:app ./

diff --git a/Dockerfile.build b/Dockerfile.build
@@ -1,5 +1,6 @@
 FROM alpine:3.7
 
+COPY ./ui ./ui
 ADD podinfo /podinfo
 
 CMD ["./podinfo"]
diff --git a/Dockerfile.ci b/Dockerfile.ci
@@ -24,7 +24,7 @@ RUN addgroup -S app \
 WORKDIR /home/app
 
 COPY --from=builder /go/src/github.com/stefanprodan/k8s-podinfo/podinfo .
-
+COPY ./ui ./ui
 RUN chown -R app:app ./
 
 USER app

diff --git a/Makefile b/Makefile
@@ -21,6 +21,7 @@ build:
 	@echo Building: linux/$(LINUX_ARCH)  $(VERSION) ;\
 	for arch in $(LINUX_ARCH); do \
 	    mkdir -p build/linux/$$arch && CGO_ENABLED=0 GOOS=linux GOARCH=$$arch go build -ldflags="-s -w -X $(GITREPO)/pkg/version.GITCOMMIT=$(GITCOMMIT)" -o build/linux/$$arch/$(NAME) ./cmd/$(NAME) ;\
+	    cp -r ui/ build/linux/$$arch/ui;\
 	done
 
 .PHONY: tar
@@ -45,6 +46,7 @@ docker-build: tar
 	@for arch in $(LINUX_ARCH); do \
 	    mkdir -p build/docker/linux/$$arch ;\
 	    tar -xzf release/$(NAME)_$(VERSION)_linux_$$arch.tgz -C build/docker/linux/$$arch ;\
+	    cp -r ui/ build/docker/linux/$$arch/ui;\
 	    if [ $$arch == amd64 ]; then \
 		cp Dockerfile build/docker/linux/$$arch ;\
 		cp Dockerfile build/docker/linux/$$arch/Dockerfile.in ;\

diff --git a/ui/vue.html b/ui/vue.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{.Title}}</title>
+  <meta charset="utf-8">
+  <!-- <meta http-equiv="refresh" content="5"> -->
+  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
+  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
+  <style>
+	[v-cloak] {
+  		display: none;
+	}
+  </style>
+</head>
+<body>
+ <div id="app" v-cloak>
+   <v-app dark>
+    <v-content>
+      <section>
+        <v-parallax src="#" height="600" :class="info.color">
+          <v-layout
+            column
+            align-center
+            justify-center
+            class="white--text"
+          >
+            <img src="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo_with_border.png" alt="kubernetes" height="200">
+            <h1 class="white--text mb-2 display-1 text-xs-center">${ info.title }</h1>
+            <div class="subheading mb-3 text-xs-center">Response processed by ${ info.hostname }</div>
+            <v-btn
+              class="blue darken-2 mt-5"
+              dark
+              large
+              @click="ping()"
+            >
+              <v-icon left dark>touch_app</v-icon>
+              Ping ${ pings }
+            </v-btn>
+          </v-layout>
+        </v-parallax>
+      </section>
+
+      <section>
+        <v-layout
+          column
+          wrap
+          class="my-5"
+          align-center
+        >
+          <v-flex xs12 sm4 class="my-3">
+            <div class="text-xs-center">
+              <h2 class="headline">The best way to start developing</h2>
+              <span class="subheading">
+                stateless microservices with Go for Kubernetes
+              </span>
+            </div>
+          </v-flex>
+          <v-flex xs12>
+            <v-container grid-list-xl>
+              <v-layout row wrap align-center>
+                <v-flex xs12 md4>
+                  <v-card class="elevation-0 transparent">
+                    <v-card-text class="text-xs-center">
+                      <v-icon x-large class="blue--text text--lighten-2">cloud</v-icon>
+                    </v-card-text>
+                    <v-card-title primary-title class="layout justify-center">
+                      <div class="headline text-xs-center">Cloud Native</div>
+                    </v-card-title>
+                    <v-card-text>
+                      Distributed as a Helm chart. Builtin Kubernetes health checks (readiness and liveness).
+                      Graceful shutdown on interrupt signals.
+                    </v-card-text>
+                  </v-card>
+                </v-flex>
+                <v-flex xs12 md4>
+                  <v-card class="elevation-0 transparent">
+                    <v-card-text class="text-xs-center">
+                      <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
+                    </v-card-text>
+                    <v-card-title primary-title class="layout justify-center">
+                      <div class="headline">Fast development</div>
+                    </v-card-title>
+                    <v-card-text>
+                      Dependency management with golang/dep.  
+                      Structured logging with zerolog.
+                      Error handling with pkg/errors. 
+                    </v-card-text>
+                  </v-card>
+                </v-flex>
+                <v-flex xs12 md4>
+                  <v-card class="elevation-0 transparent">
+                    <v-card-text class="text-xs-center">
+                      <v-icon x-large class="blue--text text--lighten-2">build</v-icon>
+                    </v-card-text>
+                    <v-card-title primary-title class="layout justify-center">
+                      <div class="headline text-xs-center">Release automation</div>
+                    </v-card-title>
+                    <v-card-text>
+                      Multi-platform Docker image AMD64 and ARMv7.
+                      CI/CD powered by: TravisCI CircleCI Quay.io Google Cloud Container Builder Skaffold Weave Flux.
+                    </v-card-text>
+                  </v-card>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-flex>
+        </v-layout>
+      </section>
+
+      <v-footer class="blue darken-2">
+        <v-layout row wrap align-center>
+          <v-flex xs12>
+            <div class="white--text ml-3">
+              Powered
+              by <a class="white--text" href="https://github.com/stefanprodan/k8s-podinfo" target="_blank">podinfo</a>
+              version ${ info.version } revision ${ info.revision }
+            </div>
+          </v-flex>
+        </v-layout>
+      </v-footer>
+    </v-content>
+  </v-app>
+ </div>
+ <script src="https://unpkg.com/vue/dist/vue.js"></script>
+ <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
+ <script>
+   new Vue({
+    delimiters: ['${', '}'],
+    el: '#app',
+    data: function() {
+    return {
+        info: {},
+        timer: '',
+        pings: 0
+    }
+    },
+    created: function() {
+        this.fetchInfo();
+        this.timer = setInterval(this.fetchInfo, 3000)
+    },
+    methods: {
+        fetchInfo: function() {
+            var xhr = new XMLHttpRequest()
+            var self = this
+            xhr.open('GET', "/api/info")
+            xhr.onload = function () {
+                self.info = JSON.parse(xhr.responseText)
+            }
+            xhr.onerror = function() {
+                console.log(xhr.responseText || 'Network request failed')
+            }
+            xhr.send()
+        },
+        ping: function() {
+            var xhr = new XMLHttpRequest()
+            var self = this
+            xhr.open('POST', "/backend")
+            xhr.onload = function () {
+                self.pings++
+            }
+            xhr.onerror = function() {
+                console.log(xhr.responseText || 'Network request failed')
+            }
+            xhr.send(Math.random())
+        }
+    }
+  })
+ </script>
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,3 +15,4 @@ @@
     .idea/
     release/
     build/
+    gcloud/