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>

docs/widgets/services/healthchecks.md

@@ -3,18 +3,21 @@ 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:
+Specify a single check by including the `uuid` field or show the total 'up' and 'down' for all
+checks by leaving off the `uuid` field.
 
-1. Go to Settings in your check dashboard.
+To use the Health Checks widget, you first need to generate an API key.
+
+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"]`.
+Allowed fields: `["status", "last_ping"]` for single checks, `["up", "down"]` for total stats.
 
 ```yaml
 widget:
   type: healthchecks
   url: http://healthchecks.host.or.ip:port
   key: <YOUR_API_KEY>
-  uuid: <YOUR_CHECK_UUID>
+  uuid: <CHECK_UUID> # optional, if not included total statistics for all checks is shown
 ```

public/locales/en/common.json

@@ -491,9 +491,9 @@
     },
     "healthchecks": {
         "new": "New",
-        "up": "Online",
+        "up": "Up",
         "grace": "In Grace Period",
-        "down": "Offline",
+        "down": "Down",
         "paused": "Paused",
         "status": "Status",
         "last_ping": "Last Ping",

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}>
+      {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"],
     },
   },
 };