Add group statistics to healthcheck widget

docs/widgets/services/healthchecks.md

@@ -3,18 +3,16 @@ title: Health checks
 description: Health checks Widget Configuration
 ---
 
-To use the Health Checks widget, you first need to generate an API key. To do this, follow these steps:
+To use the Health Checks widget, you first need to generate an API key.
 
-1. Go to Settings in your check dashboard.
+1. In your project, go to project Settings on the navigation bar.
 2. Click on API key (read-only) and then click _Create_.
 3. Copy the API key that is generated for you.
 
-Allowed fields: `["status", "last_ping"]`.
-
 ```yaml
 widget:
   type: healthchecks
   url: http://healthchecks.host.or.ip:port
   key: <YOUR_API_KEY>
-  uuid: <YOUR_CHECK_UUID>
+  uuid: <YOUR_CHECK_UUID> # optional, if not present group statistics is shown
 ```

src/utils/config/service-helpers.js

@@ -433,6 +433,9 @@ export function cleanServiceGroups(groups) {
 
           // unifi
           site,
+
+          // healthchecks
+          uuid,
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -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}`)} />
+      {hasUuid ? (
-      <Block
+        <>
-        label="healthchecks.last_ping"
+          <Block label="healthchecks.status" value={t(`healthchecks.${data.status}`)} />
-        value={data.last_ping ? formatDate(data.last_ping) : t("healthchecks.never")}
+          <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"],
     },
   },
 };