mirror of
https://github.com/BluemediaGER/fancy-gatus.git
synced 2024-11-08 17:35:29 +01:00
Add auto refresh
This commit is contained in:
parent
0c45e69dc6
commit
594b20ba19
23
src/App.vue
23
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;
|
||||
|
|
80
src/components/RefreshSettings.vue
Normal file
80
src/components/RefreshSettings.vue
Normal file
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div id="settings">
|
||||
<div class="reload-icon">
|
||||
↻
|
||||
</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>
|
Loading…
Reference in a new issue