cleanup redundant code

ui/src/pages/agent.tsx

@@ -13,7 +13,7 @@ import { getLastMessage, setLastMessage } from "@/services/store";
 import {
     formatBytes,
     formatPercentage,
-    breakdownMetrics,
+    calcPercentage,
 } from "@/services/utils";
 import { initializeConnection } from "@/services/websocket";
 import { useEffect, useState } from "react";
@@ -54,19 +54,18 @@ export function AgentPage() {
         return "critical";
     };
 
-    const {
-        cpuThreads,
-        cpuUsage,
-        memoryUsage,
-        memoryUsed,
-        memoryTotal,
-        diskUsage,
-        diskFree,
-        diskTotal,
-        networkUp,
-        networkDown,
-    } = breakdownMetrics(message?.metrics);
+    const cpuUsage = metrics?.cpu.usage ?? 0;
 
+    const memoryUsed = metrics?.memory.used ?? 0;
+    const memoryTotal = metrics?.memory.total ?? 0;
+    const memoryUsage = calcPercentage(memoryUsed, memoryTotal);
+
+    const diskFree = (metrics?.disk.total ?? 0) - (metrics?.disk.free ?? 0);
+    const diskTotal = metrics?.disk.total ?? 0;
+    const diskUsage = calcPercentage(diskFree, diskTotal);
+
+    const networkUp = metrics?.network.up ?? 0;
+    const networkDown = metrics?.network.down ?? 0;
     const networkUsage = networkUp + networkDown;
 
     return (
@@ -92,7 +91,7 @@ export function AgentPage() {
                                 title: "CPU USAGE",
                                 value: formatPercentage(cpuUsage),
                                 status: getMetricStatus(cpuUsage),
-                                subtitle: `${cpuThreads} threads`,
+                                subtitle: `${metrics?.cpu.threads} threads`,
                             }}
                         >
                             <DonutChart