Add auto refresh

src/App.vue

@@ -8,7 +8,10 @@
       <OverallStatus class="overall-status" :failedEndpoints="failedEndpoints" />
       <EndpointGroup class="endpoint-group" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
     </div>
-    <Footer v-if="!$data.loading" />
+    <div v-if="!$data.loading">
+      <RefreshSettings :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
+      <Footer />
+    </div>
   </div>
 </template>
 
@@ -17,6 +20,7 @@ import Loader from '@/components/Loader.vue';
 import Header from '@/components/Header.vue';
 import OverallStatus from '@/components/OverallStatus.vue';
 import EndpointGroup from '@/components/EndpointGroup.vue';
+import RefreshSettings from '@/components/RefreshSettings.vue';
 import Footer from '@/components/Footer.vue';
 
 import axios from 'axios';
@@ -28,6 +32,7 @@ export default {
     Header,
     OverallStatus,
     EndpointGroup,
+    RefreshSettings,
     Footer
   },
   data() {
@@ -65,7 +70,13 @@ export default {
           this.getApiData();
         })
         .catch(error => {
-          console.log(error);
+          if (error.response.status === 404) {
+            console.warn('Could not find config.json. Using default values.');
+            this.config = {}
+            this.getApiData();
+          } else {
+            console.log("Error getting config: " + error);
+          }
         });
     },
     getApiData() {
@@ -75,19 +86,20 @@ export default {
       }
       axios.get('/api/v1/endpoints/statuses')
         .then(response => {
-          this.apiData = response.data;
+          let data = response.data;
           // Remove hidden groups if defined in config
           if (this.config.hiddenGroups) {
-            this.apiData = this.apiData.filter(endpoint => {
+            data = data.filter(endpoint => {
               return !this.config.hiddenGroups.includes(endpoint.group);
             });
           }
           // Remove hidden endpoints if defined in config
           if (this.config.hiddenEndpoints) {
-            this.apiData = this.apiData.filter(endpoint => {
+            data = data.filter(endpoint => {
               return !this.config.hiddenEndpoints.includes(endpoint.name);
             });
           }
+          this.apiData = data;
           this.loading = false;
         })
         .catch(error => {
@@ -140,6 +152,7 @@ html {
   margin: 0;
   --green: #00d560;
   --orange: #ff9100;
+  --grey: #7d8187;
 }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/components/RefreshSettings.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="settings">
+    <div class="reload-icon">
+      &#x21bb;
+    </div>
+    <select id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
+      <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>
+</template>
+
+<script>
+export default {
+  name: 'RefreshSettings',
+  props: {
+    defaultRefreshInterval: {
+      type: Number,
+      default: 60
+    }
+  },
+  methods: {
+    setRefreshInterval(seconds) {
+      if (this.refreshHandler)
+        clearInterval(this.refreshHandler);
+      
+      this.refreshInterval = seconds;
+      let reference = this;
+      this.refreshHandler = setInterval(function () {
+        reference.refreshData();
+      }, seconds * 1000);
+    },
+    refreshData() {
+      this.$emit('refresh');
+    },
+    handleChangeRefreshInterval() {
+      this.refreshData();
+      this.setRefreshInterval(this.$refs.refreshInterval.value);
+    }
+  },
+  created() {
+    this.setRefreshInterval(this.defaultRefreshInterval);
+  }
+}
+</script>
+
+<style scoped>
+#settings {
+  display: flex;
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  background-color: #b9b9b9;
+  border-radius: 0.2rem;
+  border: 1px solid #b9b9b9;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
+}
+.reload-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: 1.4rem;
+  height: 1.4rem;
+  text-align: center;
+}
+#settings > select {
+  font-size: 0.8rem;
+  color: #424242;
+  text-transform: none;
+  border: 0px;
+}
+#settings select:focus {
+  box-shadow: none;
+}
+</style>