Add LAG configuration web-page

2026-08-30 14:52:51 +08:00 · 2025-12-05 07:38:16 +01:00
parent 4b2d7002dc
commit 6557fc53e5
3 changed files with 107 additions and 1 deletions
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <script src="/ports.js"></script>
+  <script src="/main.js"></script>
+  <link rel="stylesheet" href="style.css">
+  <title>Link Aggregation Configuration</title>
+  </head>
+  <body>
+    <nav id="sidebar"></nav>
+    <div style="margin-left:16%;padding:1px 16px;height:1000px;">
+    <div id="ports"></div>
+    <h1>Link Aggregation Groups Configuration</h1>
+    <h2>LAG 1 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub0" onclick="lagSub(0);" type="button" value="Update / Create"></h2>
+    <div id="mLAG0"></div>
+    <br />
+    <h2>LAG 2 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub1" onclick="lagSub(1);" type="button" value="Update / Create"></h2>
+    <div id="mLAG1"></div>
+    <br />
+    <h2>LAG 3 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub2" onclick="lagSub(2);" type="button" value="Update / Create"></h2>
+    <div id="mLAG2"></div>
+    <br />
+    <h2>LAG 4 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub3" onclick="lagSub(3);" type="button" value="Update / Create"></h2>
+    <div id="mLAG3"></div>
+    <script src="/lag.js"></script>
+    </div>
+    <script src="/navigation.js"></script>
+  </body>
+</html>
@@ -0,0 +1,78 @@
+var lagInterval = Number();
+
+function lagForm() {
+  if (!numPorts)
+    return;
+  clearInterval(lagInterval);
+  for (let j=0; j < 4; j++) {
+    var lag = "mLAG" + j
+    console.log("Adding LAG " + lag)
+    var m = document.getElementById(lag);
+    for (let i = 1; i <= numPorts; i++) {
+      const d = document.createElement("div");
+      d.classList.add("cbgroup");
+      const l = document.createElement("label");
+      l.innerHTML = "" + i;
+      l.classList.add("cbgroup");
+      const inp = document.createElement("input");
+      inp.type = "checkbox"; inp.setAttribute("class","psel");
+      inp.id = "p_" + lag + "_" + i;
+      const o = document.createElement("img");
+      if (pIsSFP[i - 1]) {
+        o.src = "sfp.svg"; o.width ="60"; o.height ="60";
+      } else {
+        o.src = "port.svg"; o.width = "40"; o.height = "40";
+      }
+      l.appendChild(inp); l.appendChild(o);
+      d.appendChild(l)
+      m.appendChild(d);
+    }
+  }
+  fetchLag();
+}
+
+function setL(p, c){
+  console.log("LAG setting: ", p, " to ", c);
+  document.getElementById(p).checked=c;
+}
+window.addEventListener("load", function() {
+  lagInterval = setInterval(lagForm, 200);
+});
+
+function fetchLag() {
+  var xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function() {
+    if (this.readyState == 4 && this.status == 200) {
+      const s = JSON.parse(xhttp.responseText);
+      console.log("LAG: ", JSON.stringify(s));
+      for (let l = 0; l < 4; l++) {
+        let members = parseInt(s[l].members, 2);
+        let hash = parseInt(s[l].hash, 16);
+        for (let i = 1; i <= numPorts; i++) {
+          let p = i - 1;
+          if (numPorts < 9)
+            p = physToLogPort[p];            
+          setL("p_mLAG"+l+"_"+i, members & (1<<p));
+        }
+      }
+    }
+  };
+  xhttp.open("GET", `/lag.json`, true);
+  xhttp.send();
+}
+async function lagSub(l) {
+  var cmd = "lag " + l;
+  for (let i = 1; i <= numPorts; i++) {
+    if (document.getElementById("p_mLAG"+l+"_"+i).checked)
+      cmd = cmd + ` ${i}`;
+  }
+  try {
+    const response = await fetch('/cmd', {
+      method: 'POST',
+      body: cmd
+    });
+    console.log('Completed!', response);
+  } catch(err) {
+    console.error(`Error: ${err}`);
+  }
+}
@@ -3,7 +3,7 @@ document.getElementById('sidebar').innerHTML =
 + "<li><a href='stat.html'>Port Statistics</a></li>"
 + "<li><a href='vlan.html'>VLAN</a></li>"
 + "<li><a href='mirror.html'>Mirroring</a></li>"
- + "<li><a href='trunk.html'>Port Aggregation</a></li>"
+ + "<li><a href='lag.html'>Link Aggregation</a></li>"
 + "<li><a href='eee.html'>EEE</a></li>"
 + "<li><a href='system.html'>System Settings</a></li>"
 + "<li><a href='update.html'>Firmware Update</a></li></ul>";