mirrors/twin-gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-12-14 11:58:04 +00:00
Code Activity

feat(ui): Show number of failing checks per group (#493)

Browse source 
* feat: added number of failing checks

* updated design

---------

Co-authored-by: TwiN <twin@linux.com>
This commit is contained in:
Karol Danko 2023-07-03 05:35:05 +02:00 committed by GitHub
parent 5eebe6d9cc
commit 36207490b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/app/src/components/EndpointGroup.vue
View file

@ -7,12 +7,10 @@
{{ collapsed ? '&#9660;' : '&#9650;' }}
</span>
{{ name }}
<span v-if="healthy" class="float-right text-green-600 w-7 hover:scale-110" title="Operational">
<span v-if="unhealthyCount" class="rounded-xl bg-red-600 text-white px-2 font-bold leading-6 float-right h-6 text-center hover:scale-110 text-sm" title="Partial Outage">{{unhealthyCount}}</span>
<span v-if="unhealthyCount === 0" class="float-right text-green-600 w-7 hover:scale-110" title="Operational">
<CheckCircleIcon />
</span>
<span v-else class="float-right text-yellow-500 text-sm w-7 hover:scale-110" title="Partial Outage">
<ExclamationCircleIcon />
</span>
</h5>
</div>
</slot>
@ -32,14 +30,13 @@
<script>
import Endpoint from './Endpoint.vue';
import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/vue/20/solid'
import { CheckCircleIcon } from '@heroicons/vue/20/solid'
export default {
name: 'EndpointGroup',
components: {
Endpoint,
CheckCircleIcon,
ExclamationCircleIcon
CheckCircleIcon
},
props: {
name: String,
@ -49,22 +46,17 @@ export default {
emits: ['showTooltip', 'toggleShowAverageResponseTime'],
methods: {
healthCheck() {
let unhealthyCount = 0
if (this.endpoints) {
for (let i in this.endpoints) {
if (this.endpoints[i].results && this.endpoints[i].results.length > 0) {
if (!this.endpoints[i].results[this.endpoints[i].results.length-1].success) {
if (this.healthy) {
this.healthy = false;
}
return;
unhealthyCount++
}
}
}
}
// Set the endpoint group to healthy (only if it's currently unhealthy)
if (!this.healthy) {
this.healthy = true;
}
this.unhealthyCount = unhealthyCount;
},
toggleGroup() {
this.collapsed = !this.collapsed;
@ -87,7 +79,7 @@ export default {
},
data() {
return {
healthy: true,
unhealthyCount: 0,
collapsed: sessionStorage.getItem(`gatus:endpoint-group:${this.name}:collapsed`) === "true"
}
}