gandalf/templates/inspector.html

{% extends "base.html" %}
{% block title %}Inspector – GANDALF{% endblock %}

{% block content %}

<div class="page-header">
  <h1 class="page-title">Network Inspector</h1>
  <p class="page-sub">
    Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
    <span id="inspector-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
  </p>
</div>

<div class="inspector-layout">
  <div class="inspector-main" id="inspector-main">
    <div class="link-loading">Loading inspector data</div>
  </div>
  <div class="inspector-panel" id="inspector-panel">
    <div class="inspector-panel-inner" id="inspector-panel-inner"></div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// ── Switch layout config ─────────────────────────────────────────────────
// keys match the model field returned by the UniFi API
// rows: array of rows, each row is an array of port_idx values
// sfp_ports: port_idx values that are SFP cages (in rows, rendered differently)
// sfp_section: port_idx values rendered as a separate SFP bank below the rows
const SWITCH_LAYOUTS = {
  'USF5P':   { rows: [[1,2,3,4]], sfp_section: [5] },
  'USL8A':   { rows: [[1,2,3,4],[5,6,7,8]], sfp_ports: [1,2,3,4,5,6,7,8] },
  'US24PRO': {
    rows: [
      [1,3,5,7,9,11,13,15,17,19,21,23],
      [2,4,6,8,10,12,14,16,18,20,22,24],
    ],
    sfp_section: [25,26],
  },
  'USPPDUP': { rows: [[1]] },
  'USMINI':  { rows: [[1,2,3,4,5]] },
};

// ── Formatting helpers ───────────────────────────────────────────────────
function fmtSpeed(mbps) {
  if (!mbps) return '–';
  if (mbps >= 1000) return (mbps / 1000).toFixed(0) + 'G';
  return mbps + 'M';
}

function fmtRate(bytesPerSec) {
  if (bytesPerSec === null || bytesPerSec === undefined) return '–';
  const bps = bytesPerSec * 8;
  if (bps < 1e3)  return bps.toFixed(0) + ' bps';
  if (bps < 1e6)  return (bps / 1e3).toFixed(1) + ' Kbps';
  if (bps < 1e9)  return (bps / 1e6).toFixed(2) + ' Mbps';
  return (bps / 1e9).toFixed(3) + ' Gbps';
}

function fmtErrors(rate) {
  if (rate === null || rate === undefined) return '–';
  if (rate < 0.001) return '<span class="val-good">0 /s</span>';
  return `<span class="val-crit">${rate.toFixed(3)} /s</span>`;
}

// ── Build port_idx → port data map ──────────────────────────────────────
function buildPortIdxMap(ports) {
  const map = {};
  for (const [pname, d] of Object.entries(ports)) {
    if (d.port_idx != null) {
      map[d.port_idx] = Object.assign({ name: pname }, d);
    }
  }
  return map;
}

// ── Determine port block CSS state class ────────────────────────────────
function portBlockState(d) {
  if (!d || !d.up) return 'down';
  if (d.is_uplink)  return 'uplink';
  if (d.poe_power != null && d.poe_power > 0) return 'poe-active';
  return 'up';
}

// ── Render a single port block element ──────────────────────────────────
function portBlockHtml(idx, port, swName, sfpBlock) {
  const state = portBlockState(port);
  const label = sfpBlock ? 'SFP' : idx;
  const title = port ? escHtml(port.name) : `Port ${idx}`;
  const sfpCls = sfpBlock ? ' sfp-block' : '';
  return `<div class="switch-port-block ${state}${sfpCls}"
    data-switch="${escHtml(swName)}" data-port-idx="${idx}"
    title="${title}"
    onclick="selectPort(this)">${label}</div>`;
}

// ── Render one switch chassis ────────────────────────────────────────────
function renderChassis(swName, sw) {
  const model   = sw.model || '';
  const layout  = SWITCH_LAYOUTS[model] || null;
  const portMap = buildPortIdxMap(sw.ports || {});

  const upCount   = Object.values(sw.ports || {}).filter(p => p.up).length;
  const totCount  = Object.keys(sw.ports || {}).length;
  const downCount = totCount - upCount;
  const meta = [model, `${upCount}/${totCount} up`, downCount ? `${downCount} down` : ''].filter(Boolean).join(' · ');

  let chassisHtml = '';

  if (layout) {
    const sfpPortSet = new Set(layout.sfp_ports || []);
    const sfpSectionSet = new Set(layout.sfp_section || []);

    // Main port rows
    chassisHtml += '<div class="chassis-rows">';
    for (const row of layout.rows) {
      chassisHtml += '<div class="chassis-row">';
      for (const idx of row) {
        const port   = portMap[idx];
        const isSfp  = sfpPortSet.has(idx);
        const sfpCls = isSfp ? ' sfp-port' : '';
        const state  = portBlockState(port);
        const title  = port ? escHtml(port.name) : `Port ${idx}`;
        chassisHtml += `<div class="switch-port-block ${state}${sfpCls}"
          data-switch="${escHtml(swName)}" data-port-idx="${idx}"
          title="${title}"
          onclick="selectPort(this)">${idx}</div>`;
      }
      chassisHtml += '</div>';
    }
    chassisHtml += '</div>';

    // Separate SFP section (if present)
    if (sfpSectionSet.size) {
      chassisHtml += '<div class="chassis-sfp-section">';
      for (const idx of layout.sfp_section) {
        chassisHtml += portBlockHtml(idx, portMap[idx], swName, true);
      }
      chassisHtml += '</div>';
    }
  } else {
    // Fallback: render all ports sorted by idx
    const allPorts = Object.entries(sw.ports || {})
      .sort(([, a], [, b]) => (a.port_idx || 0) - (b.port_idx || 0));
    chassisHtml += '<div class="chassis-rows"><div class="chassis-row">';
    for (const [pname, d] of allPorts) {
      chassisHtml += portBlockHtml(d.port_idx || 0, Object.assign({ name: pname }, d), swName, false);
    }
    chassisHtml += '</div></div>';
  }

  return `
    <div class="inspector-chassis" id="chassis-${escHtml(swName)}">
      <div class="chassis-header">
        <span class="chassis-name">${escHtml(swName)}</span>
        ${sw.ip ? `<span class="chassis-ip">${escHtml(sw.ip)}</span>` : ''}
        <span class="chassis-meta">${escHtml(meta)}</span>
      </div>
      <div class="chassis-body">${chassisHtml}</div>
    </div>`;
}

// ── State ────────────────────────────────────────────────────────────────
let _selectedSwitch = null;
let _selectedIdx    = null;
let _apiData        = null;

// ── Port selection ───────────────────────────────────────────────────────
function selectPort(el) {
  const swName = el.dataset.switch;
  const idx    = parseInt(el.dataset.portIdx, 10);
  document.querySelectorAll('.switch-port-block.selected')
    .forEach(e => e.classList.remove('selected'));
  el.classList.add('selected');
  _selectedSwitch = swName;
  _selectedIdx    = idx;
  renderPanel(swName, idx);
}

function closePanel() {
  document.getElementById('inspector-panel').classList.remove('open');
  document.querySelectorAll('.switch-port-block.selected')
    .forEach(el => el.classList.remove('selected'));
  _selectedSwitch = null;
  _selectedIdx    = null;
}

// ── Render detail panel ──────────────────────────────────────────────────
function renderPanel(swName, idx) {
  if (!_apiData) return;
  const sw = _apiData.unifi_switches && _apiData.unifi_switches[swName];
  if (!sw) return;
  const portMap = buildPortIdxMap(sw.ports || {});
  const d = portMap[idx];
  if (!d) return;

  const upStr    = d.up ? '<span class="val-good">UP</span>' : '<span class="val-crit">DOWN</span>';
  const speedStr = d.speed_mbps ? `<span class="val-cyan">${fmtSpeed(d.speed_mbps)}bps</span>` : '–';
  const duplexCls = d.full_duplex ? 'val-good' : (d.up ? 'val-warn' : 'val-neutral');
  const duplexStr = d.up ? `<span class="${duplexCls}">${d.full_duplex ? 'Full' : 'Half'}</span>` : '–';
  const autoneg  = d.autoneg ? 'On' : 'Off';
  const mediaStr = d.media || '–';
  const isUplinkBadge = d.is_uplink ? ' <span class="port-badge port-badge-uplink">UPLINK</span>' : '';

  // PoE section
  let poeHtml = '';
  if (d.poe_class != null) {
    const poeMaxStr = d.poe_max_power != null ? ` / max ${d.poe_max_power.toFixed(1)}W` : '';
    const poeCurStr = (d.poe_power != null && d.poe_power > 0) ? ` / draw <span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '';
    poeHtml = `
      <div class="panel-section-title">PoE</div>
      <div class="panel-row"><span class="panel-label">Class</span><span class="panel-val">class ${d.poe_class}${poeMaxStr}</span></div>
      ${d.poe_power != null ? `<div class="panel-row"><span class="panel-label">Draw</span><span class="panel-val">${d.poe_power > 0 ? `<span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '0W'}</span></div>` : ''}
      ${d.poe_mode ? `<div class="panel-row"><span class="panel-label">Mode</span><span class="panel-val">${escHtml(d.poe_mode)}</span></div>` : ''}`;
  }

  // Traffic section
  let trafficHtml = '';
  if (d.tx_bytes_rate != null || d.rx_bytes_rate != null) {
    trafficHtml = `
      <div class="panel-section-title">Traffic</div>
      <div class="panel-row"><span class="panel-label">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
      <div class="panel-row"><span class="panel-label">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
  }

  // Errors / drops section
  let errHtml = '';
  if (d.tx_errs_rate != null || d.rx_errs_rate != null) {
    errHtml = `
      <div class="panel-section-title">Errors / Drops</div>
      <div class="panel-row"><span class="panel-label">TX Err</span><span class="panel-val">${fmtErrors(d.tx_errs_rate)}</span></div>
      <div class="panel-row"><span class="panel-label">RX Err</span><span class="panel-val">${fmtErrors(d.rx_errs_rate)}</span></div>
      <div class="panel-row"><span class="panel-label">TX Drop</span><span class="panel-val">${fmtErrors(d.tx_drops_rate)}</span></div>
      <div class="panel-row"><span class="panel-label">RX Drop</span><span class="panel-val">${fmtErrors(d.rx_drops_rate)}</span></div>`;
  }

  // LLDP + path debug
  let lldpHtml = '';
  let pathHtml = '';
  if (d.lldp && d.lldp.system_name) {
    const l = d.lldp;
    lldpHtml = `
      <div class="panel-section-title">LLDP Neighbor</div>
      <div class="panel-row"><span class="panel-label">System</span><span class="panel-val val-cyan">${escHtml(l.system_name)}</span></div>
      ${l.port_id  ? `<div class="panel-row"><span class="panel-label">Port</span><span class="panel-val">${escHtml(l.port_id)}</span></div>` : ''}
      ${l.port_desc ? `<div class="panel-row"><span class="panel-label">Port Desc</span><span class="panel-val">${escHtml(l.port_desc)}</span></div>` : ''}
      ${l.chassis_id ? `<div class="panel-row"><span class="panel-label">Chassis</span><span class="panel-val">${escHtml(l.chassis_id)}</span></div>` : ''}
      ${l.mgmt_ips && l.mgmt_ips.length ? `<div class="panel-row"><span class="panel-label">Mgmt IP</span><span class="panel-val">${escHtml(l.mgmt_ips.join(', '))}</span></div>` : ''}`;

    // Path debug: look for matching server interface
    const hosts = _apiData.hosts || {};
    const serverIfaces = hosts[l.system_name];
    if (serverIfaces) {
      let matchedIface = l.port_id && serverIfaces[l.port_id] ? l.port_id : null;
      if (!matchedIface && l.port_id) {
        // fuzzy match
        matchedIface = Object.keys(serverIfaces).find(k => l.port_id.includes(k) || k.includes(l.port_id)) || null;
      }
      if (matchedIface) {
        pathHtml = buildPathDebug(swName, d, l.system_name, matchedIface, serverIfaces[matchedIface]);
      }
    }
  }

  const inner = document.getElementById('inspector-panel-inner');
  inner.innerHTML = `
    <div class="panel-header">
      <div>
        <span class="panel-port-name">${escHtml(d.name)}</span>${isUplinkBadge}
        <div class="panel-meta">${escHtml(swName)} · port #${idx}</div>
      </div>
      <button class="panel-close" onclick="closePanel()">✕</button>
    </div>

    <div class="panel-section-title">Link</div>
    <div class="panel-row"><span class="panel-label">Status</span><span class="panel-val">${upStr}</span></div>
    <div class="panel-row"><span class="panel-label">Speed</span><span class="panel-val">${speedStr}</span></div>
    <div class="panel-row"><span class="panel-label">Duplex</span><span class="panel-val">${duplexStr}</span></div>
    <div class="panel-row"><span class="panel-label">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
    <div class="panel-row"><span class="panel-label">Media</span><span class="panel-val">${escHtml(mediaStr)}</span></div>

    ${poeHtml}
    ${trafficHtml}
    ${errHtml}
    ${lldpHtml}
    ${pathHtml}
  `;

  document.getElementById('inspector-panel').classList.add('open');
}

// ── Build path debug two-column section ─────────────────────────────────
function buildPathDebug(swName, swPort, serverName, ifaceName, svrData) {
  const isFiber = (swPort.media || '').toLowerCase().includes('sfp') ||
                  (svrData.port_type || '').toLowerCase().includes('fibre') ||
                  (svrData.port_type || '').toLowerCase().includes('fiber') ||
                  !!svrData.sfp;
  const connType = isFiber ? 'SFP / Fiber' : 'Copper';

  let sfpDomHtml = '';
  if (svrData.sfp && Object.keys(svrData.sfp).length) {
    const sfp = svrData.sfp;
    sfpDomHtml = '<div class="path-dom">';
    if (sfp.vendor)        sfpDomHtml += `<div class="path-dom-row"><span>Vendor</span><span>${escHtml(sfp.vendor)}${sfp.part_no ? ' / ' + escHtml(sfp.part_no) : ''}</span></div>`;
    if (sfp.temp_c != null) sfpDomHtml += `<div class="path-dom-row"><span>Temp</span><span>${sfp.temp_c.toFixed(1)}°C</span></div>`;
    if (sfp.tx_power_dbm != null) sfpDomHtml += `<div class="path-dom-row"><span>TX</span><span>${sfp.tx_power_dbm.toFixed(2)} dBm</span></div>`;
    if (sfp.rx_power_dbm != null) sfpDomHtml += `<div class="path-dom-row"><span>RX</span><span>${sfp.rx_power_dbm.toFixed(2)} dBm</span></div>`;
    sfpDomHtml += '</div>';
  }

  const svrErrTx = (svrData.tx_errs_rate > 0.001) ? 'val-crit' : 'val-good';
  const svrErrRx = (svrData.rx_errs_rate > 0.001) ? 'val-crit' : 'val-good';
  const swErrTx  = (swPort.tx_errs_rate  > 0.001) ? 'val-crit' : 'val-good';
  const swErrRx  = (swPort.rx_errs_rate  > 0.001) ? 'val-crit' : 'val-good';

  return `
    <div class="panel-section-title">Path Debug <span class="path-conn-type">${escHtml(connType)}</span></div>
    <div class="path-debug-cols">
      <div class="path-col">
        <div class="path-col-header">Switch</div>
        <div class="path-row"><span>Port</span><span>${escHtml(swPort.name)}</span></div>
        <div class="path-row"><span>Speed</span><span>${fmtSpeed(swPort.speed_mbps)}bps</span></div>
        <div class="path-row"><span>TX</span><span>${fmtRate(swPort.tx_bytes_rate)}</span></div>
        <div class="path-row"><span>RX</span><span>${fmtRate(swPort.rx_bytes_rate)}</span></div>
        <div class="path-row"><span>TX Err</span><span class="${swErrTx}">${fmtErrors(swPort.tx_errs_rate)}</span></div>
        <div class="path-row"><span>RX Err</span><span class="${swErrRx}">${fmtErrors(swPort.rx_errs_rate)}</span></div>
        ${(swPort.poe_power != null && swPort.poe_power > 0) ? `<div class="path-row"><span>PoE</span><span class="val-amber">${swPort.poe_power.toFixed(1)}W</span></div>` : ''}
      </div>
      <div class="path-col">
        <div class="path-col-header">Server: ${escHtml(serverName)}</div>
        <div class="path-row"><span>Iface</span><span>${escHtml(ifaceName)}</span></div>
        <div class="path-row"><span>Speed</span><span>${svrData.speed_mbps ? fmtSpeed(svrData.speed_mbps) + 'bps' : '–'}</span></div>
        <div class="path-row"><span>TX</span><span>${fmtRate(svrData.tx_bytes_rate)}</span></div>
        <div class="path-row"><span>RX</span><span>${fmtRate(svrData.rx_bytes_rate)}</span></div>
        <div class="path-row"><span>TX Err</span><span class="${svrErrTx}">${fmtErrors(svrData.tx_errs_rate)}</span></div>
        <div class="path-row"><span>RX Err</span><span class="${svrErrRx}">${fmtErrors(svrData.rx_errs_rate)}</span></div>
        ${sfpDomHtml}
      </div>
    </div>`;
}

// ── Render all switches ──────────────────────────────────────────────────
function renderInspector(data) {
  _apiData = data;
  const main = document.getElementById('inspector-main');
  const switches = data.unifi_switches || {};

  const upd = data.updated ? `Updated: ${data.updated}` : '';
  const updEl = document.getElementById('inspector-updated');
  if (updEl) updEl.textContent = upd;

  if (!Object.keys(switches).length) {
    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
    return;
  }

  main.innerHTML = Object.entries(switches)
    .map(([swName, sw]) => renderChassis(swName, sw))
    .join('');

  // Re-apply selection highlight after re-render (dataset compare — no CSS escaping)
  if (_selectedSwitch && _selectedIdx !== null) {
    const block = Array.from(document.querySelectorAll('.switch-port-block')).find(
      el => el.dataset.switch === _selectedSwitch && parseInt(el.dataset.portIdx, 10) === _selectedIdx
    );
    if (block) {
      block.classList.add('selected');
      renderPanel(_selectedSwitch, _selectedIdx);
    }
  }
}

// ── Fetch and render ─────────────────────────────────────────────────────
async function loadInspector() {
  try {
    const resp = await fetch('/api/links');
    if (!resp.ok) throw new Error('API error');
    const data = await resp.json();
    renderInspector(data);
  } catch (e) {
    document.getElementById('inspector-main').innerHTML =
      '<p class="empty-state">Failed to load inspector data.</p>';
  }
}

loadInspector();
setInterval(loadInspector, 60000);
</script>
{% endblock %}