mirror of
https://github.com/BluemediaGER/fancy-gatus.git
synced 2024-11-22 22:55: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" />
|
<OverallStatus class="overall-status" :failedEndpoints="failedEndpoints" />
|
||||||
<EndpointGroup class="endpoint-group" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
|
<EndpointGroup class="endpoint-group" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
|
||||||
</div>
|
</div>
|
||||||
<Footer v-if="!$data.loading" />
|
<div v-if="!$data.loading">
|
||||||
|
<RefreshSettings :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -17,6 +20,7 @@ import Loader from '@/components/Loader.vue';
|
||||||
import Header from '@/components/Header.vue';
|
import Header from '@/components/Header.vue';
|
||||||
import OverallStatus from '@/components/OverallStatus.vue';
|
import OverallStatus from '@/components/OverallStatus.vue';
|
||||||
import EndpointGroup from '@/components/EndpointGroup.vue';
|
import EndpointGroup from '@/components/EndpointGroup.vue';
|
||||||
|
import RefreshSettings from '@/components/RefreshSettings.vue';
|
||||||
import Footer from '@/components/Footer.vue';
|
import Footer from '@/components/Footer.vue';
|
||||||
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
@ -28,6 +32,7 @@ export default {
|
||||||
Header,
|
Header,
|
||||||
OverallStatus,
|
OverallStatus,
|
||||||
EndpointGroup,
|
EndpointGroup,
|
||||||
|
RefreshSettings,
|
||||||
Footer
|
Footer
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -65,7 +70,13 @@ export default {
|
||||||
this.getApiData();
|
this.getApiData();
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.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() {
|
getApiData() {
|
||||||
|
@ -75,19 +86,20 @@ export default {
|
||||||
}
|
}
|
||||||
axios.get('/api/v1/endpoints/statuses')
|
axios.get('/api/v1/endpoints/statuses')
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.apiData = response.data;
|
let data = response.data;
|
||||||
// Remove hidden groups if defined in config
|
// Remove hidden groups if defined in config
|
||||||
if (this.config.hiddenGroups) {
|
if (this.config.hiddenGroups) {
|
||||||
this.apiData = this.apiData.filter(endpoint => {
|
data = data.filter(endpoint => {
|
||||||
return !this.config.hiddenGroups.includes(endpoint.group);
|
return !this.config.hiddenGroups.includes(endpoint.group);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// Remove hidden endpoints if defined in config
|
// Remove hidden endpoints if defined in config
|
||||||
if (this.config.hiddenEndpoints) {
|
if (this.config.hiddenEndpoints) {
|
||||||
this.apiData = this.apiData.filter(endpoint => {
|
data = data.filter(endpoint => {
|
||||||
return !this.config.hiddenEndpoints.includes(endpoint.name);
|
return !this.config.hiddenEndpoints.includes(endpoint.name);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
this.apiData = data;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
@ -140,6 +152,7 @@ html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
--green: #00d560;
|
--green: #00d560;
|
||||||
--orange: #ff9100;
|
--orange: #ff9100;
|
||||||
|
--grey: #7d8187;
|
||||||
}
|
}
|
||||||
#app {
|
#app {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
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