anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web/mazenet): group Service Fleet items by category (Remote Access, Web, Databases, etc.)

Browse Source
This commit is contained in:
anti
2026-04-22 18:19:21 -04:00
parent 1674316788
commit 9c38a3f11a
4 changed files with 76 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
decnet_web/src/components/MazeNET/MazeNET.css
View File

@@ -110,6 +110,12 @@ body.maze-fullscreen .maze-shell {
.palette-hint {
font-size: 0.62rem; opacity: 0.5; line-height: 1.6; letter-spacing: 0.5px;
}
.palette-subgroup { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.palette-subgroup:first-child { margin-top: 0; }
.palette-subgroup-label {
font-size: 0.55rem; letter-spacing: 1.5px; opacity: 0.4;
color: var(--violet); margin-top: 6px;
}
.violet-accent { color: var(--violet); }
.alert-text { color: var(--alert); }

51
decnet_web/src/components/MazeNET/Palette.tsx
View File

@@ -2,7 +2,8 @@ import React from 'react';
import { GitMerge, ShieldAlert, Server, Monitor, Shield, Database, Cpu, Globe,
Terminal, Lock, Folder, HardDrive, Users, KeyRound,
Radio, Zap, Wifi, Circle } from 'lucide-react';
import type { ServiceDef, Archetype } from './data';
import type { ServiceDef, Archetype, ServiceGroup } from './data';
import { SERVICE_GROUP_ORDER } from './data';
import type { PaletteDrag } from './useMazeInteraction';
const ICON: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
@@ -66,21 +67,39 @@ const Palette: React.FC<Props> = ({ services, archetypes, startPaletteDrag, clas
<div className="palette-group">
<label>③ SERVICES</label>
{services.map((s) => (
<div
key={s.slug}
className="palette-item"
onMouseDown={start({ kind: 'service', slug: s.slug, label: s.name })}
>
<Icon
name={s.icon}
size={12}
className={s.risk === 'high' ? 'alert-text' : s.risk === 'med' ? 'violet-accent' : 'matrix-text'}
/>
<span>{s.name}</span>
<span className="chip-mini">{s.proto.toUpperCase()}:{s.port}</span>
</div>
))}
{(() => {
const byGroup = new Map<ServiceGroup, ServiceDef[]>();
for (const s of services) {
const g = (s.group ?? 'Remote Access') as ServiceGroup;
const list = byGroup.get(g) ?? [];
list.push(s);
byGroup.set(g, list);
}
const extras = [...byGroup.keys()].filter((g) => !SERVICE_GROUP_ORDER.includes(g));
const order = [...SERVICE_GROUP_ORDER, ...extras];
return order
.filter((g) => byGroup.has(g))
.map((g) => (
<div key={g} className="palette-subgroup">
<div className="palette-subgroup-label">{g.toUpperCase()}</div>
{byGroup.get(g)!.map((s) => (
<div
key={s.slug}
className="palette-item"
onMouseDown={start({ kind: 'service', slug: s.slug, label: s.name })}
>
<Icon
name={s.icon}
size={12}
className={s.risk === 'high' ? 'alert-text' : s.risk === 'med' ? 'violet-accent' : 'matrix-text'}
/>
<span>{s.name}</span>
<span className="chip-mini">{s.proto.toUpperCase()}/{s.port}</span>
</div>
))}
</div>
));
})()}
</div>
<div className="palette-group">

49
decnet_web/src/components/MazeNET/data.ts
View File

@@ -12,8 +12,27 @@ export interface ServiceDef {
proto: 'tcp' | 'udp';
icon: string;
risk: 'low' | 'med' | 'high';
group: ServiceGroup;
}
export type ServiceGroup =
| 'Remote Access'
| 'Web'
| 'File Transfer'
| 'Directory'
| 'Databases'
| 'IoT / OT';
// Rendering order for the palette.
export const SERVICE_GROUP_ORDER: ServiceGroup[] = [
'Remote Access',
'Web',
'File Transfer',
'Directory',
'Databases',
'IoT / OT',
];
export const ARCHETYPES: Archetype[] = [
{ slug: 'linux-server', name: 'Linux Server', services: ['ssh', 'http'], icon: 'server' },
{ slug: 'windows-workstation', name: 'Windows Workstation', services: ['smb', 'rdp'], icon: 'monitor' },
@@ -24,20 +43,20 @@ export const ARCHETYPES: Archetype[] = [
];
export const DEFAULT_SERVICES: ServiceDef[] = [
{ slug: 'ssh', name: 'SSH', port: 22, proto: 'tcp', icon: 'terminal', risk: 'high' },
{ slug: 'http', name: 'HTTP', port: 80, proto: 'tcp', icon: 'globe', risk: 'med' },
{ slug: 'https', name: 'HTTPS', port: 443, proto: 'tcp', icon: 'lock', risk: 'med' },
{ slug: 'ftp', name: 'FTP', port: 21, proto: 'tcp', icon: 'folder', risk: 'high' },
{ slug: 'smb', name: 'SMB', port: 445, proto: 'tcp', icon: 'hard-drive', risk: 'high' },
{ slug: 'rdp', name: 'RDP', port: 3389, proto: 'tcp', icon: 'monitor', risk: 'high' },
{ slug: 'ldap', name: 'LDAP', port: 389, proto: 'tcp', icon: 'users', risk: 'med' },
{ slug: 'kerberos', name: 'Kerberos', port: 88, proto: 'tcp', icon: 'key-round', risk: 'med' },
{ slug: 'llmnr', name: 'LLMNR', port: 5355, proto: 'udp', icon: 'radio', risk: 'low' },
{ slug: 'mysql', name: 'MySQL', port: 3306, proto: 'tcp', icon: 'database', risk: 'high' },
{ slug: 'postgres', name: 'Postgres', port: 5432, proto: 'tcp', icon: 'database', risk: 'high' },
{ slug: 'redis', name: 'Redis', port: 6379, proto: 'tcp', icon: 'zap', risk: 'med' },
{ slug: 'mqtt', name: 'MQTT', port: 1883, proto: 'tcp', icon: 'wifi', risk: 'low' },
{ slug: 'modbus', name: 'Modbus', port: 502, proto: 'tcp', icon: 'cpu', risk: 'med' },
{ slug: 'coap', name: 'CoAP', port: 5683, proto: 'udp', icon: 'wifi', risk: 'low' },
{ slug: 'ssh', name: 'SSH', port: 22, proto: 'tcp', icon: 'terminal', risk: 'high', group: 'Remote Access' },
{ slug: 'rdp', name: 'RDP', port: 3389, proto: 'tcp', icon: 'monitor', risk: 'high', group: 'Remote Access' },
{ slug: 'http', name: 'HTTP', port: 80, proto: 'tcp', icon: 'globe', risk: 'med', group: 'Web' },
{ slug: 'https', name: 'HTTPS', port: 443, proto: 'tcp', icon: 'lock', risk: 'med', group: 'Web' },
{ slug: 'ftp', name: 'FTP', port: 21, proto: 'tcp', icon: 'folder', risk: 'high', group: 'File Transfer' },
{ slug: 'smb', name: 'SMB', port: 445, proto: 'tcp', icon: 'hard-drive', risk: 'high', group: 'File Transfer' },
{ slug: 'ldap', name: 'LDAP', port: 389, proto: 'tcp', icon: 'users', risk: 'med', group: 'Directory' },
{ slug: 'kerberos', name: 'Kerberos', port: 88, proto: 'tcp', icon: 'key-round', risk: 'med', group: 'Directory' },
{ slug: 'llmnr', name: 'LLMNR', port: 5355, proto: 'udp', icon: 'radio', risk: 'low', group: 'Directory' },
{ slug: 'mysql', name: 'MySQL', port: 3306, proto: 'tcp', icon: 'database', risk: 'high', group: 'Databases' },
{ slug: 'postgres', name: 'Postgres', port: 5432, proto: 'tcp', icon: 'database', risk: 'high', group: 'Databases' },
{ slug: 'redis', name: 'Redis', port: 6379, proto: 'tcp', icon: 'zap', risk: 'med', group: 'Databases' },
{ slug: 'mqtt', name: 'MQTT', port: 1883, proto: 'tcp', icon: 'wifi', risk: 'low', group: 'IoT / OT' },
{ slug: 'modbus', name: 'Modbus', port: 502, proto: 'tcp', icon: 'cpu', risk: 'med', group: 'IoT / OT' },
{ slug: 'coap', name: 'CoAP', port: 5683, proto: 'udp', icon: 'wifi', risk: 'low', group: 'IoT / OT' },
];

1
decnet_web/src/components/MazeNET/useMazeApi.ts
View File

@@ -263,6 +263,7 @@ export function useMazeApi(): MazeApi {
proto: 'tcp' as const,
icon: 'circle',
risk: 'low' as const,
group: 'Remote Access' as const,
},
);
} catch {