Feature: Added gatus uptime widget (#2729)

src/widgets/components.js

@@ -29,6 +29,7 @@ const components = {
   freshrss: dynamic(() => import("./freshrss/component")),
   fritzbox: dynamic(() => import("./fritzbox/component")),
   gamedig: dynamic(() => import("./gamedig/component")),
+  gatus: dynamic(() => import("./gatus/component")),
   ghostfolio: dynamic(() => import("./ghostfolio/component")),
   glances: dynamic(() => import("./glances/component")),
   gluetun: dynamic(() => import("./gluetun/component")),

src/widgets/gatus/component.jsx

@@ -0,0 +1,51 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+import Block from "components/services/widget/block";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data: statusData, error: statusError } = useWidgetAPI(widget, "status");
+
+  if (statusError) {
+    return <Container service={service} error={statusError} />;
+  }
+
+  if (!statusData) {
+    return (
+      <Container service={service}>
+        <Block label="gatus.up" />
+        <Block label="gatus.down" />
+        <Block label="gatus.uptime" />
+      </Container>
+    );
+  }
+
+  let sitesUp = 0;
+  let sitesDown = 0;
+  Object.values(statusData).forEach((site) => {
+    const lastResult = site.results[site.results.length - 1];
+    if (lastResult?.success === true) {
+      sitesUp += 1;
+    } else {
+      sitesDown += 1;
+    }
+  });
+
+  // Adapted from https://github.com/bastienwirtz/homer/blob/b7cd8f9482e6836a96b354b11595b03b9c3d67cd/src/components/services/UptimeKuma.vue#L105
+  const resultsList = Object.values(statusData).reduce((a, b) => a.concat(b.results), []);
+  const percent = resultsList.reduce((a, b) => a + (b?.success === true ? 1 : 0), 0) / resultsList.length;
+  const uptime = (percent * 100).toFixed(1);
+
+  return (
+    <Container service={service}>
+      <Block label="gatus.up" value={t("common.number", { value: sitesUp })} />
+      <Block label="gatus.down" value={t("common.number", { value: sitesDown })} />
+      <Block label="gatus.uptime" value={t("common.percent", { value: uptime })} />
+    </Container>
+  );
+}

src/widgets/gatus/widget.js

@@ -0,0 +1,15 @@
+// import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/{endpoint}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    status: {
+      endpoint: "api/v1/endpoints/statuses",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -23,6 +23,7 @@ import flood from "./flood/widget";
 import freshrss from "./freshrss/widget";
 import fritzbox from "./fritzbox/widget";
 import gamedig from "./gamedig/widget";
+import gatus from "./gatus/widget";
 import ghostfolio from "./ghostfolio/widget";
 import glances from "./glances/widget";
 import gluetun from "./gluetun/widget";
@@ -128,6 +129,7 @@ const widgets = {
   freshrss,
   fritzbox,
   gamedig,
+  gatus,
   ghostfolio,
   glances,
   gluetun,