From 2312345a02d49e503c5af2382e89db296feeda6e Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Sun, 23 Nov 2025 00:10:58 +0000
Subject: [PATCH] feat: add degraded status dot to Proxmox and Docker tabs
 (fixes #744)

---
 .../src/components/Dashboard/Dashboard.tsx    |  85 ++++++-----
 .../components/Docker/DockerUnifiedTable.tsx  | 132 +++++++++++-------
 2 files changed, 131 insertions(+), 86 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 89c9ea0..f783b93 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -16,7 +16,7 @@ import { Card } from '@/components/shared/Card';
 import { EmptyState } from '@/components/shared/EmptyState';
 import { NodeGroupHeader } from '@/components/shared/NodeGroupHeader';
 import { ProxmoxSectionNav } from '@/components/Proxmox/ProxmoxSectionNav';
-import { isNodeOnline } from '@/utils/status';
+import { isNodeOnline, OFFLINE_HEALTH_STATUSES, DEGRADED_HEALTH_STATUSES } from '@/utils/status';
 import { getNodeDisplayName } from '@/utils/nodes';
 import { logger } from '@/utils/logger';
 import { usePersistentSignal } from '@/hooks/usePersistentSignal';
@@ -683,12 +683,22 @@ export function Dashboard(props: DashboardProps) {
   const totalStats = createMemo(() => {
     const guests = filteredGuests();
     const running = guests.filter((g) => g.status === 'running').length;
+    const degraded = guests.filter((g) => {
+      const status = (g.status || '').toLowerCase();
+      // Count as degraded if explicitly in degraded list, or if not running and not offline/stopped
+      return (
+        DEGRADED_HEALTH_STATUSES.has(status) ||
+        (status !== 'running' && !OFFLINE_HEALTH_STATUSES.has(status))
+      );
+    }).length;
+    const stopped = guests.length - running - degraded;
     const vms = guests.filter((g) => g.type === 'qemu').length;
     const containers = guests.filter((g) => g.type === 'lxc').length;
     return {
       total: guests.length,
       running,
-      stopped: guests.length - running,
+      degraded,
+      stopped,
       vms,
       containers,
     };
@@ -1026,38 +1036,38 @@ export function Dashboard(props: DashboardProps) {
                       const node = nodeByInstance()[instanceId];
 
                       return (
-                      <>
-                        <Show when={node && groupingMode() === 'grouped'}>
-                          <NodeGroupHeader node={node!} colspan={11} />
-                        </Show>
-                        <For each={guests} fallback={<></>}>
-                          {(guest) => {
-                            // Match backend ID generation logic: stable format is "instance-vmid"
-                            const guestId =
-                              guest.id || `${guest.instance}-${guest.vmid}`;
-                            const metadata =
-                              guestMetadata()[guestId] ||
-                              guestMetadata()[`${guest.node}-${guest.vmid}`];
-                            const parentNode = node ?? resolveParentNode(guest);
-                            const parentNodeOnline = parentNode ? isNodeOnline(parentNode) : true;
-                            return (
-                              <ComponentErrorBoundary name="GuestRow">
-                                <GuestRow
-                                  guest={guest}
-                                  alertStyles={getAlertStyles(guestId, activeAlerts, alertsEnabled())}
-                                  customUrl={metadata?.customUrl}
-                                  onTagClick={handleTagClick}
-                                  activeSearch={search()}
-                                  parentNodeOnline={parentNodeOnline}
-                                  onCustomUrlUpdate={handleCustomUrlUpdate}
-                                  isGroupedView={groupingMode() === 'grouped'}
-                                />
-                              </ComponentErrorBoundary>
-                            );
-                          }}
-                        </For>
-                      </>
-                    );
+                        <>
+                          <Show when={node && groupingMode() === 'grouped'}>
+                            <NodeGroupHeader node={node!} colspan={11} />
+                          </Show>
+                          <For each={guests} fallback={<></>}>
+                            {(guest) => {
+                              // Match backend ID generation logic: stable format is "instance-vmid"
+                              const guestId =
+                                guest.id || `${guest.instance}-${guest.vmid}`;
+                              const metadata =
+                                guestMetadata()[guestId] ||
+                                guestMetadata()[`${guest.node}-${guest.vmid}`];
+                              const parentNode = node ?? resolveParentNode(guest);
+                              const parentNodeOnline = parentNode ? isNodeOnline(parentNode) : true;
+                              return (
+                                <ComponentErrorBoundary name="GuestRow">
+                                  <GuestRow
+                                    guest={guest}
+                                    alertStyles={getAlertStyles(guestId, activeAlerts, alertsEnabled())}
+                                    customUrl={metadata?.customUrl}
+                                    onTagClick={handleTagClick}
+                                    activeSearch={search()}
+                                    parentNodeOnline={parentNodeOnline}
+                                    onCustomUrlUpdate={handleCustomUrlUpdate}
+                                    isGroupedView={groupingMode() === 'grouped'}
+                                  />
+                                </ComponentErrorBoundary>
+                              );
+                            }}
+                          </For>
+                        </>
+                      );
                     }}
                   </For>
                 </tbody>
@@ -1110,6 +1120,13 @@ export function Dashboard(props: DashboardProps) {
               <span class="h-2 w-2 bg-green-500 rounded-full"></span>
               {totalStats().running} running
             </span>
+            <Show when={totalStats().degraded > 0}>
+              <span class="text-gray-400">|</span>
+              <span class="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+                <span class="h-2 w-2 bg-orange-500 rounded-full"></span>
+                {totalStats().degraded} degraded
+              </span>
+            </Show>
             <span class="text-gray-400">|</span>
             <span class="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
               <span class="h-2 w-2 bg-red-500 rounded-full"></span>
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index f618694..72134eb 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -46,18 +46,18 @@ type SearchToken = { key?: string; value: string };
 
 type DockerRow =
   | {
-      kind: 'container';
-      id: string;
-      host: DockerHost;
-      container: DockerContainer;
-    }
+    kind: 'container';
+    id: string;
+    host: DockerHost;
+    container: DockerContainer;
+  }
   | {
-      kind: 'service';
-      id: string;
-      host: DockerHost;
-      service: DockerService;
-      tasks: DockerTask[];
-    };
+    kind: 'service';
+    id: string;
+    host: DockerHost;
+    service: DockerService;
+    tasks: DockerTask[];
+  };
 
 interface DockerUnifiedTableProps {
   hosts: DockerHost[];
@@ -283,36 +283,36 @@ const PODMAN_METADATA_GROUPS: Array<{
   prefixes?: string[];
   keys?: string[];
 }> = [
-  {
-    title: 'Pod',
-    prefixes: ['io.podman.annotations.pod.', 'io.podman.pod.', 'net.containers.podman.pod.'],
-  },
-  {
-    title: 'Compose',
-    prefixes: ['io.podman.compose.'],
-  },
-  {
-    title: 'Auto Update',
-    prefixes: ['io.containers.autoupdate.'],
-    keys: ['io.containers.autoupdate'],
-  },
-  {
-    title: 'User Namespace',
-    keys: ['io.podman.annotations.userns', 'io.containers.userns'],
-  },
-  {
-    title: 'Capabilities',
-    keys: ['io.containers.capabilities', 'io.containers.selinux', 'io.containers.seccomp'],
-  },
-  {
-    title: 'Podman Annotations',
-    prefixes: ['io.podman.annotations.'],
-  },
-  {
-    title: 'Container Settings',
-    prefixes: ['io.containers.'],
-  },
-];
+    {
+      title: 'Pod',
+      prefixes: ['io.podman.annotations.pod.', 'io.podman.pod.', 'net.containers.podman.pod.'],
+    },
+    {
+      title: 'Compose',
+      prefixes: ['io.podman.compose.'],
+    },
+    {
+      title: 'Auto Update',
+      prefixes: ['io.containers.autoupdate.'],
+      keys: ['io.containers.autoupdate'],
+    },
+    {
+      title: 'User Namespace',
+      keys: ['io.podman.annotations.userns', 'io.containers.userns'],
+    },
+    {
+      title: 'Capabilities',
+      keys: ['io.containers.capabilities', 'io.containers.selinux', 'io.containers.seccomp'],
+    },
+    {
+      title: 'Podman Annotations',
+      prefixes: ['io.podman.annotations.'],
+    },
+    {
+      title: 'Container Settings',
+      prefixes: ['io.containers.'],
+    },
+  ];
 
 const humanizePodmanKey = (raw: string): string => {
   if (!raw) return 'Value';
@@ -1049,9 +1049,8 @@ const DockerContainerRow: Component<{
   return (
     <>
       <tr
-        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${
-          hasDrawerContent() ? 'cursor-pointer' : ''
-        } ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isRunning() ? 'opacity-60' : ''}`}
+        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${hasDrawerContent() ? 'cursor-pointer' : ''
+          } ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isRunning() ? 'opacity-60' : ''}`}
         onClick={toggle}
         aria-expanded={expanded()}
       >
@@ -1539,11 +1538,10 @@ const DockerContainerRow: Component<{
                             </Show>
                             <div class="mt-1 flex flex-wrap gap-1 text-[10px] text-gray-500 dark:text-gray-400">
                               <span
-                                class={`rounded px-1.5 py-0.5 ${
-                                  mount.rw === false
+                                class={`rounded px-1.5 py-0.5 ${mount.rw === false
                                     ? 'bg-gray-200 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200'
                                     : 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                                }`}
+                                  }`}
                               >
                                 {rw}
                               </span>
@@ -1819,13 +1817,11 @@ const DockerServiceRow: Component<{
   return (
     <>
       <tr
-        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${
-          hasTasks() ? 'cursor-pointer' : ''
-        } ${
-          expanded()
+        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${hasTasks() ? 'cursor-pointer' : ''
+          } ${expanded()
             ? 'bg-gray-50 dark:bg-gray-800/40'
             : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
-        } ${!isHealthy() ? 'opacity-60' : ''}`}
+          } ${!isHealthy() ? 'opacity-60' : ''}`}
         onClick={toggle}
         aria-expanded={expanded()}
       >
@@ -2356,6 +2352,31 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
     }, 0),
   );
 
+  const degradedContainers = createMemo(() =>
+    groupedRows().reduce((acc, group) => {
+      return (
+        acc +
+        group.rows
+          .filter((row): row is Extract<typeof row, { kind: 'container' }> => row.kind === 'container')
+          .filter((row) => {
+            const state = toLower(row.container.state);
+            const health = toLower(row.container.health);
+
+            // Explicitly degraded/error states
+            if (ERROR_CONTAINER_STATES.has(state)) return true;
+
+            // Running but unhealthy
+            if (state === 'running' && health === 'unhealthy') return true;
+
+            // Any other state that is NOT running and NOT stopped
+            if (state !== 'running' && !STOPPED_CONTAINER_STATES.has(state)) return true;
+
+            return false;
+          }).length
+      );
+    }, 0),
+  );
+
   const renderRow = (row: DockerRow, grouped: boolean) => {
     const resourceId =
       row.kind === 'container'
@@ -2579,6 +2600,13 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
             <span class="h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
             {runningContainers()} running
           </span>
+          <Show when={degradedContainers() > 0}>
+            <span class="text-gray-400">|</span>
+            <span class="flex items-center gap-1">
+              <span class="h-2 w-2 rounded-full bg-orange-500" aria-hidden="true" />
+              {degradedContainers()} degraded
+            </span>
+          </Show>
           <span class="text-gray-400">|</span>
           <span class="flex items-center gap-1">
             <span class="h-2 w-2 rounded-full bg-gray-400" aria-hidden="true" />