mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
Add LAG configuration web-page
This commit is contained in:
logicog
@@ -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>
|
||||||
+78
@@ -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}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
+1
-1
@@ -3,7 +3,7 @@ document.getElementById('sidebar').innerHTML =
|
|||||||
+ "<li><a href='stat.html'>Port Statistics</a></li>"
|
+ "<li><a href='stat.html'>Port Statistics</a></li>"
|
||||||
+ "<li><a href='vlan.html'>VLAN</a></li>"
|
+ "<li><a href='vlan.html'>VLAN</a></li>"
|
||||||
+ "<li><a href='mirror.html'>Mirroring</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='eee.html'>EEE</a></li>"
|
||||||
+ "<li><a href='system.html'>System Settings</a></li>"
|
+ "<li><a href='system.html'>System Settings</a></li>"
|
||||||
+ "<li><a href='update.html'>Firmware Update</a></li></ul>";
|
+ "<li><a href='update.html'>Firmware Update</a></li></ul>";
|
||||||
|
|||||||
Reference in New Issue
Block a user