mirror of
https://github.com/stefanprodan/podinfo.git
synced 2026-08-19 12:16:34 +00:00
Add VueJS UI
This commit is contained in:
Stefan Prodan
@@ -15,3 +15,4 @@
|
||||
.idea/
|
||||
release/
|
||||
build/
|
||||
gcloud/
|
||||
|
||||
+1
-1
@@ -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 ./
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
FROM alpine:3.7
|
||||
|
||||
COPY ./ui ./ui
|
||||
ADD podinfo /podinfo
|
||||
|
||||
CMD ["./podinfo"]
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
@@ -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 ;\
|
||||
|
||||
+170
@@ -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>
|
||||
Reference in New Issue
Block a user