phares3757/gatus
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
TwinProduction
2021-03-25 21:01:03 -04:00
parent 2b9d986932
commit 12c352254f
10 changed files with 4151 additions and 2943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/app/src/components/Service.vue
View File

@ -8,8 +8,13 @@
<span v-if="data.results && data.results.length" class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
</div>
<div class='w-1/4 text-right'>
<span class='font-light status-min-max-ms' v-if="data.results && data.results.length">
{{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
<span class='font-light overflow-x-hidden cursor-pointer select-none' v-if="data.results && data.results.length" @click="toggleShowAverageResponseTime" :title="showAverageResponseTime ? 'Average response time' : 'Minimum and maximum response time'">
<slot v-if="showAverageResponseTime">
~{{ averageResponseTime }}ms
</slot>
<slot v-else>
{{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
</slot>
</span>
</div>
</div>
@ -56,15 +61,18 @@ export default {
props: {
maximumNumberOfResults: Number,
data: Object,
showAverageResponseTime: Boolean
},
emits: ['showTooltip'],
emits: ['showTooltip', 'toggleShowAverageResponseTime'],
mixins: [helper],
methods: {
updateMinAndMaxResponseTimes() {
let minResponseTime = null;
let maxResponseTime = null;
let totalResponseTime = 0;
for (let i in this.data.results) {
const responseTime = parseInt((this.data.results[i].duration/1000000).toFixed(0));
totalResponseTime += responseTime;
if (minResponseTime == null || minResponseTime > responseTime) {
minResponseTime = responseTime;
}
@ -78,6 +86,9 @@ export default {
if (this.maxResponseTime !== maxResponseTime) {
this.maxResponseTime = maxResponseTime;
}
if (this.data.results && this.data.results.length) {
this.averageResponseTime = (totalResponseTime/this.data.results.length).toFixed(0);
}
},
generatePath() {
if (!this.data) {
@ -87,6 +98,9 @@ export default {
},
showTooltip(result, event) {
this.$emit('showTooltip', result, event);
},
toggleShowAverageResponseTime() {
this.$emit('toggleShowAverageResponseTime');
}
},
watch: {
@ -100,7 +114,8 @@ export default {
data() {
return {
minResponseTime: 0,
maxResponseTime: 0
maxResponseTime: 0,
averageResponseTime: 0
}
}
}
@ -152,10 +167,6 @@ export default {
margin-top: 5px;
}
.status-min-max-ms {
overflow-x: hidden;
}
.status.status-success::after {
content: "✓";
}

19
web/app/src/components/ServiceGroup.vue
View File

@ -14,7 +14,12 @@
</slot>
<div v-if="!collapsed" :class="name === 'undefined' ? '' : 'service-group-content'">
<slot v-for="service in services" :key="service">
<Service :data="service" @showTooltip="showTooltip" :maximumNumberOfResults="20"/>
<Service
:data="service"
:maximumNumberOfResults="20"
@showTooltip="showTooltip"
@toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
/>
</slot>
</div>
</div>
@ -31,9 +36,10 @@ export default {
},
props: {
name: String,
services: Array
services: Array,
showAverageResponseTime: Boolean
},
emits: ['showTooltip'],
emits: ['showTooltip', 'toggleShowAverageResponseTime'],
methods: {
healthCheck() {
if (this.services) {
@ -56,10 +62,13 @@ export default {
},
toggleGroup() {
this.collapsed = !this.collapsed;
sessionStorage.setItem(`service-group:${this.name}:collapsed`, this.collapsed);
sessionStorage.setItem(`gatus:service-group:${this.name}:collapsed`, this.collapsed);
},
showTooltip(result, event) {
this.$emit('showTooltip', result, event);
},
toggleShowAverageResponseTime() {
this.$emit('toggleShowAverageResponseTime');
}
},
watch: {
@ -73,7 +82,7 @@ export default {
data() {
return {
healthy: true,
collapsed: sessionStorage.getItem(`service-group:${this.name}:collapsed`) === "true"
collapsed: sessionStorage.getItem(`gatus:service-group:${this.name}:collapsed`) === "true"
}
}
}

10
web/app/src/components/Services.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="results">
<slot v-for="serviceGroup in serviceGroups" :key="serviceGroup">
<ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip"/>
<ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip" @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime" />
</slot>
</div>
</template>
@ -17,9 +17,10 @@ export default {
},
props: {
showStatusOnHover: Boolean,
serviceStatuses: Object
serviceStatuses: Object,
showAverageResponseTime: Boolean
},
emits: ['showTooltip'],
emits: ['showTooltip', 'toggleShowAverageResponseTime'],
methods: {
process() {
let outputByGroup = {};
@ -45,6 +46,9 @@ export default {
},
showTooltip(result, event) {
this.$emit('showTooltip', result, event);
},
toggleShowAverageResponseTime() {
this.$emit('toggleShowAverageResponseTime');
}
},
watch: {

21
web/app/src/components/Settings.vue
View File

@ -5,12 +5,12 @@
&#x21bb;
</div>
<select class="text-center text-gray-500 text-sm" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
<option value="10">10s</option>
<option value="30" selected>30s</option>
<option value="60">1m</option>
<option value="120">2m</option>
<option value="300">5m</option>
<option value="600">10m</option>
<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>
</div>
@ -23,6 +23,7 @@ export default {
props: {},
methods: {
setRefreshInterval(seconds) {
sessionStorage.setItem('gatus:refresh-interval', seconds);
let that = this;
this.refreshIntervalHandler = setInterval(function () {
that.refreshData();
@ -38,6 +39,9 @@ export default {
}
},
created() {
if (this.refreshInterval !== 10 && this.refreshInterval !== 30 && this.refreshInterval !== 60 && this.refreshInterval !== 120 && this.refreshInterval !== 300 && this.refreshInterval !== 600) {
this.refreshInterval = 60;
}
this.setRefreshInterval(this.refreshInterval);
},
unmounted() {
@ -45,14 +49,11 @@ export default {
},
data() {
return {
refreshInterval: 30,
refreshInterval: sessionStorage.getItem('gatus:refresh-interval') < 10 ? 60 : parseInt(sessionStorage.getItem('gatus:refresh-interval')),
refreshIntervalHandler: 0,
}
},
}
// props.refreshInterval = 30
//$("#refresh-rate").val(30);
</script>

17
web/app/src/views/Details.vue
View File

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

21
web/app/src/views/Home.vue
View File

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