Add page for individual service details

2021-01-27 18:25:37 -05:00
parent 2ccd656386
commit dcbbec7931
20 changed files with 391 additions and 101 deletions
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@ -1,51 +1,42 @@
 <template>
-  <Services :serviceStatuses="serviceStatuses" :showStatusOnHover="true" @showTooltip="showTooltip"/>
+  <div class="container container-xs relative mx-auto rounded shadow-xl border my-3 p-5 text-left" id="global">
+    <div class="mb-2">
+      <div class="flex flex-wrap">
+        <div class="w-2/3 text-left my-auto">
+          <div class="title text-5xl font-light">Health Status</div>
+        </div>
+        <div class="w-1/3 flex justify-end">
+          <img src="./assets/logo.png" alt="Gatus" style="min-width: 50px; max-width: 200px; width: 20%;"/>
+        </div>
+      </div>
+    </div>
+    <router-view @showTooltip="showTooltip"/>
+  </div>
  <Tooltip :result="tooltip.result" :event="tooltip.event"/>
  <Social/>
-  <Settings @refreshStatuses="fetchStatuses"/>
 </template>


 <script>
 import Social from './components/Social.vue'
-import Settings from './components/Settings.vue'
-import Services from './components/Services.vue';
 import Tooltip from './components/Tooltip.vue';
-import {SERVER_URL} from "./main.js";

 export default {
  name: 'App',
  components: {
-    Services,
    Social,
-    Settings,
    Tooltip
  },
  methods: {
-    fetchStatuses() {
-      console.log("[App][fetchStatuses] Fetching statuses");
-      fetch(`${SERVER_URL}/api/v1/statuses`)
-          .then(response => response.json())
-          .then(data => {
-            if (JSON.stringify(this.serviceStatuses) !== JSON.stringify(data)) {
-              console.log(data);
-              this.serviceStatuses = data;
-            }
-          });
-    },
    showTooltip(result, event) {
      this.tooltip = {result: result, event: event};
    }
  },
  data() {
    return {
-      serviceStatuses: {},
      tooltip: {}
    }
  },
-  created() {
-    this.fetchStatuses();
-  }
 }
 </script>

@ -53,9 +44,10 @@ export default {
 <style>
 html, body {
  background-color: #f7f9fb;
-}
-
-html, body {
  height: 100%;
 }
+
+#global, #results {
+  max-width: 1200px;
+}
 </style>
--- a/web/app/src/components/Service.vue
+++ b/web/app/src/components/Service.vue
@ -1,8 +1,8 @@
 <template>
-  <div class='container px-3 py-3 border-l border-r border-t rounded-none'>
+  <div class='service container px-3 py-3 border-l border-r border-t rounded-none' v-if="data && data.results && data.results.length">
    <div class='flex flex-wrap mb-2'>
      <div class='w-3/4'>
-        <span class='font-bold'>{{ data.name }}</span> <span class='text-gray-500 font-light'>- {{ data.results[data.results.length - 1].hostname }}</span>
+        <router-link :to="generatePath()" class="font-bold transition duration-200 ease-in-out hover:text-blue-900">{{ data.name }}</router-link> <span class='text-gray-500 font-light'>- {{ data.results[data.results.length - 1].hostname }}</span>
      </div>
      <div class='w-1/4 text-right'>
        <span class='font-light status-min-max-ms'>
@ -41,6 +41,7 @@ export default {
    maximumNumberOfResults: Number,
    data: Object,
  },
+  emits: ['showTooltip'],
  methods: {
    updateMinAndMaxResponseTimes() {
      let minResponseTime = null;
@ -73,6 +74,12 @@ export default {
      }
      return (differenceInMs/1000).toFixed(0) + " seconds ago";
    },
+    generatePath() {
+      if (!this.data) {
+        return "/";
+      }
+      return "/services/" + this.data.key;
+    },
    showTooltip(result, event) {
      this.$emit('showTooltip', result, event);
    }
@ -96,6 +103,19 @@ export default {


 <style>
+.service:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.service:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-width: 1px;
+  border-color: #dee2e6;
+  border-style: solid;
+}
+
 .status {
  cursor: pointer;
  transition: all 500ms ease-in-out;
--- a/web/app/src/components/ServiceGroup.vue
+++ b/web/app/src/components/ServiceGroup.vue
@ -33,6 +33,7 @@ export default {
    name: String,
    services: Array
  },
+  emits: ['showTooltip'],
  methods: {
    healthCheck() {
      if (this.services) {
--- a/web/app/src/components/Services.vue
+++ b/web/app/src/components/Services.vue
@ -1,20 +1,8 @@
 <template>
-  <div class="container mx-auto rounded shadow-xl border my-3 p-5 text-left" id="global">
-    <div class="mb-2">
-      <div class="flex flex-wrap">
-        <div class="w-2/3 text-left my-auto">
-          <div class="title font-light">Health Status</div>
-        </div>
-        <div class="w-1/3 flex justify-end">
-          <img src="../assets/logo.png" alt="Gatus" style="min-width: 50px; max-width: 200px; width: 20%;"/>
-        </div>
-      </div>
-    </div>
-    <div id="results">
-      <slot v-for="serviceGroup in serviceGroups" :key="serviceGroup">
-        <ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip" />
-      </slot>
-    </div>
+  <div id="results">
+    <slot v-for="serviceGroup in serviceGroups" :key="serviceGroup">
+      <ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip"/>
+    </slot>
  </div>
 </template>

@ -31,6 +19,7 @@ export default {
    showStatusOnHover: Boolean,
    serviceStatuses: Object
  },
+  emits: ['showTooltip'],
  methods: {
    process() {
      let outputByGroup = {};
@ -45,7 +34,7 @@ export default {
      let serviceGroups = [];
      for (let name in outputByGroup) {
        if (name !== 'undefined') {
-          serviceGroups.push({ name: name, services: outputByGroup[name]})
+          serviceGroups.push({name: name, services: outputByGroup[name]})
        }
      }
      // Add all services that don't have a group at the end
@ -74,29 +63,8 @@ export default {


 <style>
-#global {
-  max-width: 1140px;
-}
-
-#results div.container:first-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-
-#results div.container:last-child {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  border-bottom-width: 1px;
-  border-color: #dee2e6;
-  border-style: solid;
-}
-
-#results .service-group-content > div:nth-child(1) {
+.service-group-content > div:nth-child(1) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
 }
-
-.title {
-  font-size: 2.5rem;
-}
 </style>
--- a/web/app/src/components/Settings.vue
+++ b/web/app/src/components/Settings.vue
@ -25,14 +25,14 @@ export default {
    setRefreshInterval(seconds) {
      let that = this;
      this.refreshIntervalHandler = setInterval(function() {
-        that.refreshStatuses();
+        that.refreshData();
      }, seconds * 1000);
    },
-    refreshStatuses() {
-      this.$emit('refreshStatuses');
+    refreshData() {
+      this.$emit('refreshData');
    },
    handleChangeRefreshInterval() {
-      this.refreshStatuses();
+      this.refreshData();
      clearInterval(this.refreshIntervalHandler);
      this.setRefreshInterval(this.$refs.refreshInterval.value);
    }
@ -40,6 +40,9 @@ export default {
  created() {
    this.setRefreshInterval(this.refreshInterval);
  },
+  unmounted() {
+    clearInterval(this.refreshIntervalHandler);
+  },
  data() {
    return {
      refreshInterval: 30,
--- a/web/app/src/main.js
+++ b/web/app/src/main.js
@ -1,7 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
+import router from './router'

 export const SERVER_URL = process.env.NODE_ENV === 'production' ? '.' : 'http://localhost:8080'

-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
--- a/web/app/src/router/index.js
+++ b/web/app/src/router/index.js
@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import Details from "@/views/Details";
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/services/:key',
+    name: 'Details',
+    component: Details
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router
--- a/web/app/src/views/Details.vue
+++ b/web/app/src/views/Details.vue
@ -0,0 +1,90 @@
+<template>
+  <router-link to="/" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg font-medium leading-6 text-center text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none">
+    &#8592;
+  </router-link>
+  <div class="container mx-auto">
+    <slot v-if="serviceStatus">
+      <h1 class="text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
+      <hr class="mb-4" />
+      <Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
+    </slot>
+    <!-- print table of each results in table? that'd be sick as fuck -->
+
+    <div v-if="serviceStatus.uptime" class="mt-5">
+      <h1 class="text-3xl text-monospace text-gray-400">UPTIME</h1>
+      <hr />
+      <div class="flex space-x-4 text-center text-2xl mt-5">
+        <div class="flex-1">
+          {{ prettifyUptime(serviceStatus.uptime['7d']) }}
+          <h2 class="text-sm text-gray-400">Last 7 days</h2>
+        </div>
+        <div class="flex-1">
+          {{ prettifyUptime(serviceStatus.uptime['24h']) }}
+          <h2 class="text-sm text-gray-400">Last 24 hours</h2>
+        </div>
+        <div class="flex-1">
+          {{ prettifyUptime(serviceStatus.uptime['1h']) }}
+          <h2 class="text-sm text-gray-400">Last hour</h2>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <Settings @refreshData="fetchData"/>
+</template>
+
+
+<script>
+import Settings from '@/components/Settings.vue'
+import Service from '@/components/Service.vue';
+import {SERVER_URL} from "@/main.js";
+
+export default {
+  name: 'Details',
+  components: {
+    Service,
+    Settings,
+  },
+  emits: ['showTooltip'],
+  methods: {
+    fetchData() {
+      console.log("[Details][fetchData] Fetching data");
+      fetch(`${SERVER_URL}/api/v1/statuses/${this.$route.params.key}`)
+          .then(response => response.json())
+          .then(data => {
+            if (JSON.stringify(this.serviceStatus) !== JSON.stringify(data)) {
+              console.log(data);
+              this.serviceStatus = data;
+            }
+          });
+    },
+    prettifyUptime(uptime) {
+      if (!uptime) {
+        return "0%";
+      }
+      return (uptime * 100).toFixed(2) + "%"
+    },
+    showTooltip(result, event) {
+      this.$emit('showTooltip', result, event);
+    }
+  },
+  data() {
+    return {
+      serviceStatus: {}
+    }
+  },
+  created() {
+    this.fetchData();
+  }
+}
+</script>
+
+<style scoped>
+.service {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-width: 1px;
+  border-color: #dee2e6;
+  border-style: solid;
+}
+</style>
--- a/web/app/src/views/Home.vue
+++ b/web/app/src/views/Home.vue
@ -0,0 +1,43 @@
+<template>
+  <Services :serviceStatuses="serviceStatuses" :showStatusOnHover="true" @showTooltip="showTooltip"/>
+  <Settings @refreshData="fetchData"/>
+</template>
+
+<script>
+import Settings from '@/components/Settings.vue'
+import Services from '@/components/Services.vue';
+import {SERVER_URL} from "@/main.js";
+
+export default {
+  name: 'Home',
+  components: {
+    Services,
+    Settings,
+  },
+  emits: ['showTooltip'],
+  methods: {
+    fetchData() {
+      console.log("[Home][fetchData] Fetching data");
+      fetch(`${SERVER_URL}/api/v1/statuses`)
+          .then(response => response.json())
+          .then(data => {
+            if (JSON.stringify(this.serviceStatuses) !== JSON.stringify(data)) {
+              console.log(data);
+              this.serviceStatuses = data;
+            }
+          });
+    },
+    showTooltip(result, event) {
+      this.$emit('showTooltip', result, event);
+    }
+  },
+  data() {
+    return {
+      serviceStatuses: {}
+    }
+  },
+  created() {
+    this.fetchData();
+  }
+}
+</script>