From 16774ae51518bbfd545aeaff2eba3f0b0fac7b4f Mon Sep 17 00:00:00 2001 From: Anso Date: Fri, 15 May 2026 19:54:23 -0400 Subject: [PATCH] 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. --- docs/features/fleet-view.mdx | 15 +- frontend/src/components/FleetView.tsx | 24 +- .../src/components/FleetView/NodeCard.tsx | 44 +- .../src/components/FleetView/OverviewTab.tsx | 9 +- frontend/src/components/NodeManager.tsx | 458 +-------------- .../src/components/nodes/useNodeActions.tsx | 536 ++++++++++++++++++ 6 files changed, 631 insertions(+), 455 deletions(-) create mode 100644 frontend/src/components/nodes/useNodeActions.tsx diff --git a/docs/features/fleet-view.mdx b/docs/features/fleet-view.mdx index 769d7752..23223315 100644 --- a/docs/features/fleet-view.mdx +++ b/docs/features/fleet-view.mdx @@ -61,12 +61,13 @@ The Fleet page has three tabs: ### Action buttons -Two buttons sit in the top-right corner: +Three buttons sit in the top-right corner: | Button | What it does | |--------|--------------| | **Check Updates** | Opens the Node Updates modal to view and apply Sencho version updates across your fleet (Skipper+) | | **Refresh** | Re-fetches data from all nodes. Shows a spinner while loading | +| **Add node** | Opens the same Add Node dialog as Settings → Nodes so you can register a new node without leaving the Fleet page. Admin-only. After saving a remote proxy node, a connection test runs automatically and the result toasts in (success or saved-but-unreachable). | ## Community features @@ -94,6 +95,18 @@ Nodes with an available Sencho update also show an **Update to vX.Y.Z** button a Offline nodes are visually dimmed and show a "Node unreachable" placeholder instead of stats. +### Node actions menu (admin) + +The kebab menu in the top-right of each card surfaces the same lifecycle actions you'd find in Settings → Nodes: + +| Action | Notes | +|--------|-------| +| **Edit node** | Opens the Edit dialog prefilled with the node's connection details. For proxy-mode remotes, saving with a changed API URL or token re-runs the connection test automatically. | +| **Delete node** | Opens a destructive confirmation. The local (default) node has no Delete option. Deleting a remote only removes it from this console; the remote instance and its containers are untouched. | +| **Cordon node** / **Uncordon node** | Marks the node unschedulable so new blueprint deployments skip it (Admiral). Existing deployments keep running. | + +The menu is admin-only. Non-admin users see no kebab on the card. + ### Manual refresh Click the **Refresh** button in the top-right to re-fetch data from all nodes. The button shows a spinner while loading. diff --git a/frontend/src/components/FleetView.tsx b/frontend/src/components/FleetView.tsx index bc4cb7aa..d704ab0b 100644 --- a/frontend/src/components/FleetView.tsx +++ b/frontend/src/components/FleetView.tsx @@ -1,5 +1,5 @@ import { - RefreshCw, Search, Camera, + RefreshCw, Search, Camera, Plus, Network, SlidersHorizontal, Send, KeyRound, ArrowLeftRight, Wrench, } from 'lucide-react'; @@ -17,6 +17,7 @@ import { Button } from '@/components/ui/button'; import { Tabs, TabsContent, TabsList, TabsTrigger, TabsHighlight, TabsHighlightItem } from '@/components/ui/tabs'; import { springs } from '@/lib/motion'; import { useLicense } from '@/context/LicenseContext'; +import { useAuth } from '@/context/AuthContext'; import { AdmiralGate } from './AdmiralGate'; import FleetSnapshots from './FleetSnapshots'; import { FleetConfiguration } from './fleet/FleetConfiguration'; @@ -25,6 +26,8 @@ import { FederationTab } from './fleet/FederationTab'; import { DeploymentsTab } from './blueprints/DeploymentsTab'; import { FleetActionsTab } from './fleet/FleetActions/FleetActionsTab'; import { SecretsTab } from './fleet/secrets/SecretsTab'; +import { useNodeActions } from './nodes/useNodeActions'; +import { SettingsPrimaryButton } from './settings/SettingsActions'; interface FleetViewProps { onNavigateToNode: (nodeId: number, stackName: string) => void; @@ -32,6 +35,7 @@ interface FleetViewProps { export function FleetView({ onNavigateToNode }: FleetViewProps) { const { isPaid, license } = useLicense(); + const { isAdmin } = useAuth(); const isAdmiral = isPaid && license?.variant === 'admiral'; const { prefs, updatePrefs } = useFleetPreferences(); @@ -47,6 +51,10 @@ export function FleetView({ onNavigateToNode }: FleetViewProps) { const { mastheadStats, lastSyncAt, loading, refreshing } = overview; + const { openCreate, openEdit, openDelete, NodeActionModals } = useNodeActions({ + onNodeChange: () => { void overview.fetchOverview(true); }, + }); + return (
Refresh + {isAdmin && ( + + + Add node + + )}
@@ -164,6 +182,8 @@ export function FleetView({ onNavigateToNode }: FleetViewProps) { onRetryUpdate={updateStatus.retryNodeUpdate} onDismissUpdate={updateStatus.dismissNodeUpdate} onCordonChange={() => { void overview.fetchOverview(true); }} + onEditNode={isAdmin ? openEdit : undefined} + onDeleteNode={isAdmin ? openDelete : undefined} isPaid={isPaid} topologyMode={topology.prefs.mode} onTopologyModeChange={topology.setMode} @@ -230,6 +250,8 @@ export function FleetView({ onNavigateToNode }: FleetViewProps) { onOpenChange={(open) => { if (!open) updateStatus.setLocalUpdateConfirm(null); }} onConfirm={updateStatus.confirmLocalUpdate} /> + + {NodeActionModals} ); } diff --git a/frontend/src/components/FleetView/NodeCard.tsx b/frontend/src/components/FleetView/NodeCard.tsx index 3563fc50..c7407541 100644 --- a/frontend/src/components/FleetView/NodeCard.tsx +++ b/frontend/src/components/FleetView/NodeCard.tsx @@ -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(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 */}
{isLocal && ( - + ★ Local )} - {isAdmiral && ( + {showMenu && (
@@ -148,10 +159,27 @@ export function NodeCard({ node, onNavigate, labelMap, updateStatus, onUpdate, u - - - {node.cordoned ? 'Uncordon node' : 'Cordon node'} - + {canEdit && registryNode && ( + onEdit!(registryNode)}> + + Edit node + + )} + {canDelete && registryNode && ( + onDelete!(registryNode)} + className="text-destructive focus:text-destructive" + > + + Delete node + + )} + {canCordon && ( + + + {node.cordoned ? 'Uncordon node' : 'Cordon node'} + + )}
diff --git a/frontend/src/components/FleetView/OverviewTab.tsx b/frontend/src/components/FleetView/OverviewTab.tsx index cf55e329..f4ff49ec 100644 --- a/frontend/src/components/FleetView/OverviewTab.tsx +++ b/frontend/src/components/FleetView/OverviewTab.tsx @@ -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({

No nodes configured

-

Add nodes in Settings to see your fleet here.

+

Add a node to see your fleet here.

)} @@ -136,6 +141,8 @@ export function OverviewTab({ onRetryUpdate={onRetryUpdate} onDismissUpdate={onDismissUpdate} onCordonChange={onCordonChange} + onEdit={onEditNode} + onDelete={onDeleteNode} /> ))}
diff --git a/frontend/src/components/NodeManager.tsx b/frontend/src/components/NodeManager.tsx index e8660591..fc7e301f 100644 --- a/frontend/src/components/NodeManager.tsx +++ b/frontend/src/components/NodeManager.tsx @@ -1,26 +1,22 @@ import { useState, useEffect, useCallback, useMemo } from 'react'; import { useNodes } from '@/context/NodeContext'; -import type { Node, NodeMode } from '@/context/NodeContext'; +import type { Node } from '@/context/NodeContext'; import { apiFetch } from '@/lib/api'; import { copyToClipboard } from '@/lib/clipboard'; import { toast } from '@/components/ui/toast-store'; -import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from './ui/modal'; import { Button } from './ui/button'; -import { Input } from './ui/input'; -import { Label } from './ui/label'; import { Badge } from './ui/badge'; import { Separator } from './ui/separator'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; -import { Combobox } from './ui/combobox'; -import { Plus, Trash2, Wifi, WifiOff, Star, Pencil, Monitor, Globe, Copy, KeyRound, Check, AlertTriangle, Calendar, RefreshCw, Terminal } from 'lucide-react'; +import { Plus, Trash2, Wifi, WifiOff, Star, Pencil, Monitor, Globe, Copy, KeyRound, Check, Calendar, RefreshCw, Terminal } from 'lucide-react'; import { formatTimeUntil, formatTimeAgo } from '@/lib/relativeTime'; import { SettingsPrimaryButton } from './settings/SettingsActions'; import { useMastheadStats } from './settings/MastheadStatsContext'; import { NodeLabelPicker } from './blueprints/NodeLabelPicker'; import { useLicense } from '@/context/LicenseContext'; import { useAuth } from '@/context/AuthContext'; +import { useNodeActions, type NodeTestInfo } from './nodes/useNodeActions'; interface NodeSchedulingSummary { active_tasks: number; @@ -35,37 +31,11 @@ export interface SenchoNavigateDetail { nodeId?: number; } -interface NodeFormData { - name: string; - type: 'local' | 'remote'; - mode: NodeMode; - api_url: string; - api_token: string; - compose_dir: string; - is_default: boolean; -} - -interface PilotEnrollment { - token: string; - expiresAt: number; - dockerRun: string; -} - -const defaultFormData: NodeFormData = { - name: '', - type: 'remote', - mode: 'pilot_agent', - api_url: '', - api_token: '', - compose_dir: '/app/compose', - is_default: false, -}; - export function NodeManager() { const { isPaid } = useLicense(); const { isAdmin } = useAuth(); const canEditLabels = isPaid && isAdmin; - const { nodes, refreshNodes } = useNodes(); + const { nodes } = useNodes(); useMastheadStats([ { label: 'NODES', value: `${nodes.length}` }, { @@ -74,27 +44,22 @@ export function NodeManager() { tone: 'subtitle', }, ]); - const [createOpen, setCreateOpen] = useState(false); - const [editOpen, setEditOpen] = useState(false); - const [deleteOpen, setDeleteOpen] = useState(false); - const [formData, setFormData] = useState(defaultFormData); - const [editingNodeId, setEditingNodeId] = useState(null); - const [deletingNode, setDeletingNode] = useState(null); + const [testing, setTesting] = useState(null); - const [testResult, setTestResult] = useState<{ nodeId: number; info: { serverVersion?: string; senchoVersion?: string; os?: string; architecture?: string; containers?: number; images?: number; cpus?: number } } | null>(null); + const [testResult, setTestResult] = useState<{ nodeId: number; info: NodeTestInfo } | null>(null); // Node token generation state const [generatedToken, setGeneratedToken] = useState(null); const [generatingToken, setGeneratingToken] = useState(false); const [tokenCopied, setTokenCopied] = useState(false); - // Pilot enrollment state (shown after creating a pilot-agent node) - const [activeEnrollment, setActiveEnrollment] = useState<{ nodeId: number; nodeName: string; enrollment: PilotEnrollment } | null>(null); - const [enrollmentCopied, setEnrollmentCopied] = useState(false); - // Per-node scheduling summary const [nodeSummary, setNodeSummary] = useState>({}); + const { openCreate, openEdit, openDelete, NodeActionModals } = useNodeActions({ + onTestResult: (result) => setTestResult(result), + }); + const fetchSchedulingSummary = useCallback(async () => { try { const res = await apiFetch('/nodes/scheduling-summary', { localOnly: true }); @@ -110,136 +75,6 @@ export function NodeManager() { fetchSchedulingSummary(); }, [nodeIdKey, fetchSchedulingSummary]); - const handleCreate = async () => { - try { - const res = await apiFetch('/nodes', { - method: 'POST', - body: JSON.stringify(formData), - }); - if (!res.ok) { - const err = await res.json(); - throw new Error(err.error || 'Failed to create node'); - } - const body = await res.json(); - const newNodeId: number | undefined = body.id; - const enrollment: PilotEnrollment | undefined = body.enrollment; - toast.success(`Node "${formData.name}" created successfully`); - - const isPilot = formData.type === 'remote' && formData.mode === 'pilot_agent'; - if (isPilot && newNodeId && enrollment) { - // Keep the dialog open so the admin can copy the docker run command. - setActiveEnrollment({ nodeId: newNodeId, nodeName: formData.name, enrollment }); - } else { - setCreateOpen(false); - setFormData(defaultFormData); - } - - // Auto-test the new node connection immediately (proxy mode only; - // pilot agents flip online asynchronously once the container connects). - if (newNodeId && formData.type === 'remote' && formData.mode === 'proxy') { - setTesting(newNodeId); - try { - const testRes = await apiFetch(`/nodes/${newNodeId}/test`, { method: 'POST' }); - const testData = await testRes.json(); - if (testData.success) { - toast.success(`Connected to "${formData.name}" successfully`); - setTestResult({ nodeId: newNodeId, info: testData.info }); - } else { - toast.warning(`Node saved, but connection test failed: ${testData.error}`); - } - } catch { - // Non-fatal - } finally { - setTesting(null); - } - } - - await refreshNodes(); - } catch (error) { - toast.error((error as Error).message || 'Failed to create node'); - } - }; - - const regenerateEnrollment = async (node: Node) => { - try { - const res = await apiFetch(`/nodes/${node.id}/pilot/enroll`, { method: 'POST', localOnly: true }); - if (!res.ok) { - const err = await res.json(); - throw new Error(err.error || 'Failed to regenerate enrollment'); - } - const { enrollment } = (await res.json()) as { enrollment: PilotEnrollment }; - setActiveEnrollment({ nodeId: node.id, nodeName: node.name, enrollment }); - toast.success('New enrollment token generated'); - } catch (error) { - toast.error((error as Error).message || 'Failed to regenerate enrollment'); - } - }; - - const copyEnrollment = async () => { - if (!activeEnrollment) return; - try { - await copyToClipboard(activeEnrollment.enrollment.dockerRun); - setEnrollmentCopied(true); - toast.success('Command copied to clipboard'); - setTimeout(() => setEnrollmentCopied(false), 2000); - } catch { - toast.error('Could not copy automatically. Please select and copy the command manually.'); - } - }; - - const handleEdit = async () => { - if (!editingNodeId) return; - try { - const res = await apiFetch(`/nodes/${editingNodeId}`, { - method: 'PUT', - body: JSON.stringify(formData), - }); - if (!res.ok) { - const err = await res.json(); - throw new Error(err.error || 'Failed to update node'); - } - toast.success(`Node "${formData.name}" updated`); - setEditOpen(false); - setEditingNodeId(null); - setFormData(defaultFormData); - await refreshNodes(); - } catch (error) { - toast.error((error as Error).message || 'Failed to update node'); - } - }; - - const openEditDialog = (node: Node) => { - setFormData({ - name: node.name, - type: node.type, - mode: (node.mode === 'pilot_agent' ? 'pilot_agent' : 'proxy'), - api_url: node.api_url || '', - api_token: node.api_token || '', - compose_dir: node.compose_dir, - is_default: node.is_default, - }); - setEditingNodeId(node.id); - setEditOpen(true); - }; - - const handleDelete = async () => { - if (!deletingNode) return; - try { - const res = await apiFetch(`/nodes/${deletingNode.id}`, { method: 'DELETE' }); - if (!res.ok) { - const err = await res.json(); - throw new Error(err.error || 'Failed to delete node'); - } - toast.success(`Node "${deletingNode.name}" deleted`); - await refreshNodes(); - } catch (error) { - toast.error((error as Error).message || 'Failed to delete node'); - } finally { - setDeleteOpen(false); - setDeletingNode(null); - } - }; - const testConnection = async (node: Node) => { setTesting(node.id); setTestResult(null); @@ -252,7 +87,6 @@ export function NodeManager() { } else { toast.error(`Failed to connect: ${result.error}`); } - await refreshNodes(); } catch (error) { toast.error((error as Error).message || 'Connection test failed'); } finally { @@ -305,119 +139,6 @@ export function NodeManager() { : ; }; - const renderFormFields = () => ( -
-
- - setFormData({ ...formData, name: e.target.value })} - /> -
- -
- - -
- - {formData.type === 'remote' && ( -
- - setFormData({ ...formData, mode: val as NodeMode, api_url: '', api_token: '' })} - options={[ - { value: 'pilot_agent', label: 'Pilot Agent - outbound tunnel from remote host' }, - { value: 'proxy', label: 'Distributed API Proxy - primary dials the remote' }, - ]} - /> -

- Pilot Agent requires only outbound HTTPS from the remote host. Distributed API Proxy requires the remote host to expose an inbound port. Sencho Mesh works with both modes. -

-
- )} - - {formData.type === 'remote' && formData.mode === 'proxy' && ( - <> -
- - setFormData({ ...formData, api_url: e.target.value })} - /> -

- The base URL of the Sencho instance running on the remote machine. -

- {formData.api_url.startsWith('http://') && ( -
-
- -

- This URL uses plain HTTP. If this node is reachable over the public internet, use HTTPS - or a VPN to prevent token interception. HTTP is fine for private networks (LAN, VPN, VPC). -

-
-
- )} -
- -
- - setFormData({ ...formData, api_token: e.target.value })} - /> -

- Generate this token on the remote Sencho instance using the "Generate Node Token" button in its Settings → Nodes panel. -

-
- - )} - -
- - setFormData({ ...formData, compose_dir: e.target.value })} - /> -

- The root directory where compose stack folders live on this node. -

-
-
- ); - return (
{/* Actions */} @@ -425,48 +146,11 @@ export function NodeManager() { { - setFormData(defaultFormData); - setCreateOpen(true); - }} + onClick={openCreate} > Add node - { - setCreateOpen(open); - if (open) setFormData(defaultFormData); - }} - size="lg" - > - - - {renderFormFields()} - - setCreateOpen(false)}>Cancel - } - primary={ - - Add node - - } - /> -
@@ -681,7 +365,7 @@ export function NodeManager() { variant="ghost" size="icon" className="h-8 w-8" - onClick={() => openEditDialog(node)} + onClick={() => openEdit(node)} aria-label="Edit node" > @@ -699,7 +383,7 @@ export function NodeManager() { variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" - onClick={() => { setDeletingNode(node); setDeleteOpen(true); }} + onClick={() => openDelete(node)} aria-label="Delete node" > @@ -738,121 +422,7 @@ export function NodeManager() { )} - {/* Edit Modal */} - - - - {renderFormFields()} - {formData.type === 'remote' && formData.mode === 'pilot_agent' && editingNodeId !== null && ( -
-

- Re-enroll the agent if the container was lost or the enrollment token expired. The previous tunnel is disconnected automatically. -

- -
- )} - - { setEditOpen(false); setEditingNodeId(null); }}>Cancel - } - primary={ - - } - /> - - - {/* Pilot enrollment Modal (create + regenerate flows both open this) */} - { - if (!open) { - setActiveEnrollment(null); - setEnrollmentCopied(false); - setCreateOpen(false); - setFormData(defaultFormData); - } - }} - size="xl" - > - - - {activeEnrollment && ( - <> -

- Run this command on {activeEnrollment.nodeName} to start the pilot agent. The token below is valid for 15 minutes and can only be used once. -

-
- 
{activeEnrollment.enrollment.dockerRun}
-
-
-

- Expires {formatTimeUntil(activeEnrollment.enrollment.expiresAt)} from now. -

- -
- - )} - - { - setActiveEnrollment(null); - setEnrollmentCopied(false); - setCreateOpen(false); - setEditOpen(false); - setFormData(defaultFormData); - }} - > - Done - - } - /> - - - {/* Delete Confirmation */} - -

- Removes {deletingNode?.name} from this console. The remote instance and its containers are not affected. -

- + {NodeActionModals} ); } diff --git a/frontend/src/components/nodes/useNodeActions.tsx b/frontend/src/components/nodes/useNodeActions.tsx new file mode 100644 index 00000000..7444d698 --- /dev/null +++ b/frontend/src/components/nodes/useNodeActions.tsx @@ -0,0 +1,536 @@ +import { useCallback, useState, type ReactNode } from 'react'; +import { Check, Copy, AlertTriangle, Globe, Monitor, RefreshCw } from 'lucide-react'; +import { useNodes, type Node, type NodeMode } from '@/context/NodeContext'; +import { apiFetch } from '@/lib/api'; +import { copyToClipboard } from '@/lib/clipboard'; +import { toast } from '@/components/ui/toast-store'; +import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from '@/components/ui/modal'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Combobox } from '@/components/ui/combobox'; +import { SettingsPrimaryButton } from '@/components/settings/SettingsActions'; +import { formatTimeUntil } from '@/lib/relativeTime'; + +export interface NodeTestInfo { + serverVersion?: string; + senchoVersion?: string; + os?: string; + architecture?: string; + containers?: number; + images?: number; + cpus?: number; +} + +interface PilotEnrollment { + token: string; + expiresAt: number; + dockerRun: string; +} + +interface NodeFormData { + name: string; + type: 'local' | 'remote'; + mode: NodeMode; + api_url: string; + api_token: string; + compose_dir: string; + is_default: boolean; +} + +const defaultFormData: NodeFormData = { + name: '', + type: 'remote', + mode: 'pilot_agent', + api_url: '', + api_token: '', + compose_dir: '/app/compose', + is_default: false, +}; + +interface UseNodeActionsOptions { + onNodeChange?: () => void; + onTestResult?: (result: { nodeId: number; info: NodeTestInfo }) => void; +} + +interface UseNodeActionsReturn { + openCreate: () => void; + openEdit: (node: Node) => void; + openDelete: (node: Node) => void; + NodeActionModals: ReactNode; +} + +async function runConnectionTest( + nodeId: number, + nodeName: string, + onTestResult?: (result: { nodeId: number; info: NodeTestInfo }) => void, +): Promise { + try { + const res = await apiFetch(`/nodes/${nodeId}/test`, { method: 'POST' }); + const data = await res.json(); + if (data.success) { + toast.success(`Connected to "${nodeName}" successfully`); + onTestResult?.({ nodeId, info: data.info }); + } else { + toast.warning(`Node saved, but connection test failed: ${data.error}`); + } + } catch (err) { + // Node is saved; the test result is supplementary. Log so connectivity issues are debuggable. + console.warn(`Auto connection test failed for node ${nodeId}:`, err); + } +} + +export function useNodeActions(opts: UseNodeActionsOptions = {}): UseNodeActionsReturn { + const { onNodeChange, onTestResult } = opts; + const { nodes, refreshNodes } = useNodes(); + + const [createOpen, setCreateOpen] = useState(false); + const [editOpen, setEditOpen] = useState(false); + const [deleteOpen, setDeleteOpen] = useState(false); + const [formData, setFormData] = useState(defaultFormData); + const [editingNodeId, setEditingNodeId] = useState(null); + const [originalEditValues, setOriginalEditValues] = useState<{ api_url: string; api_token: string } | null>(null); + const [deletingNode, setDeletingNode] = useState(null); + + const [activeEnrollment, setActiveEnrollment] = useState<{ nodeId: number; nodeName: string; enrollment: PilotEnrollment } | null>(null); + const [enrollmentCopied, setEnrollmentCopied] = useState(false); + + const refresh = useCallback(async () => { + await refreshNodes(); + onNodeChange?.(); + }, [refreshNodes, onNodeChange]); + + const handleCreate = async () => { + try { + const res = await apiFetch('/nodes', { + method: 'POST', + body: JSON.stringify(formData), + }); + if (!res.ok) { + const err = await res.json(); + throw new Error(err.error || 'Failed to create node'); + } + const body = await res.json(); + const newNodeId: number | undefined = body.id; + const enrollment: PilotEnrollment | undefined = body.enrollment; + toast.success(`Node "${formData.name}" created successfully`); + + const isPilot = formData.type === 'remote' && formData.mode === 'pilot_agent'; + if (isPilot && newNodeId && enrollment) { + setActiveEnrollment({ nodeId: newNodeId, nodeName: formData.name, enrollment }); + } else { + setCreateOpen(false); + setFormData(defaultFormData); + } + + const isProxy = formData.type === 'remote' && formData.mode === 'proxy'; + if (newNodeId && isProxy) { + await runConnectionTest(newNodeId, formData.name, onTestResult); + } + + await refresh(); + } catch (error) { + toast.error((error as Error).message || 'Failed to create node'); + } + }; + + const handleEdit = async () => { + if (editingNodeId === null) return; + try { + const res = await apiFetch(`/nodes/${editingNodeId}`, { + method: 'PUT', + body: JSON.stringify(formData), + }); + if (!res.ok) { + const err = await res.json(); + throw new Error(err.error || 'Failed to update node'); + } + toast.success(`Node "${formData.name}" updated`); + + const isProxy = formData.type === 'remote' && formData.mode === 'proxy'; + const connectionFieldsChanged = originalEditValues !== null && ( + formData.api_url !== originalEditValues.api_url || + formData.api_token !== originalEditValues.api_token + ); + const savedNodeId = editingNodeId; + const savedName = formData.name; + + setEditOpen(false); + setEditingNodeId(null); + setOriginalEditValues(null); + setFormData(defaultFormData); + + if (isProxy && connectionFieldsChanged) { + await runConnectionTest(savedNodeId, savedName, onTestResult); + } + + await refresh(); + } catch (error) { + toast.error((error as Error).message || 'Failed to update node'); + } + }; + + const handleDelete = async () => { + if (!deletingNode) return; + try { + const res = await apiFetch(`/nodes/${deletingNode.id}`, { method: 'DELETE' }); + if (!res.ok) { + const err = await res.json(); + throw new Error(err.error || 'Failed to delete node'); + } + toast.success(`Node "${deletingNode.name}" deleted`); + await refresh(); + } catch (error) { + toast.error((error as Error).message || 'Failed to delete node'); + } finally { + setDeleteOpen(false); + setDeletingNode(null); + } + }; + + const regenerateEnrollment = async (node: Node) => { + try { + const res = await apiFetch(`/nodes/${node.id}/pilot/enroll`, { method: 'POST', localOnly: true }); + if (!res.ok) { + const err = await res.json(); + throw new Error(err.error || 'Failed to regenerate enrollment'); + } + const { enrollment } = (await res.json()) as { enrollment: PilotEnrollment }; + setActiveEnrollment({ nodeId: node.id, nodeName: node.name, enrollment }); + toast.success('New enrollment token generated'); + } catch (error) { + toast.error((error as Error).message || 'Failed to regenerate enrollment'); + } + }; + + const copyEnrollment = async () => { + if (!activeEnrollment) return; + try { + await copyToClipboard(activeEnrollment.enrollment.dockerRun); + setEnrollmentCopied(true); + toast.success('Command copied to clipboard'); + setTimeout(() => setEnrollmentCopied(false), 2000); + } catch { + toast.error('Could not copy automatically. Please select and copy the command manually.'); + } + }; + + const openCreate = useCallback(() => { + setFormData(defaultFormData); + setCreateOpen(true); + }, []); + + const openEdit = useCallback((node: Node) => { + setFormData({ + name: node.name, + type: node.type, + mode: (node.mode === 'pilot_agent' ? 'pilot_agent' : 'proxy'), + api_url: node.api_url || '', + api_token: node.api_token || '', + compose_dir: node.compose_dir, + is_default: node.is_default, + }); + setOriginalEditValues({ + api_url: node.api_url || '', + api_token: node.api_token || '', + }); + setEditingNodeId(node.id); + setEditOpen(true); + }, []); + + const openDelete = useCallback((node: Node) => { + setDeletingNode(node); + setDeleteOpen(true); + }, []); + + const renderFormFields = () => ( +
+
+ + setFormData({ ...formData, name: e.target.value })} + /> +
+ +
+ + +
+ + {formData.type === 'remote' && ( +
+ + setFormData({ ...formData, mode: val as NodeMode, api_url: '', api_token: '' })} + options={[ + { value: 'pilot_agent', label: 'Pilot Agent - outbound tunnel from remote host' }, + { value: 'proxy', label: 'Distributed API Proxy - primary dials the remote' }, + ]} + /> +

+ Pilot Agent requires only outbound HTTPS from the remote host. Distributed API Proxy requires the remote host to expose an inbound port. Sencho Mesh works with both modes. +

+
+ )} + + {formData.type === 'remote' && formData.mode === 'proxy' && ( + <> +
+ + setFormData({ ...formData, api_url: e.target.value })} + /> +

+ The base URL of the Sencho instance running on the remote machine. +

+ {formData.api_url.startsWith('http://') && ( +
+
+ +

+ This URL uses plain HTTP. If this node is reachable over the public internet, use HTTPS + or a VPN to prevent token interception. HTTP is fine for private networks (LAN, VPN, VPC). +

+
+
+ )} +
+ +
+ + setFormData({ ...formData, api_token: e.target.value })} + /> +

+ Generate this token on the remote Sencho instance using the "Generate Node Token" button in its Settings → Nodes panel. +

+
+ + )} + +
+ + setFormData({ ...formData, compose_dir: e.target.value })} + /> +

+ The root directory where compose stack folders live on this node. +

+
+
+ ); + + const NodeActionModals = ( + <> + { + setCreateOpen(open); + if (open) setFormData(defaultFormData); + }} + size="lg" + > + + {renderFormFields()} + setCreateOpen(false)}>Cancel + } + primary={ + + Add node + + } + /> + + + { + setEditOpen(open); + if (!open) { + setEditingNodeId(null); + setOriginalEditValues(null); + } + }} + size="lg" + > + + + {renderFormFields()} + {formData.type === 'remote' && formData.mode === 'pilot_agent' && editingNodeId !== null && ( +
+

+ Re-enroll the agent if the container was lost or the enrollment token expired. The previous tunnel is disconnected automatically. +

+ +
+ )} + + { + setEditOpen(false); + setEditingNodeId(null); + setOriginalEditValues(null); + }} + > + Cancel + + } + primary={ + + } + /> + + + { + if (!open) { + setActiveEnrollment(null); + setEnrollmentCopied(false); + setCreateOpen(false); + setFormData(defaultFormData); + } + }} + size="xl" + > + + + {activeEnrollment && ( + <> +

+ Run this command on {activeEnrollment.nodeName} to start the pilot agent. The token below is valid for 15 minutes and can only be used once. +

+
+ 
{activeEnrollment.enrollment.dockerRun}
+
+
+

+ Expires {formatTimeUntil(activeEnrollment.enrollment.expiresAt)} from now. +

+ +
+ + )} + + { + setActiveEnrollment(null); + setEnrollmentCopied(false); + setCreateOpen(false); + setEditOpen(false); + setFormData(defaultFormData); + }} + > + Done + + } + /> + + + +

+ Removes {deletingNode?.name} from this console. The remote instance and its containers are not affected. +

+ + + ); + + return { + openCreate, + openEdit, + openDelete, + NodeActionModals, + }; +}