Add auto refresh

This commit is contained in:
Oliver Traber 2022-01-15 14:42:37 +01:00
parent 0c45e69dc6
commit 594b20ba19
Signed by: Bluemedia
GPG key ID: C7BA47275B086E2C
2 changed files with 98 additions and 5 deletions

View file

@ -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;

View file

@ -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>