100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
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 = "cluster_status";
|
|
console.log(`Joining channel: ${channelName}`);
|
|
const newChannel = socket.channel(channelName, {});
|
|
|
|
newChannel
|
|
.join()
|
|
.receive("ok", () => {
|
|
setChannelStatus("connected");
|
|
setChannel(newChannel);
|
|
newChannel.push("get_nodes", {});
|
|
})
|
|
.receive("error", (resp: unknown) => {
|
|
console.log(`Failed to join channel ${channelName}:`, resp);
|
|
setChannelStatus("join failed");
|
|
})
|
|
.receive("timeout", () => {
|
|
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>
|
|
);
|
|
};
|