Enhancement: statusStyle improvements (#2119)

docs/configs/services.md

@@ -123,14 +123,7 @@ Services may have an optional `ping` property that allows you to monitor the ava
 
 <img width="1038" alt="Ping" src="https://github.com/benphelps/homepage/assets/88257202/7bc13bd3-0d0b-44e3-888c-a20e069a3233">
 
-You can also apply different styles to the ping indicator by using the `statusStyle` property. The default is no value, and displays the response time in ms, but you can also use `dot` or `basic`. `dot` shows a green dot for a successful ping, and `basic` shows either ONLINE or OFFLINE to match the status style of Docker containers. For example:
+You can also apply different styles to the ping indicator by using the `statusStyle` property, see [settings](settings.md#status-style).
-
-```yaml
-    - Sonarr:
-        ...
-        ping: http://sonarr.host/
-        statusStyle: dot
-```
 
 ## Docker Integration
 

docs/configs/settings.md

@@ -380,6 +380,30 @@ or per-service (`services.yaml`) with:
 
 If you have both set the per-service settings take precedence.
 
+## Status Style
+
+You can choose from the following styles for docker or k8s status and ping: `dot` or `basic`
+
+- The default is no value, and displays the ping response time in ms and the docker / k8s container status
+- `dot` shows a green dot for a successful ping or healthy status.
+- `basic` shows either UP or DOWN for ping
+
+For example:
+
+```yaml
+statusStyle: 'dot'
+```
+
+or per-service (`services.yaml`) with:
+
+```yaml
+- Example Service:
+    ...
+    statusStyle: 'dot'
+```
+
+If you have both set, the per-service settings take precedence.
+
 ## Hide Widget Error Messages
 
 Hide the visible API error messages either globally in `settings.yaml`:

public/locales/en/common.json

@@ -80,7 +80,9 @@
     },
     "ping": {
         "error": "Error",
-        "ping": "Ping"
+        "ping": "Ping",
+        "down": "Down",
+        "up": "Up"
     },
     "emby": {
         "playing": "Playing",

src/components/services/item.jsx

@@ -15,6 +15,7 @@ export default function Item({ service, group }) {
   const hasLink = service.href && service.href !== "#";
   const { settings } = useContext(SettingsContext);
   const showStats = (service.showStats === false) ? false : settings.showStats;
+  const statusStyle = (service.statusStyle !== undefined) ? service.statusStyle : settings.statusStyle;
   const [statsOpen, setStatsOpen] = useState(service.showStats);
   const [statsClosing, setStatsClosing] = useState(false);
 
@@ -76,10 +77,10 @@ export default function Item({ service, group }) {
             </div>
           )}
 
-          <div className="absolute top-0 right-0 flex flex-row justify-end gap-2 mr-2 z-30 service-tags">
+          <div className={`absolute top-0 right-0 flex flex-row justify-end ${statusStyle === 'dot' ? 'gap-0' : 'gap-2'} mr-2 z-30 service-tags`}>
               {service.ping && (
                 <div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
-                  <Ping group={group} service={service.name} style={service.statusStyle} />
+                  <Ping group={group} service={service.name} style={statusStyle} />
                   <span className="sr-only">Ping status</span>
                 </div>
               )}
@@ -90,7 +91,7 @@ export default function Item({ service, group }) {
                   onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
                   className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
                 >
-                  <Status service={service} />
+                  <Status service={service} style={statusStyle} />
                   <span className="sr-only">View container stats</span>
                 </button>
               )}
@@ -100,7 +101,7 @@ export default function Item({ service, group }) {
                   onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
                   className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
                 >
-                  <KubernetesStatus service={service} />
+                  <KubernetesStatus service={service} style={statusStyle} />
                   <span className="sr-only">View container stats</span>
                 </button>
               )}

src/components/services/kubernetes-status.jsx

@@ -1,35 +1,42 @@
 import useSWR from "swr";
 import { t } from "i18next";
 
-export default function KubernetesStatus({ service }) {
+export default function KubernetesStatus({ service, style }) {
   const podSelectorString = service.podSelector !== undefined ? `podSelector=${service.podSelector}` : "";
   const { data, error } = useSWR(`/api/kubernetes/status/${service.namespace}/${service.app}?${podSelectorString}`);
 
+  let statusLabel = t("docker.unknown");
+  let statusTitle = "";
+  let backgroundClass = "px-1.5 py-0.5 bg-theme-500/10 dark:bg-theme-900/50";
+  let colorClass = "text-black/20 dark:text-white/40 ";
+
   if (error) {
-    <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden k8s-status-error" title={t("docker.error")}>
+    statusTitle = t("docker.error");
-      <div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div>
+    statusLabel = statusTitle;
-    </div>
+    colorClass = "text-rose-500/80";
+  } else if (data) {
+    if (data.status === "running") {
+      statusTitle = data.health ?? data.status;
+      statusLabel = statusTitle;
+      colorClass = "text-emerald-500/80";
     }
   
-  if (data && data.status === "running") {
+    if (data.status === "not found" || data.status === "down" || data.status === "partial") {
-    return (
+      statusTitle = data.status;
-      <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden k8s-status" title={data.health ?? data.status}>
+      statusLabel = statusTitle;
-        <div className="text-[8px] font-bold text-emerald-500/80 uppercase">{data.health ?? data.status}</div>
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
-      </div>
+    }
-    );
   }
 
-  if (data && (data.status === "not found" || data.status === "down" || data.status === "partial")) {
+  if (style === 'dot') {
-    return (
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
-      <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden k8s-status-warning" title={data.status}>
+    backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
-        <div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{data.status}</div>
-      </div>
-    );
   }
 
   return (
-    <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden k8s-status-unknown">
+    <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] k8s-status`} title={statusTitle}>
-      <div className="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div>
+      {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
+      {style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
     </div>
   );
 }

src/components/services/ping.jsx

@@ -7,9 +7,8 @@ export default function Ping({ group, service, style }) {
     refreshInterval: 30000
   });
 
-  let textSize = "text-[8px]";
   let colorClass = ""
-  let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50";
+  let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
   let statusTitle = "HTTP status";
   let statusText;
 
@@ -26,11 +25,7 @@ export default function Ping({ group, service, style }) {
     statusTitle += ` ${data.status}`
 
     if (style === "basic") {
-      statusText = t("docker.offline")
+      statusText = t("ping.down")
-    } else if (style === "dot") {
-      statusText = "◉"
-      textSize = "text-[14px]"
-      backgroundClass = ""
     } else {
       statusText = data.status
     }
@@ -40,19 +35,21 @@ export default function Ping({ group, service, style }) {
     colorClass = "text-emerald-500/80"
 
     if (style === "basic") {
-      statusText = t("docker.running")
+      statusText = t("ping.up")
-    } else if (style === "dot") {
-      statusText = "◉"
-      textSize = "text-[14px]"
-      backgroundClass = ""
     } else {
       statusText = ping
     }
   }
 
+  if (style === "dot") {
+    backgroundClass = 'p-3';
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
+  }
+
   return (
-    <div className={`w-auto px-1.5 py-0.5 text-center rounded-b-[3px] overflow-hidden ping-status-invalid ${backgroundClass}`} title={statusTitle}>
+    <div className={`w-auto text-center rounded-b-[3px] overflow-hidden ping-status ${backgroundClass}`} title={statusTitle}>
-      <div className={`font-bold uppercase ${textSize} ${colorClass}`}>{statusText}</div>
+      {style !== 'dot' && <div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>}
+      {style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
     </div>
   );
 }

src/components/services/status.jsx

@@ -1,65 +1,58 @@
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
-export default function Status({ service }) {
+export default function Status({ service, style }) {
   const { t } = useTranslation();
 
   const { data, error } = useSWR(`/api/docker/status/${service.container}/${service.server || ""}`);
 
-  if (error) {
+  let statusLabel = t("docker.unknown");
-    <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden docker-error" title={t("docker.error")}>
+  let statusTitle = "";
-      <div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div>
+  let backgroundClass = "px-1.5 py-0.5 bg-theme-500/10 dark:bg-theme-900/50";
-    </div>
+  let colorClass = "text-black/20 dark:text-white/40 ";
-  }
-
-  if (data) {
-    let statusLabel = "";
 
+  if (error) {
+    statusTitle = t("docker.error");
+    colorClass = "text-rose-500/80";
+  } else if (data) {
     if (data.status?.includes("running")) {
       if (data.health === "starting") {
-        return (
+          statusTitle = t("docker.starting");
-          <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden docker-starting" title={t("docker.starting")}>
+          colorClass = "text-blue-500/80";
-            <div className="text-[8px] font-bold text-blue-500/80 uppercase">{t("docker.starting")}</div>
-          </div>
-        );
       }
 
       if (data.health === "unhealthy") {
-        return (
+          statusTitle = t("docker.unhealthy");
-          <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden docker-unhealthy" title={t("docker.unhealthy")}>
+          colorClass = "text-orange-400/50 dark:text-orange-400/80";
-            <div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{t("docker.unhealthy")}</div>
-          </div>
-        );
       }
 
       if (!data.health) {
-        statusLabel = data.status.replace("running", t("docker.running"))
+        statusLabel = data.status.replace("running", t("docker.running"));
       } else {
-        statusLabel = data.health === "healthy" ? t("docker.healthy") : data.health
+        statusLabel = data.health === "healthy" ? t("docker.healthy") : data.health;
       }
 
-      return (
+      statusTitle = statusLabel;
-        <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden docker-status" title={statusLabel}>
+      colorClass = "text-emerald-500/80";
-          <div className="text-[8px] font-bold text-emerald-500/80 uppercase">{statusLabel}</div>
-        </div>
-      );
     }
     
     if (data.status === "not found" || data.status === "exited" || data.status?.startsWith("partial")) {
       if (data.status === "not found") statusLabel = t("docker.not_found")
       else if (data.status === "exited") statusLabel = t("docker.exited")
       else statusLabel = data.status.replace("partial", t("docker.partial"))
-      return (
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
-        <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden docker-status-warning" title={statusLabel}>
-          <div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{statusLabel}</div>
-        </div>
-      );
     }
   }
 
+  if (style === 'dot') {
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
+    backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
+  }
+
   return (
-    <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden docker-status-unknown">
+    <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] docker-status`} title={statusTitle}>
-      <div className="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div>
+      {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
+      {style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
     </div>
   );
 }

src/utils/config/service-helpers.js

@@ -259,6 +259,9 @@ export async function servicesFromKubernetes() {
         if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) {
           constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`];
         }
+        if (ingress.metadata.annotations[`${ANNOTATION_BASE}/statusStyle`]) {
+          constructedService.statusStyle = ingress.metadata.annotations[`${ANNOTATION_BASE}/statusStyle`];
+        }
         Object.keys(ingress.metadata.annotations).forEach((annotation) => {
           if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) {
             shvl.set(