Merge pull request #309 from JazzFisch/configurable-widget-fields

Allow widget field visibility to be configurable

src/components/services/widget/block.jsx

@@ -1,6 +1,9 @@
+import { useTranslation } from "next-i18next";
 import classNames from "classnames";
 
 export default function Block({ value, label }) {
+  const { t } = useTranslation();
+
   return (
     <div
       className={classNames(
@@ -9,7 +12,7 @@ export default function Block({ value, label }) {
       )}
     >
       <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
-      <div className="font-bold text-xs uppercase">{label}</div>
+      <div className="font-bold text-xs uppercase">{t(label)}</div>
     </div>
   );
 }

src/components/services/widget/container.jsx

@@ -1,4 +1,4 @@
-export default function Container({ error = false, children }) {
+export default function Container({ error = false, children, service }) {
   if (error) {
     return (
       <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
@@ -7,5 +7,12 @@ export default function Container({ error = false, children }) {
     );
   }
 
-  return <div className="relative flex flex-row w-full">{children}</div>;
+  let visibleChildren = children;
+  const fields = service?.widget?.fields;
+  const type = service?.widget?.type;
+  if (fields && type) {
+    visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child.props?.label));
+  }
+
+  return <div className="relative flex flex-row w-full">{visibleChildren}</div>;
 }

src/utils/config/service-helpers.js

@@ -113,6 +113,7 @@ export function cleanServiceGroups(groups) {
         // whitelisted set of keys to pass to the frontend
         const {
           type, // all widgets
+          fields,
           server, // docker widget
           container,
           currency, // coinmarketcap widget
@@ -121,6 +122,7 @@ export function cleanServiceGroups(groups) {
 
         cleanedService.widget = {
           type,
+          fields: fields || null,
           service_name: service.name,
           service_group: serviceGroup.name,
         };

src/widgets/adguard/component.jsx

@@ -17,11 +17,11 @@ export default function Component({ service }) {
 
   if (!adguardData) {
     return (
-      <Container>
-        <Block label={t("adguard.queries")} />
-        <Block label={t("adguard.blocked")} />
-        <Block label={t("adguard.filtered")} />
-        <Block label={t("adguard.latency")} />
+      <Container service={service}>
+        <Block label="adguard.queries" />
+        <Block label="adguard.blocked" />
+        <Block label="adguard.filtered" />
+        <Block label="adguard.latency" />
       </Container>
     );
   }
@@ -30,12 +30,12 @@ export default function Component({ service }) {
     adguardData.num_replaced_safebrowsing + adguardData.num_replaced_safesearch + adguardData.num_replaced_parental;
 
   return (
-    <Container>
-      <Block label={t("adguard.queries")} value={t("common.number", { value: adguardData.num_dns_queries })} />
-      <Block label={t("adguard.blocked")} value={t("common.number", { value: adguardData.num_blocked_filtering })} />
-      <Block label={t("adguard.filtered")} value={t("common.number", { value: filtered })} />
+    <Container service={service}>
+      <Block label="adguard.queries" value={t("common.number", { value: adguardData.num_dns_queries })} />
+      <Block label="adguard.blocked" value={t("common.number", { value: adguardData.num_blocked_filtering })} />
+      <Block label="adguard.filtered" value={t("common.number", { value: filtered })} />
       <Block
-        label={t("adguard.latency")}
+        label="adguard.latency"
         value={t("common.ms", { value: adguardData.avg_processing_time * 1000, style: "unit", unit: "millisecond" })}
       />
     </Container>

src/widgets/authentik/component.jsx

@@ -19,10 +19,10 @@ export default function Component({ service }) {
 
   if (!usersData || !loginsData || !failedLoginsData) {
     return (
-      <Container>
-        <Block label={t("authentik.users")} />
-        <Block label={t("authentik.loginsLast24H")} />
-        <Block label={t("authentik.failedLoginsLast24H")} />
+      <Container service={service}>
+        <Block label="authentik.users" />
+        <Block label="authentik.loginsLast24H" />
+        <Block label="authentik.failedLoginsLast24H" />
       </Container>
     );
   }
@@ -38,10 +38,10 @@ export default function Component({ service }) {
   );
 
   return (
-    <Container>
-      <Block label={t("authentik.users")} value={t("common.number", { value: usersData.pagination.count })} />
-      <Block label={t("authentik.loginsLast24H")} value={t("common.number", { value: loginsLast24H })} />
-      <Block label={t("authentik.failedLoginsLast24H")} value={t("common.number", { value: failedLoginsLast24H })} />
+    <Container service={service}>
+      <Block label="authentik.users" value={t("common.number", { value: usersData.pagination.count })} />
+      <Block label="authentik.loginsLast24H" value={t("common.number", { value: loginsLast24H })} />
+      <Block label="authentik.failedLoginsLast24H" value={t("common.number", { value: failedLoginsLast24H })} />
     </Container>
   );
 }

src/widgets/bazarr/component.jsx

@@ -13,22 +13,22 @@ export default function Component({ service }) {
   const { data: moviesData, error: moviesError } = useWidgetAPI(widget, "movies");
 
   if (episodesError || moviesError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error="widget.api_error" />;
   }
 
   if (!episodesData || !moviesData) {
     return (
-      <Container>
-        <Block label={t("bazarr.missingEpisodes")} />
-        <Block label={t("bazarr.missingMovies")} />
+      <Container service={service}>
+        <Block label="bazarr.missingEpisodes" />
+        <Block label="bazarr.missingMovies" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("bazarr.missingEpisodes")} value={t("common.number", { value: episodesData.total })} />
-      <Block label={t("bazarr.missingMovies")} value={t("common.number", { value: moviesData.total })} />
+    <Container service={service}>
+      <Block label="bazarr.missingEpisodes" value={t("common.number", { value: episodesData.total })} />
+      <Block label="bazarr.missingMovies" value={t("common.number", { value: moviesData.total })} />
     </Container>
   );
 }

src/widgets/coinmarketcap/component.jsx

@@ -30,7 +30,7 @@ export default function Component({ service }) {
 
   if (!symbols || symbols.length === 0) {
     return (
-      <Container>
+      <Container service={service}>
         <Block value={t("coinmarketcap.configure")} />
       </Container>
     );
@@ -42,7 +42,7 @@ export default function Component({ service }) {
 
   if (!statsData || !dateRange) {
     return (
-      <Container>
+      <Container service={service}>
         <Block value={t("coinmarketcap.configure")} />
       </Container>
     );
@@ -51,7 +51,7 @@ export default function Component({ service }) {
   const { data } = statsData;
 
   return (
-    <Container>
+    <Container service={service}>
       <div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1")}>
         <Dropdown options={dateRangeOptions} value={dateRange} setValue={setDateRange} />
       </div>

src/widgets/docker/component.jsx

@@ -31,23 +31,23 @@ export default function Component({ service }) {
 
   if (!statsData || !statusData) {
     return (
-      <Container>
-        <Block label={t("docker.cpu")} />
-        <Block label={t("docker.mem")} />
-        <Block label={t("docker.rx")} />
-        <Block label={t("docker.tx")} />
+      <Container service={service}>
+        <Block label="docker.cpu" />
+        <Block label="docker.mem" />
+        <Block label="docker.rx" />
+        <Block label="docker.tx" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("docker.cpu")} value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
-      <Block label={t("docker.mem")} value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
+    <Container service={service}>
+      <Block label="docker.cpu" value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
+      <Block label="docker.mem" value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
       {statsData.stats.networks && (
         <>
-          <Block label={t("docker.rx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
-          <Block label={t("docker.tx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
+          <Block label="docker.rx" value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
+          <Block label="docker.tx" value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
         </>
       )}
     </Container>

src/widgets/gotify/component.jsx

@@ -17,11 +17,22 @@ export default function Component({ service }) {
     return <Container error={t("widget.api_error")} />;
   }
 
+
+  if (!appsData || !messagesData || !clientsData) {
+    return (
+      <Container service={service}>
+        <Block label="gotify.apps" />
+        <Block label="gotify.clients" />
+        <Block label="gotify.messages" />
+      </Container>
+    );
+  }
+
   return (
-    <Container>
-      <Block label={t("gotify.apps")} value={appsData?.length} />
-      <Block label={t("gotify.clients")} value={clientsData?.length} />
-      <Block label={t("gotify.messages")} value={messagesData?.messages?.length} />
+    <Container service={service}>
+      <Block label="gotify.apps" value={appsData?.length} />
+      <Block label="gotify.clients" value={clientsData?.length} />
+      <Block label="gotify.messages" value={messagesData?.messages?.length} />
     </Container>
   );
 }

src/widgets/jackett/component.jsx

@@ -17,9 +17,9 @@ export default function Component({ service }) {
 
   if (!indexersData) {
     return (
-      <Container>
-        <Block label={t("jackett.configured")} />
-        <Block label={t("jackett.errored")} />
+      <Container service={service}>
+        <Block label="jackett.configured" />
+        <Block label="jackett.errored" />
       </Container>
     );
   }
@@ -27,9 +27,9 @@ export default function Component({ service }) {
   const errored = indexersData.filter((indexer) => indexer.last_error);
 
   return (
-    <Container>
-      <Block label={t("jackett.configured")} value={t("common.number", { value: indexersData.length })} />
-      <Block label={t("jackett.errored")} value={t("common.number", { value: errored.length })} />
+    <Container service={service}>
+      <Block label="jackett.configured" value={t("common.number", { value: indexersData.length })} />
+      <Block label="jackett.errored" value={t("common.number", { value: errored.length })} />
     </Container>
   );
 }

src/widgets/jellyseerr/component.jsx

@@ -17,19 +17,19 @@ export default function Component({ service }) {
 
   if (!statsData) {
     return (
-      <Container>
-        <Block label={t("jellyseerr.pending")} />
-        <Block label={t("jellyseerr.approved")} />
-        <Block label={t("jellyseerr.available")} />
+      <Container service={service}>
+        <Block label="jellyseerr.pending" />
+        <Block label="jellyseerr.approved" />
+        <Block label="jellyseerr.available" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("jellyseerr.pending")} value={statsData.pending} />
-      <Block label={t("jellyseerr.approved")} value={statsData.approved} />
-      <Block label={t("jellyseerr.available")} value={statsData.available} />
+    <Container service={service}>
+      <Block label="jellyseerr.pending" value={statsData.pending} />
+      <Block label="jellyseerr.approved" value={statsData.approved} />
+      <Block label="jellyseerr.available" value={statsData.available} />
     </Container>
   );
 }

src/widgets/lidarr/component.jsx

@@ -19,19 +19,19 @@ export default function Component({ service }) {
 
   if (!albumsData || !wantedData || !queueData) {
     return (
-      <Container>
-        <Block label={t("lidarr.wanted")} />
-        <Block label={t("lidarr.queued")} />
-        <Block label={t("lidarr.albums")} />
+      <Container service={service}>
+        <Block label="lidarr.wanted" />
+        <Block label="lidarr.queued" />
+        <Block label="lidarr.albums" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("lidarr.wanted")} value={t("common.number", { value: wantedData.totalRecords })} />
-      <Block label={t("lidarr.queued")} value={t("common.number", { value: queueData.totalCount })} />
-      <Block label={t("lidarr.albums")} value={t("common.number", { value: albumsData.have })} />
+    <Container service={service}>
+      <Block label="lidarr.wanted" value={t("common.number", { value: wantedData.totalRecords })} />
+      <Block label="lidarr.queued" value={t("common.number", { value: queueData.totalCount })} />
+      <Block label="lidarr.albums" value={t("common.number", { value: albumsData.have })} />
     </Container>
   );
 }

src/widgets/mastodon/component.jsx

@@ -17,19 +17,19 @@ export default function Component({ service }) {
 
   if (!statsData) {
     return (
-      <Container>
-        <Block label={t("mastodon.user_count")} />
-        <Block label={t("mastodon.status_count")} />
-        <Block label={t("mastodon.domain_count")} />
+      <Container service={service}>
+        <Block label="mastodon.user_count" />
+        <Block label="mastodon.status_count" />
+        <Block label="mastodon.domain_count" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("mastodon.user_count")} value={t("common.number", { value: statsData.stats.user_count })} />
-      <Block label={t("mastodon.status_count")} value={t("common.number", { value: statsData.stats.status_count })} />
-      <Block label={t("mastodon.domain_count")} value={t("common.number", { value: statsData.stats.domain_count })} />
+    <Container service={service}>
+      <Block label="mastodon.user_count" value={t("common.number", { value: statsData.stats.user_count })} />
+      <Block label="mastodon.status_count" value={t("common.number", { value: statsData.stats.status_count })} />
+      <Block label="mastodon.domain_count" value={t("common.number", { value: statsData.stats.domain_count })} />
     </Container>
   );
 }

src/widgets/npm/component.jsx

@@ -17,10 +17,10 @@ export default function Component({ service }) {
 
   if (!infoData) {
     return (
-      <Container>
-        <Block label={t("npm.enabled")} />
-        <Block label={t("npm.disabled")} />
-        <Block label={t("npm.total")} />
+      <Container service={service}>
+        <Block label="npm.enabled" />
+        <Block label="npm.disabled" />
+        <Block label="npm.total" />
       </Container>
     );
   }
@@ -30,10 +30,10 @@ export default function Component({ service }) {
   const total = infoData.length;
 
   return (
-    <Container>
-      <Block label={t("npm.enabled")} value={enabled} />
-      <Block label={t("npm.disabled")} value={disabled} />
-      <Block label={t("npm.total")} value={total} />
+    <Container service={service}>
+      <Block label="npm.enabled" value={enabled} />
+      <Block label="npm.disabled" value={disabled} />
+      <Block label="npm.total" value={total} />
     </Container>
   );
 }

src/widgets/nzbget/component.jsx

@@ -17,23 +17,23 @@ export default function Component({ service }) {
 
   if (!statusData) {
     return (
-      <Container>
-        <Block label={t("nzbget.rate")} />
-        <Block label={t("nzbget.remaining")} />
-        <Block label={t("nzbget.downloaded")} />
+      <Container service={service}>
+        <Block label="nzbget.rate" />
+        <Block label="nzbget.remaining" />
+        <Block label="nzbget.downloaded" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("nzbget.rate")} value={t("common.bitrate", { value: statusData.DownloadRate })} />
+    <Container service={service}>
+      <Block label="nzbget.rate" value={t("common.bitrate", { value: statusData.DownloadRate })} />
       <Block
-        label={t("nzbget.remaining")}
+        label="nzbget.remaining"
         value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })}
       />
       <Block
-        label={t("nzbget.downloaded")}
+        label="nzbget.downloaded"
         value={t("common.bytes", { value: statusData.DownloadedSizeMB * 1024 * 1024 })}
       />
     </Container>

src/widgets/ombi/component.jsx

@@ -17,19 +17,19 @@ export default function Component({ service }) {
 
   if (!statsData) {
     return (
-      <Container>
-        <Block label={t("ombi.pending")} />
-        <Block label={t("ombi.approved")} />
-        <Block label={t("ombi.available")} />
+      <Container service={service}>
+        <Block label="ombi.pending" />
+        <Block label="ombi.approved" />
+        <Block label="ombi.available" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("ombi.pending")} value={statsData.pending} />
-      <Block label={t("ombi.approved")} value={statsData.approved} />
-      <Block label={t("ombi.available")} value={statsData.available} />
+    <Container service={service}>
+      <Block label="ombi.pending" value={statsData.pending} />
+      <Block label="ombi.approved" value={statsData.approved} />
+      <Block label="ombi.available" value={statsData.available} />
     </Container>
   );
 }

src/widgets/overseerr/component.jsx

@@ -17,19 +17,19 @@ export default function Component({ service }) {
 
   if (!statsData) {
     return (
-      <Container>
-        <Block label={t("overseerr.pending")} />
-        <Block label={t("overseerr.approved")} />
-        <Block label={t("overseerr.available")} />
+      <Container service={service}>
+        <Block label="overseerr.pending" />
+        <Block label="overseerr.approved" />
+        <Block label="overseerr.available" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("overseerr.pending")} value={statsData.pending} />
-      <Block label={t("overseerr.approved")} value={statsData.approved} />
-      <Block label={t("overseerr.available")} value={statsData.available} />
+    <Container service={service}>
+      <Block label="overseerr.pending" value={statsData.pending} />
+      <Block label="overseerr.approved" value={statsData.approved} />
+      <Block label="overseerr.available" value={statsData.available} />
     </Container>
   );
 }

src/widgets/pihole/component.jsx

@@ -17,19 +17,19 @@ export default function Component({ service }) {
 
   if (!piholeData) {
     return (
-      <Container>
-        <Block label={t("pihole.queries")} />
-        <Block label={t("pihole.blocked")} />
-        <Block label={t("pihole.gravity")} />
+      <Container service={service}>
+        <Block label="pihole.queries" />
+        <Block label="pihole.blocked" />
+        <Block label="pihole.gravity" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("pihole.queries")} value={t("common.number", { value: piholeData.dns_queries_today })} />
-      <Block label={t("pihole.blocked")} value={t("common.number", { value: piholeData.ads_blocked_today })} />
-      <Block label={t("pihole.gravity")} value={t("common.number", { value: piholeData.domains_being_blocked })} />
+    <Container service={service}>
+      <Block label="pihole.queries" value={t("common.number", { value: piholeData.dns_queries_today })} />
+      <Block label="pihole.blocked" value={t("common.number", { value: piholeData.ads_blocked_today })} />
+      <Block label="pihole.gravity" value={t("common.number", { value: piholeData.domains_being_blocked })} />
     </Container>
   );
 }

src/widgets/portainer/component.jsx

@@ -19,10 +19,10 @@ export default function Component({ service }) {
 
   if (!containersData) {
     return (
-      <Container>
-        <Block label={t("portainer.running")} />
-        <Block label={t("portainer.stopped")} />
-        <Block label={t("portainer.total")} />
+      <Container service={service}>
+        <Block label="portainer.running" />
+        <Block label="portainer.stopped" />
+        <Block label="portainer.total" />
       </Container>
     );
   }
@@ -36,10 +36,10 @@ export default function Component({ service }) {
   const total = containersData.length;
 
   return (
-    <Container>
-      <Block label={t("portainer.running")} value={running} />
-      <Block label={t("portainer.stopped")} value={stopped} />
-      <Block label={t("portainer.total")} value={total} />
+    <Container service={service}>
+      <Block label="portainer.running" value={running} />
+      <Block label="portainer.stopped" value={stopped} />
+      <Block label="portainer.total" value={total} />
     </Container>
   );
 }

src/widgets/prowlarr/component.jsx

@@ -18,12 +18,12 @@ export default function Component({ service }) {
 
   if (!indexersData || !grabsData) {
     return (
-      <Container>
-        <Block label={t("prowlarr.enableIndexers")} />
-        <Block label={t("prowlarr.numberOfGrabs")} />
-        <Block label={t("prowlarr.numberOfQueries")} />
-        <Block label={t("prowlarr.numberOfFailGrabs")} />
-        <Block label={t("prowlarr.numberOfFailQueries")} />
+      <Container service={service}>
+        <Block label="prowlarr.enableIndexers" />
+        <Block label="prowlarr.numberOfGrabs" />
+        <Block label="prowlarr.numberOfQueries" />
+        <Block label="prowlarr.numberOfFailGrabs" />
+        <Block label="prowlarr.numberOfFailQueries" />
       </Container>
     );
   }
@@ -42,12 +42,12 @@ export default function Component({ service }) {
   });
 
   return (
-    <Container>
-      <Block label={t("prowlarr.enableIndexers")} value={indexers.length} />
-      <Block label={t("prowlarr.numberOfGrabs")} value={numberOfGrabs} />
-      <Block label={t("prowlarr.numberOfQueries")} value={numberOfQueries} />
-      <Block label={t("prowlarr.numberOfFailGrabs")} value={numberOfFailedGrabs} />
-      <Block label={t("prowlarr.numberOfFailQueries")} value={numberOfFailedQueries} />
+    <Container service={service}>
+      <Block label="prowlarr.enableIndexers" value={indexers.length} />
+      <Block label="prowlarr.numberOfGrabs" value={numberOfGrabs} />
+      <Block label="prowlarr.numberOfQueries" value={numberOfQueries} />
+      <Block label="prowlarr.numberOfFailGrabs" value={numberOfFailedGrabs} />
+      <Block label="prowlarr.numberOfFailQueries" value={numberOfFailedQueries} />
     </Container>
   );
 }

src/widgets/qbittorrent/component.jsx

@@ -17,11 +17,11 @@ export default function Component({ service }) {
 
   if (!torrentData) {
     return (
-      <Container>
-        <Block label={t("qbittorrent.leech")} />
-        <Block label={t("qbittorrent.download")} />
-        <Block label={t("qbittorrent.seed")} />
-        <Block label={t("qbittorrent.upload")} />
+      <Container service={service}>
+        <Block label="qbittorrent.leech" />
+        <Block label="qbittorrent.download" />
+        <Block label="qbittorrent.seed" />
+        <Block label="qbittorrent.upload" />
       </Container>
     );
   }
@@ -42,11 +42,11 @@ export default function Component({ service }) {
   const leech = torrentData.length - completed;
 
   return (
-    <Container>
-      <Block label={t("qbittorrent.leech")} value={t("common.number", { value: leech })} />
-      <Block label={t("qbittorrent.download")} value={t("common.bitrate", { value: rateDl })} />
-      <Block label={t("qbittorrent.seed")} value={t("common.number", { value: completed })} />
-      <Block label={t("qbittorrent.upload")} value={t("common.bitrate", { value: rateUl })} />
+    <Container service={service}>
+      <Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
+      <Block label="qbittorrent.download" value={t("common.bitrate", { value: rateDl })} />
+      <Block label="qbittorrent.seed" value={t("common.number", { value: completed })} />
+      <Block label="qbittorrent.upload" value={t("common.bitrate", { value: rateUl })} />
     </Container>
   );
 }

src/widgets/radarr/component.jsx

@@ -18,19 +18,19 @@ export default function Component({ service }) {
 
   if (!moviesData || !queuedData) {
     return (
-      <Container>
-        <Block label={t("radarr.wanted")} />
-        <Block label={t("radarr.queued")} />
-        <Block label={t("radarr.movies")} />
+      <Container service={service}>
+        <Block label="radarr.wanted" />
+        <Block label="radarr.queued" />
+        <Block label="radarr.movies" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("radarr.wanted")} value={moviesData.wanted} />
-      <Block label={t("radarr.queued")} value={queuedData.totalCount} />
-      <Block label={t("radarr.movies")} value={moviesData.have} />
+    <Container service={service}>
+      <Block label="radarr.wanted" value={moviesData.wanted} />
+      <Block label="radarr.queued" value={queuedData.totalCount} />
+      <Block label="radarr.movies" value={moviesData.have} />
     </Container>
   );
 }

src/widgets/readarr/component.jsx

@@ -19,19 +19,19 @@ export default function Component({ service }) {
 
   if (!booksData || !wantedData || !queueData) {
     return (
-      <Container>
-        <Block label={t("readarr.wanted")} />
-        <Block label={t("readarr.queued")} />
-        <Block label={t("readarr.books")} />
+      <Container service={service}>
+        <Block label="readarr.wanted" />
+        <Block label="readarr.queued" />
+        <Block label="readarr.books" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("readarr.wanted")} value={t("common.number", { value: wantedData.totalRecords })} />
-      <Block label={t("readarr.queued")} value={t("common.number", { value: queueData.totalCount })} />
-      <Block label={t("readarr.books")} value={t("common.number", { value: booksData.have })} />
+    <Container service={service}>
+      <Block label="readarr.wanted" value={t("common.number", { value: wantedData.totalRecords })} />
+      <Block label="readarr.queued" value={t("common.number", { value: queueData.totalCount })} />
+      <Block label="readarr.books" value={t("common.number", { value: booksData.have })} />
     </Container>
   );
 }

src/widgets/rutorrent/component.jsx

@@ -17,10 +17,10 @@ export default function Component({ service }) {
 
   if (!statusData) {
     return (
-      <Container>
-        <Block label={t("rutorrent.active")} />
-        <Block label={t("rutorrent.upload")} />
-        <Block label={t("rutorrent.download")} />
+      <Container service={service}>
+        <Block label="rutorrent.active" />
+        <Block label="rutorrent.upload" />
+        <Block label="rutorrent.download" />
       </Container>
     );
   }
@@ -32,10 +32,10 @@ export default function Component({ service }) {
   const active = statusData.filter((torrent) => torrent["d.get_state"] === "1");
 
   return (
-    <Container>
-      <Block label={t("rutorrent.active")} value={active.length} />
-      <Block label={t("rutorrent.upload")} value={t("common.bitrate", { value: upload })} />
-      <Block label={t("rutorrent.download")} value={t("common.bitrate", { value: download })} />
+    <Container service={service}>
+      <Block label="rutorrent.active" value={active.length} />
+      <Block label="rutorrent.upload" value={t("common.bitrate", { value: upload })} />
+      <Block label="rutorrent.download" value={t("common.bitrate", { value: download })} />
     </Container>
   );
 }

src/widgets/sabnzbd/component.jsx

@@ -27,19 +27,19 @@ export default function Component({ service }) {
 
   if (!queueData) {
     return (
-      <Container>
-        <Block label={t("sabnzbd.rate")} />
-        <Block label={t("sabnzbd.queue")} />
-        <Block label={t("sabnzbd.timeleft")} />
+      <Container service={service}>
+        <Block label="sabnzbd.rate" />
+        <Block label="sabnzbd.queue" />
+        <Block label="sabnzbd.timeleft" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("sabnzbd.rate")} value={t("common.bitrate", { value: fromUnits(queueData.queue.speed) * 8 })} />
-      <Block label={t("sabnzbd.queue")} value={t("common.number", { value: queueData.queue.noofslots })} />
-      <Block label={t("sabnzbd.timeleft")} value={queueData.queue.timeleft} />
+    <Container service={service}>
+      <Block label="sabnzbd.rate" value={t("common.bitrate", { value: fromUnits(queueData.queue.speed) * 8 })} />
+      <Block label="sabnzbd.queue" value={t("common.number", { value: queueData.queue.noofslots })} />
+      <Block label="sabnzbd.timeleft" value={queueData.queue.timeleft} />
     </Container>
   );
 }

src/widgets/sonarr/component.jsx

@@ -19,19 +19,19 @@ export default function Component({ service }) {
 
   if (!wantedData || !queuedData || !seriesData) {
     return (
-      <Container>
-        <Block label={t("sonarr.wanted")} />
-        <Block label={t("sonarr.queued")} />
-        <Block label={t("sonarr.series")} />
+      <Container service={service}>
+        <Block label="sonarr.wanted" />
+        <Block label="sonarr.queued" />
+        <Block label="sonarr.series" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("sonarr.wanted")} value={wantedData.totalRecords} />
-      <Block label={t("sonarr.queued")} value={queuedData.totalRecords} />
-      <Block label={t("sonarr.series")} value={seriesData.total} />
+    <Container service={service}>
+      <Block label="sonarr.wanted" value={wantedData.totalRecords} />
+      <Block label="sonarr.queued" value={queuedData.totalRecords} />
+      <Block label="sonarr.series" value={seriesData.total} />
     </Container>
   );
 }

src/widgets/speedtest/component.jsx

@@ -17,26 +17,26 @@ export default function Component({ service }) {
 
   if (!speedtestData) {
     return (
-      <Container>
-        <Block label={t("speedtest.download")} />
-        <Block label={t("speedtest.upload")} />
-        <Block label={t("speedtest.ping")} />
+      <Container service={service}>
+        <Block label="speedtest.download" />
+        <Block label="speedtest.upload" />
+        <Block label="speedtest.ping" />
       </Container>
     );
   }
 
   return (
-    <Container>
+    <Container service={service}>
       <Block
-        label={t("speedtest.download")}
+        label="speedtest.download"
         value={t("common.bitrate", { value: speedtestData.data.download * 1024 * 1024 })}
       />
       <Block
-        label={t("speedtest.upload")}
+        label="speedtest.upload"
         value={t("common.bitrate", { value: speedtestData.data.upload * 1024 * 1024 })}
       />
       <Block
-        label={t("speedtest.ping")}
+        label="speedtest.ping"
         value={t("common.ms", {
           value: speedtestData.data.ping,
           style: "unit",

src/widgets/strelaysrv/component.jsx

@@ -17,24 +17,24 @@ export default function Component({ service }) {
 
   if (!statsData) {
     return (
-      <Container>
-        <Block label={t("strelaysrv.numActiveSessions")} />
-        <Block label={t("strelaysrv.numConnections")} />
-        <Block label={t("strelaysrv.bytesProxied")} />
+      <Container service={service}>
+        <Block label="strelaysrv.numActiveSessions" />
+        <Block label="strelaysrv.numConnections" />
+        <Block label="strelaysrv.bytesProxied" />
       </Container>
     );
   }
 
   return (
-    <Container>
+    <Container service={service}>
       <Block
-        label={t("strelaysrv.numActiveSessions")}
+        label="strelaysrv.numActiveSessions"
         value={t("common.number", { value: statsData.numActiveSessions })}
       />
-      <Block label={t("strelaysrv.numConnections")} value={t("common.number", { value: statsData.numConnections })} />
+      <Block label="strelaysrv.numConnections" value={t("common.number", { value: statsData.numConnections })} />
       <Block label={t("strelaysrv.dataRelayed")} value={t("common.bytes", { value: statsData.bytesProxied })} />
       <Block
-        label={t("strelaysrv.transferRate")}
+        label="strelaysrv.transferRate"
         value={t("common.bitrate", { value: statsData.kbps10s1m5m15m30m60m[5] })}
       />
     </Container>

src/widgets/traefik/component.jsx

@@ -17,19 +17,19 @@ export default function Component({ service }) {
 
   if (!traefikData) {
     return (
-      <Container>
-        <Block label={t("traefik.routers")} />
-        <Block label={t("traefik.services")} />
-        <Block label={t("traefik.middleware")} />
+      <Container service={service}>
+        <Block label="traefik.routers" />
+        <Block label="traefik.services" />
+        <Block label="traefik.middleware" />
       </Container>
     );
   }
 
   return (
-    <Container>
-      <Block label={t("traefik.routers")} value={traefikData.http.routers.total} />
-      <Block label={t("traefik.services")} value={traefikData.http.services.total} />
-      <Block label={t("traefik.middleware")} value={traefikData.http.middlewares.total} />
+    <Container service={service}>
+      <Block label="traefik.routers" value={traefikData.http.routers.total} />
+      <Block label="traefik.services" value={traefikData.http.services.total} />
+      <Block label="traefik.middleware" value={traefikData.http.middlewares.total} />
     </Container>
   );
 }

src/widgets/transmission/component.jsx

@@ -17,11 +17,11 @@ export default function Component({ service }) {
 
   if (!torrentData) {
     return (
-      <Container>
-        <Block label={t("transmission.leech")} />
-        <Block label={t("transmission.download")} />
-        <Block label={t("transmission.seed")} />
-        <Block label={t("transmission.upload")} />
+      <Container service={service}>
+        <Block label="transmission.leech" />
+        <Block label="transmission.download" />
+        <Block label="transmission.seed" />
+        <Block label="transmission.upload" />
       </Container>
     );
   }
@@ -34,11 +34,11 @@ export default function Component({ service }) {
   const leech = torrents.length - completed || 0;
 
   return (
-    <Container>
-      <Block label={t("transmission.leech")} value={t("common.number", { value: leech })} />
-      <Block label={t("transmission.download")} value={t("common.bitrate", { value: rateDl * 8 })} />
-      <Block label={t("transmission.seed")} value={t("common.number", { value: completed })} />
-      <Block label={t("transmission.upload")} value={t("common.bitrate", { value: rateUl * 8 })} />
+    <Container service={service}>
+      <Block label="transmission.leech" value={t("common.number", { value: leech })} />
+      <Block label="transmission.download" value={t("common.bitrate", { value: rateDl * 8 })} />
+      <Block label="transmission.seed" value={t("common.number", { value: completed })} />
+      <Block label="transmission.upload" value={t("common.bitrate", { value: rateUl * 8 })} />
     </Container>
   );
 }