Add Whats Up Docker widget (#1150)

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

public/locales/en/common.json

@@ -587,5 +587,9 @@
         "people_home": "People Home",
         "lights_on": "Lights On",
         "switches_on": "Switches On"
+    },
+    "whatsupdocker": {
+        "monitoring": "Monitoring",
+        "updates": "Updates"
     }
 }

src/widgets/components.js

@@ -81,6 +81,7 @@ const components = {
   unmanic: dynamic(() => import("./unmanic/component")),
   uptimekuma: dynamic(() => import("./uptimekuma/component")),
   watchtower: dynamic(() => import("./watchtower/component")),
+  whatsupdocker: dynamic(() => import("./whatsupdocker/component")),
   xteve: dynamic(() => import("./xteve/component")),
 };
 

src/widgets/whatsupdocker/component.jsx

@@ -0,0 +1,32 @@
+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: containersData, error: containersError } = useWidgetAPI(widget, "containers");
+  
+  if (containersError) {
+    return <Container error={containersError} />;
+  }
+
+  if (!containersData) {
+    return (
+      <Container service={service}>
+        <Block label="whatsupdocker.monitoring" />
+        <Block label="whatsupdocker.updates" />
+      </Container>
+    );
+  }
+
+  const totalCount = containersData.length;
+  const updatesAvailable = containersData.filter(container => container.updateAvailable).length;
+
+  return (
+    <Container service={service}>
+      <Block label="whatsupdocker.monitoring" value={totalCount} />
+      <Block label="whatsupdocker.updates" value={updatesAvailable} />
+    </Container>
+  );
+}

src/widgets/whatsupdocker/widget.js

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

src/widgets/widgets.js

@@ -75,6 +75,7 @@ import unifi from "./unifi/widget";
 import unmanic from "./unmanic/widget";
 import uptimekuma from "./uptimekuma/widget";
 import watchtower from "./watchtower/widget";
+import whatsupdocker from "./whatsupdocker/widget";
 import xteve from "./xteve/widget";
 
 const widgets = {
@@ -157,6 +158,7 @@ const widgets = {
   unmanic,
   uptimekuma,
   watchtower,
+  whatsupdocker,
   xteve,
 };