668 lines
25 KiB
TypeScript
668 lines
25 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react';
|
|
import { Card } from './ui/card';
|
|
import { Button } from './ui/button';
|
|
import { Badge } from './ui/badge';
|
|
import { Alert } from './ui/alert';
|
|
import { Input } from './ui/input';
|
|
import { Cpu, HardDrive, Network, Monitor, CheckCircle, AlertCircle, BookOpen, ExternalLink, Loader2 } from 'lucide-react';
|
|
import { useInstanceContext } from '../hooks/useInstanceContext';
|
|
import { useNodes, useDiscoveryStatus } from '../hooks/useNodes';
|
|
import { useCluster } from '../hooks/useCluster';
|
|
import { useClusterStatus } from '../services/api/hooks/useCluster';
|
|
import { BootstrapModal } from './cluster/BootstrapModal';
|
|
import { NodeStatusBadge } from './nodes/NodeStatusBadge';
|
|
import { NodeFormDrawer } from './nodes/NodeFormDrawer';
|
|
import type { NodeFormData } from './nodes/NodeForm';
|
|
import type { Node, HardwareInfo, DiscoveredNode } from '../services/api/types';
|
|
|
|
export function ClusterNodesComponent() {
|
|
const { currentInstance } = useInstanceContext();
|
|
const {
|
|
nodes,
|
|
isLoading,
|
|
error,
|
|
addNode,
|
|
addError,
|
|
deleteNode,
|
|
deleteError,
|
|
discover,
|
|
isDiscovering,
|
|
discoverError: discoverMutationError,
|
|
getHardware,
|
|
isGettingHardware,
|
|
getHardwareError,
|
|
cancelDiscovery,
|
|
isCancellingDiscovery,
|
|
updateNode,
|
|
applyNode,
|
|
isApplying,
|
|
refetch
|
|
} = useNodes(currentInstance);
|
|
|
|
const {
|
|
data: discoveryStatus
|
|
} = useDiscoveryStatus(currentInstance);
|
|
|
|
const {
|
|
status: clusterStatus
|
|
} = useCluster(currentInstance);
|
|
|
|
const { data: clusterStatusData } = useClusterStatus(currentInstance || '');
|
|
|
|
const [addNodeIp, setAddNodeIp] = useState('');
|
|
const [discoverError, setDiscoverError] = useState<string | null>(null);
|
|
const [detectError, setDetectError] = useState<string | null>(null);
|
|
const [discoverSuccess, setDiscoverSuccess] = useState<string | null>(null);
|
|
const [showBootstrapModal, setShowBootstrapModal] = useState(false);
|
|
const [bootstrapNode, setBootstrapNode] = useState<{ name: string; ip: string } | null>(null);
|
|
const [drawerState, setDrawerState] = useState<{
|
|
open: boolean;
|
|
mode: 'add' | 'configure';
|
|
node?: Node;
|
|
detection?: HardwareInfo;
|
|
}>({
|
|
open: false,
|
|
mode: 'add',
|
|
});
|
|
const [deletingNodeHostname, setDeletingNodeHostname] = useState<string | null>(null);
|
|
|
|
const closeDrawer = () => setDrawerState({ ...drawerState, open: false });
|
|
|
|
// Sync mutation errors to local state for display
|
|
useEffect(() => {
|
|
if (discoverMutationError) {
|
|
const errorMsg = (discoverMutationError as any)?.message || 'Failed to discover nodes';
|
|
setDiscoverError(errorMsg);
|
|
}
|
|
}, [discoverMutationError]);
|
|
|
|
useEffect(() => {
|
|
if (getHardwareError) {
|
|
const errorMsg = (getHardwareError as any)?.message || 'Failed to detect hardware';
|
|
setDetectError(errorMsg);
|
|
}
|
|
}, [getHardwareError]);
|
|
|
|
// Track previous discovery status to detect completion
|
|
const [prevDiscoveryActive, setPrevDiscoveryActive] = useState<boolean | null>(null);
|
|
|
|
// Handle discovery completion (when active changes from true to false)
|
|
useEffect(() => {
|
|
const isActive = discoveryStatus?.active ?? false;
|
|
|
|
// Discovery just completed (was active, now inactive)
|
|
if (prevDiscoveryActive === true && isActive === false && discoveryStatus) {
|
|
const count = discoveryStatus.nodes_found?.length || 0;
|
|
if (count === 0) {
|
|
setDiscoverSuccess(`Discovery complete! No nodes were found.`);
|
|
} else {
|
|
setDiscoverSuccess(`Discovery complete! Found ${count} node${count !== 1 ? 's' : ''}.`);
|
|
}
|
|
setDiscoverError(null);
|
|
refetch();
|
|
|
|
const timer = setTimeout(() => setDiscoverSuccess(null), 5000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
|
|
// Update previous state
|
|
setPrevDiscoveryActive(isActive);
|
|
}, [discoveryStatus, prevDiscoveryActive, refetch]);
|
|
|
|
const getRoleIcon = (role: string) => {
|
|
return role === 'controlplane' ? (
|
|
<Cpu className="h-4 w-4" />
|
|
) : (
|
|
<HardDrive className="h-4 w-4" />
|
|
);
|
|
};
|
|
|
|
const handleAddFromDiscovery = async (discovered: DiscoveredNode) => {
|
|
// Fetch full hardware details for the discovered node
|
|
try {
|
|
const hardware = await getHardware(discovered.ip);
|
|
setDrawerState({
|
|
open: true,
|
|
mode: 'add',
|
|
detection: hardware,
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to detect hardware:', err);
|
|
setDetectError((err as any)?.message || 'Failed to detect hardware');
|
|
}
|
|
};
|
|
|
|
const handleAddNode = async () => {
|
|
if (!addNodeIp) return;
|
|
|
|
try {
|
|
const hardware = await getHardware(addNodeIp);
|
|
setDrawerState({
|
|
open: true,
|
|
mode: 'add',
|
|
detection: hardware,
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to detect hardware:', err);
|
|
setDetectError((err as any)?.message || 'Failed to detect hardware');
|
|
}
|
|
};
|
|
|
|
const handleConfigureNode = async (node: Node) => {
|
|
// Try to detect hardware if target_ip is available
|
|
if (node.target_ip) {
|
|
try {
|
|
const hardware = await getHardware(node.target_ip);
|
|
setDrawerState({
|
|
open: true,
|
|
mode: 'configure',
|
|
node,
|
|
detection: hardware,
|
|
});
|
|
return;
|
|
} catch (err) {
|
|
console.error('Failed to detect hardware:', err);
|
|
// Fall through to open drawer without detection data
|
|
}
|
|
}
|
|
|
|
// Open drawer without detection data (either no target_ip or detection failed)
|
|
setDrawerState({
|
|
open: true,
|
|
mode: 'configure',
|
|
node,
|
|
});
|
|
};
|
|
|
|
const handleAddSubmit = async (data: NodeFormData) => {
|
|
await addNode({
|
|
hostname: data.hostname,
|
|
role: data.role,
|
|
disk: data.disk,
|
|
target_ip: data.targetIp,
|
|
interface: data.interface,
|
|
schematic_id: data.schematicId,
|
|
maintenance: data.maintenance,
|
|
});
|
|
closeDrawer();
|
|
setAddNodeIp('');
|
|
};
|
|
|
|
const handleConfigureSubmit = async (data: NodeFormData) => {
|
|
if (!drawerState.node) return;
|
|
|
|
await updateNode({
|
|
nodeName: drawerState.node.hostname,
|
|
updates: {
|
|
role: data.role,
|
|
target_ip: data.targetIp,
|
|
interface: data.interface,
|
|
schematic_id: data.schematicId,
|
|
maintenance: data.maintenance,
|
|
},
|
|
});
|
|
closeDrawer();
|
|
};
|
|
|
|
const handleApply = async (data: NodeFormData) => {
|
|
if (!drawerState.node) return;
|
|
|
|
await handleConfigureSubmit(data);
|
|
await applyNode(drawerState.node.hostname);
|
|
};
|
|
|
|
const handleDeleteNode = async (hostname: string) => {
|
|
if (!currentInstance) return;
|
|
if (confirm(`Reset and remove node ${hostname}?\n\nThis will reset the node and remove it from the cluster. The node will reboot to maintenance mode and can be reconfigured.`)) {
|
|
setDeletingNodeHostname(hostname);
|
|
try {
|
|
await deleteNode(hostname);
|
|
} finally {
|
|
setDeletingNodeHostname(null);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDiscover = () => {
|
|
setDiscoverError(null);
|
|
setDiscoverSuccess(null);
|
|
// Always use auto-detect to scan all local networks
|
|
discover(undefined);
|
|
};
|
|
|
|
|
|
// Derive status from backend state flags for each node
|
|
const assignedNodes = nodes.map(node => {
|
|
// Get runtime status from cluster status
|
|
const runtimeStatus = clusterStatusData?.node_statuses?.[node.hostname];
|
|
|
|
let status = 'pending';
|
|
if (node.maintenance) {
|
|
status = 'provisioning';
|
|
} else if (node.configured && !node.applied) {
|
|
status = 'connecting';
|
|
} else if (node.applied) {
|
|
status = 'ready';
|
|
}
|
|
|
|
return {
|
|
...node,
|
|
status,
|
|
isReachable: runtimeStatus?.ready,
|
|
inKubernetes: runtimeStatus?.ready, // Whether in cluster (from backend 'ready' field)
|
|
kubernetesReady: runtimeStatus?.kubernetes_ready, // Whether K8s Ready condition is true
|
|
};
|
|
});
|
|
|
|
// Check if cluster needs bootstrap
|
|
const needsBootstrap = useMemo(() => {
|
|
// Find first ready control plane node
|
|
const hasReadyControlPlane = assignedNodes.some(
|
|
n => n.role === 'controlplane' && n.status === 'ready'
|
|
);
|
|
|
|
// Check if cluster is already bootstrapped using cluster status
|
|
// The backend checks for kubeconfig existence and cluster connectivity
|
|
// Status is "not_bootstrapped" when kubeconfig doesn't exist
|
|
// Any other status (ready, degraded, unreachable) means cluster is bootstrapped
|
|
const hasBootstrapped = clusterStatus?.status !== 'not_bootstrapped';
|
|
|
|
return hasReadyControlPlane && !hasBootstrapped;
|
|
}, [assignedNodes, clusterStatus]);
|
|
|
|
const firstReadyControl = useMemo(() => {
|
|
return assignedNodes.find(
|
|
n => n.role === 'controlplane' && n.status === 'ready'
|
|
);
|
|
}, [assignedNodes]);
|
|
|
|
// Show message if no instance is selected
|
|
if (!currentInstance) {
|
|
return (
|
|
<Card className="p-8 text-center">
|
|
<Network className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium mb-2">No Instance Selected</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
Please select or create an instance to manage nodes.
|
|
</p>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Show error state
|
|
if (error) {
|
|
return (
|
|
<Card className="p-8 text-center">
|
|
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium mb-2">Error Loading Nodes</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
{(error as Error)?.message || 'An error occurred'}
|
|
</p>
|
|
<Button onClick={() => window.location.reload()}>Reload Page</Button>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Educational Intro Section */}
|
|
<Card className="p-6 bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-950/20 dark:to-blue-950/20 border-cyan-200 dark:border-cyan-800">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg">
|
|
<BookOpen className="h-6 w-6 text-cyan-600 dark:text-cyan-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-cyan-900 dark:text-cyan-100 mb-2">
|
|
What are Cluster Nodes?
|
|
</h3>
|
|
<p className="text-cyan-800 dark:text-cyan-200 mb-3 leading-relaxed">
|
|
Think of cluster nodes as the "workers" in your personal cloud factory. Each node is a separate computer
|
|
that contributes its processing power, memory, and storage to the overall cluster. Some nodes are "controllers"
|
|
(like managers) that coordinate the work, while others are "workers" that do the heavy lifting.
|
|
</p>
|
|
<p className="text-cyan-700 dark:text-cyan-300 mb-4 text-sm">
|
|
By connecting multiple computers together as nodes, you create a powerful, resilient system where if one
|
|
computer fails, the others can pick up the work. This is how you scale your personal cloud from one machine to many.
|
|
</p>
|
|
<Button variant="outline" size="sm" className="text-cyan-700 border-cyan-300 hover:bg-cyan-100 dark:text-cyan-300 dark:border-cyan-700 dark:hover:bg-cyan-900/20">
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
Learn more about distributed computing
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Bootstrap Alert */}
|
|
{needsBootstrap && firstReadyControl && (
|
|
<Alert variant="info" className="mb-6">
|
|
<CheckCircle className="h-5 w-5" />
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold mb-1">First Control Plane Node Ready!</h3>
|
|
<p className="text-sm text-muted-foreground mb-3">
|
|
Your first control plane node ({firstReadyControl.hostname}) is ready.
|
|
Bootstrap the cluster to initialize etcd and start Kubernetes control plane components.
|
|
</p>
|
|
<Button
|
|
onClick={() => {
|
|
setBootstrapNode({
|
|
name: firstReadyControl.hostname,
|
|
ip: firstReadyControl.target_ip
|
|
});
|
|
setShowBootstrapModal(true);
|
|
}}
|
|
size="sm"
|
|
>
|
|
Bootstrap Cluster
|
|
</Button>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="p-2 bg-primary/10 rounded-lg">
|
|
<Network className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-semibold">Cluster Nodes</h2>
|
|
<p className="text-muted-foreground">
|
|
Connect machines to your wild-cloud
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<Card className="p-8 text-center">
|
|
<Loader2 className="h-12 w-12 text-primary mx-auto mb-4 animate-spin" />
|
|
<p className="text-muted-foreground">Loading nodes...</p>
|
|
</Card>
|
|
) : (
|
|
<>
|
|
{/* Error and Success Alerts */}
|
|
{discoverError && (
|
|
<Alert variant="error" onClose={() => setDiscoverError(null)} className="mb-4">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<div>
|
|
<strong>Discovery Failed</strong>
|
|
<p className="text-sm mt-1">{discoverError}</p>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
{discoverSuccess && (
|
|
<Alert variant="success" onClose={() => setDiscoverSuccess(null)} className="mb-4">
|
|
<CheckCircle className="h-4 w-4" />
|
|
<div>
|
|
<strong>Discovery Successful</strong>
|
|
<p className="text-sm mt-1">{discoverSuccess}</p>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
{detectError && (
|
|
<Alert variant="error" onClose={() => setDetectError(null)} className="mb-4">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<div>
|
|
<strong>Auto-Detect Failed</strong>
|
|
<p className="text-sm mt-1">{detectError}</p>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
|
|
{addError && (
|
|
<Alert variant="error" onClose={() => {}} className="mb-4">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<div>
|
|
<strong>Failed to Add Node</strong>
|
|
<p className="text-sm mt-1">{(addError as any)?.message || 'An error occurred'}</p>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
{deleteError && (
|
|
<Alert variant="error" onClose={() => {}} className="mb-4">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<div>
|
|
<strong>Failed to Remove Node</strong>
|
|
<p className="text-sm mt-1">{(deleteError as any)?.message || 'An error occurred'}</p>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* ADD NODES SECTION - Discovery and manual add combined */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
|
|
Add Nodes to Cluster
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Discover nodes on the network or manually add by IP address
|
|
</p>
|
|
|
|
{/* Discovery button */}
|
|
<div className="flex gap-2 mb-4">
|
|
<Button
|
|
onClick={handleDiscover}
|
|
disabled={isDiscovering || discoveryStatus?.active}
|
|
className="flex-1"
|
|
>
|
|
{isDiscovering || discoveryStatus?.active ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
|
Discovering...
|
|
</>
|
|
) : (
|
|
'Discover Nodes'
|
|
)}
|
|
</Button>
|
|
{(isDiscovering || discoveryStatus?.active) && (
|
|
<Button
|
|
onClick={() => cancelDiscovery()}
|
|
disabled={isCancellingDiscovery}
|
|
variant="destructive"
|
|
>
|
|
{isCancellingDiscovery && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Discovered nodes display */}
|
|
{discoveryStatus?.nodes_found && discoveryStatus.nodes_found.length > 0 && (
|
|
<div className="space-y-3 mb-4">
|
|
{discoveryStatus.nodes_found.map((discovered) => (
|
|
<div key={discovered.ip} className="border border-gray-300 dark:border-gray-600 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium font-mono text-gray-900 dark:text-gray-100">{discovered.ip}</p>
|
|
{discovered.version && discovered.version !== 'maintenance' && (
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{discovered.version}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
onClick={() => handleAddFromDiscovery(discovered)}
|
|
size="sm"
|
|
>
|
|
Add to Cluster
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Manual add by IP - styled like a list item */}
|
|
<div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4">
|
|
<div className="flex items-center gap-3">
|
|
<Input
|
|
type="text"
|
|
value={addNodeIp}
|
|
onChange={(e) => setAddNodeIp(e.target.value)}
|
|
placeholder="192.168.8.128"
|
|
className="flex-1 font-mono"
|
|
/>
|
|
<Button
|
|
onClick={handleAddNode}
|
|
disabled={isGettingHardware}
|
|
size="sm"
|
|
>
|
|
{isGettingHardware ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
|
Detecting...
|
|
</>
|
|
) : (
|
|
'Add to Cluster'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-gray-500 dark:text-gray-500 mt-2">
|
|
Add a node by IP address if not discovered automatically
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-medium">Cluster Nodes ({assignedNodes.length})</h2>
|
|
</div>
|
|
|
|
{assignedNodes.map((node) => (
|
|
<Card key={node.hostname} className="p-4 hover:shadow-md transition-shadow">
|
|
<div className="mb-2">
|
|
<NodeStatusBadge node={node} compact />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 bg-muted rounded-lg">
|
|
{getRoleIcon(node.role)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h4 className="font-medium">{node.hostname}</h4>
|
|
<Badge variant="outline" className="text-xs">
|
|
{node.role}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-sm text-muted-foreground mb-2">
|
|
Target: {node.target_ip}
|
|
</div>
|
|
{node.disk && (
|
|
<div className="text-xs text-muted-foreground">
|
|
Disk: {node.disk}
|
|
</div>
|
|
)}
|
|
{node.hardware && (
|
|
<div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
|
|
{node.hardware.cpu && (
|
|
<span className="flex items-center gap-1">
|
|
<Cpu className="h-3 w-3" />
|
|
{node.hardware.cpu}
|
|
</span>
|
|
)}
|
|
{node.hardware.memory && (
|
|
<span className="flex items-center gap-1">
|
|
<Monitor className="h-3 w-3" />
|
|
{node.hardware.memory}
|
|
</span>
|
|
)}
|
|
{node.hardware.disk && (
|
|
<span className="flex items-center gap-1">
|
|
<HardDrive className="h-3 w-3" />
|
|
{node.hardware.disk}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
{(node.version || node.schematic_id) && (
|
|
<div className="text-xs text-muted-foreground mt-1">
|
|
{node.version && <span>Talos: {node.version}</span>}
|
|
{node.version && node.schematic_id && <span> • </span>}
|
|
{node.schematic_id && (
|
|
<span
|
|
title={node.schematic_id}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(node.schematic_id!);
|
|
}}
|
|
className="cursor-pointer hover:text-primary hover:underline"
|
|
>
|
|
Schema: {node.schematic_id.substring(0, 8)}...
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleConfigureNode(node)}
|
|
>
|
|
Configure
|
|
</Button>
|
|
{node.configured && !node.applied && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => applyNode(node.hostname)}
|
|
disabled={isApplying}
|
|
variant="secondary"
|
|
>
|
|
{isApplying ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Apply'}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={() => handleDeleteNode(node.hostname)}
|
|
disabled={deletingNodeHostname === node.hostname}
|
|
>
|
|
{deletingNodeHostname === node.hostname ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Delete'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
|
|
{assignedNodes.length === 0 && (
|
|
<Card className="p-8 text-center">
|
|
<Network className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium mb-2">No Nodes</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
Use the discover or auto-detect buttons above to find nodes on your network.
|
|
</p>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Bootstrap Modal */}
|
|
{showBootstrapModal && bootstrapNode && (
|
|
<BootstrapModal
|
|
instanceName={currentInstance!}
|
|
nodeName={bootstrapNode.name}
|
|
nodeIp={bootstrapNode.ip}
|
|
onClose={() => {
|
|
setShowBootstrapModal(false);
|
|
setBootstrapNode(null);
|
|
refetch();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Node Form Drawer */}
|
|
<NodeFormDrawer
|
|
open={drawerState.open}
|
|
onClose={closeDrawer}
|
|
mode={drawerState.mode}
|
|
node={drawerState.mode === 'configure' ? drawerState.node : undefined}
|
|
detection={drawerState.detection}
|
|
onSubmit={drawerState.mode === 'add' ? handleAddSubmit : handleConfigureSubmit}
|
|
onApply={drawerState.mode === 'configure' ? handleApply : undefined}
|
|
instanceName={currentInstance || ''}
|
|
/>
|
|
</div>
|
|
);
|
|
} |