|
|
@@ -0,0 +1,578 @@
|
|
|
+/* =====================================================================
|
|
|
+ L2 Physical Topology — display-only interactive map.
|
|
|
+ Groups switches into frames (COBCO outer → workshop/DataCenter/Core),
|
|
|
+ colours links by speed, nodes by latency & alarm, supports dark mode,
|
|
|
+ terminal show / only-offline, live + historical snapshots, MAC/IP search.
|
|
|
+ ===================================================================== */
|
|
|
+(function () {
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
+ var CFG = window.L2_CFG || {};
|
|
|
+ var T = window.L2_I18N || {};
|
|
|
+ var META = window.L2_META || {};
|
|
|
+ var SNAP = window.L2SNAP || null;
|
|
|
+
|
|
|
+ var colors = CFG.colors || {100:'#F39C12',1000:'#2ECC71',10000:'#3498DB',20000:'#9B59B6',unknown:'#E74C3C',down:'#C0392B'};
|
|
|
+ var LATW = (CFG.latency_warn != null) ? +CFG.latency_warn : 3;
|
|
|
+ var LATB = (CFG.latency_bad != null) ? +CFG.latency_bad : 5;
|
|
|
+
|
|
|
+ var TIER_BG = {core:'#1F4E78', dist:'#2E75B6', access:'#548235'};
|
|
|
+ var TIER_BG_DARK = {core:'#1B4A72', dist:'#2A5E93', access:'#3E6B2E'};
|
|
|
+ var SEV_COLORS = ['#97AAB3','#7499FF','#FFC859','#FFA059','#E97659','#E45959'];
|
|
|
+
|
|
|
+ var NODE_W = 190, NODE_H = 56, GX = 26, GY = 18, PADX = 20, PADY = 42;
|
|
|
+ var GROUP_GAP_X = 46, GROUP_GAP_Y = 48, MAXW = 2800;
|
|
|
+
|
|
|
+ var cy = null;
|
|
|
+ var dark = false;
|
|
|
+ var showTerm = false;
|
|
|
+ var onlyOff = false;
|
|
|
+ var paused = false;
|
|
|
+ var countdown = 0;
|
|
|
+ var timer = null;
|
|
|
+ var lastSnap = null;
|
|
|
+
|
|
|
+ function el(id) { return document.getElementById(id); }
|
|
|
+ function t(k, d) { return (T[k] != null) ? T[k] : (d != null ? d : k); }
|
|
|
+
|
|
|
+ /* ---------------- name parsing / grouping ---------------- */
|
|
|
+ function parseName(name) {
|
|
|
+ var r = {workshop:'', floor:'', cab:'', u:'', area:'', role:'', ip:''};
|
|
|
+ if (!name) return r;
|
|
|
+ var toks = String(name).split('-');
|
|
|
+ for (var i = 0; i < toks.length; i++) {
|
|
|
+ var tk = toks[i];
|
|
|
+ if (/^\d{1,3}(\.\d{1,3}){3}$/.test(tk)) { r.ip = tk; continue; }
|
|
|
+ if (!r.workshop && /^\d{4}$/.test(tk)) { r.workshop = tk; continue; }
|
|
|
+ if (!r.floor && /^\d[A-Z]\w*$/i.test(tk)) {
|
|
|
+ var m = /^(\d)([A-Z])(\w+)$/i.exec(tk);
|
|
|
+ if (m) { r.floor = m[1]; r.cab = m[2]; r.u = m[3]; continue; }
|
|
|
+ }
|
|
|
+ if (!r.area && /^(OFFICE|SURVE|GRDA|DC|IDC|LAB|PROD)$/i.test(tk)) { r.area = tk.toUpperCase(); continue; }
|
|
|
+ if (!r.role && /^(Dist|Access|Core)$/i.test(tk)) { r.role = tk; }
|
|
|
+ }
|
|
|
+ return r;
|
|
|
+ }
|
|
|
+
|
|
|
+ function labelFor(n) {
|
|
|
+ var p = parseName(n.name);
|
|
|
+ var l1 = [];
|
|
|
+ if (p.workshop) l1.push(p.workshop);
|
|
|
+ if (p.area) l1.push(p.area);
|
|
|
+ if (!l1.length) {
|
|
|
+ l1.push((n.name || '').split('-')[0] || n.ip);
|
|
|
+ }
|
|
|
+ var l2 = [];
|
|
|
+ if (p.floor) { var loc = p.floor + 'F' + (p.cab || '') + (p.u ? '-' + p.u + 'U' : ''); l1.push(loc); }
|
|
|
+ if (p.role) l2.push(p.role);
|
|
|
+ l2.push(n.ip);
|
|
|
+ return l1.join(' · ') + '\n' + l2.join(' · ');
|
|
|
+ }
|
|
|
+
|
|
|
+ function expandLabel(tpl, m) {
|
|
|
+ return String(tpl).replace(/\$(\d)/g, function (_, d) { return m && m[+d] != null ? m[+d] : ''; });
|
|
|
+ }
|
|
|
+
|
|
|
+ function groupOf(n) {
|
|
|
+ var name = n.name || n.ip || '';
|
|
|
+ var rules = CFG.group_rules || [];
|
|
|
+ for (var i = 0; i < rules.length; i++) {
|
|
|
+ var r = rules[i];
|
|
|
+ if (r.match === 'regex') {
|
|
|
+ var re;
|
|
|
+ try { re = new RegExp(r.pattern); } catch (e) { continue; }
|
|
|
+ var m = re.exec(name);
|
|
|
+ if (m) return {label: expandLabel(r.label, m) || (CFG.other_label || 'Other'), big: !!r.big};
|
|
|
+ } else {
|
|
|
+ if (name.indexOf(r.pattern) >= 0) return {label: r.label || (CFG.other_label || 'Other'), big: !!r.big};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {label: CFG.other_label || 'Other', big: false};
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- layout ---------------- */
|
|
|
+ function computeLayout(snap) {
|
|
|
+ var groups = {};
|
|
|
+ (snap.nodes || []).forEach(function (n) {
|
|
|
+ var g = groupOf(n);
|
|
|
+ if (!groups[g.label]) groups[g.label] = {label: g.label, big: g.big, nodes: []};
|
|
|
+ if (g.big) groups[g.label].big = true;
|
|
|
+ groups[g.label].nodes.push(n);
|
|
|
+ });
|
|
|
+
|
|
|
+ var order = Object.keys(groups).sort(function (a, b) {
|
|
|
+ function rank(l) {
|
|
|
+ if (/core/i.test(l)) return 0;
|
|
|
+ if (/data\s*center/i.test(l)) return 1;
|
|
|
+ if (/^\d+$/.test(l)) return 1000 + parseInt(l, 10);
|
|
|
+ return 5000;
|
|
|
+ }
|
|
|
+ return rank(a) - rank(b);
|
|
|
+ });
|
|
|
+
|
|
|
+ var pos = {}, frames = [];
|
|
|
+ var cursorX = 0, cursorY = 0, rowH = 0, minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
|
+
|
|
|
+ order.forEach(function (label) {
|
|
|
+ var g = groups[label];
|
|
|
+ g.nodes.sort(function (a, b) {
|
|
|
+ var da = a.depth || 0, db = b.depth || 0;
|
|
|
+ if (da !== db) return da - db;
|
|
|
+ return (a.name || '').localeCompare(b.name || '');
|
|
|
+ });
|
|
|
+ var n = g.nodes.length;
|
|
|
+ var cols = Math.min(4, Math.max(1, Math.ceil(Math.sqrt(n))));
|
|
|
+ var rows = Math.ceil(n / cols);
|
|
|
+ var innerW = cols * NODE_W + (cols - 1) * GX;
|
|
|
+ var innerH = rows * NODE_H + (rows - 1) * GY;
|
|
|
+ var boxW = innerW + PADX * 2;
|
|
|
+ var boxH = innerH + PADY + 12;
|
|
|
+
|
|
|
+ if (cursorX > 0 && cursorX + boxW > MAXW) { cursorX = 0; cursorY += rowH + GROUP_GAP_Y; rowH = 0; }
|
|
|
+
|
|
|
+ g.nodes.forEach(function (nd, i) {
|
|
|
+ var rr = Math.floor(i / cols), cc = i % cols;
|
|
|
+ pos[nd.id] = {
|
|
|
+ x: cursorX + PADX + cc * (NODE_W + GX) + NODE_W / 2,
|
|
|
+ y: cursorY + PADY + rr * (NODE_H + GY) + NODE_H / 2
|
|
|
+ };
|
|
|
+ });
|
|
|
+ frames.push({label: label, big: g.big, x: cursorX, y: cursorY, w: boxW, h: boxH});
|
|
|
+ minX = Math.min(minX, cursorX); minY = Math.min(minY, cursorY);
|
|
|
+ maxX = Math.max(maxX, cursorX + boxW); maxY = Math.max(maxY, cursorY + boxH);
|
|
|
+
|
|
|
+ cursorX += boxW + GROUP_GAP_X;
|
|
|
+ rowH = Math.max(rowH, boxH);
|
|
|
+ });
|
|
|
+
|
|
|
+ var root = null;
|
|
|
+ if (frames.length) {
|
|
|
+ var m = 28;
|
|
|
+ root = {x: minX - m, y: minY - m - 30, w: (maxX - minX) + 2 * m, h: (maxY - minY) + 2 * m + 30};
|
|
|
+ root.cx = root.x + root.w / 2; root.cy = root.y + root.h / 2;
|
|
|
+ }
|
|
|
+ return {pos: pos, frames: frames, root: root};
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- speed colour ---------------- */
|
|
|
+ function speedColor(speed, state) {
|
|
|
+ if (state && state !== 'up') return colors.down;
|
|
|
+ var s = parseFloat(speed);
|
|
|
+ if (!isFinite(s) || s <= 0) return colors.unknown;
|
|
|
+ if (s <= 100) return colors['100'];
|
|
|
+ if (s <= 1000) return colors['1000'];
|
|
|
+ if (s <= 10000) return colors['10000'];
|
|
|
+ return colors['20000'];
|
|
|
+ }
|
|
|
+ function speedWidth(speed) {
|
|
|
+ var s = parseFloat(speed) || 0;
|
|
|
+ if (s >= 20000) return 4.5;
|
|
|
+ if (s >= 10000) return 3.6;
|
|
|
+ if (s >= 1000) return 2.6;
|
|
|
+ return 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- style ---------------- */
|
|
|
+ function styleFor(d) {
|
|
|
+ var bg = d ? TIER_BG_DARK : TIER_BG;
|
|
|
+ return [
|
|
|
+ {selector: 'node', style: {
|
|
|
+ 'width': 'data(w)', 'height': 'data(h)', 'shape': 'round-rectangle',
|
|
|
+ 'background-color': 'data(bg)', 'border-width': 2, 'border-color': 'data(bd)',
|
|
|
+ 'label': 'data(label)', 'color': d ? '#eaf1fb' : '#ffffff',
|
|
|
+ 'font-size': 11.5, 'font-weight': 600, 'text-valign': 'center', 'text-halign': 'center',
|
|
|
+ 'text-wrap': 'wrap', 'text-max-width': NODE_W - 16, 'padding': '2px',
|
|
|
+ 'overlay-opacity': 0, 'z-index-compare': 'manual', 'z-index': 20
|
|
|
+ }},
|
|
|
+ {selector: 'node[type="frame"]', style: {
|
|
|
+ 'background-opacity': d ? 0.05 : 0.035, 'background-color': d ? '#5b7bb0' : '#8fa6c4',
|
|
|
+ 'border-width': 1.6, 'border-style': 'dashed', 'border-color': d ? '#3f5377' : '#c2ccdb',
|
|
|
+ 'label': 'data(label)', 'text-valign': 'top', 'text-halign': 'center',
|
|
|
+ 'font-size': 'data(fs)', 'font-weight': 800, 'color': d ? '#aebfd8' : '#526178',
|
|
|
+ 'text-margin-y': 8, 'padding': '0px', 'events': 'no', 'z-index-compare': 'manual', 'z-index': 2
|
|
|
+ }},
|
|
|
+ {selector: 'node[type="root"]', style: {
|
|
|
+ 'background-opacity': d ? 0.02 : 0.012, 'background-color': d ? '#7aa0d8' : '#8ea6c2',
|
|
|
+ 'border-width': 2.2, 'border-style': 'solid', 'border-color': d ? '#476492' : '#9fb0c6',
|
|
|
+ 'label': 'data(label)', 'text-valign': 'top', 'text-halign': 'center',
|
|
|
+ 'font-size': 28, 'font-weight': 900, 'color': d ? '#cfe0ff' : '#33465f',
|
|
|
+ 'text-margin-y': 10, 'events': 'no', 'z-index-compare': 'manual', 'z-index': 0
|
|
|
+ }},
|
|
|
+ {selector: 'node[type="term"]', style: {
|
|
|
+ 'width': 12, 'height': 12, 'shape': 'ellipse', 'background-color': 'data(bg)',
|
|
|
+ 'border-width': 1, 'border-color': d ? '#2a3648' : '#cfd8e3', 'label': '',
|
|
|
+ 'z-index-compare': 'manual', 'z-index': 30
|
|
|
+ }},
|
|
|
+ {selector: 'edge', style: {
|
|
|
+ 'width': 'data(w)', 'line-color': 'data(color)', 'line-style': 'data(ls)',
|
|
|
+ 'curve-style': 'bezier', 'opacity': 0.92, 'target-arrow-shape': 'none',
|
|
|
+ 'z-index-compare': 'manual', 'z-index': 12
|
|
|
+ }},
|
|
|
+ {selector: 'edge[type="term"]', style: {
|
|
|
+ 'width': 0.7, 'line-color': d ? '#3b4a5e' : '#c5cfdb', 'opacity': 0.55,
|
|
|
+ 'curve-style': 'bezier', 'z-index-compare': 'manual', 'z-index': 11
|
|
|
+ }},
|
|
|
+ {selector: 'node.alarm', style: {'border-width': 6}},
|
|
|
+ {selector: 'node.lat-warn', style: {'border-color': '#F39C12'}},
|
|
|
+ {selector: 'node.lat-bad', style: {'border-color': '#E74C3C', 'border-width': 6}},
|
|
|
+ {selector: 'node.hl', style: {'border-color': '#ff0', 'border-width': 7, 'overlay-color': '#ff0', 'overlay-opacity': 0.25, 'overlay-padding': 6}},
|
|
|
+ {selector: 'node[type="switch"]', style: {'background-color': function (e) { return e.data('bg'); }}}
|
|
|
+ ];
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- render ---------------- */
|
|
|
+ function render(snap) {
|
|
|
+ if (!snap || !snap.nodes) {
|
|
|
+ el('l2-cy').innerHTML = '<div class="l2-empty">' + t('l2.no_data', 'No data') + '</div>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ lastSnap = snap;
|
|
|
+ var L = computeLayout(snap);
|
|
|
+ var els = [];
|
|
|
+
|
|
|
+ if (L.root) {
|
|
|
+ els.push({group: 'nodes', data: {id: '__root', type: 'root', label: CFG.root_label || 'COBCO', w: L.root.w, h: L.root.h},
|
|
|
+ position: {x: L.root.cx, y: L.root.cy}, selectable: false, grabbable: false});
|
|
|
+ }
|
|
|
+ L.frames.forEach(function (f, i) {
|
|
|
+ els.push({group: 'nodes', data: {id: 'grp_' + i, type: 'frame', label: f.label, w: f.w, h: f.h, fs: f.big ? 20 : 14},
|
|
|
+ position: {x: f.x + f.w / 2, y: f.y + f.h / 2}, selectable: false, grabbable: false});
|
|
|
+ });
|
|
|
+
|
|
|
+ var switchIds = {};
|
|
|
+ (snap.nodes || []).forEach(function (n) {
|
|
|
+ switchIds[n.id] = true;
|
|
|
+ var p = L.pos[n.id] || {x: 0, y: 0};
|
|
|
+ var tier = n.tier || 'access';
|
|
|
+ var tkey = (tier.indexOf('dist') === 0) ? 'dist' : (tier.indexOf('core') === 0 ? 'core' : 'access');
|
|
|
+ var cls = [];
|
|
|
+ var bd = (dark ? TIER_BG_DARK[tkey] : TIER_BG[tkey]) || '#555';
|
|
|
+ if (n.maxsev != null && n.maxsev >= 0 && (n.alarms && n.alarms.length)) {
|
|
|
+ cls.push('alarm');
|
|
|
+ bd = SEV_COLORS[Math.max(0, Math.min(5, n.maxsev))];
|
|
|
+ }
|
|
|
+ if (n.latency_ms != null) {
|
|
|
+ if (+n.latency_ms > LATB) cls.push('lat-bad');
|
|
|
+ else if (+n.latency_ms > LATW) cls.push('lat-warn');
|
|
|
+ }
|
|
|
+ els.push({group: 'nodes', data: {
|
|
|
+ id: n.id, type: 'switch', name: n.name, ip: n.ip, tier: tier, depth: n.depth,
|
|
|
+ hostid: n.hostid, oper: n.oper, maxsev: n.maxsev, alarms: n.alarms || [],
|
|
|
+ term_online: n.term_online, term_offline: n.term_offline, latency_ms: n.latency_ms,
|
|
|
+ label: labelFor(n), bg: (dark ? TIER_BG_DARK[tkey] : TIER_BG[tkey]) || '#777',
|
|
|
+ bd: bd, w: NODE_W, h: NODE_H, tw: NODE_W - 16, z: 20, group: groupOf(n).label
|
|
|
+ }, position: p, classes: cls.join(' ')});
|
|
|
+ });
|
|
|
+
|
|
|
+ (snap.edges || []).forEach(function (e, i) {
|
|
|
+ if (!switchIds[e.source] || !switchIds[e.target]) return;
|
|
|
+ els.push({group: 'edges', data: {
|
|
|
+ id: 'e_' + i, source: e.source, target: e.target, speed: e.speed, state: e.state,
|
|
|
+ a_port: e.a_port, b_port: e.b_port,
|
|
|
+ color: speedColor(e.speed, e.state), ls: (e.state && e.state !== 'up') ? 'dashed' : 'solid',
|
|
|
+ w: speedWidth(e.speed)
|
|
|
+ }});
|
|
|
+ });
|
|
|
+
|
|
|
+ // terminals
|
|
|
+ if (showTerm) {
|
|
|
+ var bySw = {};
|
|
|
+ (snap.terminals || []).forEach(function (tm) {
|
|
|
+ if (!switchIds[tm.sw_ip]) return;
|
|
|
+ if (onlyOff && tm.online) return;
|
|
|
+ (bySw[tm.sw_ip] = bySw[tm.sw_ip] || []).push(tm);
|
|
|
+ });
|
|
|
+ var cnt = 0;
|
|
|
+ Object.keys(bySw).forEach(function (sw) {
|
|
|
+ var base = L.pos[sw]; if (!base) return;
|
|
|
+ bySw[sw].sort(function (a, b) { return (a.online === b.online) ? 0 : (a.online ? -1 : 1); });
|
|
|
+ bySw[sw].forEach(function (tm, k) {
|
|
|
+ var col = k % 9, row = Math.floor(k / 9);
|
|
|
+ var x = base.x - 54 + col * 13;
|
|
|
+ var y = base.y + NODE_H / 2 + 16 + row * 13;
|
|
|
+ els.push({group: 'nodes', data: {id: 't_' + tm.mac, type: 'term', bg: tm.online ? '#2ECC71' : '#95a5a6', mac: tm.mac, ip: tm.ip, online: tm.online},
|
|
|
+ position: {x: x, y: y}, selectable: false});
|
|
|
+ els.push({group: 'edges', data: {id: 'te_' + tm.mac, type: 'term', source: sw, target: 't_' + tm.mac}});
|
|
|
+ cnt++;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!cy) {
|
|
|
+ cy = cytoscape({
|
|
|
+ container: el('l2-cy'),
|
|
|
+ elements: els,
|
|
|
+ style: styleFor(dark),
|
|
|
+ layout: {name: 'preset', fit: true, padding: 50},
|
|
|
+ wheelSensitivity: 0.2,
|
|
|
+ minZoom: 0.05, maxZoom: 4
|
|
|
+ });
|
|
|
+ bindCy();
|
|
|
+ } else {
|
|
|
+ cy.elements().remove();
|
|
|
+ cy.add(els);
|
|
|
+ cy.style(styleFor(dark));
|
|
|
+ cy.layout({name: 'preset', fit: true, padding: 50}).run();
|
|
|
+ }
|
|
|
+
|
|
|
+ updateStats(snap);
|
|
|
+ buildLegend();
|
|
|
+ buildAlarms(snap);
|
|
|
+ buildOffline(snap);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- side panels & stats ---------------- */
|
|
|
+ function updateStats(snap) {
|
|
|
+ var s = snap.stats || {};
|
|
|
+ var txt = '● ' + (s.switches || 0) + ' | ⇄ ' + (s.edges || 0) + ' | ' +
|
|
|
+ (s.term_total || 0) + '(' + (s.term_online || 0) + '/' + (s.term_offline || 0) + ') | ⚠ ' + (s.alarms || 0);
|
|
|
+ var up = snap.generated_iso ? (' · ' + t('l2.updated', 'Updated') + ' ' + snap.generated_iso) : '';
|
|
|
+ el('l2-stats').textContent = txt + up;
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildLegend() {
|
|
|
+ var h = '';
|
|
|
+ function sw(c, label, dashed) { return '<div class="lg-row"><span class="lg-line' + (dashed ? ' lg-dash' : '') + '" style="border-top-color:' + c + '"></span>' + label + '</div>'; }
|
|
|
+ h += '<div class="lg-title">' + t('l2.legend_speed', 'Link speed') + '</div>';
|
|
|
+ h += sw(colors['100'], '100M') + sw(colors['1000'], '1G') + sw(colors['10000'], '10G') + sw(colors['20000'], '20G+');
|
|
|
+ h += sw(colors.unknown, t('lbl.color_unknown', 'Unknown'));
|
|
|
+ h += sw(colors.down, t('lbl.color_down', 'Down'), true);
|
|
|
+ h += '<div class="lg-title">' + t('l2.legend_tier', 'Tier') + '</div>';
|
|
|
+ h += '<div class="lg-row"><span class="lg-box" style="background:' + TIER_BG.core + '"></span>' + t('l2.core', 'Core') +
|
|
|
+ '<span class="lg-box" style="background:' + TIER_BG.dist + ';margin-left:8px"></span>' + t('l2.dist', 'Distribution') +
|
|
|
+ '<span class="lg-box" style="background:' + TIER_BG.access + ';margin-left:8px"></span>' + t('l2.access', 'Access') + '</div>';
|
|
|
+ h += '<div class="lg-title">' + t('l2.legend_lat', 'Latency') + '</div>';
|
|
|
+ h += '<div class="lg-row"><span class="lg-box" style="background:#F39C12;border-radius:2px"></span>>' + LATW + 'ms' +
|
|
|
+ '<span class="lg-box" style="background:#E74C3C;border-radius:2px;margin-left:8px"></span>>' + LATB + 'ms</div>';
|
|
|
+ h += '<div class="lg-row"><span class="lg-box" style="background:#E45959;border-radius:2px"></span>' + t('l2.alarms', 'Alarms') + '</div>';
|
|
|
+ h += '<div class="lg-row"><span class="lg-box" style="background:#2ECC71;border-radius:50%"></span>' + t('l2.term_on', 'Online') +
|
|
|
+ '<span class="lg-box" style="background:#95a5a6;border-radius:50%;margin-left:8px"></span>' + t('l2.term_off', 'Offline') + '</div>';
|
|
|
+ el('l2-legend').innerHTML = h;
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildAlarms(snap) {
|
|
|
+ var items = [];
|
|
|
+ (snap.nodes || []).forEach(function (n) {
|
|
|
+ if (n.maxsev != null && n.maxsev >= 0 && n.alarms && n.alarms.length) {
|
|
|
+ n.alarms.forEach(function (a) {
|
|
|
+ items.push({sev: n.maxsev, title: (a.name || a.description || ''), host: n.name, ip: n.ip, id: n.id, hostid: n.hostid});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ (snap.other_alarms || []).forEach(function (a) {
|
|
|
+ items.push({sev: a.sev, title: a.name, host: a.host, ip: a.ip, id: null, hostid: null, other: true});
|
|
|
+ });
|
|
|
+ el('l2-alarm-count').textContent = items.length;
|
|
|
+ if (!items.length) { el('l2-alarm-list').innerHTML = '<div class="panel-empty">' + t('l2.alarm_empty', 'No active alarms.') + '</div>'; return; }
|
|
|
+ items.sort(function (a, b) { return b.sev - a.sev; });
|
|
|
+ var h = '';
|
|
|
+ items.forEach(function (it) {
|
|
|
+ var col = SEV_COLORS[Math.max(0, Math.min(5, it.sev))] || '#999';
|
|
|
+ h += '<div class="alarm-row" data-id="' + (it.id || '') + '" data-hostid="' + (it.hostid || '') + '">' +
|
|
|
+ '<span class="alarm-dot" style="background:' + col + '"></span>' +
|
|
|
+ '<div class="alarm-main"><div class="alarm-title">' + esc(it.title) + '</div>' +
|
|
|
+ '<div class="alarm-sub">' + esc(it.host || '') + (it.ip ? ' · ' + esc(it.ip) : '') + (it.other ? ' · 拓扑外' : '') + '</div></div></div>';
|
|
|
+ });
|
|
|
+ var box = el('l2-alarm-list');
|
|
|
+ box.innerHTML = h;
|
|
|
+ box.querySelectorAll('.alarm-row').forEach(function (r) {
|
|
|
+ r.addEventListener('click', function () {
|
|
|
+ var id = r.getAttribute('data-id');
|
|
|
+ if (id) focusNode(id);
|
|
|
+ else { var hid = r.getAttribute('data-hostid'); if (hid) window.open(META.zabbixHostUrl.replace('__HOSTID__', hid), '_blank'); }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildOffline(snap) {
|
|
|
+ var off = (snap.terminals || []).filter(function (tm) { return !tm.online; });
|
|
|
+ el('l2-offline-count').textContent = off.length;
|
|
|
+ if (!off.length) { el('l2-offline-list').innerHTML = '<div class="panel-empty">' + t('l2.offline_empty', 'No offline terminals.') + '</div>'; return; }
|
|
|
+ var h = '';
|
|
|
+ off.forEach(function (tm) {
|
|
|
+ h += '<div class="off-row" data-mac="' + esc(tm.mac) + '">' +
|
|
|
+ '<div class="off-main"><div class="off-mac">' + esc(tm.mac) + '</div>' +
|
|
|
+ '<div class="off-sub">' + esc(tm.sw_name || tm.sw_ip) + ' · ' + esc(tm.port || '') + '</div></div></div>';
|
|
|
+ });
|
|
|
+ var box = el('l2-offline-list');
|
|
|
+ box.innerHTML = h;
|
|
|
+ box.querySelectorAll('.off-row').forEach(function (r) {
|
|
|
+ r.addEventListener('click', function () {
|
|
|
+ var mac = r.getAttribute('data-mac');
|
|
|
+ if (!showTerm) { showTerm = true; el('l2-showterm').checked = true; render(lastSnap); }
|
|
|
+ setTimeout(function () { focusNode('t_' + mac); }, 60);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return ({'&':'&','<':'<','>':'>','"':'"',"'":'''})[c]; }); }
|
|
|
+
|
|
|
+ /* ---------------- interactions ---------------- */
|
|
|
+ function focusNode(id) {
|
|
|
+ if (!cy) return;
|
|
|
+ var n = cy.getElementById(id);
|
|
|
+ if (!n || n.empty() || n.length === 0) return;
|
|
|
+ cy.elements().removeClass('hl');
|
|
|
+ n.addClass('hl');
|
|
|
+ cy.animate({center: {eles: n}, zoom: Math.max(cy.zoom(), 1.1), duration: 380});
|
|
|
+ setTimeout(function () { n.removeClass('hl'); }, 2600);
|
|
|
+ }
|
|
|
+
|
|
|
+ function bindCy() {
|
|
|
+ cy.on('mouseover', 'node[type="switch"]', function (e) {
|
|
|
+ var d = e.target.data();
|
|
|
+ var arr = d.alarms || [];
|
|
|
+ var sev = (d.maxsev != null && d.maxsev >= 0) ? ('<span style="color:' + SEV_COLORS[d.maxsev] + '">● ' + SEV_NAMES[d.maxsev] + '</span>') : '—';
|
|
|
+ var lat = (d.latency_ms != null) ? (d.latency_ms + ' ms') : '—';
|
|
|
+ var html = '<b>' + esc(d.name) + '</b><br>' + esc(d.ip) + ' · ' + esc(d.group || '') + '<br>' +
|
|
|
+ 'Tier: ' + esc(d.tier) + ' · ' + (d.oper || '') + '<br>' +
|
|
|
+ 'Latency: ' + lat + '<br>' +
|
|
|
+ 'Terminals: ' + (d.term_online || 0) + ' on / ' + (d.term_offline || 0) + ' off<br>' +
|
|
|
+ 'Alarm: ' + sev;
|
|
|
+ if (arr.length) html += '<hr>' + arr.map(function (a) { return esc(a.name || a.description || ''); }).join('<br>');
|
|
|
+ showTip(e, html);
|
|
|
+ });
|
|
|
+ cy.on('mouseout', 'node[type="switch"]', hideTip);
|
|
|
+ cy.on('mouseover', 'edge:not([type="term"])', function (e) {
|
|
|
+ var d = e.target.data();
|
|
|
+ var sp = (parseFloat(d.speed) || 0) >= 1000 ? ((parseFloat(d.speed) / 1000) + 'G') : (d.speed + 'M');
|
|
|
+ showTip(e, 'Link ' + esc(d.a_port || '') + ' ↔ ' + esc(d.b_port || '') + '<br>' + sp + ' · ' + esc(d.state || ''));
|
|
|
+ });
|
|
|
+ cy.on('mouseout', 'edge', hideTip);
|
|
|
+ cy.on('tap', 'node[type="switch"]', function (e) {
|
|
|
+ var hid = e.target.data('hostid');
|
|
|
+ if (hid) { /* single click: focus only; double handled below */ }
|
|
|
+ });
|
|
|
+ cy.on('dbltap', 'node[type="switch"]', function (e) {
|
|
|
+ var hid = e.target.data('hostid');
|
|
|
+ if (hid) window.open(META.zabbixHostUrl.replace('__HOSTID__', hid), '_blank');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var SEV_NAMES = ['未分类','信息','警告','一般严重','严重','灾难'];
|
|
|
+
|
|
|
+ function showTip(e, html) {
|
|
|
+ var tip = el('l2-tip');
|
|
|
+ tip.innerHTML = html;
|
|
|
+ tip.style.display = 'block';
|
|
|
+ var p = e.renderedPosition || {x: 0, y: 0};
|
|
|
+ var box = el('l2-cy').getBoundingClientRect();
|
|
|
+ var x = box.left + p.x + 16, y = box.top + p.y + 16;
|
|
|
+ tip.style.left = x + 'px'; tip.style.top = y + 'px';
|
|
|
+ }
|
|
|
+ function hideTip() { el('l2-tip').style.display = 'none'; }
|
|
|
+
|
|
|
+ /* ---------------- search ---------------- */
|
|
|
+ function buildIndex(snap) {
|
|
|
+ var idx = [];
|
|
|
+ (snap.nodes || []).forEach(function (n) { idx.push({id: n.id, label: n.name, sub: n.ip, kind: 'sw'}); });
|
|
|
+ (snap.terminals || []).forEach(function (tm) { idx.push({id: 't_' + tm.mac, label: tm.ip || tm.mac, sub: tm.mac + ' · ' + (tm.sw_name || ''), kind: 'term', mac: tm.mac}); });
|
|
|
+ return idx;
|
|
|
+ }
|
|
|
+ var INDEX = [];
|
|
|
+ function doSearch(q) {
|
|
|
+ var box = el('l2-sug');
|
|
|
+ q = (q || '').trim().toLowerCase();
|
|
|
+ if (!q) { box.style.display = 'none'; box.innerHTML = ''; return; }
|
|
|
+ var hits = [];
|
|
|
+ for (var i = 0; i < INDEX.length && hits.length < 14; i++) {
|
|
|
+ var it = INDEX[i];
|
|
|
+ if ((it.label && it.label.toLowerCase().indexOf(q) >= 0) || (it.sub && it.sub.toLowerCase().indexOf(q) >= 0)) hits.push(it);
|
|
|
+ }
|
|
|
+ if (!hits.length) { box.innerHTML = '<div class="sug-empty">—</div>'; box.style.display = 'block'; return; }
|
|
|
+ box.innerHTML = hits.map(function (h) {
|
|
|
+ return '<div class="sug-row" data-id="' + esc(h.id) + '"><span class="sug-kind ' + h.kind + '">' + (h.kind === 'sw' ? 'SW' : 'PC') + '</span>' +
|
|
|
+ '<span class="sug-lbl">' + esc(h.label) + '</span><span class="sug-sub">' + esc(h.sub || '') + '</span></div>';
|
|
|
+ }).join('');
|
|
|
+ box.style.display = 'block';
|
|
|
+ box.querySelectorAll('.sug-row').forEach(function (r) {
|
|
|
+ r.addEventListener('click', function () {
|
|
|
+ var id = r.getAttribute('data-id');
|
|
|
+ if (id.indexOf('t_') === 0 && !showTerm) { showTerm = true; el('l2-showterm').checked = true; render(lastSnap); setTimeout(function () { focusNode(id); }, 80); }
|
|
|
+ else focusNode(id);
|
|
|
+ box.style.display = 'none';
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- toolbar wiring ---------------- */
|
|
|
+ function setupControls() {
|
|
|
+ dark = el('l2-wrap').classList.contains('l2-dark');
|
|
|
+ el('l2-dark').checked = dark;
|
|
|
+
|
|
|
+ el('l2-dark').addEventListener('change', function () {
|
|
|
+ dark = el('l2-dark').checked;
|
|
|
+ el('l2-wrap').classList.toggle('l2-dark', dark);
|
|
|
+ if (cy) cy.style(styleFor(dark));
|
|
|
+ buildLegend();
|
|
|
+ });
|
|
|
+ el('l2-showterm').addEventListener('change', function () { showTerm = el('l2-showterm').checked; render(lastSnap); });
|
|
|
+ el('l2-onlyoff').addEventListener('change', function () {
|
|
|
+ onlyOff = el('l2-onlyoff').checked;
|
|
|
+ if (onlyOff && !showTerm) { showTerm = true; el('l2-showterm').checked = true; }
|
|
|
+ render(lastSnap);
|
|
|
+ });
|
|
|
+ el('l2-zin').addEventListener('click', function () { if (cy) cy.zoom({level: cy.zoom() * 1.25, renderedPosition: {x: cy.width() / 2, y: cy.height() / 2}}); });
|
|
|
+ el('l2-zout').addEventListener('click', function () { if (cy) cy.zoom({level: cy.zoom() / 1.25, renderedPosition: {x: cy.width() / 2, y: cy.height() / 2}}); });
|
|
|
+ el('l2-fit').addEventListener('click', function () { if (cy) cy.fit(undefined, 50); });
|
|
|
+ el('l2-refresh-btn').addEventListener('click', function () { reload(true); });
|
|
|
+
|
|
|
+ var s = el('l2-search');
|
|
|
+ s.addEventListener('input', function () { doSearch(s.value); });
|
|
|
+ document.addEventListener('click', function (ev) {
|
|
|
+ if (!ev.target.closest('.l2-search-wrap')) el('l2-sug').style.display = 'none';
|
|
|
+ });
|
|
|
+
|
|
|
+ el('l2-ts').addEventListener('change', function () {
|
|
|
+ var v = el('l2-ts').value;
|
|
|
+ var u = '/zabbix.php?action=l2.topology.view';
|
|
|
+ if (v) u += '&ts=' + encodeURIComponent(v);
|
|
|
+ window.location = u;
|
|
|
+ });
|
|
|
+
|
|
|
+ el('l2-pause').addEventListener('click', function () {
|
|
|
+ paused = !paused;
|
|
|
+ el('l2-pause').classList.toggle('on', paused);
|
|
|
+ el('l2-pause').textContent = paused ? '▶' : '❚❚';
|
|
|
+ el('l2-pause').title = paused ? t('l2.resume', 'Resume') : t('l2.pause', 'Pause');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function reload(manual) {
|
|
|
+ if (!META.isLive) return;
|
|
|
+ fetch(META.snapshotUrl + '?t=' + Date.now(), {cache: 'no-store'})
|
|
|
+ .then(function (r) { return r.json(); })
|
|
|
+ .then(function (j) { if (j && j.nodes) { SNAP = j; INDEX = buildIndex(j); render(j); } })
|
|
|
+ .catch(function () {})
|
|
|
+ .then(function () { if (manual) resetCountdown(); });
|
|
|
+ }
|
|
|
+
|
|
|
+ function resetCountdown() { countdown = META.refreshSeconds || 300; }
|
|
|
+ function startTimer() {
|
|
|
+ if (!META.isLive) return;
|
|
|
+ resetCountdown();
|
|
|
+ timer = setInterval(function () {
|
|
|
+ if (paused) { el('l2-countdown').textContent = '⏸'; return; }
|
|
|
+ countdown--;
|
|
|
+ if (countdown <= 0) { countdown = META.refreshSeconds || 300; reload(false); }
|
|
|
+ var m = Math.floor(countdown / 60), s = countdown % 60;
|
|
|
+ el('l2-countdown').textContent = '↻ ' + m + ':' + (s < 10 ? '0' + s : s);
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- boot ---------------- */
|
|
|
+ function boot() {
|
|
|
+ setupControls();
|
|
|
+ if (!SNAP || !SNAP.nodes) {
|
|
|
+ el('l2-cy').innerHTML = '<div class="l2-empty">' + t('l2.no_data', 'No data') + '</div>';
|
|
|
+ } else {
|
|
|
+ INDEX = buildIndex(SNAP);
|
|
|
+ render(SNAP);
|
|
|
+ }
|
|
|
+ if (META.isLive) startTimer();
|
|
|
+ else { el('l2-pause').disabled = true; el('l2-countdown').textContent = t('l2.snapshot', 'Snapshot'); }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
|
|
|
+ else boot();
|
|
|
+})();
|