add ethernet information looks like openwrt 23.05 (#340)

* add ethernet information in luci overview

* add ethernet information looks like openwrt 23.05

package/emortal/autocore/Makefile

@@ -48,7 +48,7 @@ define Package/autocore/install/Default
 	$(INSTALL_DIR) $(1)/usr/share/rpcd/acl.d
 	$(CP) ./files/generic/luci-mod-status-autocore.json $(1)/usr/share/rpcd/acl.d/
 
-ifeq ($(filter ipq% mediatek%, $(TARGETID)),)
+ifeq ($(filter ipq%, $(TARGETID)),)
 	$(INSTALL_BIN) ./files/generic/ethinfo $(1)/sbin/
 
 	$(INSTALL_DIR) $(1)/www/luci-static/resources/view/status/include

package/emortal/autocore/files/generic/21_ethinfo.js

@@ -1,60 +1,151 @@
 'use strict';
 'require baseclass';
 'require rpc';
+'require uci';
+'require network';
 
-var callLuciETHInfo = rpc.declare({
+var callSwconfigFeatures = rpc.declare({
-	object: 'luci',
+  object: 'luci',
-	method: 'getETHInfo',
+  method: 'getSwconfigFeatures',
-	expect: { '': {} }
+  params: ['switch'],
+  expect: { '': {} }
 });
 
+var callSwconfigPortState = rpc.declare({
+  object: 'luci',
+  method: 'getSwconfigPortState',
+  params: ['switch'],
+  expect: { result: [] }
+});
+
+var callLuciBoardJSON = rpc.declare({
+  object: 'luci-rpc',
+  method: 'getBoardJSON',
+  expect: { '': {} }
+});
+
+var callLuciNetworkDevices = rpc.declare({
+  object: 'luci-rpc',
+  method: 'getNetworkDevices',
+  expect: { '': {} }
+});
+
+function formatSpeed(speed) {
+  if (!speed) return '-';
+  return speed < 1000 ? `${speed} M` : `${speed / 1000} GbE`;
+}
+
+function getPortColor(link, duplex) {
+  if (!link) return 'background-color: whitesmoke;';
+  const color = duplex == 'full' || duplex ? 'greenyellow' : 'darkorange';
+  return 'background-color: ' + color;
+}
+
+function getPortIcon(link) {
+  return L.resource(`icons/port_${link ? 'up' : 'down'}.png`);
+}
+
 return L.Class.extend({
-	title: _('Ethernet Information'),
+  title: _('Ethernet Information'),
 
-	load: function() {
+  load: function () {
-		return Promise.all([
+    return network.getSwitchTopologies().then(function (topologies) {
-			L.resolveDefault(callLuciETHInfo(), {})
+      let tasks = [];
-		]);
-	},
 
-	render: function(data) {
+      for (let switchName in topologies) {
-		var ethinfo = Array.isArray(data[0].ethinfo) ? data[0].ethinfo : [];
+        tasks.push(
+          callSwconfigFeatures(switchName).then(
+            L.bind(function (features) {
+              this.features = features;
+            }, topologies[switchName])
+          )
+        );
+        tasks.push(
+          callSwconfigPortState(switchName).then(
+            L.bind(function (ports) {
+              this.portstate = ports;
+            }, topologies[switchName])
+          )
+        );
+      }
 
-		var table = E('table', { 'class': 'table' }, [
+      return Promise.all([
-			E('tr', { 'class': 'tr table-titles' }, [
+        topologies,
-				E('th', { 'class': 'th' }, _('Ethernet Name')),
+        L.resolveDefault(callLuciBoardJSON(), {}),
-				E('th', { 'class': 'th' }, _('Link Status')),
+        L.resolveDefault(callLuciNetworkDevices(), {})
-				E('th', { 'class': 'th' }, _('Speed')),
+      ]);
-				E('th', { 'class': 'th' }, _('Duplex'))
+    });
-			])
+  },
-		]);
 
-		cbi_update_table(table, ethinfo.map(function(info) {
+  render: function (data) {
-			var exp1;
+    const topologies = data[0];
-			var exp2;
+    const board = data[1];
+    const netdevs = data[2];
 
-			if (info.status == "yes")
+    const boxStyle = 'max-width: 100px;';
-				exp1 = _('Link Up');
+    const boxHeadStyle =
-			else if (info.status == "no")
+      'border-radius: 7px 7px 0 0;' +
-				exp1 = _('Link Down');
+      'text-align: center;' +
+      'font-weight:bold;';
+    const boxbodyStyle =
+      'border: 1px solid lightgrey;' +
+      'border-radius: 0 0 7px 7px;' +
+      'display:flex; flex-direction: column;' +
+      'align-items: center; justify-content:center;';
+    const iconStyle = 'margin: 5px; width: 40px;';
+    const speedStyle = 'font-size:0.8rem; font-weight:bold;';
+    const trafficStyle =
+      'border-top: 1px solid lightgrey;' + 'font-size:0.8rem;';
 
-			if (info.duplex == "Full")
+    const ethPorts = [];
-				exp2 = _('Full Duplex');
+    const wan = netdevs[board.network.wan.device];
-			else if (info.duplex == "Half")
+    const { speed, duplex, carrier } = wan.link;
-				exp2 = _('Half Duplex');
+    let portIcon = getPortIcon(carrier);
-			else
+    let portColor = getPortColor(carrier, duplex);
-				exp2 = _('-');
+    ethPorts.push(
+      E('div', { style: boxStyle }, [
+        E('div', { style: boxHeadStyle + portColor }, 'WAN'),
+        E('div', { style: boxbodyStyle }, [
+          E('img', { style: iconStyle, src: portIcon }),
+          E('div', { style: speedStyle }, formatSpeed(speed)),
+          E('div', { style: trafficStyle }, [
+            '\u25b2\u202f%1024.1mB'.format(wan.stats.tx_bytes),
+            E('br'),
+            '\u25bc\u202f%1024.1mB'.format(wan.stats.rx_bytes)
+          ])
+        ])
+      ])
+    );
 
-			return [
+    const switch0 = topologies.switch0;
-				info.name,
+    for (const port of switch0.ports) {
-				exp1,
+      if (!port.label.startsWith('LAN')) continue;
-				info.speed,
+      const { link, duplex, speed } = switch0.portstate[port.num];
-				exp2
+      portIcon = getPortIcon(link);
-			];
+      portColor = getPortColor(link, duplex);
-		}));
+      const txrx = { tx_bytes: 0, rx_bytes: 0 };
+      const lanStats = netdevs['br-lan'].stats;
+      const { tx_bytes, rx_bytes } = link ? lanStats : txrx;
+      ethPorts.push(
+        E('div', { style: boxStyle }, [
+          E('div', { style: boxHeadStyle + portColor }, port.label),
+          E('div', { style: boxbodyStyle }, [
+            E('img', { style: iconStyle, src: portIcon }),
+            E('div', { style: speedStyle }, formatSpeed(speed)),
+            E('div', { style: trafficStyle }, [
+              '\u25b2\u202f%1024.1mB'.format(tx_bytes),
+              E('br'),
+              '\u25bc\u202f%1024.1mB'.format(rx_bytes)
+            ])
+          ])
+        ])
+      );
+    }
 
-		return E([
+    const gridStyle =
-			table
+      'display:grid; grid-gap: 5px 5px;' +
-		]);
+      'grid-template-columns:repeat(auto-fit, minmax(70px, 1fr));' +
-	}
+      'margin-bottom:1em';
+    return E('div', { style: gridStyle }, ethPorts);
+  }
 });