mirror of
https://github.com/stefanprodan/podinfo.git
synced 2026-03-03 18:40:21 +00:00
195 lines
7.0 KiB
HTML
195 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{{.Title}}</title>
|
|
<meta charset="utf-8">
|
|
<!-- <meta http-equiv="refresh" content="5"> -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link rel="shortcut icon" type="image/png" href="https://kubernetes.io/images/favicon.png">
|
|
<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://d33wubrfki0l68.cloudfront.net/33a12d8be0bc50be4738443101616e968c7afb8f/cba76/images/scalable.png" alt="kubernetes" height="200">
|
|
<h1 class="white--text mb-2 display-1 text-xs-center">${ info.message }</h1>
|
|
<div class="subheading mb-3 text-xs-center">Served by <b>${ info.hostname }</b></div>
|
|
<v-btn
|
|
class="red darken-2 mt-5"
|
|
dark
|
|
large
|
|
@click="postBackend()"
|
|
>
|
|
<v-badge left color="red">
|
|
<span slot="badge">${ pings }</span>
|
|
<v-icon left dark>touch_app</v-icon>
|
|
</v-badge>
|
|
Ping
|
|
</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">graphic_eq</v-icon>
|
|
</v-card-text>
|
|
<v-card-title primary-title class="layout justify-center">
|
|
<div class="headline">Observability</div>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
Instrumentation with Prometheus (RED method).
|
|
Structured logging with zerolog and Fluentd.
|
|
Tracing with Jaeger and Istio.
|
|
</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 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.min.js"></script>
|
|
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
|
|
<script>
|
|
new Vue({
|
|
delimiters: ['${', '}'],
|
|
el: '#app',
|
|
data: function() {
|
|
return {
|
|
info: {},
|
|
timer: '',
|
|
color: '',
|
|
pings: 0
|
|
}
|
|
},
|
|
created: function() {
|
|
this.getInfo();
|
|
this.timer = setInterval(this.getInfo, 3000)
|
|
},
|
|
methods: {
|
|
getInfo: function() {
|
|
var xhr = new XMLHttpRequest()
|
|
var self = this
|
|
xhr.open('GET', "/api/info")
|
|
xhr.onload = function () {
|
|
data = JSON.parse(xhr.responseText)
|
|
// reload page when the version changes
|
|
if (self.info.version) {
|
|
if (self.info.version != data.version) {
|
|
console.log("New version", data.version)
|
|
window.location.reload()
|
|
}
|
|
}
|
|
self.info = data
|
|
document.title = data.hostname
|
|
}
|
|
xhr.onerror = function() {
|
|
console.log(xhr.responseText || 'Network request failed')
|
|
}
|
|
xhr.send()
|
|
},
|
|
postBackend: function() {
|
|
var self = this
|
|
fetch("/api/echo", {
|
|
method: 'post',
|
|
headers: {
|
|
"Content-type": "application/json; charset=UTF-8",
|
|
"X-APP": Math.random(),
|
|
},
|
|
body: JSON.stringify({random: Math.random()})
|
|
})
|
|
.then(function(response) {
|
|
self.pings++
|
|
self.color = response.headers.get('X-Color')
|
|
return response.json()
|
|
})
|
|
.then(function(json) {
|
|
console.log('Request successful', json);
|
|
})
|
|
.catch(function (error) {
|
|
console.log('Request failed', error);
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|