jcreek/OpenNetworkDiagram
1
0
Fork 0
mirror of https://github.com/jcreek/OpenNetworkDiagram.git synced 2026-07-13 02:53:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Add ports and lines

Browse Source
This commit is contained in:
Josh Creek
2025-04-15 20:04:37 +01:00
parent 4247212d1a
commit a80fa4adbf
8 changed files with 303 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+4 -1
View File
@@ -41,5 +41,8 @@
"esbuild" "esbuild"
] ]
}, },
"packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0" "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
"dependencies": {
"leader-line": "^1.0.8"
}
} }
pnpm-lock.yaml
Generated
+9
View File
@@ -7,6 +7,10 @@ settings:
importers: importers:
.: .:
dependencies:
leader-line:
specifier: ^1.0.8
version: 1.0.8
devDependencies: devDependencies:
'@eslint/compat': '@eslint/compat':
specifier: ^1.2.5 specifier: ^1.2.5
@@ -925,6 +929,9 @@ packages:
known-css-properties@0.35.0: known-css-properties@0.35.0:
resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==} resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
leader-line@1.0.8:
resolution: {integrity: sha512-3TOYtjjcYJCdtEs+bCuVSj6GvFiAzywtjifeeVcBYVwejHfI8a/NRxU4s6DjXB+H/ccNA/qtZEjrFVw9W97dCQ==}
levn@0.4.1: levn@0.4.1:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
@@ -2144,6 +2151,8 @@ snapshots:
known-css-properties@0.35.0: {} known-css-properties@0.35.0: {}
leader-line@1.0.8: {}
levn@0.4.1: levn@0.4.1:
dependencies: dependencies:
prelude-ls: 1.2.1 prelude-ls: 1.2.1
src/app.html
+1
View File
@@ -5,6 +5,7 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<script src="/node_modules/leader-line/leader-line.min.js"></script>
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
src/lib/components/DeviceCard.svelte
+27 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Device } from '../../stores/networkStore'; import type { NetworkDevice } from '../../lib/types';
export let device: Device; export let device: NetworkDevice;
</script> </script>
<div class="device-card"> <div class="device-card">
@@ -10,6 +10,20 @@
{#if device.notes} {#if device.notes}
<p><em>{device.notes}</em></p> <p><em>{device.notes}</em></p>
{/if} {/if}
{#if device.ports && device.ports.length}
<h4>Ports:</h4>
<div class="ports-container">
{#each device.ports as port}
<div class="port-item" data-port-key={device.name + '-' + port.portName}>
<p>{port.portName} ({port.speedGbps ?? 1}GbE)</p>
{#if port.connectedTo}
<p>Connected to: {port.connectedTo}</p>
{/if}
</div>
{/each}
</div>
{/if}
</div> </div>
<style> <style>
@@ -17,5 +31,16 @@
border: 1px dashed #aaa; border: 1px dashed #aaa;
padding: 1rem; padding: 1rem;
border-radius: 5px; border-radius: 5px;
max-width: 300px;
}
.ports-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.port-item {
background-color: #ffe7d6;
padding: 0.5rem;
border-radius: 4px;
} }
</style> </style>
src/lib/components/MachineCard.svelte
+22 -6
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { Machine } from '../../stores/networkStore'; import type { Machine } from '../../lib/types';
import VMCard from './VMCard.svelte'; import VMCard from './VMCard.svelte';
export let machine: Machine; export let machine: Machine;
@@ -11,6 +11,21 @@
<p><strong>IP Address:</strong> {machine.ipAddress}</p> <p><strong>IP Address:</strong> {machine.ipAddress}</p>
<p><strong>OS:</strong> {machine.operatingSystem}</p> <p><strong>OS:</strong> {machine.operatingSystem}</p>
{#if machine.ports && machine.ports.length}
<h4>Ports:</h4>
<div class="ports-container">
{#each machine.ports as port}
<div class="port-item" data-port-key="{machine.machineName}-{port.portName}">
<p>{port.portName} ({port.speedGbps ?? 1}GbE)</p>
{#if port.connectedTo}
<p>Connected to: {port.connectedTo}</p>
{/if}
</div>
{/each}
</div>
{/if}
<!-- VMs -->
{#if machine.software?.vms?.length} {#if machine.software?.vms?.length}
<details> <details>
<summary>Show VMs (Total: {machine.software.vms.length})</summary> <summary>Show VMs (Total: {machine.software.vms.length})</summary>
@@ -31,13 +46,14 @@
max-width: 300px; max-width: 300px;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.machine-card h2 { .ports-container {
margin: 0 0 0.5rem;
}
.vm-list {
margin-top: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
} }
.port-item {
background-color: #e7f1f9;
padding: 0.5rem;
border-radius: 4px;
}
</style> </style>
src/lib/components/NetworkDiagram.svelte
+114 -11
View File
@@ -2,34 +2,137 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { networkStore, loadNetworkData } from '../../stores/networkStore'; import { networkStore, loadNetworkData } from '../../stores/networkStore';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import MachineCard from './MachineCard.svelte'; import MachineCard from './MachineCard.svelte';
import DeviceCard from './DeviceCard.svelte'; import DeviceCard from './DeviceCard.svelte';
// Optionally pass in a JSON path as a prop import type { NetworkData, Port } from '../../lib/types';
export let jsonPath: string = '/data/network.json'; export let jsonPath: string = '/data/network.json';
// Local state let data: NetworkData;
let data: any;
// We'll store all port references in one big map for easy access
let lines: any[] = [];
onMount(async () => { onMount(async () => {
// Load data into the store
await loadNetworkData(jsonPath); await loadNetworkData(jsonPath);
// Subscribe once or use the $ syntax in markup
data = get(networkStore); data = get(networkStore);
// Wait for DOM to render fully
setTimeout(() => {
createLines();
}, 0);
}); });
/**
* Called after child components have rendered.
* We gather all port references and draw lines using global LeaderLine
*/
async function createLines() {
// Use global UMD version from window
const LeaderLine = (window as any).LeaderLine;
if (!LeaderLine) {
console.error('LeaderLine is not loaded.');
return;
}
// Clear any previous lines
for (const ln of lines) {
ln.remove();
}
lines = [];
type PortInfo = {
parentName: string;
port: Port;
element: HTMLDivElement;
};
const portDataMap: Map<string, PortInfo> = new Map();
// GATHER MACHINE PORTS
for (const machine of data.machines) {
if (machine.ports) {
for (const p of machine.ports) {
const key = `${machine.machineName}-${p.portName}`;
const elem = document.querySelector(`[data-port-key="${key}"]`) as HTMLDivElement;
if (elem) {
portDataMap.set(key, {
parentName: machine.machineName,
port: p,
element: elem
});
}
}
}
}
// GATHER DEVICE PORTS
for (const dev of data.devices) {
if (dev.ports) {
for (const p of dev.ports) {
const key = `${dev.name}-${p.portName}`;
const elem = document.querySelector(`[data-port-key="${key}"]`) as HTMLDivElement;
if (elem) {
portDataMap.set(key, {
parentName: dev.name,
port: p,
element: elem
});
}
}
}
}
// DRAW CONNECTIONS
for (const [key, info] of portDataMap.entries()) {
const localPort = info.port;
if (!localPort.connectedTo) continue;
const remoteKey = localPort.connectedTo;
const remoteInfo = portDataMap.get(remoteKey);
if (!remoteInfo) continue;
if (key > remoteKey) continue; // Avoid duplicates
const localSpeed = localPort.speedGbps ?? 1;
const remoteSpeed = remoteInfo.port.speedGbps ?? 1;
const cableSpeed = Math.min(localSpeed, remoteSpeed);
const color = getLineColor(cableSpeed);
const line = new LeaderLine(info.element, remoteInfo.element, {
path: 'straight',
startPlug: 'behind',
endPlug: 'behind',
color,
size: 4,
middleLabel: LeaderLine.captionLabel({
text: `${cableSpeed}GbE`,
fontSize: 12,
color: 'white',
outlineColor: 'black',
outlineSize: 2
})
});
lines.push(line);
}
}
function getLineColor(speed: number): string {
if (speed >= 10) return 'orange';
if (speed >= 2.5) return 'green';
if (speed >= 1) return 'blue';
return 'gray';
}
</script> </script>
<main> <main>
{#if data} {#if data}
<div class="diagram-container"> <div class="diagram-container">
<!-- Render Machines -->
{#each data.machines as machine} {#each data.machines as machine}
<MachineCard {machine} /> <MachineCard {machine} />
{/each} {/each}
<!-- Render Other Devices -->
{#each data.devices as device} {#each data.devices as device}
<DeviceCard {device} /> <DeviceCard {device} />
{/each} {/each}
@@ -39,10 +142,10 @@
<style> <style>
.diagram-container { .diagram-container {
/* Example layout style - customize as needed */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
position: relative; /* required for leader-line positioning */
} }
</style> </style>
src/lib/types.ts
+13 -5
View File
@@ -1,4 +1,10 @@
interface Hardware { export interface Port {
portName: string;
speedGbps?: number; // default to 1 if not provided
connectedTo?: string; // e.g. "Router-LAN2"
}
export interface Hardware {
cpu: string; cpu: string;
ram: string; ram: string;
networkPorts: number; networkPorts: number;
@@ -6,30 +12,32 @@ interface Hardware {
gpu?: string; gpu?: string;
} }
interface VM { export interface VM {
name: string; name: string;
role: string; role: string;
ipAddress: string; ipAddress: string;
} }
interface Software { export interface Software {
vms: VM[]; vms: VM[];
} }
interface Machine { export interface Machine {
machineName: string; machineName: string;
ipAddress: string; ipAddress: string;
role: string; role: string;
operatingSystem: string; operatingSystem: string;
software: Software; software: Software;
hardware: Hardware; hardware: Hardware;
ports?: Port[];
} }
interface NetworkDevice { export interface NetworkDevice {
name: string; name: string;
ipAddress: string; ipAddress: string;
type: string; type: string;
notes?: string; notes?: string;
ports?: Port[];
} }
export interface NetworkData { export interface NetworkData {
src/stores/networkStore.ts
+113 -115
View File
@@ -1,43 +1,5 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import type { NetworkData } from '../lib/types';
export interface VMInfo {
name: string;
role: string;
ipAddress: string;
}
export interface Software {
vms: VMInfo[];
}
export interface Hardware {
cpu: string;
ram: string;
networkPorts: number;
networkPortSpeedGbps?: number;
gpu?: string | null;
}
export interface Machine {
machineName: string;
ipAddress: string;
role: string;
operatingSystem: string;
software: Software;
hardware: Hardware;
}
export interface Device {
name: string;
ipAddress: string;
type: string;
notes?: string;
}
export interface NetworkData {
machines: Machine[];
devices: Device[];
}
// Create a writable store for the data // Create a writable store for the data
export const networkStore = writable<NetworkData>({ export const networkStore = writable<NetworkData>({
@@ -52,7 +14,7 @@ export async function loadNetworkData(jsonPath: string) {
// const data = await response.json(); // const data = await response.json();
// networkStore.set(data); // networkStore.set(data);
// For now, set a static example: // For now, set a static example with 'ports' and sample connections:
const exampleData: NetworkData = { const exampleData: NetworkData = {
machines: [ machines: [
{ {
@@ -60,33 +22,26 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.3', ipAddress: '10.0.0.3',
role: 'Hypervisor', role: 'Hypervisor',
operatingSystem: 'Proxmox', operatingSystem: 'Proxmox',
ports: [
{
portName: 'eth0',
speedGbps: 10,
// Connect to the router's LAN2
connectedTo: 'Router-LAN2'
},
{
portName: 'eth1',
speedGbps: 1
// Not connected
}
],
software: { software: {
vms: [ vms: [
{ { name: 'OpnSense', role: 'Router', ipAddress: '10.0.0.4' },
name: 'OpnSense', { name: 'PiVPN', role: 'VPN Server', ipAddress: '10.0.0.5' },
role: 'Router', { name: 'PiHole', role: 'DNS Ad-blocker', ipAddress: '10.0.0.6' },
ipAddress: '10.0.0.4' { name: 'Dashy', role: 'Dashboard', ipAddress: '10.0.0.12' },
}, { name: 'DockerHost', role: 'Docker/Reverse Proxy', ipAddress: '10.0.0.23' }
{
name: 'PiVPN',
role: 'VPN Server',
ipAddress: '10.0.0.5'
},
{
name: 'PiHole',
role: 'DNS Ad-blocker',
ipAddress: '10.0.0.6'
},
{
name: 'Dashy',
role: 'Dashboard',
ipAddress: '10.0.0.12'
},
{
name: 'DockerHost',
role: 'Docker/Reverse Proxy',
ipAddress: '10.0.0.23'
}
] ]
}, },
hardware: { hardware: {
@@ -102,9 +57,14 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.9', ipAddress: '10.0.0.9',
role: 'NAS', role: 'NAS',
operatingSystem: 'Asustor ADM', operatingSystem: 'Asustor ADM',
software: { ports: [
vms: [] {
}, portName: 'eth0',
speedGbps: 1
// No connection
}
],
software: { vms: [] },
hardware: { hardware: {
cpu: 'Realtek RTD1296 Quad Core 1.4GHz', cpu: 'Realtek RTD1296 Quad Core 1.4GHz',
ram: '2GB', ram: '2GB',
@@ -118,9 +78,14 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.13', ipAddress: '10.0.0.13',
role: 'Smart Home Controller', role: 'Smart Home Controller',
operatingSystem: 'Home Assistant OS', operatingSystem: 'Home Assistant OS',
software: { ports: [
vms: [] {
}, portName: 'eth0',
speedGbps: 1
// Not connected
}
],
software: { vms: [] },
hardware: { hardware: {
cpu: 'Home Assistant Custom SoC', cpu: 'Home Assistant Custom SoC',
ram: 'Unknown', ram: 'Unknown',
@@ -134,9 +99,14 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.11', ipAddress: '10.0.0.11',
role: 'Media Server', role: 'Media Server',
operatingSystem: 'Ubuntu Server', operatingSystem: 'Ubuntu Server',
software: { ports: [
vms: [] {
}, portName: 'eth0',
speedGbps: 1
// Not connected
}
],
software: { vms: [] },
hardware: { hardware: {
cpu: 'Intel N100', cpu: 'Intel N100',
ram: 'Unknown', ram: 'Unknown',
@@ -150,9 +120,14 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.8', ipAddress: '10.0.0.8',
role: 'Media Downloader', role: 'Media Downloader',
operatingSystem: 'Windows 11', operatingSystem: 'Windows 11',
software: { ports: [
vms: [] {
}, portName: 'eth0',
speedGbps: 1
// Not connected
}
],
software: { vms: [] },
hardware: { hardware: {
cpu: 'Intel N100', cpu: 'Intel N100',
ram: 'Unknown', ram: 'Unknown',
@@ -166,33 +141,20 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.7', ipAddress: '10.0.0.7',
role: 'Backup NAS + Hypervisor', role: 'Backup NAS + Hypervisor',
operatingSystem: 'TrueNAS Scale', operatingSystem: 'TrueNAS Scale',
ports: [
{
portName: 'eth0',
speedGbps: 1
// Not connected
}
],
software: { software: {
vms: [ vms: [
{ { name: 'Win11-Backblaze', role: 'Backblaze Backup', ipAddress: '10.0.0.24' },
name: 'Win11-Backblaze', { name: 'UbuntuDockerHost', role: 'Docker Host', ipAddress: '10.0.0.14' },
role: 'Backblaze Backup', { name: 'MakeMKV', role: 'Blu-ray Ripper', ipAddress: '10.0.0.14' },
ipAddress: '10.0.0.24' { name: 'Handbrake', role: 'Video Transcoder', ipAddress: '10.0.0.15' },
}, { name: 'NextCloud', role: 'Cloud Storage', ipAddress: 'TBD' }
{
name: 'UbuntuDockerHost',
role: 'Docker Host',
ipAddress: '10.0.0.14'
},
{
name: 'MakeMKV',
role: 'Blu-ray Ripper',
ipAddress: '10.0.0.14'
},
{
name: 'Handbrake',
role: 'Video Transcoder',
ipAddress: '10.0.0.15'
},
{
name: 'NextCloud',
role: 'Cloud Storage',
ipAddress: 'TBD'
}
] ]
}, },
hardware: { hardware: {
@@ -208,18 +170,17 @@ export async function loadNetworkData(jsonPath: string) {
ipAddress: '10.0.0.20', ipAddress: '10.0.0.20',
role: 'AI Dev/Inference', role: 'AI Dev/Inference',
operatingSystem: 'Pop!_OS', operatingSystem: 'Pop!_OS',
ports: [
{
portName: 'eth0',
speedGbps: 10
// Not connected
}
],
software: { software: {
vms: [ vms: [
{ { name: 'Ollama', role: 'LLM Inference', ipAddress: '10.0.0.21' },
name: 'Ollama', { name: 'Bot Training', role: 'AI Training', ipAddress: '10.0.0.22' }
role: 'LLM Inference',
ipAddress: '10.0.0.21'
},
{
name: 'Bot Training',
role: 'AI Training',
ipAddress: '10.0.0.22'
}
] ]
}, },
hardware: { hardware: {
@@ -236,34 +197,71 @@ export async function loadNetworkData(jsonPath: string) {
name: 'Router', name: 'Router',
ipAddress: '10.0.0.1', ipAddress: '10.0.0.1',
type: 'Gateway', type: 'Gateway',
notes: 'Main internet-facing router' notes: 'Main internet-facing router',
ports: [
{
portName: 'LAN1',
speedGbps: 1,
// Connect to Omada Controller
connectedTo: 'Omada Controller-eth0'
},
{
portName: 'LAN2',
speedGbps: 10,
// Connected to ProxRouter
connectedTo: 'ProxRouter-eth0'
},
{
portName: 'LAN3',
speedGbps: 1,
// Connect to HDHomeRun
connectedTo: 'HDHomeRun-eth0'
}
]
}, },
{ {
name: 'HDHomeRun', name: 'HDHomeRun',
ipAddress: '10.0.0.2', ipAddress: '10.0.0.2',
type: 'TV Tuner' type: 'TV Tuner',
ports: [
{
portName: 'eth0',
speedGbps: 1,
connectedTo: 'Router-LAN3'
}
]
}, },
{ {
name: 'Omada Controller', name: 'Omada Controller',
ipAddress: '10.0.0.4', ipAddress: '10.0.0.4',
type: 'Network Controller', type: 'Network Controller',
notes: 'Access via port 8043' notes: 'Access via port 8043',
ports: [
{
portName: 'eth0',
speedGbps: 1,
connectedTo: 'Router-LAN1'
}
]
}, },
{ {
name: '3DS', name: '3DS',
ipAddress: '10.0.0.17', ipAddress: '10.0.0.17',
type: 'Handheld Console' type: 'Handheld Console'
// No ports => Wi-Fi only
}, },
{ {
name: '2DS', name: '2DS',
ipAddress: '10.0.0.18', ipAddress: '10.0.0.18',
type: 'Handheld Console' type: 'Handheld Console'
// No ports => Wi-Fi only
}, },
{ {
name: 'Nintendo Switch', name: 'Nintendo Switch',
ipAddress: '10.0.0.19', ipAddress: '10.0.0.19',
type: 'Gaming Console', type: 'Gaming Console',
notes: 'IP to be confirmed' notes: 'IP to be confirmed'
// No ports => Wi-Fi only
} }
] ]
}; };