vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-19 16:27:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Remove CPU capacity marker and highlight high container restarts

Browse source 
- 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:
rcourtman 2025-11-29 22:37:17 +00:00
parent 97d3f30a7f
commit eff4ac0d21
2 changed files with 5 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
View file

@ -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>

4
frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
View file

@ -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>