Feature: support multiple checks for healthchecks widget (#2580)

* Change healthchecks online/offline with the original up/down

* Add group statistics to healthcheck widget

* Update healthchecks docs

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/utils/config/service-helpers.js

@@ -397,6 +397,9 @@ export function cleanServiceGroups(groups) {
           // glances, customapi, iframe
           refreshInterval,
 
+          // healthchecks
+          uuid,
+
           // iframe
           allowFullscreen,
           allowPolicy,
@@ -536,6 +539,9 @@ export function cleanServiceGroups(groups) {
           if (previousDays) cleanedService.widget.previousDays = previousDays;
           if (showTime) cleanedService.widget.showTime = showTime;
         }
+        if (type === "healthchecks") {
+          if (uuid !== undefined) cleanedService.widget.uuid = uuid;
+        }
       }
 
       return cleanedService;

src/widgets/healthchecks/component.jsx

@@ -27,6 +27,23 @@ function formatDate(dateString) {
   return new Intl.DateTimeFormat(i18n.language, dateOptions).format(date);
 }
 
+function countStatus(data) {
+  let upCount = 0;
+  let downCount = 0;
+
+  if (data.checks) {
+    data.checks.forEach((check) => {
+      if (check.status === "up") {
+        upCount += 1;
+      } else if (check.status === "down") {
+        downCount += 1;
+      }
+    });
+  }
+
+  return { upCount, downCount };
+}
+
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
@@ -46,13 +63,26 @@ export default function Component({ service }) {
     );
   }
 
+  const hasUuid = widget?.uuid;
+
+  const { upCount, downCount } = countStatus(data);
+
   return (
     <Container service={service}>
-      <Block label="healthchecks.status" value={t(`healthchecks.${data.status}`)} />
-      <Block
-        label="healthchecks.last_ping"
-        value={data.last_ping ? formatDate(data.last_ping) : t("healthchecks.never")}
-      />
+      {hasUuid ? (
+        <>
+          <Block label="healthchecks.status" value={t(`healthchecks.${data.status}`)} />
+          <Block
+            label="healthchecks.last_ping"
+            value={data.last_ping ? formatDate(data.last_ping) : t("healthchecks.never")}
+          />
+        </>
+      ) : (
+        <>
+          <Block label="healthchecks.up" value={upCount} />
+          <Block label="healthchecks.down" value={downCount} />
+        </>
+      )}
     </Container>
   );
 }

src/widgets/healthchecks/widget.js

@@ -1,13 +1,12 @@
 import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
-  api: "{url}/api/v2/{endpoint}/{uuid}",
+  api: "{url}/api/v3/{endpoint}/{uuid}",
   proxyHandler: credentialedProxyHandler,
 
   mappings: {
     checks: {
       endpoint: "checks",
-      validate: ["status", "last_ping"],
     },
   },
 };