Implement toggleable average response time (frontend) + Persist refresh interval (frontend) + Update dependencies (frontend)

web/app/src/components/Service.vue

@@ -8,8 +8,13 @@
         <span v-if="data.results && data.results.length" 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' v-if="data.results && data.results.length">
-          {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
+        <span class='font-light overflow-x-hidden cursor-pointer select-none' v-if="data.results && data.results.length" @click="toggleShowAverageResponseTime" :title="showAverageResponseTime ? 'Average response time' : 'Minimum and maximum response time'">
+          <slot v-if="showAverageResponseTime">
+            ~{{ averageResponseTime }}ms
+          </slot>
+          <slot v-else>
+            {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
+          </slot>
         </span>
       </div>
     </div>
@@ -56,15 +61,18 @@ export default {
   props: {
     maximumNumberOfResults: Number,
     data: Object,
+    showAverageResponseTime: Boolean
   },
-  emits: ['showTooltip'],
+  emits: ['showTooltip', 'toggleShowAverageResponseTime'],
   mixins: [helper],
   methods: {
     updateMinAndMaxResponseTimes() {
       let minResponseTime = null;
       let maxResponseTime = null;
+      let totalResponseTime = 0;
       for (let i in this.data.results) {
         const responseTime = parseInt((this.data.results[i].duration/1000000).toFixed(0));
+        totalResponseTime += responseTime;
         if (minResponseTime == null || minResponseTime > responseTime) {
           minResponseTime = responseTime;
         }
@@ -78,6 +86,9 @@ export default {
       if (this.maxResponseTime !== maxResponseTime) {
         this.maxResponseTime = maxResponseTime;
       }
+      if (this.data.results && this.data.results.length) {
+        this.averageResponseTime = (totalResponseTime/this.data.results.length).toFixed(0);
+      }
     },
     generatePath() {
       if (!this.data) {
@@ -87,6 +98,9 @@ export default {
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
+    },
+    toggleShowAverageResponseTime() {
+      this.$emit('toggleShowAverageResponseTime');
     }
   },
   watch: {
@@ -100,7 +114,8 @@ export default {
   data() {
     return {
       minResponseTime: 0,
-      maxResponseTime: 0
+      maxResponseTime: 0,
+      averageResponseTime: 0
     }
   }
 }
@@ -152,10 +167,6 @@ export default {
   margin-top: 5px;
 }
 
-.status-min-max-ms {
-  overflow-x: hidden;
-}
-
 .status.status-success::after {
   content: "✓";
 }

web/app/src/components/ServiceGroup.vue

@@ -14,7 +14,12 @@
     </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"
+            :maximumNumberOfResults="20"
+            @showTooltip="showTooltip"
+            @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
+        />
       </slot>
     </div>
   </div>
@@ -31,9 +36,10 @@ export default {
   },
   props: {
     name: String,
-    services: Array
+    services: Array,
+    showAverageResponseTime: Boolean
   },
-  emits: ['showTooltip'],
+  emits: ['showTooltip', 'toggleShowAverageResponseTime'],
   methods: {
     healthCheck() {
       if (this.services) {
@@ -56,10 +62,13 @@ export default {
     },
     toggleGroup() {
       this.collapsed = !this.collapsed;
-      sessionStorage.setItem(`service-group:${this.name}:collapsed`, this.collapsed);
+      sessionStorage.setItem(`gatus:service-group:${this.name}:collapsed`, this.collapsed);
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
+    },
+    toggleShowAverageResponseTime() {
+      this.$emit('toggleShowAverageResponseTime');
     }
   },
   watch: {
@@ -73,7 +82,7 @@ export default {
   data() {
     return {
       healthy: true,
-      collapsed: sessionStorage.getItem(`service-group:${this.name}:collapsed`) === "true"
+      collapsed: sessionStorage.getItem(`gatus:service-group:${this.name}:collapsed`) === "true"
     }
   }
 }

web/app/src/components/Services.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="results">
     <slot v-for="serviceGroup in serviceGroups" :key="serviceGroup">
-      <ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip"/>
+      <ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip" @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime" />
     </slot>
   </div>
 </template>
@@ -17,9 +17,10 @@ export default {
   },
   props: {
     showStatusOnHover: Boolean,
-    serviceStatuses: Object
+    serviceStatuses: Object,
+    showAverageResponseTime: Boolean
   },
-  emits: ['showTooltip'],
+  emits: ['showTooltip', 'toggleShowAverageResponseTime'],
   methods: {
     process() {
       let outputByGroup = {};
@@ -45,6 +46,9 @@ export default {
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
+    },
+    toggleShowAverageResponseTime() {
+      this.$emit('toggleShowAverageResponseTime');
     }
   },
   watch: {

web/app/src/components/Settings.vue

@@ -5,12 +5,12 @@
         ↻
       </div>
       <select class="text-center text-gray-500 text-sm" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
-        <option value="10">10s</option>
-        <option value="30" selected>30s</option>
-        <option value="60">1m</option>
-        <option value="120">2m</option>
-        <option value="300">5m</option>
-        <option value="600">10m</option>
+        <option value="10" :selected="refreshInterval === 10">10s</option>
+        <option value="30" :selected="refreshInterval === 30">30s</option>
+        <option value="60" :selected="refreshInterval === 60">1m</option>
+        <option value="120" :selected="refreshInterval === 120">2m</option>
+        <option value="300" :selected="refreshInterval === 300">5m</option>
+        <option value="600" :selected="refreshInterval === 600">10m</option>
       </select>
     </div>
   </div>
@@ -23,6 +23,7 @@ export default {
   props: {},
   methods: {
     setRefreshInterval(seconds) {
+      sessionStorage.setItem('gatus:refresh-interval', seconds);
       let that = this;
       this.refreshIntervalHandler = setInterval(function () {
         that.refreshData();
@@ -38,6 +39,9 @@ export default {
     }
   },
   created() {
+    if (this.refreshInterval !== 10 && this.refreshInterval !== 30 && this.refreshInterval !== 60 && this.refreshInterval !== 120 && this.refreshInterval !== 300 && this.refreshInterval !== 600) {
+      this.refreshInterval = 60;
+    }
     this.setRefreshInterval(this.refreshInterval);
   },
   unmounted() {
@@ -45,14 +49,11 @@ export default {
   },
   data() {
     return {
-      refreshInterval: 30,
+      refreshInterval: sessionStorage.getItem('gatus:refresh-interval') < 10 ? 60 : parseInt(sessionStorage.getItem('gatus:refresh-interval')),
       refreshIntervalHandler: 0,
     }
   },
 }
-
-// props.refreshInterval = 30
-//$("#refresh-rate").val(30);
 </script>
 
 

web/app/src/views/Details.vue

@@ -6,7 +6,12 @@
     <slot v-if="serviceStatus">
       <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
       <hr class="mb-4" />
-      <Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
+      <Service
+          :data="serviceStatus"
+          :maximumNumberOfResults="20"
+          @showTooltip="showTooltip"
+          @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
+      />
       <Pagination @page="changePage"/>
     </slot>
     <div v-if="uptime" class="mt-12">
@@ -139,13 +144,16 @@ export default {
       let minutes = Math.ceil((new Date(start) - new Date(end))/1000/60);
       return minutes + (minutes === 1 ? ' minute' : ' minutes');
     },
-    showTooltip(result, event) {
-      this.$emit('showTooltip', result, event);
-    },
     changePage(page) {
       this.currentPage = page;
       this.fetchData();
     },
+    showTooltip(result, event) {
+      this.$emit('showTooltip', result, event);
+    },
+    toggleShowAverageResponseTime() {
+      this.showAverageResponseTime = !this.showAverageResponseTime;
+    },
   },
   data() {
     return {
@@ -155,6 +163,7 @@ export default {
       // Since this page isn't at the root, we need to modify the server URL a bit
       serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
       currentPage: 1,
+      showAverageResponseTime: false,
     }
   },
   created() {

web/app/src/views/Home.vue

@@ -1,5 +1,10 @@
 <template>
-  <Services :serviceStatuses="serviceStatuses" :showStatusOnHover="true" @showTooltip="showTooltip"/>
+  <Services
+      :serviceStatuses="serviceStatuses"
+      :showStatusOnHover="true"
+      @showTooltip="showTooltip"
+      @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
+  />
   <Pagination @page="changePage"/>
   <Settings @refreshData="fetchData"/>
 </template>
@@ -17,7 +22,7 @@ export default {
     Services,
     Settings,
   },
-  emits: ['showTooltip'],
+  emits: ['showTooltip', 'toggleShowAverageResponseTime'],
   methods: {
     fetchData() {
       //console.log("[Home][fetchData] Fetching data");
@@ -29,18 +34,22 @@ export default {
             }
           });
     },
-    showTooltip(result, event) {
-      this.$emit('showTooltip', result, event);
-    },
     changePage(page) {
       this.currentPage = page;
       this.fetchData();
     },
+    showTooltip(result, event) {
+      this.$emit('showTooltip', result, event);
+    },
+    toggleShowAverageResponseTime() {
+      this.showAverageResponseTime = !this.showAverageResponseTime;
+    },
   },
   data() {
     return {
       serviceStatuses: {},
-      currentPage: 1
+      currentPage: 1,
+      showAverageResponseTime: true
     }
   },
   created() {