Fix CPU% (#3262)

scripts/js/footer.js

@@ -372,39 +372,33 @@ function updateSystemInfo() {
         $("#sysinfo-memory-swap").text("No swap space available");
       }
 
-      color = system.cpu.load.percent[0] > 100 ? "text-red" : "text-green-light";
+      color = system.cpu.load.raw[0] > system.cpu.nprocs ? "text-red" : "text-green-light";
       $("#cpu").html(
         '<i class="fa fa-fw fa-microchip ' +
           color +
-          '"></i>&nbsp;&nbsp;CPU:&nbsp;' +
-          system.cpu.load.percent[0].toFixed(1) +
-          "&thinsp;%"
+          '"></i>&nbsp;&nbsp;Load:&nbsp;' +
+          system.cpu.load.raw[0].toFixed(2) +
+          "&nbsp;/&nbsp;" +
+          system.cpu.load.raw[1].toFixed(2) +
+          "&nbsp;/&nbsp;" +
+          system.cpu.load.raw[2].toFixed(2)
       );
       $("#cpu").prop(
         "title",
-        "Load: " +
-          system.cpu.load.raw[0].toFixed(2) +
-          " " +
-          system.cpu.load.raw[1].toFixed(2) +
-          " " +
-          system.cpu.load.raw[2].toFixed(2) +
-          " on " +
+        "Load averages for the past 1, 5, and 15 minutes\non a system with " +
           system.cpu.nprocs +
           " core" +
           (system.cpu.nprocs > 1 ? "s" : "") +
           " running " +
           system.procs +
-          " processes"
+          " processes " +
+          (system.cpu.load.raw[0] > system.cpu.nprocs
+            ? " (load is higher than the number of cores)"
+            : "")
       );
-      $("#sysinfo-cpu").text(
-        system.cpu.load.percent[0].toFixed(1) +
-          "% (load: " +
-          system.cpu.load.raw[0].toFixed(2) +
-          " " +
-          system.cpu.load.raw[1].toFixed(2) +
-          " " +
-          system.cpu.load.raw[2].toFixed(2) +
-          ") on " +
+      $("#sysinfo-cpu").html(
+        system.cpu["%cpu"].toFixed(1) +
+          "% on " +
           system.cpu.nprocs +
           " core" +
           (system.cpu.nprocs > 1 ? "s" : "") +

scripts/js/index.js

@@ -307,6 +307,7 @@ function updateTopClientsTable(blocked) {
       url =
         '<a href="queries.lp?client_ip=' +
         encodeURIComponent(client.ip) +
+        (blocked ? "&upstream=blocked" : "") +
         '">' +
         utils.escapeHtml(clientname) +
         "</a>";
@@ -364,7 +365,13 @@ function updateTopDomainsTable(blocked) {
       domain = encodeURIComponent(item.domain);
       // Substitute "." for empty domain lookups
       urlText = domain === "" ? "." : domain;
-      url = '<a href="queries.lp?domain=' + domain + '">' + urlText + "</a>";
+      url =
+        '<a href="queries.lp?domain=' +
+        domain +
+        (blocked ? "&upstream=blocklist" : "&upstream=permitted") +
+        '">' +
+        urlText +
+        "</a>";
       percentage = (item.count / sum) * 100;
       domaintable.append(
         "<tr> " +

scripts/js/interfaces.js

@@ -32,9 +32,19 @@ $(function () {
 
     // For each interface in data.interface, create a new object and push it to json
     data.interfaces.forEach(function (interface) {
-      const status = interface.carrier
-        ? '<span class="text-green">UP</span>'
-        : '<span class="text-red">DOWN</span>';
+      const carrierColor = interface.carrier ? "text-green" : "text-red";
+      let stateText = interface.state.toUpperCase();
+      if (stateText === "UNKNOWN" && interface.flags !== undefined && interface.flags.length > 0) {
+        if (interface.flags.includes("pointopoint")) {
+          // WireGuards, etc. -> the typo is intentional
+          stateText = "P2P";
+        } else if (interface.flags.includes("loopback")) {
+          // Loopback interfaces
+          stateText = "LOOPBACK";
+        }
+      }
+
+      const status = `<span class="${carrierColor}">${stateText}</span>`;
 
       var obj = {
         text: interface.name + " - " + status,
@@ -306,6 +316,21 @@ $(function () {
         nodes: [],
       };
 
+      furtherDetails.nodes.push(
+        {
+          text:
+            "Carrier: " +
+            (interface.carrier
+              ? "<span class='text-green'>Connected</span>"
+              : "<span class='text-red'>Disconnected</span>"),
+          icon: "fa fa-link fa-fw",
+        },
+        {
+          text: "State: " + utils.escapeHtml(interface.state.toUpperCase()),
+          icon: "fa fa-server fa-fw",
+        }
+      );
+
       if (interface.parent_dev_name !== undefined) {
         let extra = "";
         if (interface.parent_dev_bus_name !== undefined) {