Feature: arcane service widget (#6274)

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

src/utils/config/service-helpers.js

@@ -258,6 +258,9 @@ export function cleanServiceGroups(groups) {
           highlight,
           type,
 
+          // arcane
+          env,
+
           // azuredevops
           repositoryId,
           userEmail,
@@ -472,6 +475,10 @@ export function cleanServiceGroups(groups) {
           if (repositoryId) widget.repositoryId = repositoryId;
         }
 
+        if (type === "arcane") {
+          if (env !== undefined) widget.env = env;
+        }
+
         if (type === "beszel") {
           if (systemId) widget.systemId = systemId;
         }

src/widgets/arcane/component.jsx

@@ -0,0 +1,73 @@
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const MAX_FIELDS = 4;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+
+  if (!widget.fields) {
+    widget.fields = ["running", "stopped", "total", "image_updates"];
+  } else if (widget.fields.length > MAX_FIELDS) {
+    widget.fields = widget.fields.slice(0, MAX_FIELDS);
+  }
+
+  if (widget?.env == null || widget.env === "") {
+    return <Container service={service} error={t("arcane.environment_required")} />;
+  }
+
+  const { data: containers, error: containersError } = useWidgetAPI(widget, "containers");
+  const { data: images, error: imagesError } = useWidgetAPI(widget, "images");
+  const { data: updates, error: updatesError } = useWidgetAPI(widget, "updates");
+
+  const error = containersError ?? imagesError ?? updatesError;
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!containers || !images || !updates) {
+    return (
+      <Container service={service}>
+        <Block label="docker.running" field="arcane.running" />
+        <Block label="dockhand.stopped" field="arcane.stopped" />
+        <Block label="dockhand.total" field="arcane.total" />
+        <Block label="arcane.images" field="arcane.images" />
+        <Block label="resources.used" field="arcane.images_used" />
+        <Block label="arcane.images_unused" field="arcane.images_unused" />
+        <Block label="arcane.image_updates" field="arcane.image_updates" />
+      </Container>
+    );
+  }
+
+  const runningContainers = containers?.runningContainers ?? 0;
+  const totalContainers = containers?.totalContainers ?? 0;
+  const stoppedContainers = containers?.stoppedContainers ?? 0;
+  const totalImages = images?.totalImages ?? 0;
+  const imagesInuse = images?.imagesInuse ?? 0;
+  const imagesUnused = images?.imagesUnused ?? 0;
+  const imagesWithUpdates = updates?.imagesWithUpdates ?? 0;
+
+  return (
+    <Container service={service}>
+      <Block label="docker.running" field="arcane.running" value={t("common.number", { value: runningContainers })} />
+      <Block label="dockhand.stopped" field="arcane.stopped" value={t("common.number", { value: stoppedContainers })} />
+      <Block label="dockhand.total" field="arcane.total" value={t("common.number", { value: totalContainers })} />
+      <Block label="arcane.images" field="arcane.images" value={t("common.number", { value: totalImages })} />
+      <Block label="resources.used" field="arcane.images_used" value={t("common.number", { value: imagesInuse })} />
+      <Block
+        label="arcane.images_unused"
+        field="arcane.images_unused"
+        value={t("common.number", { value: imagesUnused })}
+      />
+      <Block
+        label="arcane.image_updates"
+        field="arcane.image_updates"
+        value={t("common.number", { value: imagesWithUpdates })}
+      />
+    </Container>
+  );
+}

src/widgets/arcane/widget.js

@@ -0,0 +1,24 @@
+import { asJson } from "utils/proxy/api-helpers";
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    containers: {
+      endpoint: "environments/{env}/containers/counts",
+      map: (data) => asJson(data).data,
+    },
+    images: {
+      endpoint: "environments/{env}/images/counts",
+      map: (data) => asJson(data).data,
+    },
+    updates: {
+      endpoint: "environments/{env}/image-updates/summary",
+      map: (data) => asJson(data).data,
+    },
+  },
+};
+
+export default widget;

src/widgets/components.js

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

src/widgets/widgets.js

@@ -1,5 +1,6 @@
 import adguard from "./adguard/widget";
 import apcups from "./apcups/widget";
+import arcane from "./arcane/widget";
 import argocd from "./argocd/widget";
 import atsumeru from "./atsumeru/widget";
 import audiobookshelf from "./audiobookshelf/widget";
@@ -152,6 +153,7 @@ import zabbix from "./zabbix/widget";
 const widgets = {
   adguard,
   apcups,
+  arcane,
   argocd,
   atsumeru,
   audiobookshelf,