url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: added a toggle to show the services on a node

Browse Source
This commit is contained in:
findthelorax
2026-04-19 21:31:33 -04:00
committed by Pouzor
parent d1f170d5db
commit f32c32f6a5
5 changed files with 152 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/__tests__/BaseNode.test.tsx
+50 -2
View File
@@ -20,7 +20,9 @@ vi.mock('@/stores/themeStore', () => ({
}))
vi.mock('@/stores/canvasStore', () => ({
useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({ hideIp: false }),
useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({
hideIp: false,
}),
}))
vi.mock('@/utils/themes', () => ({
@@ -49,6 +51,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', () => ({
@@ -61,7 +64,9 @@ vi.mock('@/utils/handleUtils', () => ({
clampBottomHandles: (n: unknown) => typeof n === 'number' ? n : 1,
}))
beforeEach(() => { mockZoom = 1 })
beforeEach(() => {
mockZoom = 1
})
function makeNode(data: Partial<NodeData>): Node<NodeData> {
return {
@@ -169,6 +174,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({
frontend/src/components/canvas/nodes/BaseNode.tsx
+49 -2
View File
@@ -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
@@ -117,6 +121,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
</div>
))}
</div>
</div>
{/* Properties section (new system) */}
@@ -138,6 +143,48 @@ 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,
}}
>
<span className="font-medium truncate min-w-0" title={svc.service_name}>{svc.service_name}</span>
<span className="font-mono shrink-0 opacity-80 flex items-center gap-1">
<span>{svc.port}</span>
{url && <ExternalLink size={9} className="shrink-0" />}
</span>
</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 && (
<>
frontend/src/components/modals/NodeModal.tsx
+29 -3
View File
@@ -104,7 +104,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
<SelectContent className="bg-[#21262d] border-[#30363d]">
{NODE_TYPE_GROUPS.map((group, i) => (
<Fragment key={group.label}>
{i > 0 && <SelectSeparator className="bg-[#30363d]" />}
{i > 0 && <SelectSeparator key={`sep-${group.label}`} className="bg-[#30363d]" />}
<SelectGroup>
<SelectLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50 px-2 py-1">
{group.label}
@@ -303,11 +303,10 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
<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']}`}
tabIndex={0}
aria-label="Toggle container mode"
style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }}
>
<span
@@ -318,6 +317,33 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
</div>
)}
{/* Service visibility */}
{form.type !== 'groupRect' && form.type !== 'group' && (
<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">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-label="Show Services"
aria-checked={form.custom_colors?.show_services === true}
onClick={() => set('custom_colors', {
...form.custom_colors,
show_services: !(form.custom_colors?.show_services === true),
})}
className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none"
style={{ background: form.custom_colors?.show_services === true ? '#00d4ff' : '#30363d' }}
>
<span
className="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
style={{ transform: form.custom_colors?.show_services === true ? 'translateX(16px)' : 'translateX(0)' }}
/>
</button>
</div>
)}
{/* Appearance */}
<div className="flex flex-col gap-2 col-span-2">
<div className="flex items-center justify-between">
frontend/src/components/modals/__tests__/NodeModal.test.tsx
+23 -2
View File
@@ -273,12 +273,33 @@ 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)
})
// ── 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
frontend/src/types/index.ts
+1
View File
@@ -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