358 lines
11 KiB
HTML
358 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tendrils Network</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
margin: 0;
|
|
padding: 10px;
|
|
background: #111;
|
|
color: #eee;
|
|
}
|
|
#controls {
|
|
margin-bottom: 10px;
|
|
}
|
|
#stats { margin-left: 10px; }
|
|
#error { color: #f66; padding: 20px; }
|
|
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.location {
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.location.top-level {
|
|
width: 100%;
|
|
}
|
|
|
|
.location-name {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.location.anonymous {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.location.anonymous > .location-name {
|
|
display: none;
|
|
}
|
|
|
|
.node-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.node-row + .node-row {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.node {
|
|
width: 120px;
|
|
height: 50px;
|
|
background: #a6d;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
word-break: normal;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.node:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.node.switch {
|
|
background: #2a2;
|
|
border: 2px solid #4f4;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.node.copied {
|
|
outline: 2px solid #fff;
|
|
}
|
|
|
|
.children {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.children.horizontal {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
}
|
|
|
|
.children.vertical {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="controls">
|
|
<strong>Tendrils</strong>
|
|
<span id="stats"></span>
|
|
</div>
|
|
<div id="error"></div>
|
|
<div id="container"></div>
|
|
|
|
<script>
|
|
function getLabel(node) {
|
|
if (node.names && node.names.length > 0) return node.names.join('\n');
|
|
if (node.interfaces && node.interfaces.length > 0) {
|
|
const ips = [];
|
|
node.interfaces.forEach(iface => {
|
|
if (iface.ips) iface.ips.forEach(ip => ips.push(ip));
|
|
});
|
|
if (ips.length > 0) return ips.join('\n');
|
|
const macs = [];
|
|
node.interfaces.forEach(iface => {
|
|
if (iface.mac) macs.push(iface.mac);
|
|
});
|
|
if (macs.length > 0) return macs.join('\n');
|
|
}
|
|
return '??';
|
|
}
|
|
|
|
function getNodeIdentifiers(node) {
|
|
const ids = [];
|
|
if (node.names) {
|
|
node.names.forEach(n => ids.push(n.toLowerCase()));
|
|
}
|
|
if (node.interfaces) {
|
|
node.interfaces.forEach(iface => {
|
|
if (iface.mac) ids.push(iface.mac.toLowerCase());
|
|
});
|
|
}
|
|
return ids;
|
|
}
|
|
|
|
function isSwitch(node) {
|
|
return !!(node.poe_budget);
|
|
}
|
|
|
|
let anonCounter = 0;
|
|
|
|
function buildLocationTree(locations, parentId) {
|
|
if (!locations) return [];
|
|
return locations.map((loc, idx) => {
|
|
let locId;
|
|
let anonymous = false;
|
|
if (loc.name) {
|
|
locId = 'loc_' + loc.name.replace(/[^a-zA-Z0-9]/g, '_');
|
|
} else {
|
|
locId = 'loc_anon_' + (anonCounter++);
|
|
anonymous = true;
|
|
}
|
|
return {
|
|
id: locId,
|
|
name: loc.name || '',
|
|
anonymous: anonymous,
|
|
direction: loc.direction || 'horizontal',
|
|
nodeRefs: (loc.nodes || []).map(n => n.toLowerCase()),
|
|
children: buildLocationTree(loc.children, locId)
|
|
};
|
|
});
|
|
}
|
|
|
|
function buildNodeIndex(locations, index) {
|
|
locations.forEach(loc => {
|
|
loc.nodeRefs.forEach(ref => {
|
|
index.set(ref, loc);
|
|
});
|
|
buildNodeIndex(loc.children, index);
|
|
});
|
|
}
|
|
|
|
function findLocationForNode(node, nodeIndex) {
|
|
const identifiers = getNodeIdentifiers(node);
|
|
for (const ident of identifiers) {
|
|
if (nodeIndex.has(ident)) {
|
|
return nodeIndex.get(ident);
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function createNodeElement(node) {
|
|
const div = document.createElement('div');
|
|
div.className = 'node' + (isSwitch(node) ? ' switch' : '');
|
|
div.textContent = getLabel(node);
|
|
div.addEventListener('click', () => {
|
|
const json = JSON.stringify(node, null, 2);
|
|
navigator.clipboard.writeText(json).then(() => {
|
|
div.classList.add('copied');
|
|
setTimeout(() => div.classList.remove('copied'), 300);
|
|
});
|
|
});
|
|
return div;
|
|
}
|
|
|
|
function renderLocation(loc, assignedNodes, isTopLevel) {
|
|
const nodes = assignedNodes.get(loc) || [];
|
|
const hasNodes = nodes.length > 0;
|
|
|
|
const childElements = loc.children
|
|
.map(child => renderLocation(child, assignedNodes, false))
|
|
.filter(el => el !== null);
|
|
|
|
if (!hasNodes && childElements.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const container = document.createElement('div');
|
|
let classes = 'location';
|
|
if (loc.anonymous) classes += ' anonymous';
|
|
if (isTopLevel) classes += ' top-level';
|
|
container.className = classes;
|
|
|
|
const nameEl = document.createElement('div');
|
|
nameEl.className = 'location-name';
|
|
nameEl.textContent = loc.name;
|
|
container.appendChild(nameEl);
|
|
|
|
if (hasNodes) {
|
|
const switches = nodes.filter(n => isSwitch(n));
|
|
const nonSwitches = nodes.filter(n => !isSwitch(n));
|
|
|
|
if (switches.length > 0) {
|
|
const switchRow = document.createElement('div');
|
|
switchRow.className = 'node-row';
|
|
switches.forEach(node => {
|
|
switchRow.appendChild(createNodeElement(node));
|
|
});
|
|
container.appendChild(switchRow);
|
|
}
|
|
|
|
if (nonSwitches.length > 0) {
|
|
const nodeRow = document.createElement('div');
|
|
nodeRow.className = 'node-row';
|
|
nonSwitches.forEach(node => {
|
|
nodeRow.appendChild(createNodeElement(node));
|
|
});
|
|
container.appendChild(nodeRow);
|
|
}
|
|
}
|
|
|
|
if (childElements.length > 0) {
|
|
const childrenContainer = document.createElement('div');
|
|
childrenContainer.className = 'children ' + loc.direction;
|
|
childElements.forEach(el => childrenContainer.appendChild(el));
|
|
container.appendChild(childrenContainer);
|
|
}
|
|
|
|
return container;
|
|
}
|
|
|
|
async function init() {
|
|
anonCounter = 0;
|
|
const [statusResp, configResp] = await Promise.all([
|
|
fetch('/api/status'),
|
|
fetch('/api/config')
|
|
]);
|
|
const data = await statusResp.json();
|
|
const config = await configResp.json();
|
|
|
|
const nodes = data.nodes || [];
|
|
const links = data.links || [];
|
|
|
|
document.getElementById('stats').textContent =
|
|
`${nodes.length} nodes, ${links.length} links`;
|
|
|
|
const locationTree = buildLocationTree(config.locations || [], null);
|
|
const nodeIndex = new Map();
|
|
buildNodeIndex(locationTree, nodeIndex);
|
|
|
|
const assignedNodes = new Map();
|
|
const unassignedNodes = [];
|
|
|
|
nodes.forEach(node => {
|
|
const loc = findLocationForNode(node, nodeIndex);
|
|
if (loc) {
|
|
if (!assignedNodes.has(loc)) {
|
|
assignedNodes.set(loc, []);
|
|
}
|
|
assignedNodes.get(loc).push(node);
|
|
} else {
|
|
unassignedNodes.push(node);
|
|
}
|
|
});
|
|
|
|
const container = document.getElementById('container');
|
|
container.innerHTML = '';
|
|
|
|
locationTree.forEach(loc => {
|
|
const el = renderLocation(loc, assignedNodes, true);
|
|
if (el) container.appendChild(el);
|
|
});
|
|
|
|
if (unassignedNodes.length > 0) {
|
|
const unassignedLoc = document.createElement('div');
|
|
unassignedLoc.className = 'location top-level';
|
|
|
|
const nameEl = document.createElement('div');
|
|
nameEl.className = 'location-name';
|
|
nameEl.textContent = 'Unassigned';
|
|
unassignedLoc.appendChild(nameEl);
|
|
|
|
const switches = unassignedNodes.filter(n => isSwitch(n));
|
|
const nonSwitches = unassignedNodes.filter(n => !isSwitch(n));
|
|
|
|
if (switches.length > 0) {
|
|
const switchRow = document.createElement('div');
|
|
switchRow.className = 'node-row';
|
|
switches.forEach(node => {
|
|
switchRow.appendChild(createNodeElement(node));
|
|
});
|
|
unassignedLoc.appendChild(switchRow);
|
|
}
|
|
|
|
if (nonSwitches.length > 0) {
|
|
const nodeRow = document.createElement('div');
|
|
nodeRow.className = 'node-row';
|
|
nonSwitches.forEach(node => {
|
|
nodeRow.appendChild(createNodeElement(node));
|
|
});
|
|
unassignedLoc.appendChild(nodeRow);
|
|
}
|
|
|
|
container.appendChild(unassignedLoc);
|
|
}
|
|
}
|
|
|
|
init().catch(e => {
|
|
document.getElementById('error').textContent = e.message;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|