mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-11 03:06:54 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user