adding kill button

client/src/clusterStatus/ClusterStatus.tsx

@@ -1,16 +1,21 @@
 import { useEffect, useState } from "react";
 import { useWebSocketContext } from "../contexts/useWebSocketContext";
+import type { Channel } from "phoenix";
 
 export const ClusterStatus = () => {
   const { socket, isConnected } = useWebSocketContext();
   const [channelStatus, setChannelStatus] = useState<string>("waiting");
+  const [channel, setChannel] = useState<Channel | undefined>();
+  const [clusterStatus, setClusterStatus] = useState<
+    { otherNodes: string[]; connectedNode: string } | undefined
+  >();
 
   useEffect(() => {
     if (!socket || !isConnected) {
       return;
     }
 
-    const channelName = "clusterstatus";
+    const channelName = "cluster_status";
     console.log(`Joining channel: ${channelName}`);
     const newChannel = socket.channel(channelName, {});
 
@@ -18,6 +23,8 @@ export const ClusterStatus = () => {
       .join()
       .receive("ok", () => {
         setChannelStatus("connected");
+        setChannel(newChannel);
+        newChannel.push("get_nodes", {});
       })
       .receive("error", (resp: unknown) => {
         console.log(`Failed to join channel ${channelName}:`, resp);
@@ -27,17 +34,66 @@ export const ClusterStatus = () => {
         setChannelStatus("timeout");
       });
 
+    newChannel.on(
+      "node_list",
+      (payload: { other_nodes: string[]; connected_node: string }) => {
+        console.log("Received node list:", payload.other_nodes);
+        setClusterStatus({
+          otherNodes: payload.other_nodes,
+          connectedNode: payload.connected_node,
+        });
+      },
+    );
+
     return () => {
       console.log(`Leaving channel: ${channelName}`);
       newChannel.leave();
+      setChannel(undefined);
       setChannelStatus("waiting");
     };
   }, [socket, isConnected]);
 
+  const allNodes = clusterStatus
+    ? [...clusterStatus.otherNodes, clusterStatus.connectedNode].sort()
+    : [];
+
   return (
     <div>
       <div>ClusterStatus</div>
       <div>Channel: {channelStatus}</div>
+      <div>
+        {allNodes.length === 0 ? (
+          <span className="text-navy-300">No nodes available</span>
+        ) : (
+          <>
+            {allNodes.map((node) => {
+              const isConnected = node === clusterStatus?.connectedNode;
+              return (
+                <div
+                  key={node}
+                  className={
+                    isConnected
+                      ? "text-navy-100 font-semibold"
+                      : "text-navy-400"
+                  }
+                >
+                  {node}
+                  {isConnected && (
+                    <span className="ml-2 text-xs text-navy-300">(you)</span>
+                  )}
+                  <button
+                    onClick={() => {
+                      channel?.push("kill_node", { node });
+                    }}
+                  >
+                    kill
+                  </button>
+                </div>
+              );
+            })}
+          </>
+        )}
+      </div>
     </div>
   );
-}
+};