From eff4ac0d214f7832b19c8ed5a1f86fa9ae4e2ce4 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 29 Nov 2025 22:37:17 +0000
Subject: [PATCH] Remove CPU capacity marker and highlight high container
 restarts

- Remove load average marker from CPU progress bar (confusing, not useful)
- Keep load average in tooltip only
- Highlight container restart count in red when >5 (indicates instability)
---
 .../components/Dashboard/EnhancedCPUBar.tsx   | 30 ++-----------------
 .../components/Docker/DockerUnifiedTable.tsx  |  4 ++-
 2 files changed, 5 insertions(+), 29 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx b/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
index b8dad3f5e..d945f7cf4 100644
--- a/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
+++ b/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
@@ -18,14 +18,6 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
     const [tooltipPos, setTooltipPos] = createSignal({ x: 0, y: 0 });
     let containerRef: HTMLDivElement | undefined;
 
-    // Calculate Load % relative to core count
-    const loadPercent = createMemo(() => {
-        if (props.loadAverage === undefined || !props.cores || props.cores === 0) return 0;
-        return (props.loadAverage / props.cores) * 100;
-    });
-
-    const isOverloaded = createMemo(() => loadPercent() > 100);
-
     // Bar color based on usage
     const barColor = createMemo(() => {
         if (props.usage >= 90) return 'bg-red-500/60 dark:bg-red-500/50';
@@ -33,9 +25,6 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
         return 'bg-green-500/60 dark:bg-green-500/50';
     });
 
-    // Load marker position (capped at 100%)
-    const markerPosition = createMemo(() => Math.min(loadPercent(), 100));
-
     const handleMouseEnter = (e: MouseEvent) => {
         const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
         setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top });
@@ -70,15 +59,6 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
                             style={{ width: `${Math.min(props.usage, 100)}%` }}
                         />
 
-                        {/* Load Average Marker */}
-                        <Show when={props.loadAverage !== undefined && props.cores}>
-                            <div
-                                class={`absolute top-0 bottom-0 w-[2px] z-10 transition-all duration-300 ${isOverloaded() ? 'bg-purple-600 dark:bg-purple-400 shadow-[0_0_4px_rgba(147,51,234,0.8)]' : 'bg-gray-800 dark:bg-gray-200 opacity-60'
-                                    }`}
-                                style={{ left: `${markerPosition()}%` }}
-                            />
-                        </Show>
-
                         {/* Label */}
                         <span class="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-gray-700 dark:text-gray-100 leading-none pointer-events-none">
                             {formatPercent(props.usage)}
@@ -117,19 +97,13 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
                                         </span>
                                     </div>
 
-                                    <Show when={props.loadAverage !== undefined && props.cores}>
+                                    <Show when={props.loadAverage !== undefined}>
                                         <div class="flex justify-between gap-3 py-0.5">
                                             <span class="text-gray-400">Load (1m)</span>
-                                            <span class={`font-medium ${isOverloaded() ? 'text-purple-400' : 'text-gray-200'}`}>
+                                            <span class="font-medium text-gray-200">
                                                 {props.loadAverage?.toFixed(2)}
                                             </span>
                                         </div>
-                                        <div class="flex justify-between gap-3 py-0.5">
-                                            <span class="text-gray-400">Capacity</span>
-                                            <span class={`font-medium ${isOverloaded() ? 'text-purple-400' : 'text-gray-200'}`}>
-                                                {loadPercent().toFixed(0)}% of {props.cores} cores
-                                            </span>
-                                        </div>
                                     </Show>
                                 </div>
                             </div>
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index d3bdb4c21..94dd29a31 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1248,7 +1248,9 @@ const DockerContainerRow: Component<{
         return (
           <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 overflow-hidden whitespace-nowrap">
             <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
-              {restarts()}
+              <span class={restarts() > 5 ? 'text-red-600 dark:text-red-400 font-medium' : ''}>
+                {restarts()}
+              </span>
               <span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span>
             </Show>
           </div>