Add ArgoCD widget + documentation

src/utils/proxy/handlers/credentialed.js

@@ -36,6 +36,7 @@ export default async function credentialedProxyHandler(req, res, map) {
         headers["X-gotify-Key"] = `${widget.key}`;
       } else if (
         [
+          "argocd",
           "authentik",
           "cloudflared",
           "ghostfolio",

src/widgets/argocd/component.jsx

@@ -0,0 +1,44 @@
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { widget } = service;
+
+  const { data: appsData, error: appsError } = useWidgetAPI(widget, "applications");
+
+  const appCounts = ["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"].map(
+    (status) => {
+      if (status === "apps") {
+        return { status, count: appsData?.items?.length };
+      }
+      const apiStatus = status.charAt(0).toUpperCase() + status.slice(1);
+      const count = appsData?.items?.filter(
+        (item) => item.status?.sync?.status === apiStatus || item.status?.health?.status === apiStatus,
+      ).length;
+      return { status, count };
+    },
+  );
+
+  if (appsError) {
+    return <Container service={service} error={appsError} />;
+  }
+
+  if (!appsData) {
+    return (
+      <Container service={service}>
+        {appCounts.map((a) => (
+          <Block label={`argocd.${a.status}`} key={a.status} />
+        ))}
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      {appCounts.map((a) => (
+        <Block label={`argocd.${a.status}`} key={a.status} value={a.count} />
+      ))}
+    </Container>
+  );
+}

src/widgets/argocd/widget.js

@@ -0,0 +1,14 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    applications: {
+      endpoint: "applications",
+    },
+  },
+};
+
+export default widget;

src/widgets/components.js

@@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
 
 const components = {
   adguard: dynamic(() => import("./adguard/component")),
+  argocd: dynamic(() => import("./argocd/component")),
   atsumeru: dynamic(() => import("./atsumeru/component")),
   audiobookshelf: dynamic(() => import("./audiobookshelf/component")),
   authentik: dynamic(() => import("./authentik/component")),

src/widgets/widgets.js

@@ -1,4 +1,5 @@
 import adguard from "./adguard/widget";
+import argocd from "./argocd/widget";
 import atsumeru from "./atsumeru/widget";
 import audiobookshelf from "./audiobookshelf/widget";
 import authentik from "./authentik/widget";
@@ -130,6 +131,7 @@ import zabbix from "./zabbix/widget";
 
 const widgets = {
   adguard,
+  argocd,
   atsumeru,
   audiobookshelf,
   authentik,