feat(fleet): add node management actions to Fleet Overview (#1064)

* refactor(nodes): extract node create/edit/delete modals into useNodeActions hook

Pulls the inline Add/Edit/Delete/Pilot-enrollment modal stack out of
NodeManager.tsx and into a reusable useNodeActions() hook in
components/nodes/. Settings continues to consume the same modals via
this hook, with an onTestResult callback used by Settings to render the
existing connection-detail panel after a successful test.

The hook also extends the auto-test-on-save behavior so that saving a
proxy-mode remote node from the Edit dialog re-runs the connection test
when the API URL or token has actually changed (skipped when only name
or compose dir was edited).

* feat(fleet): surface Add/Edit/Delete node actions on Fleet Overview

Adds an admin-only Add node button to the right of Refresh on the Fleet
header, opening the same Add Node dialog used by Settings. Each node
card's three-dot menu now exposes Edit node and Delete node items
(routed through the shared useNodeActions hook) alongside the existing
Cordon item, so operators can manage node lifecycle without leaving the
Fleet page.

The card kebab is shown to admins regardless of tier; Cordon stays
Admiral-only. Delete is hidden on the local default node. After any
Add/Edit/Delete the Fleet overview refetches so the grid reflects the
change immediately.

* docs(fleet): document Add/Edit/Delete node actions on Fleet Overview

Updates the Action buttons table to cover the new Add node entry point
on the Fleet header, and adds a new Node actions menu section
describing the per-card Edit/Delete/Cordon items, their tier and
permission gating, and the auto connection test that fires after
saving a proxy-mode remote.
This commit is contained in:
Anso
2026-05-15 19:54:23 -04:00
committed by GitHub
parent 49b8d23f14
commit 16774ae515
6 changed files with 631 additions and 455 deletions
+36 -8
View File
@@ -2,7 +2,7 @@ import { useState } from 'react';
import {
Server, Cpu, MemoryStick, HardDrive, ChevronDown, ChevronRight,
Layers, Wifi, WifiOff, AlertTriangle, Download, Loader2,
MoreVertical, Ban,
MoreVertical, Ban, Pencil, Trash2,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -19,6 +19,8 @@ import { apiFetch } from '@/lib/api';
import { toast } from '@/components/ui/toast-store';
import { formatVersion } from '@/lib/version';
import { useLicense } from '@/context/LicenseContext';
import { useAuth } from '@/context/AuthContext';
import { useNodes, type Node } from '@/context/NodeContext';
import { cordonNode, uncordonNode } from '@/lib/nodesApi';
import { UpdateStatusBadge } from './UpdateStatusBadge';
import { StackSection } from './NodeCardStackList';
@@ -38,6 +40,8 @@ export interface NodeCardProps {
onRetryUpdate?: (nodeId: number) => void;
onDismissUpdate?: (nodeId: number) => void;
onCordonChange?: () => void;
onEdit?: (node: Node) => void;
onDelete?: (node: Node) => void;
}
// --- Sub-Components ---
@@ -55,7 +59,7 @@ function UsageBar({ percent, color }: { percent: number; color: string }) {
// --- Main Export ---
export function NodeCard({ node, onNavigate, labelMap, updateStatus, onUpdate, updatingNodeId, onRetryUpdate, onDismissUpdate, onCordonChange }: NodeCardProps) {
export function NodeCard({ node, onNavigate, labelMap, updateStatus, onUpdate, updatingNodeId, onRetryUpdate, onDismissUpdate, onCordonChange, onEdit, onDelete }: NodeCardProps) {
const [expanded, setExpanded] = useState(false);
const [stacks, setStacks] = useState<string[] | null>(node.stacks);
const [loadingStacks, setLoadingStacks] = useState(false);
@@ -64,7 +68,14 @@ export function NodeCard({ node, onNavigate, labelMap, updateStatus, onUpdate, u
const [cordonSubmitting, setCordonSubmitting] = useState(false);
const { isPaid, license } = useLicense();
const { isAdmin } = useAuth();
const { nodes: registryNodes } = useNodes();
const isAdmiral = isPaid && license?.variant === 'admiral';
const registryNode = registryNodes.find(n => n.id === node.id);
const canEdit = Boolean(isAdmin && onEdit && registryNode);
const canDelete = Boolean(isAdmin && onDelete && registryNode && !registryNode.is_default);
const canCordon = isAdmiral;
const showMenu = canEdit || canDelete || canCordon;
const isOnline = node.status === 'online';
const isLocal = node.type === 'local';
@@ -131,11 +142,11 @@ export function NodeCard({ node, onNavigate, labelMap, updateStatus, onUpdate, u
{/* Card Header */}
<div className="relative p-4 pb-3">
{isLocal && (
<span className={`absolute top-3 font-mono text-[9px] uppercase tracking-[0.22em] text-brand ${isAdmiral ? 'right-9' : 'right-3'}`}>
<span className={`absolute top-3 font-mono text-[9px] uppercase tracking-[0.22em] text-brand ${showMenu ? 'right-9' : 'right-3'}`}>
Local
</span>
)}
{isAdmiral && (
{showMenu && (
<div className="absolute top-2 right-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -148,10 +159,27 @@ export function NodeCard({ node, onNavigate, labelMap, updateStatus, onUpdate, u
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuItem onSelect={openCordonModal}>
<Ban className="w-3.5 h-3.5 mr-2" />
{node.cordoned ? 'Uncordon node' : 'Cordon node'}
</DropdownMenuItem>
{canEdit && registryNode && (
<DropdownMenuItem onSelect={() => onEdit!(registryNode)}>
<Pencil className="w-3.5 h-3.5 mr-2" />
Edit node
</DropdownMenuItem>
)}
{canDelete && registryNode && (
<DropdownMenuItem
onSelect={() => onDelete!(registryNode)}
className="text-destructive focus:text-destructive"
>
<Trash2 className="w-3.5 h-3.5 mr-2" />
Delete node
</DropdownMenuItem>
)}
{canCordon && (
<DropdownMenuItem onSelect={openCordonModal}>
<Ban className="w-3.5 h-3.5 mr-2" />
{node.cordoned ? 'Uncordon node' : 'Cordon node'}
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -6,6 +6,7 @@ import { NodeCard } from './NodeCard';
import { OverviewToolbar } from './OverviewToolbar';
import type { FleetTopologyNode, LayoutMode, SavedPositions } from '@/lib/fleet-topology-layout';
import type { Label as StackLabel } from '../label-types';
import type { Node } from '@/context/NodeContext';
import type { FleetNode, NodeUpdateStatus, ViewMode, FleetPreferences, FleetPaletteEntry } from './types';
interface OverviewTabProps {
@@ -32,6 +33,8 @@ interface OverviewTabProps {
onRetryUpdate?: (nodeId: number) => void;
onDismissUpdate?: (nodeId: number) => void;
onCordonChange?: () => void;
onEditNode?: (node: Node) => void;
onDeleteNode?: (node: Node) => void;
isPaid: boolean;
topologyMode: LayoutMode;
onTopologyModeChange: (mode: LayoutMode) => void;
@@ -63,6 +66,8 @@ export function OverviewTab({
onRetryUpdate,
onDismissUpdate,
onCordonChange,
onEditNode,
onDeleteNode,
isPaid,
topologyMode,
onTopologyModeChange,
@@ -93,7 +98,7 @@ export function OverviewTab({
<div className="flex flex-col items-center justify-center py-20 text-center">
<Server className="w-12 h-12 text-muted-foreground/50 mb-4" />
<h3 className="text-lg font-medium mb-1">No nodes configured</h3>
<p className="text-sm text-muted-foreground">Add nodes in Settings to see your fleet here.</p>
<p className="text-sm text-muted-foreground">Add a node to see your fleet here.</p>
</div>
)}
@@ -136,6 +141,8 @@ export function OverviewTab({
onRetryUpdate={onRetryUpdate}
onDismissUpdate={onDismissUpdate}
onCordonChange={onCordonChange}
onEdit={onEditNode}
onDelete={onDeleteNode}
/>
))}
</div>