feat: add degraded status dot to Proxmox and Docker tabs (fixes #744)

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,
     };
@@ -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>

frontend-modern/src/components/Docker/DockerUnifiedTable.tsx

@@ -312,7 +312,7 @@ const PODMAN_METADATA_GROUPS: Array<{
       title: 'Container Settings',
       prefixes: ['io.containers.'],
     },
-];
+  ];
 
 const humanizePodmanKey = (raw: string): string => {
   if (!raw) return 'Value';
@@ -1049,8 +1049,7 @@ const DockerContainerRow: Component<{
   return (
     <>
       <tr
-        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${
+        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${hasDrawerContent() ? 'cursor-pointer' : ''
-          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,8 +1538,7 @@ 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 ${
+                                class={`rounded px-1.5 py-0.5 ${mount.rw === false
-                                  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'
                                   }`}
@@ -1819,10 +1817,8 @@ const DockerServiceRow: Component<{
   return (
     <>
       <tr
-        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${
+        class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${hasTasks() ? 'cursor-pointer' : ''
-          hasTasks() ? 'cursor-pointer' : ''
+          } ${expanded()
-        } ${
-          expanded()
             ? 'bg-gray-50 dark:bg-gray-800/40'
             : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
           } ${!isHealthy() ? 'opacity-60' : ''}`}
@@ -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" />