c4a48491e2
- Add core proxy API infrastructure (api-node.ts) with remote node communication - Create NodeContext for centralized node state management - Implement useNodeProxy hook for node operations (metrics, events, health) - Implement useRemoteNodeData hook with 10-second polling for live metrics - Implement useRemoteNodeEvents hook for real-time SSE event subscription - Add NodeStatusIndicator component with animated status indicators - Add comprehensive tests for all new hooks and components - Update dashboard styles for node status visualization
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
/**
|
|
* NodeStatusIndicator - displays the connection status of the currently viewed node.
|
|
* Shows a green/red/yellow dot and optional text based on node state.
|
|
*/
|
|
|
|
import type { NodeConfig } from "@fusion/core";
|
|
|
|
export interface NodeStatusIndicatorProps {
|
|
/** The node to display, or null for local node */
|
|
node: NodeConfig | null;
|
|
/** Whether to show additional details (node name, type, status text) */
|
|
showDetails?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Get display configuration for a node status
|
|
*/
|
|
function getStatusDisplay(status: NodeConfig["status"]): {
|
|
label: string;
|
|
dotClass: string;
|
|
} {
|
|
switch (status) {
|
|
case "online":
|
|
return { label: "Online", dotClass: "node-status-indicator__dot--online" };
|
|
case "offline":
|
|
return { label: "Offline", dotClass: "node-status-indicator__dot--offline" };
|
|
case "connecting":
|
|
return { label: "Connecting", dotClass: "node-status-indicator__dot--connecting" };
|
|
case "error":
|
|
return { label: "Error", dotClass: "node-status-indicator__dot--error" };
|
|
default:
|
|
return { label: "Unknown", dotClass: "node-status-indicator__dot--offline" };
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Status indicator component for nodes.
|
|
* Shows connection status with a colored dot and optional details.
|
|
*/
|
|
export function NodeStatusIndicator({ node, showDetails = false }: NodeStatusIndicatorProps) {
|
|
// Local or null node - show "Local" badge
|
|
if (!node || node.type === "local") {
|
|
return (
|
|
<div className="node-status-indicator node-status-indicator--local">
|
|
<span className="node-status-indicator__label">Local</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Remote node - show status with dot and optional details
|
|
const { label: statusLabel, dotClass } = getStatusDisplay(node.status);
|
|
const isConnecting = node.status === "connecting";
|
|
|
|
return (
|
|
<div className="node-status-indicator node-status-indicator--remote">
|
|
<span className={`node-status-indicator__dot ${dotClass}`}>
|
|
{isConnecting && <span className="node-status-indicator__spinner" />}
|
|
</span>
|
|
<span className="node-status-indicator__name">{node.name}</span>
|
|
{showDetails && (
|
|
<span className="node-status-indicator__details">
|
|
{node.type} · {statusLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|