findthelorax
684 lines
30 KiB
TypeScript
684 lines
30 KiB
TypeScript
import { createElement, useState } from 'react'
|
||
import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { useCanvasStore } from '@/stores/canvasStore'
|
||
import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
|
||
import { getServiceUrl } from '@/utils/serviceUrl'
|
||
import { primaryIp } from '@/utils/maskIp'
|
||
import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '@/utils/propertyIcons'
|
||
import type { Node } from '@xyflow/react'
|
||
|
||
interface DetailPanelProps {
|
||
onEdit: (id: string) => void
|
||
}
|
||
|
||
type SvcForm = { port: string; protocol: 'tcp' | 'udp'; service_name: string; path: string }
|
||
const EMPTY_FORM: SvcForm = { port: '', protocol: 'tcp', service_name: '', path: '' }
|
||
|
||
type PropForm = { key: string; value: string; icon: string | null; visible: boolean }
|
||
const EMPTY_PROP: PropForm = { key: '', value: '', icon: null, visible: true }
|
||
|
||
export function DetailPanel({ onEdit }: DetailPanelProps) {
|
||
const { nodes, selectedNodeId, selectedNodeIds, setSelectedNode, deleteNode, updateNode, snapshotHistory, createGroup, ungroup } = useCanvasStore()
|
||
|
||
const [addingForNode, setAddingForNode] = useState<string | null>(null)
|
||
const [newSvc, setNewSvc] = useState<SvcForm>(EMPTY_FORM)
|
||
const [editingFor, setEditingFor] = useState<{ nodeId: string; index: number } | null>(null)
|
||
const [editSvc, setEditSvc] = useState<SvcForm>(EMPTY_FORM)
|
||
const [groupName, setGroupName] = useState('')
|
||
const [creatingGroup, setCreatingGroup] = useState(false)
|
||
|
||
// Properties state
|
||
const [addingProp, setAddingProp] = useState(false)
|
||
const [newProp, setNewProp] = useState<PropForm>(EMPTY_PROP)
|
||
const [editingPropIndex, setEditingPropIndex] = useState<number | null>(null)
|
||
const [editProp, setEditProp] = useState<PropForm>(EMPTY_PROP)
|
||
|
||
// Multi-select panel
|
||
const multiSelected = (selectedNodeIds ?? []).filter((id) => nodes.some((n) => n.id === id))
|
||
|
||
if (multiSelected.length > 1) {
|
||
return (
|
||
<MultiSelectPanel
|
||
nodeIds={multiSelected}
|
||
nodes={nodes}
|
||
groupName={groupName}
|
||
setGroupName={setGroupName}
|
||
creatingGroup={creatingGroup}
|
||
setCreatingGroup={setCreatingGroup}
|
||
onCreateGroup={(name) => { createGroup(multiSelected, name); setGroupName(''); setCreatingGroup(false) }}
|
||
onClose={() => setSelectedNode(null)}
|
||
/>
|
||
)
|
||
}
|
||
|
||
const node = nodes.find((n) => n.id === selectedNodeId)
|
||
if (!node || node.data.type === 'groupRect') return null
|
||
|
||
// Group detail panel
|
||
if (node.data.type === 'group') {
|
||
return (
|
||
<GroupDetailPanel
|
||
node={node}
|
||
nodes={nodes}
|
||
onUngroup={() => { ungroup(node.id) }}
|
||
onToggleBorder={() => {
|
||
snapshotHistory()
|
||
updateNode(node.id, {
|
||
custom_colors: {
|
||
...node.data.custom_colors,
|
||
show_border: !(node.data.custom_colors?.show_border !== false),
|
||
},
|
||
})
|
||
}}
|
||
onClose={() => setSelectedNode(null)}
|
||
onSelectChild={(id) => setSelectedNode(id)}
|
||
/>
|
||
)
|
||
}
|
||
|
||
// Normal single-node panel
|
||
const addingService = addingForNode === node.id
|
||
const editingIndex = editingFor?.nodeId === node.id ? editingFor.index : null
|
||
const { data } = node
|
||
const services = data.services ?? []
|
||
const statusColor = STATUS_COLORS[data.status]
|
||
const host = data.ip ?? data.hostname
|
||
|
||
const handleDelete = () => {
|
||
if (confirm(`Delete "${data.label}"?`)) {
|
||
snapshotHistory()
|
||
deleteNode(node.id)
|
||
}
|
||
}
|
||
|
||
const handleAddService = () => {
|
||
const trimmedPort = newSvc.port.trim()
|
||
const port = trimmedPort === '' ? undefined : parseInt(trimmedPort, 10)
|
||
if (!newSvc.service_name.trim()) return
|
||
if (trimmedPort !== '' && (port == null || Number.isNaN(port) || port < 1 || port > 65535)) return
|
||
snapshotHistory()
|
||
const path = newSvc.path.trim()
|
||
const svc: ServiceInfo = {
|
||
...(port != null ? { port } : {}),
|
||
protocol: newSvc.protocol,
|
||
service_name: newSvc.service_name.trim(),
|
||
...(path ? { path } : {}),
|
||
}
|
||
updateNode(node.id, { services: [...services, svc] })
|
||
setNewSvc(EMPTY_FORM)
|
||
setAddingForNode(null)
|
||
}
|
||
|
||
const handleRemoveService = (index: number) => {
|
||
snapshotHistory()
|
||
const updated = services.filter((_, i) => i !== index)
|
||
updateNode(node.id, { services: updated })
|
||
if (editingIndex === index) setEditingFor(null)
|
||
}
|
||
|
||
const handleStartEdit = (index: number) => {
|
||
const svc = services[index]
|
||
if (!svc) return
|
||
setEditSvc({ port: svc.port != null ? String(svc.port) : '', protocol: svc.protocol, service_name: svc.service_name, path: svc.path ?? '' })
|
||
setEditingFor({ nodeId: node.id, index })
|
||
setAddingForNode(null)
|
||
}
|
||
|
||
const handleSaveEdit = () => {
|
||
if (editingIndex === null) return
|
||
const trimmedPort = editSvc.port.trim()
|
||
const port = trimmedPort === '' ? undefined : parseInt(trimmedPort, 10)
|
||
if (!editSvc.service_name.trim()) return
|
||
if (trimmedPort !== '' && (port == null || Number.isNaN(port) || port < 1 || port > 65535)) return
|
||
snapshotHistory()
|
||
const path = editSvc.path.trim()
|
||
const updated = services.map((svc, i) =>
|
||
i === editingIndex
|
||
? {
|
||
...svc,
|
||
protocol: editSvc.protocol,
|
||
service_name: editSvc.service_name.trim(),
|
||
...(port != null ? { port } : { port: undefined }),
|
||
...(path ? { path } : { path: undefined }),
|
||
}
|
||
: svc
|
||
)
|
||
updateNode(node.id, { services: updated })
|
||
setEditingFor(null)
|
||
}
|
||
|
||
// --- Property handlers ---
|
||
const properties: NodeProperty[] = data.properties ?? []
|
||
|
||
const handleAddProp = () => {
|
||
if (!newProp.key.trim() || !newProp.value.trim()) return
|
||
snapshotHistory()
|
||
const prop: NodeProperty = { key: newProp.key.trim(), value: newProp.value.trim(), icon: newProp.icon, visible: newProp.visible }
|
||
updateNode(node.id, { properties: [...properties, prop] })
|
||
setNewProp(EMPTY_PROP)
|
||
setAddingProp(false)
|
||
}
|
||
|
||
const handleRemoveProp = (index: number) => {
|
||
snapshotHistory()
|
||
updateNode(node.id, { properties: properties.filter((_, i) => i !== index) })
|
||
if (editingPropIndex === index) setEditingPropIndex(null)
|
||
}
|
||
|
||
const handleTogglePropVisible = (index: number) => {
|
||
snapshotHistory()
|
||
updateNode(node.id, {
|
||
properties: properties.map((p, i) => i === index ? { ...p, visible: !p.visible } : p),
|
||
})
|
||
}
|
||
|
||
const handleStartEditProp = (index: number) => {
|
||
const p = properties[index]
|
||
if (!p) return
|
||
setEditProp({ key: p.key, value: p.value, icon: p.icon, visible: p.visible })
|
||
setEditingPropIndex(index)
|
||
setAddingProp(false)
|
||
}
|
||
|
||
const handleSaveEditProp = () => {
|
||
if (editingPropIndex === null || !editProp.key.trim() || !editProp.value.trim()) return
|
||
snapshotHistory()
|
||
updateNode(node.id, {
|
||
properties: properties.map((p, i) =>
|
||
i === editingPropIndex
|
||
? { key: editProp.key.trim(), value: editProp.value.trim(), icon: editProp.icon, visible: editProp.visible }
|
||
: p
|
||
),
|
||
})
|
||
setEditingPropIndex(null)
|
||
}
|
||
|
||
return (
|
||
<aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
|
||
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
|
||
<span className="font-semibold text-sm text-foreground truncate">{data.label}</span>
|
||
<button aria-label="Close panel" onClick={() => setSelectedNode(null)} className="text-muted-foreground hover:text-foreground transition-colors">
|
||
<X size={16} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 px-4 py-3 border-b border-border">
|
||
<div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: statusColor }} />
|
||
<span className="text-sm capitalize" style={{ color: statusColor }}>{data.status}</span>
|
||
{data.response_time_ms !== undefined && (
|
||
<span className="ml-auto font-mono text-xs text-muted-foreground">{data.response_time_ms}ms</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 px-4 py-3 text-sm">
|
||
<DetailRow label="Type" value={NODE_TYPE_LABELS[data.type]} />
|
||
{data.hostname && (
|
||
<div className="flex justify-between gap-2 items-baseline">
|
||
<span className="text-muted-foreground text-xs shrink-0">Hostname</span>
|
||
<a href={`http://${data.hostname}`} target="_blank" rel="noopener noreferrer" className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1" title={data.hostname}>
|
||
{data.hostname}<ExternalLink size={10} className="shrink-0" />
|
||
</a>
|
||
</div>
|
||
)}
|
||
{data.ip && (
|
||
<div className="flex justify-between gap-2 items-baseline">
|
||
<span className="text-muted-foreground text-xs shrink-0">IP Address</span>
|
||
<a href={`http://${primaryIp(data.ip)}`} target="_blank" rel="noopener noreferrer" className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1" title={data.ip}>
|
||
{data.ip}<ExternalLink size={10} className="shrink-0" />
|
||
</a>
|
||
</div>
|
||
)}
|
||
{data.mac && <DetailRow label="MAC" value={data.mac} mono />}
|
||
{data.os && <DetailRow label="OS" value={data.os} />}
|
||
{data.check_method && <DetailRow label="Check" value={data.check_method} mono />}
|
||
{data.last_seen && <DetailRow label="Last Seen" value={new Date(data.last_seen.endsWith('Z') ? data.last_seen : data.last_seen + 'Z').toLocaleString()} />}
|
||
</div>
|
||
|
||
{/* Properties section */}
|
||
<div className="px-4 py-3 border-t border-border">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-xs text-muted-foreground">Properties{properties.length > 0 ? ` (${properties.length})` : ''}</span>
|
||
<button
|
||
onClick={() => { setAddingProp((v) => !v); setEditingPropIndex(null) }}
|
||
className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors"
|
||
>
|
||
<Plus size={10} /> Add
|
||
</button>
|
||
</div>
|
||
{addingProp && (
|
||
<PropertyForm
|
||
form={newProp}
|
||
onChange={setNewProp}
|
||
onConfirm={handleAddProp}
|
||
onCancel={() => { setAddingProp(false); setNewProp(EMPTY_PROP) }}
|
||
confirmLabel="Add"
|
||
/>
|
||
)}
|
||
{properties.length > 0 && (
|
||
<div className="flex flex-col gap-1.5">
|
||
{properties.map((prop, i) =>
|
||
editingPropIndex === i ? (
|
||
<PropertyForm
|
||
key={`edit-${i}`}
|
||
form={editProp}
|
||
onChange={setEditProp}
|
||
onConfirm={handleSaveEditProp}
|
||
onCancel={() => setEditingPropIndex(null)}
|
||
confirmLabel="Save"
|
||
/>
|
||
) : (
|
||
<PropertyBadge
|
||
key={`${prop.key}-${i}`}
|
||
prop={prop}
|
||
onToggleVisible={() => handleTogglePropVisible(i)}
|
||
onEdit={() => handleStartEditProp(i)}
|
||
onRemove={() => handleRemoveProp(i)}
|
||
/>
|
||
)
|
||
)}
|
||
</div>
|
||
)}
|
||
{properties.length === 0 && !addingProp && (
|
||
<p className="text-[10px] text-muted-foreground/50">No properties — click Add to define one.</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="px-4 py-3 border-t border-border">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-xs text-muted-foreground">Services{services.length > 0 ? ` (${services.length})` : ''}</span>
|
||
<button onClick={() => { setAddingForNode((v) => v === node.id ? null : node.id); setEditingFor(null) }} className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors">
|
||
<Plus size={10} /> Add
|
||
</button>
|
||
</div>
|
||
{addingService && <ServiceForm form={newSvc} onChange={setNewSvc} onConfirm={handleAddService} onCancel={() => setAddingForNode(null)} confirmLabel="Add" autoFocus />}
|
||
{services.length > 0 && (
|
||
<div className="flex flex-col gap-1.5">
|
||
{services.map((svc, i) =>
|
||
editingIndex === i ? (
|
||
<ServiceForm key={`edit-${i}`} form={editSvc} onChange={setEditSvc} onConfirm={handleSaveEdit} onCancel={() => setEditingFor(null)} confirmLabel="Save" autoFocus />
|
||
) : (
|
||
<ServiceBadge key={`${svc.port ?? 'host'}-${svc.protocol}-${svc.path ?? ''}-${i}`} svc={svc} host={host} onEdit={() => handleStartEdit(i)} onRemove={() => handleRemoveService(i)} />
|
||
)
|
||
)}
|
||
</div>
|
||
)}
|
||
{services.length === 0 && !addingService && <p className="text-[10px] text-muted-foreground/50">No services — click Add to register one.</p>}
|
||
</div>
|
||
|
||
{data.notes && (
|
||
<div className="px-4 py-3 border-t border-border">
|
||
<div className="text-xs text-muted-foreground mb-1">Notes</div>
|
||
<p className="text-xs text-foreground/80 whitespace-pre-wrap">{data.notes}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-auto flex gap-2 px-4 py-3 border-t border-border">
|
||
<Button size="sm" variant="secondary" className="flex-1 gap-1.5" onClick={() => onEdit(node.id)}>
|
||
<Edit size={14} /> Edit
|
||
</Button>
|
||
<Button size="sm" variant="destructive" className="gap-1.5" aria-label="Delete node" onClick={handleDelete}>
|
||
<Trash2 size={14} />
|
||
</Button>
|
||
</div>
|
||
</aside>
|
||
)
|
||
}
|
||
|
||
// --- Multi-select panel ---
|
||
|
||
interface MultiSelectPanelProps {
|
||
nodeIds: string[]
|
||
nodes: Node<NodeData>[]
|
||
groupName: string
|
||
setGroupName: (v: string) => void
|
||
creatingGroup: boolean
|
||
setCreatingGroup: (v: boolean) => void
|
||
onCreateGroup: (name: string) => void
|
||
onClose: () => void
|
||
}
|
||
|
||
function MultiSelectPanel({ nodeIds, nodes, groupName, setGroupName, creatingGroup, setCreatingGroup, onCreateGroup, onClose }: MultiSelectPanelProps) {
|
||
const selectedNodes = nodeIds.map((id) => nodes.find((n) => n.id === id)).filter(Boolean) as Node<NodeData>[]
|
||
|
||
const handleCreate = () => {
|
||
const name = groupName.trim() || 'Group'
|
||
onCreateGroup(name)
|
||
}
|
||
|
||
return (
|
||
<aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
|
||
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
|
||
<div className="flex items-center gap-2">
|
||
<Layers size={14} className="text-[#00d4ff]" />
|
||
<span className="font-semibold text-sm text-foreground">{nodeIds.length} nodes selected</span>
|
||
</div>
|
||
<button aria-label="Close panel" onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
|
||
<X size={16} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex-1 px-4 py-3 space-y-1.5 overflow-y-auto">
|
||
{selectedNodes.map((n) => (
|
||
<div key={n.id} className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-[#21262d] text-xs">
|
||
<span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: STATUS_COLORS[n.data.status] }} />
|
||
<span className="truncate text-foreground font-medium">{n.data.label}</span>
|
||
<span className="ml-auto text-muted-foreground shrink-0">{NODE_TYPE_LABELS[n.data.type] ?? n.data.type}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="px-4 py-3 border-t border-border space-y-2">
|
||
{creatingGroup ? (
|
||
<>
|
||
<Input
|
||
autoFocus
|
||
placeholder="Group name…"
|
||
value={groupName}
|
||
onChange={(e) => setGroupName(e.target.value)}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') handleCreate(); if (e.key === 'Escape') setCreatingGroup(false) }}
|
||
className="bg-[#21262d] border-[#30363d] text-xs h-7"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button size="sm" className="flex-1 h-7 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={handleCreate}>
|
||
Create Group
|
||
</Button>
|
||
<Button size="sm" variant="ghost" className="h-7 text-[10px]" onClick={() => setCreatingGroup(false)}>
|
||
Cancel
|
||
</Button>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<Button
|
||
size="sm"
|
||
className="w-full gap-2 bg-[#00d4ff]/10 text-[#00d4ff] border border-[#00d4ff]/30 hover:bg-[#00d4ff]/20"
|
||
variant="ghost"
|
||
onClick={() => setCreatingGroup(true)}
|
||
>
|
||
<Layers size={13} /> Create Group
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
)
|
||
}
|
||
|
||
// --- Group detail panel ---
|
||
|
||
interface GroupDetailPanelProps {
|
||
node: Node<NodeData>
|
||
nodes: Node<NodeData>[]
|
||
onUngroup: () => void
|
||
onToggleBorder: () => void
|
||
onClose: () => void
|
||
onSelectChild: (id: string) => void
|
||
}
|
||
|
||
function GroupDetailPanel({ node, nodes, onUngroup, onToggleBorder, onClose, onSelectChild }: GroupDetailPanelProps) {
|
||
const children = nodes.filter((n) => n.parentId === node.id)
|
||
const onlineCount = children.filter((n) => n.data.status === 'online').length
|
||
const offlineCount = children.filter((n) => n.data.status === 'offline').length
|
||
const showBorder = node.data.custom_colors?.show_border !== false
|
||
|
||
const handleUngroup = () => {
|
||
if (confirm(`Ungroup "${node.data.label}"? Nodes will be released to the canvas.`)) {
|
||
onUngroup()
|
||
}
|
||
}
|
||
|
||
return (
|
||
<aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
|
||
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
<Layers size={14} className="text-[#00d4ff] shrink-0" />
|
||
<span className="font-semibold text-sm text-foreground truncate">{node.data.label}</span>
|
||
</div>
|
||
<button aria-label="Close panel" onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors shrink-0">
|
||
<X size={16} />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Status summary */}
|
||
<div className="flex items-center gap-4 px-4 py-3 border-b border-border text-xs">
|
||
<span className="text-muted-foreground">{children.length} node{children.length !== 1 ? 's' : ''}</span>
|
||
{onlineCount > 0 && <span style={{ color: STATUS_COLORS.online }}>● {onlineCount} online</span>}
|
||
{offlineCount > 0 && <span style={{ color: STATUS_COLORS.offline }}>● {offlineCount} offline</span>}
|
||
</div>
|
||
|
||
{/* Children list */}
|
||
<div className="flex-1 px-4 py-3 space-y-1.5 overflow-y-auto">
|
||
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50">Members</span>
|
||
{children.length === 0 && <p className="text-xs text-muted-foreground/50">No nodes in this group.</p>}
|
||
{children.map((child) => (
|
||
<button
|
||
key={child.id}
|
||
onClick={() => onSelectChild(child.id)}
|
||
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md bg-[#21262d] text-xs hover:bg-[#30363d] transition-colors text-left"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: STATUS_COLORS[child.data.status] }} />
|
||
<span className="truncate text-foreground font-medium">{child.data.label}</span>
|
||
<span className="ml-auto text-muted-foreground shrink-0">{NODE_TYPE_LABELS[child.data.type] ?? child.data.type}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="px-4 py-3 border-t border-border space-y-2">
|
||
<button
|
||
onClick={onToggleBorder}
|
||
className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-[#21262d] transition-colors"
|
||
>
|
||
{showBorder ? <Eye size={13} /> : <EyeOff size={13} />}
|
||
{showBorder ? 'Hide border & title' : 'Show border & title'}
|
||
</button>
|
||
<Button
|
||
size="sm"
|
||
variant="destructive"
|
||
className="w-full gap-2"
|
||
onClick={handleUngroup}
|
||
>
|
||
<Ungroup size={13} /> Ungroup
|
||
</Button>
|
||
</div>
|
||
</aside>
|
||
)
|
||
}
|
||
|
||
// --- Helpers ---
|
||
|
||
function DetailRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
|
||
return (
|
||
<div className="flex justify-between gap-2 items-baseline">
|
||
<span className="text-muted-foreground text-xs shrink-0">{label}</span>
|
||
<span className={`text-xs text-right truncate ${mono ? 'font-mono text-[#00d4ff]' : 'text-foreground'}`} title={value}>
|
||
{value}
|
||
</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ServiceForm({ form, onChange, onConfirm, onCancel, confirmLabel, autoFocus }: {
|
||
form: { port: string; protocol: 'tcp' | 'udp'; service_name: string; path: string }
|
||
onChange: (f: { port: string; protocol: 'tcp' | 'udp'; service_name: string; path: string }) => void
|
||
onConfirm: () => void
|
||
onCancel: () => void
|
||
confirmLabel: string
|
||
autoFocus?: boolean
|
||
}) {
|
||
const setPort = (value: string) => {
|
||
const digitsOnly = value.replace(/\D/g, '').slice(0, 5)
|
||
onChange({ ...form, port: digitsOnly })
|
||
}
|
||
|
||
const clampPort = (value: string) => {
|
||
if (!value) return ''
|
||
const parsed = Number.parseInt(value, 10)
|
||
if (!Number.isFinite(parsed)) return ''
|
||
return String(Math.max(1, Math.min(65535, parsed)))
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col gap-1.5 mb-1 p-2 rounded-md bg-[#0d1117] border border-[#30363d]">
|
||
<Input value={form.service_name} onChange={(e) => onChange({ ...form, service_name: e.target.value })} placeholder="Service name" className="bg-[#21262d] border-[#30363d] text-xs h-7" autoFocus={autoFocus} onKeyDown={(e) => e.key === 'Enter' && onConfirm()} />
|
||
<div className="flex gap-1.5">
|
||
<Input
|
||
type="text"
|
||
inputMode="numeric"
|
||
pattern="[0-9]*"
|
||
value={form.port}
|
||
onChange={(e) => setPort(e.target.value)}
|
||
onBlur={() => onChange({ ...form, port: clampPort(form.port) })}
|
||
placeholder="Port"
|
||
className="bg-[#21262d] border-[#30363d] font-mono text-xs h-7 w-28 shrink-0"
|
||
onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
|
||
/>
|
||
<select value={form.protocol} onChange={(e) => onChange({ ...form, protocol: e.target.value as 'tcp' | 'udp' })} className="flex-1 bg-[#21262d] border border-[#30363d] rounded-md text-xs h-7 px-1.5 text-foreground">
|
||
<option value="tcp">tcp</option>
|
||
<option value="udp">udp</option>
|
||
</select>
|
||
</div>
|
||
<Input value={form.path} onChange={(e) => onChange({ ...form, path: e.target.value })} placeholder="Path (/admin)" className="bg-[#21262d] border-[#30363d] font-mono text-xs h-7" onKeyDown={(e) => e.key === 'Enter' && onConfirm()} />
|
||
<div className="flex gap-1.5">
|
||
<Button size="sm" className="flex-1 h-6 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={onConfirm}>{confirmLabel}</Button>
|
||
<Button size="sm" variant="ghost" className="h-6 text-[10px]" onClick={onCancel}>Cancel</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// --- Property components ---
|
||
|
||
function PropertyForm({ form, onChange, onConfirm, onCancel, confirmLabel }: {
|
||
form: PropForm
|
||
onChange: (f: PropForm) => void
|
||
onConfirm: () => void
|
||
onCancel: () => void
|
||
confirmLabel: string
|
||
}) {
|
||
return (
|
||
<div className="flex flex-col gap-1.5 mb-1 p-2 rounded-md bg-[#0d1117] border border-[#30363d]">
|
||
<Input
|
||
value={form.key}
|
||
onChange={(e) => onChange({ ...form, key: e.target.value })}
|
||
placeholder="Label (e.g. CPU Model)"
|
||
className="bg-[#21262d] border-[#30363d] text-xs h-7"
|
||
autoFocus
|
||
onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
|
||
/>
|
||
<Input
|
||
value={form.value}
|
||
onChange={(e) => onChange({ ...form, value: e.target.value })}
|
||
placeholder="Value (e.g. i7-12700K)"
|
||
className="bg-[#21262d] border-[#30363d] text-xs h-7"
|
||
onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
|
||
/>
|
||
{/* Icon picker */}
|
||
<div className="flex flex-wrap gap-1 pt-0.5">
|
||
<button
|
||
onClick={() => onChange({ ...form, icon: null })}
|
||
title="No icon"
|
||
className={`w-6 h-6 rounded flex items-center justify-center text-[10px] border transition-colors ${
|
||
form.icon === null ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]' : 'border-[#30363d] text-muted-foreground hover:border-[#8b949e]'
|
||
}`}
|
||
>
|
||
–
|
||
</button>
|
||
{PROPERTY_ICON_NAMES.map((name) => {
|
||
const Icon = PROPERTY_ICONS[name]
|
||
const active = form.icon === name
|
||
return (
|
||
<button
|
||
key={name}
|
||
onClick={() => onChange({ ...form, icon: name })}
|
||
title={name}
|
||
className={`w-6 h-6 rounded flex items-center justify-center border transition-colors ${
|
||
active ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]' : 'border-[#30363d] text-muted-foreground hover:border-[#8b949e]'
|
||
}`}
|
||
>
|
||
{createElement(Icon, { size: 11 })}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
{/* Visible toggle */}
|
||
<label className="flex items-center gap-2 cursor-pointer pt-0.5">
|
||
<input
|
||
type="checkbox"
|
||
checked={form.visible}
|
||
onChange={(e) => onChange({ ...form, visible: e.target.checked })}
|
||
className="accent-[#00d4ff] w-3 h-3"
|
||
/>
|
||
<span className="text-[10px] text-muted-foreground">Show on node</span>
|
||
</label>
|
||
<div className="flex gap-1.5">
|
||
<Button size="sm" className="flex-1 h-6 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={onConfirm}>
|
||
{confirmLabel}
|
||
</Button>
|
||
<Button size="sm" variant="ghost" className="h-6 text-[10px]" onClick={onCancel}>Cancel</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function PropertyBadge({ prop, onToggleVisible, onEdit, onRemove }: {
|
||
prop: NodeProperty
|
||
onToggleVisible: () => void
|
||
onEdit: () => void
|
||
onRemove: () => void
|
||
}) {
|
||
const Icon = resolvePropertyIcon(prop.icon)
|
||
return (
|
||
<div className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors" style={{ background: '#21262d', borderColor: '#30363d' }}>
|
||
<div className="flex items-center gap-1.5 min-w-0">
|
||
{Icon && createElement(Icon, { size: 11, className: 'shrink-0 text-muted-foreground' })}
|
||
<span className="font-medium truncate text-foreground" title={prop.key}>{prop.key}</span>
|
||
<span className="text-muted-foreground truncate" title={prop.value}>· {prop.value}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1 shrink-0">
|
||
<button
|
||
onClick={onToggleVisible}
|
||
title={prop.visible ? 'Hide on node' : 'Show on node'}
|
||
className="text-[#8b949e] hover:text-[#00d4ff] transition-colors"
|
||
>
|
||
{prop.visible ? <Eye size={10} /> : <EyeOff size={10} />}
|
||
</button>
|
||
<button onClick={onEdit} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff]" title="Edit property">
|
||
<Pencil size={10} />
|
||
</button>
|
||
<button onClick={onRemove} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149]" title="Remove property">
|
||
<X size={10} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const CATEGORY_COLORS: Record<string, string> = {
|
||
web: '#00d4ff', database: '#a855f7', monitoring: '#39d353', storage: '#e3b341', security: '#f85149', remote: '#8b949e',
|
||
}
|
||
|
||
function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) {
|
||
const url = getServiceUrl(svc, host)
|
||
const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e'
|
||
const portLabel = svc.port != null ? String(svc.port) : 'host'
|
||
const pathLabel = svc.path?.trim() ? svc.path.trim() : null
|
||
const inner = (
|
||
<div className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors" style={{ background: '#21262d', borderColor: '#30363d', cursor: url ? 'pointer' : 'default' }}>
|
||
<div className="flex items-center gap-1.5 min-w-0">
|
||
<span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
|
||
<span className="font-medium truncate" style={{ color }} title={svc.service_name}>{svc.service_name}</span>
|
||
{pathLabel && <span className="truncate text-[#8b949e]" title={pathLabel}>{pathLabel}</span>}
|
||
</div>
|
||
<div className="flex items-center gap-1.5 shrink-0">
|
||
<span className="font-mono text-[#8b949e]">{portLabel}/{svc.protocol}</span>
|
||
{url && <ExternalLink size={10} className="text-muted-foreground" />}
|
||
<button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5" title="Edit service"><Pencil size={10} /></button>
|
||
<button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5" title="Remove service"><X size={10} /></button>
|
||
</div>
|
||
</div>
|
||
)
|
||
if (url) return <a href={url} target="_blank" rel="noopener noreferrer" className="block hover:opacity-80 transition-opacity">{inner}</a>
|
||
return inner
|
||
}
|