finish ui design

ui/src/services/data_service.ts

@@ -0,0 +1,82 @@
+import type { StatusMessage } from "@/services/types";
+import { breakdownMetrics } from "@/services/utils";
+
+type HistoricalDataPoint = {
+    timestamp: string;
+    value: number;
+};
+
+/*
+type HistoricalMetrics = {
+    cpu: HistoricalDataPoint[];
+    cpu_user: HistoricalDataPoint[];
+    cpu_system: HistoricalDataPoint[];
+    cpu_idle: HistoricalDataPoint[];
+    cpu_steal: HistoricalDataPoint[];
+    cpu_iowait: HistoricalDataPoint[];
+    memory: HistoricalDataPoint[];
+    swap: HistoricalDataPoint[];
+    network_up: HistoricalDataPoint[];
+    network_down: HistoricalDataPoint[];
+};
+*/
+
+//export type TimePeriod = "realtime" | "hour" | "day" | "week";
+
+const realtimeData = new Map<string, HistoricalDataPoint[]>();
+const maxRealtimePoints = 50;
+
+function addDataPoint(metric: string, timestamp: string, value: number) {
+    if (!realtimeData.has(metric)) {
+        realtimeData.set(metric, []);
+    }
+
+    const data = realtimeData.get(metric)!;
+    data.push({ timestamp, value });
+
+    if (data.length > maxRealtimePoints) {
+        data.shift();
+    }
+}
+
+export const addRealtimeData = (data: StatusMessage): void => {
+    const timestamp = data.timestamp;
+
+    const {
+        cpuUsage,
+        cpuUser,
+        cpuSystem,
+        cpuIdle,
+        cpuSteal,
+        cpuIowait,
+        memoryUsage,
+        swapUsage,
+        networkUp,
+        networkDown,
+    } = breakdownMetrics(data.metrics);
+
+    addDataPoint("cpu", timestamp, cpuUsage);
+    addDataPoint("cpu_user", timestamp, cpuUser);
+    addDataPoint("cpu_system", timestamp, cpuSystem);
+    addDataPoint("cpu_idle", timestamp, cpuIdle);
+    addDataPoint("cpu_steal", timestamp, cpuSteal);
+    addDataPoint("cpu_iowait", timestamp, cpuIowait);
+    addDataPoint("memory", timestamp, memoryUsage);
+    addDataPoint("swap", timestamp, swapUsage);
+    addDataPoint("network_up", timestamp, networkUp);
+    addDataPoint("network_down", timestamp, networkDown);
+};
+
+export function getRealtimeData(metric: string): HistoricalDataPoint[] {
+    return realtimeData.get(metric) || [];
+}
+
+/*
+export async function getHistoricalData(period: TimePeriod): Promise<HistoricalMetrics> {
+    return ...todo
+}
+
+function clearRealtimeData() {
+    realtimeData.clear();
+}
+*/

ui/src/services/utils.ts

@@ -1,4 +1,4 @@
-import { UptimeMessage } from "@/services/types";
+import type { Metrics, UptimeMessage } from "@/services/types";
 
 export function isAgentOnline(data: UptimeMessage): boolean {
     const timeDiff = new Date().getTime() - new Date(data.last_seen).getTime();
@@ -6,6 +6,24 @@ export function isAgentOnline(data: UptimeMessage): boolean {
     return timeDiff < 10000;
 }
 
+export function formatTimestamp(timestamp: string) {
+    return new Date(timestamp).toLocaleTimeString();
+}
+
+export const formatUptime = (seconds: number): string => {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+
+    if (days > 0) {
+        return `${days}d ${hours}h`;
+    } else if (hours > 0) {
+        return `${hours}h ${minutes}m`;
+    } else {
+        return `${minutes}m`;
+    }
+};
+
 export function formatRelativeTime(timestamp: string): string {
     const now = new Date();
     const past = new Date(timestamp);
@@ -48,3 +66,54 @@ export function calcPercentage(
 export function formatPercentage(val: number | undefined) {
     return `${(val ?? 0).toFixed(2)}%`;
 }
+
+export type BrokedownMetrics = {
+    cpuThreads: number;
+    cpuUsage: number;
+    cpuUser: number;
+    cpuSystem: number;
+    cpuIdle: number;
+    cpuSteal: number;
+    cpuIowait: number;
+    memoryUsage: number;
+    memoryUsed: number;
+    memoryTotal: number;
+    swapUsage: number;
+    diskUsage: number;
+    diskFree: number;
+    diskTotal: number;
+    networkUp: number;
+    networkDown: number;
+};
+
+export function breakdownMetrics(
+    metrics: Metrics | undefined,
+): BrokedownMetrics {
+    return {
+        cpuThreads: metrics?.cpu.threads ?? 0,
+        cpuUsage: metrics?.cpu.usage ?? 0,
+        cpuUser: metrics?.cpu.breakdown.user ?? 0,
+        cpuSystem: metrics?.cpu.breakdown.system ?? 0,
+        cpuIdle: metrics?.cpu.breakdown.idle ?? 0,
+        cpuSteal: metrics?.cpu.breakdown.steal ?? 0,
+        cpuIowait: metrics?.cpu.breakdown.iowait ?? 0,
+        memoryUsage: calcPercentage(
+            metrics?.memory.used,
+            metrics?.memory.total,
+        ),
+        memoryUsed: metrics?.memory.used ?? 0,
+        memoryTotal: metrics?.memory.total ?? 0,
+        swapUsage: calcPercentage(
+            metrics?.memory.swap_used,
+            metrics?.memory.swap_total,
+        ),
+        diskUsage: calcPercentage(
+            (metrics?.disk.total ?? 0) - (metrics?.disk.free ?? 0),
+            metrics?.disk.total,
+        ),
+        diskFree: metrics?.disk.free ?? 0,
+        diskTotal: metrics?.disk.total ?? 0,
+        networkUp: (metrics?.network.up ?? 0) / 1024,
+        networkDown: (metrics?.network.down ?? 0) / 1024,
+    };
+}