Merge pull request #335 from bloqaudio/feat/ports-connected-devices

ports: show the devices connected behind each port

html/i18n.js

@@ -37,6 +37,8 @@ var LANG = {
     port_col_speed: 'Current Link Speed',
     port_col_set_speed: 'Set Speed',
     port_col_disabled: 'Disabled',
+    port_col_devices: 'Connected devices',
+    port_devices: 'devices',
     port_col_apply: 'Apply',
     port_mtu_heading: 'Configure Maximum Frame Size (MTU) forwarded at Port',
     port_auto: 'Auto',
@@ -224,6 +226,8 @@ var LANG = {
     port_col_speed: '現在のリンク速度',
     port_col_set_speed: '速度設定',
     port_col_disabled: '無効',
+    port_col_devices: '接続デバイス',
+    port_devices: 'デバイス',
     port_col_apply: '適用',
     port_mtu_heading: 'ポートの最大フレームサイズ (MTU) 設定',
     port_auto: '自動',
@@ -411,6 +415,8 @@ var LANG = {
     port_col_speed: '当前链路速率',
     port_col_set_speed: '设置速率',
     port_col_disabled: '禁用',
+    port_col_devices: '已连接设备',
+    port_devices: '台设备',
     port_col_apply: '应用',
     port_mtu_heading: '配置端口转发的最大帧大小 (MTU)',
     port_auto: '自动',

html/ports.html

@@ -12,7 +12,7 @@
     <h1 data-i18n="port_heading">Port Configuration</h1>
     <form id="vform" action="/vlan.html">
     <table id="speedtable">
-      <tr> <th data-i18n="port_col_port">Port</th> <th data-i18n="port_col_name">Name</th> <th data-i18n="port_col_speed">Current Link Speed</th><th data-i18n="port_col_set_speed">Set Speed</th><th data-i18n="port_col_disabled">Disabled</th><th data-i18n="port_col_apply">Apply</th></tr>
+      <tr> <th data-i18n="port_col_port">Port</th> <th data-i18n="port_col_name">Name</th> <th data-i18n="port_col_speed">Current Link Speed</th><th data-i18n="port_col_devices">Connected devices</th><th data-i18n="port_col_set_speed">Set Speed</th><th data-i18n="port_col_disabled">Disabled</th><th data-i18n="port_col_apply">Apply</th></tr>
     </table>
     <h2 style="margin-top:3em" data-i18n="port_mtu_heading">Configure Maximum Frame Size (MTU) forwarded at Port</h2>
     <table id="mtutable" style="margin-top:1em">

html/ports.js

@@ -22,6 +22,7 @@ function createPortTable() {
       let portName = portNames[physToLogPort[i-1]] || '';
       td = tr.insertCell(); td.appendChild(document.createTextNode(portName));
       td = tr.insertCell(); td.innerHTML = linkText(pState[i] + 1);
+      tr.insertCell(); // filled by devRender()
       td = tr.insertCell(); td.innerHTML = sSelect.replaceAll("speed_sel", "speed_sel_" + i);
       td = tr.insertCell(); td.innerHTML = dSwitch.replaceAll("disable_port", "disable_port_" + i)
 						  .replace("portOnOff()", "portOnOff(" + i + ")");
@@ -117,6 +118,46 @@ async function applyMTU(port) {
   }
 }
 
+function devRender(entries) {
+  var tbl = document.getElementById('speedtable');
+  if (tbl.rows.length <= 2 || !numPorts)
+    return;
+  var perPort = {};
+  for (var i = 0; i < entries.length; i++) {
+    var e = entries[i];
+    if (e.port == 'CPU')
+      continue;
+    if (!perPort[e.port])
+      perPort[e.port] = [];
+    if (perPort[e.port].indexOf(e.mac) < 0)
+      perPort[e.port].push(e.mac);
+  }
+  for (let i = 1; i <= numPorts; i++) {
+    if (pIsSFP[i-1])
+      continue;
+    var cell = tbl.rows[i].cells[3];
+    var macs = perPort[i] || [];
+    if (macs.length == 1) {
+      cell.textContent = macs[0];
+      cell.title = '';
+    } else if (macs.length > 1) {
+      cell.textContent = macs.length + ' ' + t('port_devices');
+      cell.title = macs.join('\n');
+    } else {
+      cell.textContent = '';
+      cell.title = '';
+    }
+  }
+}
+
+function devWalk() {
+  walkL2(function(entries, ok) {
+    if (ok)
+      devRender(entries);
+    setTimeout(devWalk, 15000);
+  });
+}
+
 function getMTUs() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
@@ -143,6 +184,7 @@ window.addEventListener("load", function() {
     createPortTable();
     updatePortTable();
     getMTUs()
+    setTimeout(devWalk, 3000);
     const interval = setInterval(update, 2000);
     const updatePortTableInterval = setInterval(updatePortTable, 1000);
   });