improve ui

ui/src/services/store.ts

@@ -0,0 +1,12 @@
+import type { StatusMessage } from "@/services/types";
+import { atom } from "nanostores";
+
+const store = atom<StatusMessage | null>(null);
+
+export function getLastMessage(): StatusMessage | null {
+    return store.get();
+}
+
+export function setLastMessage(message: StatusMessage) {
+    store.set(message);
+}

ui/src/services/utils.ts

@@ -6,7 +6,7 @@ export function isAgentOnline(data: UptimeMessage): boolean {
     return timeDiff < 10000;
 }
 
-export const formatRelativeTime = (timestamp: string): string => {
+export function formatRelativeTime(timestamp: string): string {
     const now = new Date();
     const past = new Date(timestamp);
     const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000);
@@ -25,4 +25,26 @@ export const formatRelativeTime = (timestamp: string): string => {
         const days = Math.floor(diffInSeconds / 86400);
         return `${days}d ago`;
     }
-};
+}
+
+export function formatBytes(bytes: number | undefined): string {
+    if (!bytes || bytes === 0) return "0 B";
+
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export function calcPercentage(
+    value: number | undefined,
+    total: number | undefined,
+): number {
+    if (value === undefined || total === undefined) return 0;
+    return (value / total) * 100;
+}
+
+export function formatPercentage(val: number | undefined) {
+    return `${(val ?? 0).toFixed(2)}%`;
+}

ui/src/services/websocket.ts

@@ -0,0 +1,17 @@
+type Callbacks = {
+    onMessage: (message: string) => void;
+    onError?: (error: Event) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+
+export function initializeConnection(agent: string, callbacks: Callbacks) {
+    const ws = new WebSocket(`ws://localhost:3000/ws/${agent}`);
+
+    ws.onopen = () => callbacks.onOpen?.();
+    ws.onmessage = (event) => callbacks.onMessage(event.data);
+    ws.onerror = (error) => callbacks.onError?.(error);
+    ws.onclose = () => callbacks.onClose?.();
+
+    return () => ws.close();
+}