From 36207490b21ad33db578a3571390d2135c89ce31 Mon Sep 17 00:00:00 2001
From: Karol Danko <quibusus@gmail.com>
Date: Mon, 3 Jul 2023 05:35:05 +0200
Subject: [PATCH] feat(ui): Show number of failing checks per group (#493)

* feat: added number of failing checks

* updated design

---------

Co-authored-by: TwiN <twin@linux.com>
---
 web/app/src/components/EndpointGroup.vue | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/web/app/src/components/EndpointGroup.vue b/web/app/src/components/EndpointGroup.vue
index e7d4017c..f99c99bf 100644
--- a/web/app/src/components/EndpointGroup.vue
+++ b/web/app/src/components/EndpointGroup.vue
@@ -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"
     }
   }