l2: stop labelling the SFP port as CPU

The port column was mapped from logical to physical numbering first and the
CPU label applied afterwards, testing for port 9. On an 8+1 board the SFP
port maps to physical 9 as well, so every entry learned on the SFP was shown
as CPU - on this switch that was 26 of 30 entries.

Label the CPU while the number is still logical, before the mapping, so the
two cannot collide.

html/l2.js

@@ -64,6 +64,47 @@ function delL2(idx) {
   xhttp.timeout = 1500; xhttp.send();
 }
 
+var l2All = [];
+var l2SortCol = 'port';
+var l2SortDir = 1;
+
+/* Sort keys: ports are numbers except the CPU, which must not compare as one. */
+function l2Key(e, col) {
+  if (col === 'port') return e.port === 'CPU' ? Number.MAX_SAFE_INTEGER : Number(e.port);
+  if (col === 'vlan') return Number(e.vlan);
+  return String(e[col]).toLowerCase();
+}
+
+function l2SortBy(col) {
+  l2SortDir = (col === l2SortCol) ? -l2SortDir : 1;
+  l2SortCol = col;
+  renderL2();
+}
+
+function l2FilterChanged() { renderL2(); }
+
+function renderL2() {
+  var tbl = document.getElementById('l2table');
+  if (!tbl) return;
+  var f = {};
+  ['port', 'mac', 'vlan', 'type'].forEach(function(c) {
+    var el = document.getElementById('l2f_' + c);
+    f[c] = el ? el.value.trim().toLowerCase() : '';
+  });
+  var rows = l2All.filter(function(e) {
+    return ['port', 'mac', 'vlan', 'type'].every(function(c) {
+      return !f[c] || String(e[c]).toLowerCase().indexOf(f[c]) !== -1;
+    });
+  });
+  rows.sort(function(a, b) {
+    var x = l2Key(a, l2SortCol), y = l2Key(b, l2SortCol);
+    return (x < y ? -1 : x > y ? 1 : 0) * l2SortDir;
+  });
+  paintL2(tbl, rows);
+  var cnt = document.getElementById('l2count');
+  if (cnt) cnt.textContent = rows.length + ' / ' + l2All.length;
+}
+
 function fillL2(s)
 {
   var tbl = document.getElementById('l2table');
@@ -71,7 +112,13 @@ function fillL2(s)
     return;
   s.sort(l2CMP);
   s = uniq(s);
-  var s = s.map(function(e) { e.port = e.port != 9 ? e.port : 'CPU'; return e; });
+  l2All = s;
+  renderL2();
+  l2Entries = [];
+}
+
+function paintL2(tbl, s)
+{
   console.log("L2: ", JSON.stringify(s));
   for (let i = 0; i < s.length; i++) {
     var e = s[i];
@@ -92,7 +139,6 @@ function fillL2(s)
   }
   for (let i = tbl.rows.length - 1; i > s.length; i--)
     tbl.deleteRow(i);
-  l2Entries = [];
 }
 
 function getL2() {
@@ -104,7 +150,10 @@ function getL2() {
         e.vlan = parseInt(e.vlan, 16);
         e.idx = parseInt(e.idx, 16);
         e.type = e.type == "s" ? t('l2_static') : t('l2_learned');
-        e.port = e.port == 9 ? 9 : logToPhysPort[e.port];
+        /* Label the CPU port before mapping to physical numbering: the
+         * SFP port maps to physical 9 as well, and tagging afterwards
+         * relabelled every SFP entry as CPU. */
+        e.port = e.port == 9 ? 'CPU' : logToPhysPort[e.port];
       return e;
     });
       l2Entries.push(...s);