Merge pull request #107 from findthelorax/feature/services-node-toggle
feature: services node toggle
This commit is contained in:
Remy
@@ -49,6 +49,7 @@ vi.mock('@/utils/nodeIcons', () => ({
|
||||
vi.mock('@/utils/maskIp', () => ({
|
||||
maskIp: (ip: string) => ip,
|
||||
splitIps: (ip: string) => ip ? ip.split(',').map((s: string) => s.trim()).filter(Boolean) : [],
|
||||
primaryIp: (ip: string) => ip ? ip.split(',')[0].trim() : '',
|
||||
}))
|
||||
|
||||
vi.mock('@/utils/propertyIcons', () => ({
|
||||
@@ -169,6 +170,49 @@ describe('BaseNode — properties rendering', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('BaseNode — services visibility toggle', () => {
|
||||
it('does not render service toggle button on the node', () => {
|
||||
renderBaseNode({ services: [{ service_name: 'nginx', port: 80, protocol: 'tcp' }] })
|
||||
expect(screen.queryByTitle('Show services')).toBeNull()
|
||||
})
|
||||
|
||||
it('renders service rows when services are toggled on', () => {
|
||||
renderBaseNode({
|
||||
ip: '192.168.1.10',
|
||||
custom_colors: { show_services: true },
|
||||
services: [
|
||||
{ service_name: 'nginx', port: 80, protocol: 'tcp' },
|
||||
{ service_name: 'ssh', port: 22, protocol: 'tcp' },
|
||||
],
|
||||
})
|
||||
|
||||
expect(screen.getByText('nginx')).toBeDefined()
|
||||
expect(screen.getByText('80')).toBeDefined()
|
||||
expect(screen.getByText('ssh')).toBeDefined()
|
||||
})
|
||||
|
||||
it('renders clickable service links for web services', () => {
|
||||
renderBaseNode({
|
||||
ip: '192.168.1.10',
|
||||
custom_colors: { show_services: true },
|
||||
services: [{ service_name: 'nginx', port: 80, protocol: 'tcp' }],
|
||||
})
|
||||
|
||||
const link = screen.getByRole('link', { name: /nginx/i }) as HTMLAnchorElement
|
||||
expect(link.getAttribute('href')).toBe('http://192.168.1.10:80')
|
||||
})
|
||||
|
||||
it('keeps non-web services as non-clickable rows', () => {
|
||||
renderBaseNode({
|
||||
ip: '192.168.1.10',
|
||||
custom_colors: { show_services: true },
|
||||
services: [{ service_name: 'ssh', port: 22, protocol: 'tcp' }],
|
||||
})
|
||||
|
||||
expect(screen.queryByRole('link', { name: /ssh/i })).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('BaseNode — legacy hardware fallback', () => {
|
||||
it('renders legacy hardware when properties is undefined and show_hardware is true', () => {
|
||||
renderBaseNode({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createElement, useEffect, useMemo } from 'react'
|
||||
import { Handle, Position, NodeResizer, useUpdateNodeInternals, useViewport, type NodeProps, type Node } from '@xyflow/react'
|
||||
import { Cpu, MemoryStick, HardDrive, type LucideIcon } from 'lucide-react'
|
||||
import { Cpu, MemoryStick, HardDrive, ExternalLink, type LucideIcon } from 'lucide-react'
|
||||
import type { NodeData } from '@/types'
|
||||
import { resolveNodeColors } from '@/utils/nodeColors'
|
||||
import { resolveNodeIcon } from '@/utils/nodeIcons'
|
||||
@@ -8,8 +8,9 @@ import { resolvePropertyIcon } from '@/utils/propertyIcons'
|
||||
import { useThemeStore } from '@/stores/themeStore'
|
||||
import { THEMES } from '@/utils/themes'
|
||||
import { useCanvasStore } from '@/stores/canvasStore'
|
||||
import { maskIp, splitIps } from '@/utils/maskIp'
|
||||
import { maskIp, primaryIp, splitIps } from '@/utils/maskIp'
|
||||
import { bottomHandleId, bottomHandlePositions, clampBottomHandles } from '@/utils/handleUtils'
|
||||
import { getServiceUrl } from '@/utils/serviceUrl'
|
||||
|
||||
interface BaseNodeProps extends NodeProps<Node<NodeData>> {
|
||||
icon: LucideIcon
|
||||
@@ -35,6 +36,9 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
|
||||
const colors = resolveNodeColors(data, activeTheme)
|
||||
const statusColor = theme.colors.statusColors[data.status]
|
||||
const isOnline = data.status === 'online'
|
||||
const services = data.services ?? []
|
||||
const showServices = data.custom_colors?.show_services === true
|
||||
const serviceHost = data.ip ? primaryIp(data.ip) : data.hostname
|
||||
|
||||
// Properties: prefer new system; fall back to legacy hardware fields for unmigrated nodes
|
||||
const visibleProperties = data.properties?.filter((p) => p.visible) ?? null
|
||||
@@ -138,6 +142,74 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
|
||||
</>
|
||||
)}
|
||||
|
||||
{showServices && services.length > 0 && (
|
||||
<>
|
||||
<div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
|
||||
<div className="flex flex-col gap-1 px-2.5 py-1.5 overflow-hidden">
|
||||
{services.map((svc, idx) => {
|
||||
const url = getServiceUrl(svc, serviceHost)
|
||||
const row = (
|
||||
<div
|
||||
className="nodrag flex items-center justify-between gap-2 px-1.5 py-1 rounded text-[10px] min-w-0 overflow-hidden"
|
||||
style={{
|
||||
background: theme.colors.nodeIconBackground,
|
||||
color: theme.colors.nodeSubtextColor,
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="flex items-center justify-between gap-2 w-full min-w-0">
|
||||
{/* LEFT: service name */}
|
||||
<span
|
||||
className="font-medium truncate"
|
||||
style={{ minWidth: 0 }}
|
||||
title={svc.service_name}
|
||||
>
|
||||
{svc.service_name}
|
||||
</span>
|
||||
|
||||
{/* RIGHT: path + port */}
|
||||
<div className="flex items-center gap-2 shrink-0 min-w-0">
|
||||
{svc.path && (
|
||||
<span
|
||||
className="truncate text-[#8b949e] text-right max-w-[80px]"
|
||||
title={svc.path}
|
||||
>
|
||||
{svc.path}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="font-mono opacity-80 flex items-center gap-1">
|
||||
<span>{svc.port}</span>
|
||||
<ExternalLink
|
||||
size={9}
|
||||
className={`shrink-0 ${url ? '' : 'opacity-0'}`}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (!url) return <div key={`${svc.port}-${svc.protocol}-${svc.service_name}-${idx}`}>{row}</div>
|
||||
|
||||
return (
|
||||
<a
|
||||
key={`${svc.port}-${svc.protocol}-${svc.service_name}-${idx}`}
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block hover:opacity-85 transition-opacity"
|
||||
title={url}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{row}
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Legacy hardware section — fallback for nodes not yet migrated */}
|
||||
{showLegacyHardware && (
|
||||
<>
|
||||
|
||||
@@ -61,6 +61,13 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
|
||||
const [iconSearch, setIconSearch] = useState('')
|
||||
const [iconPickerOpen, setIconPickerOpen] = useState(false)
|
||||
const [labelError, setLabelError] = useState(false)
|
||||
const resolvedNodeColors = resolveNodeColors({ type: form.type ?? 'generic', custom_colors: form.custom_colors })
|
||||
const showServicesEnabled = form.custom_colors?.show_services === true
|
||||
const hasAppearanceOverrides = Boolean(
|
||||
form.custom_colors?.border
|
||||
|| form.custom_colors?.background
|
||||
|| form.custom_colors?.icon
|
||||
)
|
||||
|
||||
const set = (key: keyof NodeData, value: unknown) =>
|
||||
setForm((f) => ({ ...f, [key]: value }))
|
||||
@@ -298,21 +305,52 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
|
||||
<div className="flex items-center justify-between col-span-2 py-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Label className="text-xs text-muted-foreground">Container Mode</Label>
|
||||
<span className="text-[10px] text-muted-foreground/60">Allow other nodes to nest inside this node</span>
|
||||
<span className="text-[10px] text-muted-foreground/60">
|
||||
Allow other nodes to nest inside this node
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-label="Container Mode"
|
||||
aria-checked={!!form.container_mode}
|
||||
onClick={() => set('container_mode', !form.container_mode)}
|
||||
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${modalStyles['modal-interactive']}`}
|
||||
style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out"
|
||||
style={{
|
||||
transform: form.container_mode ? 'translateX(16px)' : 'translateX(0)'
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Service visibility */}
|
||||
{form.type !== 'groupRect' && form.type !== 'group' && (
|
||||
<div className="flex items-start justify-between col-span-2 py-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Label className="text-xs text-muted-foreground">Show Services</Label>
|
||||
<span className="text-[10px] text-muted-foreground/60">Display discovered services on the node card</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={!!form.container_mode}
|
||||
onClick={() => set('container_mode', !form.container_mode)}
|
||||
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${modalStyles['modal-interactive']}`}
|
||||
tabIndex={0}
|
||||
aria-label="Toggle container mode"
|
||||
style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }}
|
||||
aria-label="Show Services"
|
||||
aria-checked={showServicesEnabled}
|
||||
onClick={() => set('custom_colors', {
|
||||
...form.custom_colors,
|
||||
show_services: !showServicesEnabled,
|
||||
})}
|
||||
className="relative inline-flex h-5 w-9 mt-1 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none"
|
||||
style={{ background: showServicesEnabled ? resolvedNodeColors.icon : '#30363d' }}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-all"
|
||||
style={{ left: form.container_mode ? 'calc(100% - 18px)' : '2px' }}
|
||||
className="pointer-events-none absolute top-px left-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out"
|
||||
style={{ transform: showServicesEnabled ? 'translateX(16px)' : 'translateX(0)' }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -322,10 +360,20 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
|
||||
<div className="flex flex-col gap-2 col-span-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs text-muted-foreground">Appearance</Label>
|
||||
{form.custom_colors && (
|
||||
{hasAppearanceOverrides && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('custom_colors', undefined)}
|
||||
onClick={() => setForm((f) => {
|
||||
if (!f.custom_colors) return f
|
||||
const { border, background, icon, ...rest } = f.custom_colors
|
||||
void border
|
||||
void background
|
||||
void icon
|
||||
return {
|
||||
...f,
|
||||
custom_colors: Object.keys(rest).length > 0 ? rest : undefined,
|
||||
}
|
||||
})}
|
||||
className="flex items-center gap-1 text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors"
|
||||
>
|
||||
<RotateCcw size={10} /> Reset to defaults
|
||||
@@ -359,9 +407,11 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{!form.custom_colors && (
|
||||
<p className="text-[10px] text-muted-foreground/50">Using default colors for {NODE_TYPE_LABELS[form.type ?? 'generic']}. Click a swatch to customize.</p>
|
||||
)}
|
||||
<div className="min-h-3.5">
|
||||
{!hasAppearanceOverrides && (
|
||||
<p className="text-[10px] text-muted-foreground/50">Using default colors for {NODE_TYPE_LABELS[form.type ?? 'generic']}. Click a swatch to customize.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom connection points (not for group containers) */}
|
||||
|
||||
@@ -273,12 +273,45 @@ describe('NodeModal', () => {
|
||||
|
||||
it('toggles container_mode on click', () => {
|
||||
const { onSubmit } = renderModal({ initial: { ...BASE, type: 'proxmox', container_mode: true } })
|
||||
fireEvent.click(screen.getByRole('switch'))
|
||||
fireEvent.click(screen.getByRole('switch', { name: 'Container Mode' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Add' }))
|
||||
expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).container_mode).toBe(false)
|
||||
})
|
||||
|
||||
// ── Parent container ──────────────────────────────────────────────────
|
||||
// ── Show services toggle (modal-only) ───────────────────────────────
|
||||
|
||||
it('shows Show Services toggle for regular nodes', () => {
|
||||
renderModal({ initial: BASE })
|
||||
expect(screen.getByText('Show Services')).toBeDefined()
|
||||
expect(screen.getByRole('switch', { name: 'Show Services' })).toBeDefined()
|
||||
})
|
||||
|
||||
it('hides Show Services toggle for groupRect', () => {
|
||||
renderModal({ initial: { ...BASE, type: 'groupRect' } })
|
||||
expect(screen.queryByText('Show Services')).toBeNull()
|
||||
})
|
||||
|
||||
it('submits custom_colors.show_services=true when toggled on', () => {
|
||||
const { onSubmit } = renderModal({ initial: BASE })
|
||||
fireEvent.click(screen.getByRole('switch', { name: 'Show Services' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Add' }))
|
||||
const data = onSubmit.mock.calls[0][0] as Partial<NodeData>
|
||||
expect(data.custom_colors?.show_services).toBe(true)
|
||||
})
|
||||
|
||||
it('keeps default colors hint visible when Show Services is toggled on', () => {
|
||||
renderModal({ initial: BASE })
|
||||
fireEvent.click(screen.getByRole('switch', { name: 'Show Services' }))
|
||||
expect(screen.getByText(/Using default colors for/)).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not show Appearance reset when only Show Services is set', () => {
|
||||
renderModal({ initial: BASE })
|
||||
fireEvent.click(screen.getByRole('switch', { name: 'Show Services' }))
|
||||
expect(screen.queryByText('Reset to defaults')).toBeNull()
|
||||
})
|
||||
|
||||
// ── Parent Proxmox (vm / lxc only) ───────────────────────────────────
|
||||
|
||||
const parentContainerVisibleTypes = ['proxmox', 'vm', 'lxc', 'docker_host', 'isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer', 'iot', 'camera', 'cpl', 'computer', 'generic'] as const
|
||||
const parentContainerHiddenTypes = ['groupRect', 'group'] as const
|
||||
|
||||
@@ -2,7 +2,7 @@ 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 { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
|
||||
|
||||
import { useCanvasStore } from '@/stores/canvasStore'
|
||||
import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
|
||||
import { getServiceUrl } from '@/utils/serviceUrl'
|
||||
@@ -662,82 +662,80 @@ const CATEGORY_COLORS: Record<string, string> = {
|
||||
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 hasPort = svc.port != null
|
||||
const portLabel = hasPort ? String(svc.port) : ''
|
||||
const pathLabel = svc.path?.trim() ? svc.path.trim() : ''
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group flex items-center gap-1 border rounded-md text-xs transition-colors px-2 py-1.5 min-w-0"
|
||||
className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors min-w-0"
|
||||
style={{ background: '#21262d', borderColor: '#30363d' }}
|
||||
>
|
||||
<span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
{url ? (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium truncate min-w-0 flex-1"
|
||||
style={{ color }}
|
||||
title={svc.service_name}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{svc.service_name}
|
||||
</a>
|
||||
) : (
|
||||
<span
|
||||
className="font-medium truncate min-w-0 flex-1"
|
||||
style={{ color }}
|
||||
title={svc.service_name}
|
||||
>
|
||||
{svc.service_name}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{pathLabel && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className="truncate text-[#8b949e] max-w-[80px]"
|
||||
tabIndex={0}
|
||||
aria-label={pathLabel}
|
||||
>
|
||||
{pathLabel}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">{pathLabel}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
{hasPort && (
|
||||
<span className="font-mono text-[#8b949e] shrink-0">{portLabel}/{svc.protocol}</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5 min-w-0 flex-1">
|
||||
<span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
|
||||
{url ? (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex w-2.5 h-2.5 items-center justify-center shrink-0"
|
||||
aria-label="Open service link"
|
||||
style={{ color: 'inherit' }}
|
||||
className="font-medium truncate min-w-0 flex-1"
|
||||
style={{ color }}
|
||||
title={svc.service_name}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{svc.service_name}
|
||||
</a>
|
||||
) : (
|
||||
<span
|
||||
className="font-medium truncate min-w-0 flex-1"
|
||||
style={{ color }}
|
||||
title={svc.service_name}
|
||||
>
|
||||
{svc.service_name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{pathLabel && (
|
||||
<span
|
||||
className="shrink-0 text-[#8b949e] text-right w-16 truncate"
|
||||
title={pathLabel}
|
||||
>
|
||||
{pathLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{svc.port != null && (
|
||||
<span className="font-mono text-[#8b949e]">
|
||||
{svc.port}/{svc.protocol}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{url ? (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex w-2.5 h-2.5 items-center justify-center"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLink size={10} className="text-muted-foreground" />
|
||||
</a>
|
||||
) : (
|
||||
<span className="w-2.5 shrink-0" />
|
||||
<span className="w-2.5" />
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }}
|
||||
className="opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5"
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5 cursor-pointer"
|
||||
title="Edit service"
|
||||
>
|
||||
<Pencil size={10} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }}
|
||||
className="opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5"
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5 cursor-pointer"
|
||||
title="Remove service"
|
||||
>
|
||||
<X size={10} />
|
||||
|
||||
@@ -82,6 +82,7 @@ export interface NodeData extends Record<string, unknown> {
|
||||
border?: string
|
||||
background?: string
|
||||
icon?: string
|
||||
show_services?: boolean
|
||||
// Group rectangle extras (type === 'groupRect')
|
||||
text_color?: string
|
||||
text_position?: TextPosition
|
||||
|
||||
Reference in New Issue
Block a user