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();
+}
+*/