Feature: arcane service widget (#6274)

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

docs/widgets/services/arcane.md

@@ -0,0 +1,18 @@
+---
+title: Arcane
+description: Arcane Widget Configuration
+---
+
+Learn more about [Arcane](https://github.com/getarcaneapp/arcane).
+
+**Allowed fields** (max 4): `running`, `stopped`, `total`, `images`, `images_used`, `images_unused`, `image_updates`.
+**Default fields**: `running`, `stopped`, `total`, `image_updates`.
+
+```yaml
+widget:
+  type: arcane
+  url: http://localhost:3552
+  env: 0 # required, 0 is Arcane default local environment
+  key: your-api-key
+  fields: ["running", "stopped", "total", "image_updates"] # optional
+```

docs/widgets/services/index.md

@@ -9,6 +9,7 @@ You can also find a list of all available service widgets in the sidebar navigat
 
 - [Adguard Home](adguard-home.md)
 - [APC UPS](apcups.md)
+- [Arcane](arcane.md)
 - [ArgoCD](argocd.md)
 - [Atsumeru](atsumeru.md)
 - [Audiobookshelf](audiobookshelf.md)

mkdocs.yml

@@ -33,6 +33,7 @@ nav:
           - widgets/services/index.md
           - widgets/services/adguard-home.md
           - widgets/services/apcups.md
+          - widgets/services/arcane.md
           - widgets/services/argocd.md
           - widgets/services/atsumeru.md
           - widgets/services/audiobookshelf.md

public/locales/en/common.json

@@ -1151,6 +1151,13 @@
       "time":  "Time",
       "artists": "Artists"
     },
+    "arcane": {
+        "containers": "Containers",
+        "images": "Images",
+        "image_updates": "Image Updates",
+        "images_unused": "Unused",
+        "environment_required": "Environment ID Required"
+    },
     "dockhand": {
         "running": "Running",
         "stopped": "Stopped",

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,