extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-21 15:33:17 +01:00
Code Issues Packages Projects Releases Wiki 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;' }} {{ collapsed ? '&#9660;' : '&#9650;' }}
</span> </span>
{{ name }} {{ 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 /> <CheckCircleIcon />
</span> </span>
<span v-else class="float-right text-yellow-500 text-sm w-7 hover:scale-110" title="Partial Outage">
<ExclamationCircleIcon />
</span>
</h5> </h5>
</div> </div>
</slot> </slot>
@ -32,14 +30,13 @@
<script> <script>
import Endpoint from './Endpoint.vue'; import Endpoint from './Endpoint.vue';
import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/vue/20/solid' import { CheckCircleIcon } from '@heroicons/vue/20/solid'
export default { export default {
name: 'EndpointGroup', name: 'EndpointGroup',
components: { components: {
Endpoint, Endpoint,
CheckCircleIcon, CheckCircleIcon
ExclamationCircleIcon
}, },
props: { props: {
name: String, name: String,
@ -49,22 +46,17 @@ export default {
emits: ['showTooltip', 'toggleShowAverageResponseTime'], emits: ['showTooltip', 'toggleShowAverageResponseTime'],
methods: { methods: {
healthCheck() { healthCheck() {
let unhealthyCount = 0
if (this.endpoints) { if (this.endpoints) {
for (let i in 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 > 0) {
if (!this.endpoints[i].results[this.endpoints[i].results.length-1].success) { if (!this.endpoints[i].results[this.endpoints[i].results.length-1].success) {
if (this.healthy) { unhealthyCount++
this.healthy = false;
}
return;
} }
} }
} }
} }
// Set the endpoint group to healthy (only if it's currently unhealthy) this.unhealthyCount = unhealthyCount;
if (!this.healthy) {
this.healthy = true;
}
}, },
toggleGroup() { toggleGroup() {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed;
@ -87,7 +79,7 @@ export default {
}, },
data() { data() {
return { return {
healthy: true, unhealthyCount: 0,
collapsed: sessionStorage.getItem(`gatus:endpoint-group:${this.name}:collapsed`) === "true" collapsed: sessionStorage.getItem(`gatus:endpoint-group:${this.name}:collapsed`) === "true"
} }
} }