Minor improvements

web/app/src/components/Service.vue

@@ -2,14 +2,14 @@
   <div class='service container px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data && data.results && data.results.length">
     <div class='flex flex-wrap mb-2'>
       <div class='w-3/4'>
-        <router-link :to="generatePath()" class="inline-block font-bold transform hover:scale-105 transition duration-100 ease-in-out hover:text-blue-800 hover:rotate-2" title="View detailed service health">
+        <router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline" title="View detailed service health">
           {{ 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'>
-          {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) }}ms
+          {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
         </span>
       </div>
     </div>
@@ -70,9 +70,9 @@ export default {
     },
     generatePath() {
       if (!this.data) {
-        return "/";
+        return '/';
       }
-      return "/services/" + this.data.key;
+      return '/services/' + this.data.key;
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
@@ -105,7 +105,7 @@ export default {
 .service:last-child {
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  border-bottom-width: 1px;
+  border-bottom-width: 3px;
   border-color: #dee2e6;
   border-style: solid;
 }

web/app/src/components/ServiceGroup.vue

@@ -14,7 +14,7 @@
     </slot>
     <div v-if="!collapsed" :class="name === 'undefined' ? '' : 'service-group-content'">
       <slot v-for="service in services" :key="service">
-        <Service :data="service" @showTooltip="showTooltip" :maximumNumberOfResults="20" />
+        <Service :data="service" @showTooltip="showTooltip" :maximumNumberOfResults="20"/>
       </slot>
     </div>
   </div>
@@ -56,6 +56,7 @@ export default {
     },
     toggleGroup() {
       this.collapsed = !this.collapsed;
+      sessionStorage.setItem(`service-group:${this.name}:collapsed`, this.collapsed);
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
@@ -72,7 +73,7 @@ export default {
   data() {
     return {
       healthy: true,
-      collapsed: false
+      collapsed: sessionStorage.getItem(`service-group:${this.name}:collapsed`) === "true"
     }
   }
 }

web/app/src/views/Details.vue

@@ -84,7 +84,7 @@ export default {
   mixins: [helper],
   methods: {
     fetchData() {
-      console.log("[Details][fetchData] Fetching data");
+      //console.log("[Details][fetchData] Fetching data");
       fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}`)
           .then(response => response.json())
           .then(data => {
@@ -94,25 +94,25 @@ export default {
               for (let i = data.events.length-1; i >= 0; i--) {
                 let event = data.events[i];
                 if (i === data.events.length-1) {
-                  if (event.type === "UNHEALTHY") {
+                  if (event.type === 'UNHEALTHY') {
-                    event.fancyText = "Service is unhealthy";
+                    event.fancyText = 'Service is unhealthy';
-                  } else if (event.type === "HEALTHY") {
+                  } else if (event.type === 'HEALTHY') {
-                    event.fancyText = "Service is healthy";
+                    event.fancyText = 'Service is healthy';
-                  } else if (event.type === "START") {
+                  } else if (event.type === 'START') {
-                    event.fancyText = "Monitoring started";
+                    event.fancyText = 'Monitoring started';
                   }
                 } else {
                   let nextEvent = data.events[i+1];
-                  if (event.type === "HEALTHY") {
+                  if (event.type === 'HEALTHY') {
-                    event.fancyText = "Service became healthy again";
+                    event.fancyText = 'Service became healthy again';
-                  } else if (event.type === "UNHEALTHY") {
+                  } else if (event.type === 'UNHEALTHY') {
                     if (nextEvent) {
-                      event.fancyText = "Service was unhealthy for " + this.prettifyTimeDifference(nextEvent.timestamp, event.timestamp);
+                      event.fancyText = 'Service was unhealthy for ' + this.prettifyTimeDifference(nextEvent.timestamp, event.timestamp);
                     } else {
-                      event.fancyText = "Service became unhealthy";
+                      event.fancyText = 'Service became unhealthy';
                     }
-                  } else if (event.type === "START") {
+                  } else if (event.type === 'START') {
-                    event.fancyText = "Monitoring started";
+                    event.fancyText = 'Monitoring started';
                   }
                 }
                 event.fancyTimeAgo = this.generatePrettyTimeAgo(event.timestamp);
@@ -127,13 +127,13 @@ export default {
     },
     prettifyUptime(uptime) {
       if (!uptime) {
-        return "0%";
+        return '0%';
       }
-      return (uptime * 100).toFixed(2) + "%"
+      return (uptime * 100).toFixed(2) + '%'
     },
     prettifyTimeDifference(start, end) {
       let minutes = Math.ceil((new Date(start) - new Date(end))/1000/60);
-      return minutes + (minutes === 1 ? " minute" : " minutes");
+      return minutes + (minutes === 1 ? ' minute' : ' minutes');
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
@@ -155,9 +155,8 @@ export default {
 
 <style scoped>
 .service {
-  border-bottom-left-radius: 3px;
+  border-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-bottom-width: 3px;
-  border-bottom-width: 1px;
   border-color: #dee2e6;
   border-style: solid;
 }

web/app/src/views/Home.vue

@@ -17,12 +17,11 @@ export default {
   emits: ['showTooltip'],
   methods: {
     fetchData() {
-      console.log("[Home][fetchData] Fetching data");
+      //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;
             }
           });