From 6225a4584849da4cd512f3ebae73632ec472600e Mon Sep 17 00:00:00 2001
From: csehviktor <csehviktor05@gmail.com>
Date: Thu, 10 Jul 2025 20:50:19 +0200
Subject: [PATCH] fix network units

---
 ui/src/hooks/useChartData.tsx | 4 ++--
 ui/src/pages/agent.tsx        | 7 ++++---
 ui/src/pages/home.tsx         | 1 +
 ui/src/services/utils.ts      | 4 ++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/src/hooks/useChartData.tsx b/ui/src/hooks/useChartData.tsx
index 54536c7..5d330bd 100644
--- a/ui/src/hooks/useChartData.tsx
+++ b/ui/src/hooks/useChartData.tsx
@@ -102,12 +102,12 @@ export function useChartData(data: StatusMessage | null): ChartDataReturns {
             labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
             datasets: [
                 {
-                    label: "Upload (B/s)",
+                    label: "Upload (bps)",
                     data: realtimeData.map(({ metrics }) => metrics.network.up),
                     color: "#ef4444",
                 },
                 {
-                    label: "Download (B/s)",
+                    label: "Download (bps)",
                     data: realtimeData.map(
                         ({ metrics }) => metrics.network.down,
                     ),
diff --git a/ui/src/pages/agent.tsx b/ui/src/pages/agent.tsx
index 5f3eccc..09a3d6c 100644
--- a/ui/src/pages/agent.tsx
+++ b/ui/src/pages/agent.tsx
@@ -11,9 +11,10 @@ import { SysinfoCard } from "@/components/SysinfoCard";
 import { useChartData } from "@/hooks/useChartData";
 import { getLastMessage, setLastMessage } from "@/services/store";
 import {
-    formatBytes,
+    formatBits,
     formatPercentage,
     calcPercentage,
+    formatBytes,
 } from "@/services/utils";
 import { initializeConnection } from "@/services/websocket";
 import { useEffect, useState } from "react";
@@ -127,9 +128,9 @@ export function AgentPage() {
                         <MetricCard
                             props={{
                                 title: "NETWORK ACTIVITY",
-                                value: formatBytes(networkUsage),
+                                value: formatBits(networkUsage),
                                 status: "nil",
-                                subtitle: `↑ ${formatBytes(networkUp)}/s ↓ ${formatBytes(networkDown)}/s`,
+                                subtitle: `↑ ${formatBits(networkUp)}/s ↓ ${formatBits(networkDown)}/s`,
                             }}
                         >
                             <DonutChart
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
index d1aed7b..c84ddb6 100644
--- a/ui/src/pages/home.tsx
+++ b/ui/src/pages/home.tsx
@@ -84,6 +84,7 @@ export function HomePage() {
                                     key={index}
                                     data={agent}
                                     onClick={() =>
+                                        isAgentOnline(agent) &&
                                         navigate(`/agents/${agent.agent}`)
                                     }
                                 />
diff --git a/ui/src/services/utils.ts b/ui/src/services/utils.ts
index 1fa3877..7026e26 100644
--- a/ui/src/services/utils.ts
+++ b/ui/src/services/utils.ts
@@ -55,6 +55,10 @@ export function formatBytes(bytes: number | undefined): string {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
 }
 
+export function formatBits(bits: number | undefined): string {
+    return formatBytes((bits ?? 0) / 8);
+}
+
 export function calcPercentage(
     value: number | undefined,
     total: number | undefined,