From 073d47344d316c5714e63e0d741266cef7fda8bf Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 4 Oct 2023 20:40:10 -0700
Subject: [PATCH] Unify status & ping styles

---
 docs/configs/settings.md                      |  4 +-
 src/components/services/item.jsx              |  6 +-
 src/components/services/kubernetes-status.jsx | 42 +++++++------
 src/components/services/ping.jsx              | 17 +++---
 src/components/services/status.jsx            | 59 ++++++++-----------
 5 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/docs/configs/settings.md b/docs/configs/settings.md
index 50066db8..1e313724 100644
--- a/docs/configs/settings.md
+++ b/docs/configs/settings.md
@@ -382,9 +382,9 @@ If you have both set the per-service settings take precedence.
 
 ## Status Style
 
-You can choose from the following styles for status / ping: `dot` or `basic`
+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. `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:
+The default is no value, and displays the ping response time in ms. `dot` shows a green dot for a successful ping or healthy status, and `basic` shows either ONLINE or OFFLINE to match the status style of Docker containers. For example:
 
 ```yaml
     - Sonarr:
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 3d661382..d3dfedcb 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -77,7 +77,7 @@ 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={statusStyle} />
@@ -91,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>
               )}
@@ -101,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>
               )}
diff --git a/src/components/services/kubernetes-status.jsx b/src/components/services/kubernetes-status.jsx
index 41302994..81509dde 100644
--- a/src/components/services/kubernetes-status.jsx
+++ b/src/components/services/kubernetes-status.jsx
@@ -5,31 +5,35 @@ export default function KubernetesStatus({ service }) {
   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")}>
-      <div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div>
-    </div>
+    statusLabel = statusTitle = t("docker.error");
+    colorClass = "text-rose-500/80";
+  } else if (data) {
+    if (data.status === "running") {
+      statusLabel = statusTitle = data.health ?? data.status;
+      colorClass = "text-emerald-500/80";
+    }
+  
+    if (data.status === "not found" || data.status === "down" || data.status === "partial") {
+      statusLabel = statusTitle = data.status;
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
+    }
   }
 
-  if (data && data.status === "running") {
-    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" title={data.health ?? data.status}>
-        <div className="text-[8px] font-bold text-emerald-500/80 uppercase">{data.health ?? data.status}</div>
-      </div>
-    );
-  }
-
-  if (data && (data.status === "not found" || data.status === "down" || data.status === "partial")) {
-    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-warning" title={data.status}>
-        <div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{data.status}</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/50";
   }
 
   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="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div>
+    <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] k8s-status-${statusLabel.toLowerCase().replace(' ', '')}`} title={statusTitle}>
+      {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
+      {style == 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}></div>}
     </div>
   );
 }
diff --git a/src/components/services/ping.jsx b/src/components/services/ping.jsx
index 29c7c375..5c131516 100644
--- a/src/components/services/ping.jsx
+++ b/src/components/services/ping.jsx
@@ -8,7 +8,7 @@ export default function Ping({ group, service, style }) {
   });
 
   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;
 
@@ -42,17 +42,14 @@ export default function Ping({ group, service, style }) {
   }
 
   if (style === "dot") {
-    backgroundClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '')
+    backgroundClass = 'p-3';
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
   }
 
   return (
-    <>
-    {style !== 'dot' &&
-      <div className={`w-auto px-1.5 py-0.5 text-center rounded-b-[3px] overflow-hidden ping-status-invalid ${style !== 'dot' ? backgroundClass : ''}`} title={statusTitle}>
-       <div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>
-      </div>
-    }
-    {style == 'dot' && <div className={`rounded-full h-[9px] w-[9px] ${backgroundClass}`} title={statusTitle}></div>}
-    </>
+    <div className={`w-auto text-center rounded-b-[3px] overflow-hidden ping-status ${backgroundClass}`} title={statusTitle}>
+      {style !== 'dot' && <div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>}
+      {style == 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}></div>}
+    </div>
   );
 }
diff --git a/src/components/services/status.jsx b/src/components/services/status.jsx
index 18b871b8..800480c8 100644
--- a/src/components/services/status.jsx
+++ b/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 || ""}`);
 
+  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 docker-error" title={t("docker.error")}>
-      <div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div>
-    </div>
-  }
-
-  if (data) {
-    let statusLabel = "";
-
+    statusTitle = t("docker.error");
+    colorClass = "text-rose-500/80";
+  } else if (data) {
     if (data.status?.includes("running")) {
       if (data.health === "starting") {
-        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-starting" title={t("docker.starting")}>
-            <div className="text-[8px] font-bold text-blue-500/80 uppercase">{t("docker.starting")}</div>
-          </div>
-        );
+          statusTitle = t("docker.starting");
+          colorClass = "text-blue-500/80";
       }
 
       if (data.health === "unhealthy") {
-        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-unhealthy" title={t("docker.unhealthy")}>
-            <div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{t("docker.unhealthy")}</div>
-          </div>
-        );
+          statusTitle = t("docker.unhealthy");
+          colorClass = "text-orange-400/50 dark:text-orange-400/80";
       }
 
       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 (
-        <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}>
-          <div className="text-[8px] font-bold text-emerald-500/80 uppercase">{statusLabel}</div>
-        </div>
-      );
+      statusTitle = statusLabel;
+      colorClass = "text-emerald-500/80";
     }
     
     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 (
-        <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>
-      );
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
     }
   }
 
+  if (style === 'dot') {
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
+    backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/50";
+  }
+
   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="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div>
+    <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] docker-status-${statusLabel.toLowerCase().replace(' ', '')}`} title={statusTitle}>
+      {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
+      {style == 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}></div>}
     </div>
   );
 }