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

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() {