Add page for individual service details

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;

web/app/src/components/ServiceGroup.vue

@@ -33,6 +33,7 @@ export default {
     name: String,
     services: Array
   },
+  emits: ['showTooltip'],
   methods: {
     healthCheck() {
       if (this.services) {

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>

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,