diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx index f3bc695f5..bfaa3fbbf 100644 --- a/frontend-modern/src/components/Dashboard/GuestRow.tsx +++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx @@ -15,6 +15,18 @@ import { ResponsiveMetricCell, useGridTemplate } from '@/components/shared/respo type Guest = VM | Container; +/** + * Get color class for I/O values based on throughput (bytes/sec) + * Higher throughput = more prominent color to draw attention + */ +function getIOColorClass(bytesPerSec: number): string { + const mbps = bytesPerSec / (1024 * 1024); + if (mbps < 1) return 'text-gray-400 dark:text-gray-500'; + if (mbps < 10) return 'text-gray-600 dark:text-gray-300'; + if (mbps < 50) return 'text-gray-700 dark:text-gray-200 font-medium'; + return 'text-gray-900 dark:text-white font-semibold'; +} + // Global state for currently expanded drawer (only one drawer open at a time) const [currentlyExpandedGuestId, setCurrentlyExpandedGuestId] = createSignal(null); // Global editing state - use a signal so all components react @@ -645,7 +657,7 @@ export function GuestRow(props: GuestRowProps) { return (
-}> - {formatSpeed(props.guest.diskRead)} + {formatSpeed(props.guest.diskRead)}
); @@ -654,7 +666,7 @@ export function GuestRow(props: GuestRowProps) { return (
-}> - {formatSpeed(props.guest.diskWrite)} + {formatSpeed(props.guest.diskWrite)}
); @@ -663,7 +675,7 @@ export function GuestRow(props: GuestRowProps) { return (
-}> - {formatSpeed(props.guest.networkIn)} + {formatSpeed(props.guest.networkIn)}
); @@ -672,7 +684,7 @@ export function GuestRow(props: GuestRowProps) { return (
-}> - {formatSpeed(props.guest.networkOut)} + {formatSpeed(props.guest.networkOut)}
);