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)
This commit is contained in:
parent
cf17d327f1
commit
949d54905c
2 changed files with 5 additions and 29 deletions
|
|
@ -18,14 +18,6 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
|
||||||
const [tooltipPos, setTooltipPos] = createSignal({ x: 0, y: 0 });
|
const [tooltipPos, setTooltipPos] = createSignal({ x: 0, y: 0 });
|
||||||
let containerRef: HTMLDivElement | undefined;
|
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
|
// Bar color based on usage
|
||||||
const barColor = createMemo(() => {
|
const barColor = createMemo(() => {
|
||||||
if (props.usage >= 90) return 'bg-red-500/60 dark:bg-red-500/50';
|
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';
|
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 handleMouseEnter = (e: MouseEvent) => {
|
||||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||||
setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top });
|
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)}%` }}
|
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 */}
|
{/* 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">
|
<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)}
|
{formatPercent(props.usage)}
|
||||||
|
|
@ -117,19 +97,13 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={props.loadAverage !== undefined && props.cores}>
|
<Show when={props.loadAverage !== undefined}>
|
||||||
<div class="flex justify-between gap-3 py-0.5">
|
<div class="flex justify-between gap-3 py-0.5">
|
||||||
<span class="text-gray-400">Load (1m)</span>
|
<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)}
|
{props.loadAverage?.toFixed(2)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1248,7 +1248,9 @@ const DockerContainerRow: Component<{
|
||||||
return (
|
return (
|
||||||
<div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 overflow-hidden whitespace-nowrap">
|
<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>}>
|
<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>
|
<span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue