feat(web): update machine status view

web/src/components/MachinesWS.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { Badge } from "@/components/ui/badge";
 import type { getMachines } from "@/server/curdMachine";
+import { Check, CircleOff, SatelliteDish } from "lucide-react";
 import React, { useEffect } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { create } from "zustand";
@@ -36,11 +38,13 @@ export function MachinesWSMain(props: {
   machines: Awaited<ReturnType<typeof getMachines>>;
 }) {
   return (
-    <div className="flex flex-col gap-2 mt-6">
+    <div className="flex flex-col gap-2 mt-4">
       Machine Status
-      {props.machines.map((x) => (
-        <MachineWS key={x.id} machine={x} />
-      ))}
+      <div className="flex flex-wrap gap-2">
+        {props.machines.map((x) => (
+          <MachineWS key={x.id} machine={x} />
+        ))}
+      </div>
     </div>
   );
 }
@@ -55,17 +59,19 @@ function MachineWS({
   const { lastMessage, readyState } = useWebSocket(
     `${wsEndpoint}/comfyui-deploy/ws`,
     {
-      shouldReconnect: ()=> true,
+      shouldReconnect: () => true,
       reconnectAttempts: 20,
       reconnectInterval: 1000,
     }
   );
 
   const connectionStatus = {
-    [ReadyState.CONNECTING]: "Connecting",
-    [ReadyState.OPEN]: "Open",
-    [ReadyState.CLOSING]: "Closing",
-    [ReadyState.CLOSED]: "Closed",
+    [ReadyState.CONNECTING]: (
+      <SatelliteDish size={14} className="text-orange-500" />
+    ),
+    [ReadyState.OPEN]: <Check size={14} className="text-green-500" />,
+    [ReadyState.CLOSING]: <CircleOff size={14} className="text-orange-500" />,
+    [ReadyState.CLOSED]: <CircleOff size={14} className="text-red-500" />,
     [ReadyState.UNINSTANTIATED]: "Uninstantiated",
   }[readyState];
 
@@ -81,8 +87,8 @@ function MachineWS({
   }, [lastMessage]);
 
   return (
-    <div className="text-sm">
-      {machine.name} - {connectionStatus}
-    </div>
+    <Badge className="text-sm flex gap-2 font-normal" variant="outline">
+      {machine.name} {connectionStatus}
+    </Badge>
   );
 }