Extract CSS and JS from index.html into separate ES modules
This commit is contained in:
Ian Gulliver
266
static/js/ui.js
Normal file
266
static/js/ui.js
Normal file
@@ -0,0 +1,266 @@
|
||||
import { formatBytes, formatPackets, formatMbps, formatPps, formatLinkSpeed } from './format.js';
|
||||
import { openFlowHash } from './flow.js';
|
||||
import { portErrors, setErrorPanelCollapsed, errorPanelCollapsed } from './state.js';
|
||||
|
||||
export function addClickableValue(container, label, value, plainLines, plainFormat) {
|
||||
const lbl = document.createElement('span');
|
||||
lbl.className = 'lbl';
|
||||
lbl.textContent = label;
|
||||
container.appendChild(lbl);
|
||||
container.appendChild(document.createTextNode(' '));
|
||||
const val = document.createElement('span');
|
||||
val.className = 'clickable-value';
|
||||
val.textContent = value;
|
||||
val.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(value);
|
||||
});
|
||||
container.appendChild(val);
|
||||
plainLines.push(plainFormat ? plainFormat(label, value) : label + ': ' + value);
|
||||
}
|
||||
|
||||
export function buildClickableList(container, items, label, plainFormat, flowInfo) {
|
||||
const plainLines = [];
|
||||
items.forEach((item, idx) => {
|
||||
if (idx > 0) container.appendChild(document.createTextNode('\n'));
|
||||
const lbl = document.createElement('span');
|
||||
lbl.className = 'lbl';
|
||||
lbl.textContent = label;
|
||||
container.appendChild(lbl);
|
||||
container.appendChild(document.createTextNode(' '));
|
||||
const val = document.createElement('span');
|
||||
val.className = 'clickable-value';
|
||||
val.textContent = item;
|
||||
val.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (flowInfo && flowInfo.universes && flowInfo.universes[idx] !== undefined) {
|
||||
openFlowHash(flowInfo.protocol, flowInfo.universes[idx], flowInfo.nodeId);
|
||||
} else {
|
||||
navigator.clipboard.writeText(item);
|
||||
}
|
||||
});
|
||||
container.appendChild(val);
|
||||
plainLines.push(plainFormat ? plainFormat(label, item) : label + ': ' + item);
|
||||
});
|
||||
container.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(plainLines.join('\n'));
|
||||
});
|
||||
}
|
||||
|
||||
export function buildLinkStats(container, portLabel, speed, errIn, errOut, rates) {
|
||||
const plainLines = [];
|
||||
if (portLabel) {
|
||||
addClickableValue(container, 'PORT', portLabel, plainLines);
|
||||
container.appendChild(document.createTextNode('\n'));
|
||||
}
|
||||
addClickableValue(container, 'LINK', formatLinkSpeed(speed), plainLines);
|
||||
container.appendChild(document.createTextNode('\n'));
|
||||
addClickableValue(container, 'ERR', 'RX ' + errIn + ' / TX ' + errOut, plainLines);
|
||||
if (rates) {
|
||||
container.appendChild(document.createTextNode('\n'));
|
||||
addClickableValue(container, 'RX', formatMbps(rates.rxBytes) + ' (' + formatPps(rates.rxPkts) + ')', plainLines);
|
||||
container.appendChild(document.createTextNode('\n'));
|
||||
addClickableValue(container, 'TX', formatMbps(rates.txBytes) + ' (' + formatPps(rates.txPkts) + ')', plainLines);
|
||||
}
|
||||
container.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(plainLines.join('\n'));
|
||||
});
|
||||
}
|
||||
|
||||
export function buildDanteDetail(container, entries, arrow, sourceNodeId, peerNodeIds) {
|
||||
const plainLines = [];
|
||||
entries.forEach((entry, entryIdx) => {
|
||||
const peerNodeId = peerNodeIds ? peerNodeIds[entryIdx] : null;
|
||||
entry.split('\n').forEach((line, lineIdx) => {
|
||||
if (entryIdx > 0 && lineIdx === 0) {
|
||||
container.appendChild(document.createTextNode('\n\n'));
|
||||
plainLines.push('');
|
||||
} else if (container.childNodes.length > 0) {
|
||||
container.appendChild(document.createTextNode('\n'));
|
||||
}
|
||||
if (line.startsWith(' ')) {
|
||||
container.appendChild(document.createTextNode(' ' + line.trim()));
|
||||
plainLines.push(' ' + line.trim());
|
||||
} else {
|
||||
const lbl = document.createElement('span');
|
||||
lbl.className = 'lbl';
|
||||
lbl.textContent = arrow;
|
||||
container.appendChild(lbl);
|
||||
container.appendChild(document.createTextNode(' '));
|
||||
const val = document.createElement('span');
|
||||
val.className = 'clickable-value';
|
||||
val.textContent = line;
|
||||
val.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (sourceNodeId && peerNodeId) {
|
||||
const src = arrow === '→' ? sourceNodeId : peerNodeId;
|
||||
const dst = arrow === '→' ? peerNodeId : sourceNodeId;
|
||||
openFlowHash('dante', src, 'to', dst);
|
||||
} else {
|
||||
navigator.clipboard.writeText(line);
|
||||
}
|
||||
});
|
||||
container.appendChild(val);
|
||||
plainLines.push(arrow + ' ' + line);
|
||||
}
|
||||
});
|
||||
});
|
||||
container.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(plainLines.join('\n'));
|
||||
});
|
||||
}
|
||||
|
||||
export function setConnectionStatus(connected) {
|
||||
const el = document.getElementById('connection-status');
|
||||
const textEl = el.querySelector('.text');
|
||||
if (connected) {
|
||||
el.className = 'connected';
|
||||
textEl.textContent = 'Connected';
|
||||
} else {
|
||||
el.className = 'disconnected';
|
||||
textEl.textContent = 'Disconnected';
|
||||
}
|
||||
}
|
||||
|
||||
export function scrollToNode(typeid) {
|
||||
const nodeEl = document.querySelector('.node[data-id="' + typeid + '"]');
|
||||
if (nodeEl) {
|
||||
nodeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
nodeEl.classList.add('scroll-highlight');
|
||||
setTimeout(() => nodeEl.classList.remove('scroll-highlight'), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
export async function clearError(id) {
|
||||
await fetch('/api/errors/clear?id=' + encodeURIComponent(id), { method: 'POST' });
|
||||
}
|
||||
|
||||
export async function clearAllErrors() {
|
||||
await fetch('/api/errors/clear?all=true', { method: 'POST' });
|
||||
}
|
||||
|
||||
export function updateErrorPanel() {
|
||||
const panel = document.getElementById('error-panel');
|
||||
const countEl = document.getElementById('error-count');
|
||||
const listEl = document.getElementById('error-list');
|
||||
|
||||
if (portErrors.length === 0) {
|
||||
panel.classList.remove('has-errors');
|
||||
return;
|
||||
}
|
||||
|
||||
panel.classList.add('has-errors');
|
||||
countEl.textContent = portErrors.length + ' Error' + (portErrors.length !== 1 ? 's' : '');
|
||||
|
||||
listEl.innerHTML = '';
|
||||
portErrors.forEach(err => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'error-item';
|
||||
|
||||
const nodeEl = document.createElement('div');
|
||||
nodeEl.className = 'error-node';
|
||||
nodeEl.textContent = err.node_name || err.node_id;
|
||||
nodeEl.addEventListener('click', () => scrollToNode(err.node_id));
|
||||
item.appendChild(nodeEl);
|
||||
|
||||
if (err.type === 'unreachable') {
|
||||
const typeEl = document.createElement('div');
|
||||
typeEl.className = 'error-type';
|
||||
typeEl.textContent = 'Unreachable';
|
||||
item.appendChild(typeEl);
|
||||
} else if (err.type === 'high_utilization') {
|
||||
const portEl = document.createElement('div');
|
||||
portEl.className = 'error-port';
|
||||
portEl.textContent = 'Port: ' + err.port;
|
||||
item.appendChild(portEl);
|
||||
|
||||
const countsEl = document.createElement('div');
|
||||
countsEl.className = 'error-counts';
|
||||
countsEl.textContent = 'Utilization: ' + (err.utilization || 0).toFixed(0) + '%';
|
||||
item.appendChild(countsEl);
|
||||
|
||||
const typeEl = document.createElement('div');
|
||||
typeEl.className = 'error-type';
|
||||
typeEl.textContent = 'High link utilization';
|
||||
item.appendChild(typeEl);
|
||||
} else {
|
||||
const portEl = document.createElement('div');
|
||||
portEl.className = 'error-port';
|
||||
portEl.textContent = 'Port: ' + err.port;
|
||||
item.appendChild(portEl);
|
||||
|
||||
const countsEl = document.createElement('div');
|
||||
countsEl.className = 'error-counts';
|
||||
countsEl.textContent = 'rx: ' + err.in_errors + ' (+' + (err.in_delta || 0) + ') / tx: ' + err.out_errors + ' (+' + (err.out_delta || 0) + ')';
|
||||
item.appendChild(countsEl);
|
||||
|
||||
const typeEl = document.createElement('div');
|
||||
typeEl.className = 'error-type';
|
||||
typeEl.textContent = 'New errors detected';
|
||||
item.appendChild(typeEl);
|
||||
}
|
||||
|
||||
const dismissBtn = document.createElement('button');
|
||||
dismissBtn.textContent = 'Dismiss';
|
||||
dismissBtn.addEventListener('click', () => clearError(err.id));
|
||||
item.appendChild(dismissBtn);
|
||||
|
||||
listEl.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
export function updateBroadcastStats(stats) {
|
||||
const panel = document.getElementById('broadcast-stats');
|
||||
const ppsEl = document.getElementById('broadcast-pps');
|
||||
const bpsEl = document.getElementById('broadcast-bps');
|
||||
const bucketsEl = document.getElementById('broadcast-buckets');
|
||||
|
||||
if (!stats) {
|
||||
ppsEl.textContent = '0 pps';
|
||||
bpsEl.textContent = '0 B/s';
|
||||
bucketsEl.innerHTML = '';
|
||||
panel.className = '';
|
||||
return;
|
||||
}
|
||||
|
||||
ppsEl.textContent = formatPackets(stats.packets_per_s);
|
||||
bpsEl.textContent = formatBytes(stats.bytes_per_s);
|
||||
|
||||
panel.classList.remove('warning', 'critical');
|
||||
if (stats.packets_per_s > 1000) {
|
||||
panel.classList.add('critical');
|
||||
} else if (stats.packets_per_s > 100) {
|
||||
panel.classList.add('warning');
|
||||
}
|
||||
|
||||
bucketsEl.innerHTML = '';
|
||||
if (stats.buckets && stats.buckets.length > 0) {
|
||||
stats.buckets.filter(b => b.packets_per_s >= 0.5).forEach(bucket => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'bucket';
|
||||
div.innerHTML = '<span class="bucket-name">' + bucket.name + '</span>' +
|
||||
'<span class="bucket-rate">' + formatPackets(bucket.packets_per_s) + '</span>';
|
||||
bucketsEl.appendChild(div);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function setupErrorPanelListeners() {
|
||||
document.getElementById('clear-all-errors').addEventListener('click', clearAllErrors);
|
||||
document.getElementById('toggle-errors').addEventListener('click', () => {
|
||||
const panel = document.getElementById('error-panel');
|
||||
const btn = document.getElementById('toggle-errors');
|
||||
const newCollapsed = !errorPanelCollapsed;
|
||||
setErrorPanelCollapsed(newCollapsed);
|
||||
if (newCollapsed) {
|
||||
panel.classList.add('collapsed');
|
||||
btn.textContent = 'Show';
|
||||
} else {
|
||||
panel.classList.remove('collapsed');
|
||||
btn.textContent = 'Hide';
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user