From 9925a0d78f8de7d654f7e64cffd94c04b55f9610 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Thu, 23 Oct 2025 22:38:44 +0000
Subject: [PATCH] refactor: use semantic metric types instead of conditional
 logic in HostsOverview

Changed MetricBar type prop from conditional (value > 80 ? 'danger' : 'primary')
to semantic types ('cpu', 'memory', 'disk') for better maintainability and
consistency with the component's design system.

This allows MetricBar to handle threshold logic internally based on metric
type, rather than duplicating threshold conditions at each call site.
---
 frontend-modern/src/components/Hosts/HostsOverview.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/Hosts/HostsOverview.tsx b/frontend-modern/src/components/Hosts/HostsOverview.tsx
index fac40ab..6559aa3 100644
--- a/frontend-modern/src/components/Hosts/HostsOverview.tsx
+++ b/frontend-modern/src/components/Hosts/HostsOverview.tsx
@@ -261,7 +261,7 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                                           <MetricBar
                                             label={`${cpuPercent().toFixed(1)}%`}
                                             value={cpuPercent()}
-                                            type={cpuPercent() > 80 ? 'danger' : 'primary'}
+                                            type="cpu"
                                           />
                                         </Show>
                                       </td>
@@ -273,7 +273,7 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                                           <MetricBar
                                             label={`${memUsed()} / ${memTotal()}`}
                                             value={memPercent()}
-                                            type={memPercent() > 80 ? 'danger' : 'primary'}
+                                            type="memory"
                                           />
                                         </Show>
                                       </td>
@@ -379,7 +379,7 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                                                               <MetricBar
                                                                 value={diskPercent()}
                                                                 label={`${diskPercent().toFixed(1)}%`}
-                                                                type={diskPercent() > 80 ? 'danger' : 'primary'}
+                                                                type="disk"
                                                               />
                                                             </div>
                                                           </Show>