Add Tools -> Interfaces page

Signed-off-by: DL6ER <dl6er@dl6er.de>

.codespellignore

@@ -1,2 +1,3 @@
 ede
 EDE
+prefered

interfaces.lp

@@ -0,0 +1,36 @@
+<? --[[
+*  Pi-hole: A black hole for Internet advertisements
+*  (c) 2024 Pi-hole, LLC (https://pi-hole.net)
+*  Network-wide ad blocking via your own hardware.
+*
+*  This file is copyright under the latest version of the EUPL.
+*  Please see LICENSE file for your rights under this license.
+--]]
+
+mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+?>
+<!-- Title -->
+<div class="page-header">
+    <h1>Pi-hole interface overview</h1>
+</div>
+<div class="row">
+    <div class="col-md-12">
+        <div class="box">
+            <div class="box-body">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="text-center">
+                            <i id="spinner" class="fas fa-spinner fa-pulse fa-5x"></i>
+                        </div>
+                        <div id="tree"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<pre id="output" style="width: 100%; height: 100%;" hidden></pre>
+
+<script src="<?=pihole.fileversion('scripts/pi-hole/js/interfaces.js')?>"></script>
+<? mg.include('scripts/pi-hole/lua/footer.lp','r')?>

scripts/pi-hole/js/interfaces.js

@@ -0,0 +1,375 @@
+/* Pi-hole: A black hole for Internet advertisements
+ *  (c) 2024 Pi-hole, LLC (https://pi-hole.net)
+ *  Network-wide ad blocking via your own hardware.
+ *
+ *  This file is copyright under the latest version of the EUPL.
+ *  Please see LICENSE file for your rights under this license. */
+
+/* global utils */
+
+$(function () {
+  $.ajax({
+    url: "/api/network/gateway",
+    data: { detailed: true },
+  }).done(function (data) {
+    var intl = new Intl.NumberFormat();
+    const gateway = data.gateway;
+    // Get all objects in gateway that has family == "inet"
+    const inet = gateway.find(obj => obj.family === "inet");
+    // Get first object in gateway that has family == "inet6"
+    const inet6 = gateway.find(obj => obj.family === "inet6");
+    const gateways = new Set([inet.interface, inet6.interface]);
+
+    var json = [];
+
+    // 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>';
+
+      var obj = {
+        text: interface.name + " - " + status,
+        class: gateways.has(interface.name) ? "text-bold" : null,
+        icon: "fa fa-network-wired fa-fw",
+        nodes: [],
+      };
+
+      if (interface.master !== undefined) {
+        // Find interface.master in data.interfaces
+        const master = data.interfaces.find(obj => obj.index === interface.master);
+        if (master !== undefined) {
+          obj.nodes.push({
+            text: "Master interface: <code>" + utils.escapeHtml(master.name) + "</code>",
+            icon: "fa fa-network-wired fa-fw",
+          });
+        }
+      }
+
+      if (interface.speed) {
+        obj.nodes.push({
+          text: "Speed: " + intl.format(interface.speed) + " Mbit/s",
+          icon: "fa fa-tachometer-alt fa-fw",
+        });
+      }
+
+      if (interface.type !== undefined) {
+        obj.nodes.push({
+          text: "Type: <code>" + utils.escapeHtml(interface.type) + "</code>",
+          icon: "fa fa-network-wired fa-fw",
+        });
+      }
+
+      if (interface.flags !== undefined && interface.flags.length > 0) {
+        obj.nodes.push({
+          text: "Flags: " + utils.escapeHtml(interface.flags.join(", ")),
+          icon: "fa fa-flag fa-fw",
+        });
+      }
+
+      if (interface.address !== undefined) {
+        let extra = "";
+        if (interface.perm_address !== undefined && interface.perm_address !== interface.address) {
+          extra = " (permanent: <code>" + utils.escapeHtml(interface.perm_address) + "</code>)";
+        }
+
+        obj.nodes.push({
+          text:
+            "Hardware address: <code>" + utils.escapeHtml(interface.address) + "</code>" + extra,
+          icon: "fa fa-map-marker-alt fa-fw",
+        });
+      }
+
+      if (interface.addresses !== undefined) {
+        const addrs = {
+          text:
+            interface.addresses.length +
+            (interface.addresses.length === 1 ? " address" : " addresses") +
+            " connected to interface",
+          icon: "fa fa-map-marker-alt fa-fw",
+          nodes: [],
+        };
+
+        for (const addr of interface.addresses) {
+          let extraaddr = "";
+          if (addr.prefixlen !== undefined) {
+            extraaddr += " / <code>" + addr.prefixlen + "</code>";
+          }
+
+          let family = "";
+          if (addr.family !== undefined) {
+            family = addr.family + "</code> <code>";
+          }
+
+          const jaddr = {
+            text:
+              "Address: <code>" + family + utils.escapeHtml(addr.address) + "</code>" + extraaddr,
+            icon: "fa fa-map-marker-alt fa-fw",
+            nodes: [],
+          };
+          if (addr.local !== undefined) {
+            jaddr.nodes.push({
+              text: "Local: <code>" + utils.escapeHtml(addr.local) + "</code>",
+              icon: "fa fa-map-marker-alt fa-fw",
+            });
+          }
+
+          if (addr.broadcast !== undefined) {
+            jaddr.nodes.push({
+              text: "Broadcast: <code>" + utils.escapeHtml(addr.broadcast) + "</code>",
+              icon: "fa fa-map-marker-alt fa-fw",
+            });
+          }
+
+          if (addr.scope !== undefined) {
+            jaddr.nodes.push({
+              text: "Scope: <code>" + utils.escapeHtml(addr.scope) + "</code>",
+              icon: "fa fa-map-marker-alt fa-fw",
+            });
+          }
+
+          if (addr.flags !== undefined && addr.flags.length > 0) {
+            jaddr.nodes.push({
+              text: "Flags: " + utils.escapeHtml(addr.flags.join(", ")),
+              icon: "fa fa-map-marker-alt fa-fw",
+            });
+          }
+
+          if (addr.prefered !== undefined) {
+            const pref =
+              addr.prefered === 4294967295 ? "forever" : intl.format(addr.prefered) + " s";
+            jaddr.nodes.push({
+              text: "Preferred lifetime: " + pref,
+              icon: "fa fa-clock fa-fw",
+            });
+          }
+
+          if (addr.valid !== undefined) {
+            const valid = addr.valid === 4294967295 ? "forever" : intl.format(addr.valid) + " s";
+            jaddr.nodes.push({
+              text: "Valid lifetime: " + valid,
+              icon: "fa fa-clock fa-fw",
+            });
+          }
+
+          if (addr.cstamp !== undefined) {
+            jaddr.nodes.push({
+              text: "Created: " + new Date(addr.cstamp * 1000).toLocaleString(),
+              icon: "fa fa-clock fa-fw",
+            });
+          }
+
+          if (addr.tstamp !== undefined) {
+            jaddr.nodes.push({
+              text: "Last updated: " + new Date(addr.tstamp * 1000).toLocaleString(),
+              icon: "fa fa-clock fa-fw",
+            });
+          }
+
+          addrs.nodes.push(jaddr);
+        }
+
+        obj.nodes.push(addrs);
+      }
+
+      if (interface.stats !== undefined) {
+        const stats = {
+          text: "Statistics",
+          icon: "fa fa-chart-line fa-fw",
+          expanded: false,
+          nodes: [],
+        };
+        if (interface.stats.rx_bytes !== undefined) {
+          stats.nodes.push({
+            text:
+              "RX bytes: " +
+              intl.format(interface.stats.rx_bytes.value) +
+              " " +
+              interface.stats.rx_bytes.unit,
+            icon: "fa fa-download fa-fw",
+          });
+        }
+
+        if (interface.stats.tx_bytes !== undefined) {
+          stats.nodes.push({
+            text:
+              "TX bytes: " +
+              intl.format(interface.stats.tx_bytes.value) +
+              " " +
+              interface.stats.tx_bytes.unit,
+            icon: "fa fa-upload fa-fw",
+          });
+        }
+
+        if (interface.stats.rx_packets !== undefined) {
+          stats.nodes.push({
+            text: "RX packets: " + intl.format(interface.stats.rx_packets),
+            icon: "fa fa-download fa-fw",
+          });
+        }
+
+        if (interface.stats.rx_errors !== undefined) {
+          stats.nodes.push({
+            text:
+              "RX errors: " +
+              intl.format(interface.stats.rx_errors) +
+              " (" +
+              ((interface.stats.rx_errors / interface.stats.rx_packets) * 100).toFixed(1) +
+              "%)",
+            icon: "fa fa-download fa-fw",
+          });
+        }
+
+        if (interface.stats.rx_dropped !== undefined) {
+          stats.nodes.push({
+            text:
+              "RX dropped: " +
+              intl.format(interface.stats.rx_dropped) +
+              " (" +
+              ((interface.stats.rx_dropped / interface.stats.rx_packets) * 100).toFixed(1) +
+              "%)",
+            icon: "fa fa-download fa-fw",
+          });
+        }
+
+        if (interface.stats.tx_packets !== undefined) {
+          stats.nodes.push({
+            text: "TX packets: " + intl.format(interface.stats.tx_packets),
+            icon: "fa fa-upload fa-fw",
+          });
+        }
+
+        if (interface.stats.tx_errors !== undefined) {
+          stats.nodes.push({
+            text:
+              "TX errors: " +
+              intl.format(interface.stats.tx_errors) +
+              " (" +
+              ((interface.stats.tx_errors / interface.stats.tx_packets) * 100).toFixed(1) +
+              "%)",
+            icon: "fa fa-upload fa-fw",
+          });
+        }
+
+        if (interface.stats.tx_dropped !== undefined) {
+          stats.nodes.push({
+            text:
+              "TX dropped: " +
+              intl.format(interface.stats.tx_dropped) +
+              " (" +
+              ((interface.stats.tx_dropped / interface.stats.tx_packets) * 100).toFixed(1) +
+              "%)",
+            icon: "fa fa-upload fa-fw",
+          });
+        }
+
+        if (interface.stats.multicast !== undefined) {
+          stats.nodes.push({
+            text: "Multicast: " + intl.format(interface.stats.multicast),
+            icon: "fa fa-broadcast-tower fa-fw",
+          });
+        }
+
+        if (interface.stats.collisions !== undefined) {
+          stats.nodes.push({
+            text: "Collisions: " + intl.format(interface.stats.collisions),
+            icon: "fa fa-exchange-alt fa-fw",
+          });
+        }
+
+        obj.nodes.push(stats);
+      }
+
+      const furtherDetails = {
+        text: "Further details",
+        icon: "fa fa-info-circle fa-fw",
+        expanded: false,
+        nodes: [],
+      };
+
+      if (interface.parent_dev_name !== undefined) {
+        let extra = "";
+        if (interface.parent_dev_bus_name !== undefined) {
+          extra = " @ " + utils.escapeHtml(interface.parent_dev_bus_name);
+        }
+
+        furtherDetails.nodes.push({
+          text:
+            "Parent device: <code>" +
+            utils.escapeHtml(interface.parent_dev_name) +
+            extra +
+            "</code>",
+          icon: "fa fa-network-wired fa-fw",
+        });
+      }
+
+      if (interface.carrier_changes !== undefined) {
+        furtherDetails.nodes.push({
+          text: "Carrier changes: " + intl.format(interface.carrier_changes),
+          icon: "fa fa-exchange-alt fa-fw",
+        });
+      }
+
+      if (interface.broadcast) {
+        furtherDetails.nodes.push({
+          text: "Broadcast: <code>" + utils.escapeHtml(interface.broadcast) + "</code>",
+          icon: "fa fa-broadcast-tower fa-fw",
+        });
+      }
+
+      if (interface.mtu) {
+        let extra = "";
+        if (interface.min_mtu !== undefined && interface.max_mtu !== undefined) {
+          extra +=
+            " (min: " +
+            intl.format(interface.min_mtu) +
+            " bytes, max: " +
+            intl.format(interface.max_mtu) +
+            " bytes)";
+        }
+
+        furtherDetails.nodes.push({
+          text: "MTU: " + intl.format(interface.mtu) + " bytes" + extra,
+          icon: "fa fa-arrows-alt-h fa-fw",
+        });
+      }
+
+      if (interface.txqlen) {
+        furtherDetails.nodes.push({
+          text: "TX queue length: " + intl.format(interface.txqlen),
+          icon: "fa fa-file-upload fa-fw",
+        });
+      }
+
+      if (interface.promiscuity !== undefined) {
+        furtherDetails.nodes.push({
+          text: "Promiscuity mode: " + (interface.promiscuity ? "Yes" : "No"),
+          icon: "fa fa-eye fa-fw",
+        });
+      }
+
+      if (furtherDetails.nodes.length > 0) {
+        obj.nodes.push(furtherDetails);
+      }
+
+      json.push(obj);
+    });
+
+    $("#tree").bstreeview({
+      data: json,
+      expandIcon: "fa fa-angle-down fa-fw",
+      collapseIcon: "fa fa-angle-right fa-fw",
+      indent: 1.25,
+    });
+    $("#spinner").hide();
+
+    // Expand gateway interfaces by default
+    for (const gw of gateways) {
+      let div = $("#tree").find("div:contains('" + gw + "')");
+      div.removeClass("collapsed");
+      div.next("div").collapse('show');
+      // Change expand icon to collapse icon
+      div.find("i:first").removeClass("fa-angle-right").addClass("fa-angle-down");
+    }
+  });
+});

scripts/pi-hole/js/settings-system.js

@@ -373,9 +373,9 @@ $(function () {
       // Get first object in gateway that has family == "inet6"
       const inet6 = gateway.find(obj => obj.family === "inet6");
 
-      $("#sysinfo-gw-v4-addr").text(inet ? inet.local.join('\n') : "N/A");
+      $("#sysinfo-gw-v4-addr").text(inet ? inet.local.join("\n") : "N/A");
       $("#sysinfo-gw-v4-iface").text(inet ? inet.interface : "N/A");
-      $("#sysinfo-gw-v6-addr").text(inet6 ? inet6.local.join('\n') : "N/A");
+      $("#sysinfo-gw-v6-addr").text(inet6 ? inet6.local.join("\n") : "N/A");
       $("#sysinfo-gw-v6-iface").text(inet6 ? inet6.interface : "N/A");
     })
     .fail(function (data) {

scripts/pi-hole/lua/header.lp

@@ -92,6 +92,7 @@ is_authenticated = mg.request_info.is_authenticated
     <!-- Common styles -->
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap/css/bootstrap.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/animate.min.css')?>">
+    <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bstreeview.min.css')?>">
 <?
 if startsWith(scriptname, 'groups') then
     -- Group management styles

scripts/pi-hole/lua/header_authenticated.lp

@@ -19,6 +19,7 @@ mg.include('header.lp','r')
     <script src="<?=pihole.fileversion('scripts/vendor/chartjs-adapter-moment.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/vendor/hammer.min.js')?>"></script> <!-- Needed for chartjs-plugin-zoom --->
     <script src="<?=pihole.fileversion('scripts/vendor/chartjs-plugin-zoom.min.js')?>"></script>
+    <script src="<?=pihole.fileversion('scripts/vendor/bstreeview.min.js')?>"></script>
 </head>
 <body class="<?=theme.name?> hold-transition sidebar-mini <? if pihole.boxedlayout() then ?>layout-boxed<? end ?> logged-in">
 <noscript>

scripts/pi-hole/lua/sidebar.lp

@@ -233,6 +233,12 @@
                                 <i class="fa fa-fw menu-icon fa-search"></i> <span>Search Lists</span>
                             </a>
                         </li>
+                        <!-- Interfaces -->
+                        <li class="<? if scriptname == 'interfaces' then ?> active<? end ?>">
+                            <a href="<?=webhome?>interfaces">
+                                <i class="fa fa-fw menu-icon fa-wifi"></i> <span>Interfaces</span>
+                            </a>
+                        </li>
                         <!-- Network -->
                         <li class="<? if scriptname == 'network' then ?> active<? end ?>">
                             <a href="<?=webhome?>network">

scripts/vendor/bstreeview.min.js

@@ -0,0 +1,10 @@
+/*
+ @preserve
+ bstreeview.js
+ Version: 1.2.0
+ Authors: Sami CHNITER <sami.chniter@gmail.com>
+ Copyright 2020
+ License: Apache License 2.0
+ Project: https://github.com/chniter/bstreeview
+*/
+!function (t, e, i, s) { "use strict"; var n = { expandIcon: "fa fa-angle-down fa-fw", collapseIcon: "fa fa-angle-right fa-fw", expandClass: 'show', indent: 1.25, parentsMarginLeft: "1.25rem", openNodeLinkOnNewTab: !0 }, a = '<div role="treeitem" class="list-group-item" data-toggle="collapse"></div>', d = '<div role="group" class="list-group collapse" id="itemid"></div>', o = '<i class="state-icon"></i>', r = '<i class="item-icon"></i>'; function l(e, i) { this.element = e, this.itemIdPrefix = e.id + "-item-", this.settings = t.extend({}, n, i), this.init() } t.extend(l.prototype, { init: function () { this.tree = [], this.nodes = [], this.settings.data && (this.settings.data.isPrototypeOf(String) && (this.settings.data = t.parseJSON(this.settings.data)), this.tree = t.extend(!0, [], this.settings.data), delete this.settings.data), t(this.element).addClass("bstreeview"), this.initData({ nodes: this.tree }); var i = this; this.build(t(this.element), this.tree, 0), t(this.element).on("click", ".list-group-item", function (s) { t(".state-icon", this).toggleClass(i.settings.expandIcon).toggleClass(i.settings.collapseIcon), s.target.hasAttribute("href") && (i.settings.openNodeLinkOnNewTab ? e.open(s.target.getAttribute("href"), "_blank") : e.location = s.target.getAttribute("href")) }) }, initData: function (e) { if (e.nodes) { var i = e, s = this; t.each(e.nodes, function (t, e) { e.nodeId = s.nodes.length, e.parentId = i.nodeId, s.nodes.push(e), e.nodes && s.initData(e) }) } }, build: function (e, i, s) { var n = this, l = n.settings.parentsMarginLeft; s > 0 && (l = (n.settings.indent + s * n.settings.indent).toString() + "rem;"), s += 1, t.each(i, function (i, g) { var h = t(a).attr("data-target", "#" + n.itemIdPrefix + g.nodeId).attr("style", "padding-left:" + l).attr("aria-level", s); if (g.nodes) { var c = t(o).addClass((g.expanded)?n.settings.expandIcon:n.settings.collapseIcon); h.append(c) } if (g.icon) { var f = t(r).addClass(g.icon); h.append(f) } if (h.append(g.text), g.href && h.attr("href", g.href), g.class && h.addClass(g.class), g.id && h.attr("id", g.id), e.append(h), g.nodes) { var p = t(d).attr("id", n.itemIdPrefix + g.nodeId); e.append(p), n.build(p, g.nodes, s); if (g.expanded) p.addClass(n.settings.expandClass) } }) } }), t.fn.bstreeview = function (e) { return this.each(function () { t.data(this, "plugin_bstreeview") || t.data(this, "plugin_bstreeview", new l(this, e)) }) } }(jQuery, window, document);

style/vendor/bstreeview.min.css

@@ -0,0 +1,10 @@
+/*
+ @preserve
+ bstreeview.css
+ Version: 1.2.0
+ Authors: Sami CHNITER <sami.chniter@gmail.com>
+ Copyright 2020
+ License: Apache License 2.0
+ Project: https://github.com/chniter/bstreeview
+*/
+.bstreeview{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;padding:0;overflow:hidden}.bstreeview .list-group{margin-bottom:0}.bstreeview .list-group-item{border-radius:0;border-width:1px 0 0 0;padding-top:.5rem;padding-bottom:.5rem;cursor:pointer}.bstreeview .list-group-item:hover{background-color:#dee2e6}.bstreeview>.list-group-item:first-child{border-top-width:0}.bstreeview .state-icon{margin-right:8px}.bstreeview .item-icon{margin-right:5px}