From 7340f8a2b120f6ab9333de5884e4de5e4acb08ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Sj=C3=B6str=C3=B6m?= <lars@radicore.se>
Date: Wed, 17 Apr 2024 13:52:40 +0200
Subject: [PATCH] feat(ui): add xhr request header and a xhr status button

---
 ui/vue.html | 345 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 194 insertions(+), 151 deletions(-)
diff --git a/ui/vue.html b/ui/vue.html
index e4c26d500..268edc336 100644
--- a/ui/vue.html
+++ b/ui/vue.html
@@ -1,165 +1,208 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>{{.Title}}</title>
-  <meta charset="utf-8">
-  <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:100,300,400,500,700,900" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
-  <style>
-	[v-cloak] {
-    display: none;
-  }
-  .v-application .v-parallax {
-    height: 100vh !important;
-  }
-  </style>
-</head>
-<body>
- <div id="app" v-cloak>
-   <v-app dark>
-    <v-content>
-      <section>
-        <v-parallax id="parallax-hero" :style="cuddleStyle" src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png">
-          <v-layout
-            column
-            align-center
-            justify-center
-            class="white--text"
-          >
-            <img :src="info.logo" height="350">
-            <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()"
+  <head>
+    <title>{{.Title}}</title>
+    <meta charset="utf-8" />
+    <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:100,300,400,500,700,900"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      [v-cloak] {
+        display: none;
+      }
+      .v-application .v-parallax {
+        height: 100vh !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app" v-cloak>
+      <v-app dark>
+        <v-content>
+          <section>
+            <v-parallax
+              id="parallax-hero"
+              :style="cuddleStyle"
+              src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png"
             >
-              <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 column align-center justify-center class="white--text">
+                <img :src="info.logo" height="350" />
+                <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
+                  v-if="xhrStatus != 200"
+                  class="red darken-3 mt-5"
+                  dark
+                  large
+                  @click="windowReload()"
+                >
+                  backend returned ${ xhrStatus }, click to reload
+                </v-btn>
+                <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>
 
-            <template>
-              <v-timeline>
-                <v-timeline-item :color="tlColor1"><h3>${ tlName1 }</h3></v-timeline-item>
-                <v-timeline-item :color="tlColor2"><h3 slot="opposite">${ tlName2 }</h3></v-timeline-item>
-              </v-timeline>
-            </template>
+                <template>
+                  <v-timeline>
+                    <v-timeline-item :color="tlColor1"
+                      ><h3>${ tlName1 }</h3></v-timeline-item
+                    >
+                    <v-timeline-item :color="tlColor2"
+                      ><h3 slot="opposite">${ tlName2 }</h3></v-timeline-item
+                    >
+                  </v-timeline>
+                </template>
+              </v-layout>
+            </v-parallax>
+          </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/podinfo"
+                    target="_blank"
+                    >podinfo</a
+                  >
+                  version ${ info.version } revision ${ info.revision } Swagger
+                  <a class="white--text" href="swagger/">docs</a>
+                </div>
+              </v-flex>
+            </v-layout>
+          </v-footer>
+        </v-content>
+      </v-app>
+    </div>
 
-          </v-layout>
-        </v-parallax>
-      </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/podinfo" target="_blank">podinfo</a>
-              version ${ info.version } revision ${ info.revision }
-              Swagger <a class="white--text" href="swagger/">docs</a>
-            </div>
-          </v-flex>
-        </v-layout>
-      </v-footer>
-    </v-content>
-  </v-app>
- </div>
-
- <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
- <script>
-   new Vue({
-    delimiters: ['${', '}'],
-    el: '#app',
-    vuetify: new Vuetify(),
-    data: function() {
-    return {
-        info: {},
-        timer: '',
-        color: '',
-        pings: 0,
-        calls: 0,
-        tlName1: '',
-        tlColor1: 'grey',
-        tlName2: '',
-        tlColor2: 'grey',
-        cuddleStyle: {
-            backgroundColor: '#34577c'
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
+    <script>
+      new Vue({
+        delimiters: ["${", "}"],
+        el: "#app",
+        vuetify: new Vuetify(),
+        data: function () {
+          return {
+            info: {},
+            timer: "",
+            color: "",
+            pings: 0,
+            calls: 0,
+            xhrStatus: 0,
+            tlName1: "",
+            tlColor1: "grey",
+            tlName2: "",
+            tlColor2: "grey",
+            cuddleStyle: {
+              backgroundColor: "#34577c",
+            },
+          };
+        },
+        created: function () {
+          this.getInfo();
+          this.timer = setInterval(this.getInfo, 3000);
         },
-    }
-    },
-    created: function() {
-        this.getInfo();
-        this.timer = setInterval(this.getInfo, 3000)
-    },
-    methods: {
-        getInfo: function() {
-          const xhr = new XMLHttpRequest();
-          let self = this;
-          xhr.open('GET', "api/info")
+        methods: {
+          getInfo: function () {
+            const xhr = new XMLHttpRequest();
+            let self = this;
+            xhr.open("GET", "api/info");
+            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
             xhr.onload = function () {
-                data = JSON.parse(xhr.responseText)
-                if (self.info.version) {
-                    if (self.info.version != data.version) {
-                        console.log("New version", data.version)
-                    }
+              self.xhrStatus = xhr.status;
+              data = JSON.parse(xhr.responseText);
+              if (self.info.version) {
+                if (self.info.version != data.version) {
+                  console.log("New version", data.version);
                 }
-                self.info = data
-                self.info.color = data.color
-                self.cuddleStyle = {
-                    backgroundColor: data.color
-                }
-                self.info.logo = data.logo
-                document.title = data.hostname
-                let verColor = (parseInt(data.version.split('.').reverse()[0], 10)  % 2 === 0)
-                        ? 'blue'
-                        : 'green'
-                if ((self.calls % 2) === 0) {
-                  self.tlColor2 += ' lighten-2'
-                  self.tlColor1 = verColor
-                  self.tlName1 = data.version
-                } else {
-                  self.tlColor1 += ' lighten-2'
-                self.tlColor2 = verColor
-                self.tlName2 = data.version
               }
-              self.calls++
-            }
-            xhr.onerror = function() {
-                console.log(xhr.responseText || 'Network request failed')
-            }
-            xhr.send()
-        },
-        postBackend: function() {
-            var self = this
+              self.info = data;
+              self.info.color = data.color;
+              self.cuddleStyle = {
+                backgroundColor: data.color,
+              };
+              self.info.logo = data.logo;
+              document.title = data.hostname;
+              let verColor =
+                parseInt(data.version.split(".").reverse()[0], 10) % 2 === 0
+                  ? "blue"
+                  : "green";
+              if (self.calls % 2 === 0) {
+                self.tlColor2 += " lighten-2";
+                self.tlColor1 = verColor;
+                self.tlName1 = data.version;
+              } else {
+                self.tlColor1 += " lighten-2";
+                self.tlColor2 = verColor;
+                self.tlName2 = data.version;
+              }
+              self.calls++;
+            };
+            xhr.onerror = function () {
+              console.log(xhr.responseText || "Network request failed");
+            };
+            xhr.send();
+          },
+          windowReload: function () {
+            window.location.reload();
+          },
+          postBackend: function () {
+            var self = this;
             fetch("api/echo", {
-                method: 'post',
-                headers: {
+              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()
+              },
+              body: JSON.stringify({ random: Math.random() }),
             })
-            .then(function(json) {
-                console.log('Request successful', json);
-            })
-            .catch(function (error) {
-                console.log('Request failed', error);
-            });
-        }
-    }
-  })
- </script>
-</body>
+              .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>
