From 3ea5a985cf346ef890258d77cb5723d0cdd06cf3 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sat, 18 Feb 2023 13:48:37 +0100 Subject: [PATCH] Restructure settings page into individual smaller files. The massive file grew beyond all bounds and was rather unmaintainable. The new structure has a number of benefits, most importantly it's a lot more repsonsive as we do not have to fire a ton of individual AJAX queries to populate all tabs but only need to source what is actually displayed on the page we are showing here Signed-off-by: DL6ER --- scripts/pi-hole/js/footer.js | 42 + scripts/pi-hole/js/settings-advanced.js | 30 +- scripts/pi-hole/js/settings-dhcp.js | 23 +- scripts/pi-hole/js/settings-dns.js | 28 +- scripts/pi-hole/js/settings-system.js | 9 +- scripts/pi-hole/js/settings.js | 78 +- scripts/pi-hole/php/header_authenticated.php | 19 + scripts/pi-hole/php/sidebar.php | 47 +- settings-advanced.php | 24 + settings-dhcp.php | 201 +++++ settings-dns.php | 245 ++++++ settings-system.php | 351 ++++++++ settings.php | 858 ------------------- 13 files changed, 1012 insertions(+), 943 deletions(-) create mode 100644 settings-advanced.php create mode 100644 settings-dhcp.php create mode 100644 settings-dns.php create mode 100644 settings-system.php delete mode 100644 settings.php diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js index 69cb7b8f..b814f1ff 100644 --- a/scripts/pi-hole/js/footer.js +++ b/scripts/pi-hole/js/footer.js @@ -187,6 +187,10 @@ function updateFtlInfo() { $("#sysinfo-cpu-ftl").text("(" + ftl["%cpu"].toFixed(1) + "% used by FTL)"); $("#sysinfo-ram-ftl").text("(" + ftl["%mem"].toFixed(1) + "% used by FTL)"); $("#sysinfo-pid-ftl").text(ftl.pid); + var startdate = moment() + .subtract(ftl.uptime, "milliseconds") + .format("dddd, MMMM Do YYYY, HH:mm:ss"); + $("#sysinfo-uptime-ftl").text(startdate); $("#sysinfo-privacy_level").text(ftl.privacy_level); $("#sysinfo-ftl-overlay").hide(); // Update every 120 seconds @@ -517,3 +521,41 @@ $("#pihole-disable-custom").on("click", function (e) { custVal = $("#btnMins").hasClass("active") ? custVal * 60 : custVal; piholeChange("disable", custVal); }); + +function initSettingsLevel() { + // Restore settings level from local storage (if available) or default to 0 + var level = localStorage.getItem("settings-level"); + if (level === null) { + level = "0"; + } + + // Set the settings level + $("#settings-level").val(level); + applySettingsLevel(level); +} + +function applySettingsLevel(level) { + if (level === "2") { + $(".settings-level-0").show(); + $(".settings-level-1").show(); + $(".settings-level-2").show(); + } else if (level === "1") { + $(".settings-level-0").show(); + $(".settings-level-1").show(); + $(".settings-level-2").hide(); + } else { + $(".settings-level-0").show(); + $(".settings-level-1").hide(); + $(".settings-level-2").hide(); + } +} + +$("#settings-level").on("change", function () { + var level = $(this).val(); + applySettingsLevel(level); + localStorage.setItem("settings-level", level); +}); + +$(function () { + initSettingsLevel(); +}); diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js index 5607cb71..042ddf8b 100644 --- a/scripts/pi-hole/js/settings-advanced.js +++ b/scripts/pi-hole/js/settings-advanced.js @@ -5,7 +5,7 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* global utils:false, apiFailure: false, applyCheckboxRadioStyle: false, fillDNSupstreams: false */ +/* global utils:false, apiFailure: false, applyCheckboxRadioStyle: false */ /* exported createDynamicConfigTabs */ function addAllowedValues(allowed) { @@ -34,20 +34,6 @@ function generateRow(topic, key, value) { return; } - // Select listening mode radio button - var escapedKey = key.replace(/\./g, "\\."); - if (value.type === "enum (string)") { - $("#" + escapedKey + "-" + value.value).trigger("click"); - } else if (value.type === "boolean") { - // Select checkboxes (if available) - $("#" + escapedKey).prop("checked", value.value); - } else if ( - ["string", "IPv4 address", "IPv6 address", "integer", "unsigned integer"].includes(value.type) - ) { - // Set input field values (if available) - $("#" + escapedKey).val(value.value); - } - // else: we have a setting we can display var box = '
' + @@ -238,21 +224,11 @@ function generateRow(topic, key, value) { elem.append(box); } -function fillDHCPhosts(data) { - $("#dhcp-hosts").val(data.value.join("\n")); -} - -// eslint-disable-next-line no-unused-vars function createDynamicConfigTabs() { $.ajax({ url: "/api/config?detailed=true", }) .done(function (data) { - // Initialize the DNS upstreams - fillDNSupstreams(data.config.dns.upstreams, data.dns_servers); - - fillDHCPhosts(data.config.dhcp.hosts); - // Create the content for the advanced dynamic config topics Object.keys(data.topics).forEach(function (n) { var topic = data.topics[n]; @@ -297,3 +273,7 @@ function createDynamicConfigTabs() { apiFailure(data); }); } + +$(document).ready(function () { + createDynamicConfigTabs(); +}); diff --git a/scripts/pi-hole/js/settings-dhcp.js b/scripts/pi-hole/js/settings-dhcp.js index 88b2173f..db741960 100644 --- a/scripts/pi-hole/js/settings-dhcp.js +++ b/scripts/pi-hole/js/settings-dhcp.js @@ -5,7 +5,7 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* global utils:false */ +/* global utils:false, setConfigValues: false, apiFailure: false */ var dhcpLeaesTable = null; @@ -204,3 +204,24 @@ function delLease(ip) { console.log(exception); // eslint-disable-line no-console }); } + +function fillDHCPhosts(data) { + $("#dhcp-hosts").val(data.value.join("\n")); +} + +function processDHCPConfig() { + $.ajax({ + url: "/api/config/dhcp?detailed=true", + }) + .done(function (data) { + fillDHCPhosts(data.config.dhcp.hosts); + setConfigValues("dhcp", "dhcp", data.config.dhcp); + }) + .fail(function (data) { + apiFailure(data); + }); +} + +$(document).ready(function () { + processDHCPConfig(); +}); diff --git a/scripts/pi-hole/js/settings-dns.js b/scripts/pi-hole/js/settings-dns.js index e4f3606e..01eed719 100644 --- a/scripts/pi-hole/js/settings-dns.js +++ b/scripts/pi-hole/js/settings-dns.js @@ -5,7 +5,7 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* exported fillDNSupstreams */ +/* global applyCheckboxRadioStyle:false, setConfigValues: false, apiFailure: false */ // Remove an element from an array (inline) function removeFromArray(arr, what) { @@ -17,7 +17,6 @@ function removeFromArray(arr, what) { } } -// eslint-disable-next-line no-unused-vars function fillDNSupstreams(value, servers) { var i = 0; var customServers = value.value.length; @@ -81,11 +80,36 @@ function fillDNSupstreams(value, servers) { // Initialize textfield updateDNSserversTextfield(value.value, customServers); + + // Hide the loading animation + $("#dns-upstreams-overlay").hide(); + + // Apply styling to the new checkboxes + applyCheckboxRadioStyle(); } +// Update the textfield with all (incl. custom) upstream servers function updateDNSserversTextfield(upstreams, customServers) { $("#DNSupstreamsTextfield").val(upstreams.join("\n")); $("#custom-servers-title").text( "(" + customServers + " custom server" + (customServers === 1 ? "" : "s") + " enabled)" ); } + +function processDNSConfig() { + $.ajax({ + url: "/api/config/dns?detailed=true", // We need the detailed output to get the DNS server list + }) + .done(function (data) { + // Initialize the DNS upstreams + fillDNSupstreams(data.config.dns.upstreams, data.dns_servers); + setConfigValues("dns", "dns", data.config.dns); + }) + .fail(function (data) { + apiFailure(data); + }); +} + +$(document).ready(function () { + processDNSConfig(); +}); diff --git a/scripts/pi-hole/js/settings-system.js b/scripts/pi-hole/js/settings-system.js index ea1ab501..d8fd7719 100644 --- a/scripts/pi-hole/js/settings-system.js +++ b/scripts/pi-hole/js/settings-system.js @@ -9,7 +9,7 @@ /* exported updateHostInfo, updateCacheInfo */ var hostinfoTimer = null; -// eslint-disable-next-line no-unused-vars + function updateHostInfo() { $.ajax({ url: "/api/info/host", @@ -59,7 +59,7 @@ function setMetrics(data, prefix) { } var metricsTimer = null; -// eslint-disable-next-line no-unused-vars + function updateMetrics() { $.ajax({ url: "/api/info/metrics", @@ -178,3 +178,8 @@ $(".confirm-disablelogging-noflush").confirm({ cancelButtonClass: "btn-success", dialogClass: "modal-dialog", }); + +$(function () { + updateHostInfo(); + updateMetrics(); +}); diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js index 5be7fda0..b67ab21c 100644 --- a/scripts/pi-hole/js/settings.js +++ b/scripts/pi-hole/js/settings.js @@ -5,49 +5,6 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* global updateHostInfo:false, updateMetrics:false, createDynamicConfigTabs:false */ - -$(function () { - updateHostInfo(); - updateMetrics(); - createDynamicConfigTabs(); -}); - -// Change "?tab=" parameter in URL for save and reload -$(".nav-tabs a").on("shown.bs.tab", function (e) { - var tab = e.target.hash.substring(1); - window.history.pushState("", "", "?tab=" + tab); - window.scrollTo(0, 0); -}); - -function initSettingsLevel() { - // Restore settings level from local storage (if available) or default to 0 - var level = localStorage.getItem("settings-level"); - if (level === null) { - level = "0"; - } - - // Set the settings level - $("#settings-level").val(level); - applySettingsLevel(level); -} - -function applySettingsLevel(level) { - if (level === "2") { - $(".settings-level-0").show(); - $(".settings-level-1").show(); - $(".settings-level-2").show(); - } else if (level === "1") { - $(".settings-level-0").show(); - $(".settings-level-1").show(); - $(".settings-level-2").hide(); - } else { - $(".settings-level-0").show(); - $(".settings-level-1").hide(); - $(".settings-level-2").hide(); - } -} - // Handle hiding of alerts $(function () { $("[data-hide]").on("click", function () { @@ -55,12 +12,31 @@ $(function () { .closest("." + $(this).attr("data-hide")) .hide(); }); - - $("#settings-level").on("change", function () { - var level = $(this).val(); - applySettingsLevel(level); - localStorage.setItem("settings-level", level); - }); - - initSettingsLevel(); }); + +// Globally available function to set config values +// eslint-disable-next-line no-unused-vars +function setConfigValues(topic, key, value) { + // If the value is an object, we need to recurse + if (!("description" in value)) { + Object.keys(value).forEach(function (subkey) { + var subvalue = value[subkey]; + setConfigValues(topic, key + "." + subkey, subvalue); + }); + return; + } + + // else: we have a setting we can set + var escapedKey = key.replace(/\./g, "\\."); + if (value.type === "enum (string)") { + $("#" + escapedKey + "-" + value.value).trigger("click"); + } else if (value.type === "boolean") { + // Select checkboxes (if available) + $("#" + escapedKey).prop("checked", value.value); + } else if ( + ["string", "IPv4 address", "IPv6 address", "integer", "unsigned integer"].includes(value.type) + ) { + // Set input field values (if available) + $("#" + escapedKey).val(value.value); + } +} diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php index 98805870..2678ae29 100644 --- a/scripts/pi-hole/php/header_authenticated.php +++ b/scripts/pi-hole/php/header_authenticated.php @@ -9,6 +9,14 @@ */ require 'header.php'; +// Function to check string starting +// with given substring +function startsWith($string, $startString) +{ + $len = strlen($startString); + + return substr($string, 0, $len) === $startString; +} ?> @@ -54,6 +62,17 @@ require 'header.php'; + + + + diff --git a/settings-system.php b/settings-system.php new file mode 100644 index 00000000..5440ba8c --- /dev/null +++ b/settings-system.php @@ -0,0 +1,351 @@ + +
+
+
+
+

System Information

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hostname:
CPU:
RAM: +
Swap:
Kernel:
Uptime:
FTL:PID ?, last restart was on
+
+
+
+
+ +
+
+
+
+

DHCP server metrics

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ DHCPDISCOVER: +  
+ DHCPOFFER: +  
+ DHCPREQUEST: +  
+ DHCPACK: +  
+ DHCPNAK: +  
+ DHCPDECLINE: +  
+ DHCPINFORM: +  
+ DHCPRELEASE: +  
+ DHCPNOANSWER: +  
+ BOOTP: +  
+ PXE: +  
+ Allocated / pruned IPv4 leases: +   / +   +
+ Allocated / pruned IPv6 leases: +   / +   +
+
+
+
+
+ +
+
+
+
+
+
+

DNS cache metrics

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ DNS cache size: +  
+ DNS cache insertions: +  
+ DNS cache evictions: +  
+ DNS cache expiries: +  
+ Immortal DNS cache entries: +  
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Valid A records in cache: +  
+ Valid AAAA records in cache: +  
+ Valid CNAME records in cache: +  
+ Valid SRV records in cache: +  
+ Valid DS records in cache: +  
+ Valid DNSKEY records in cache: +  
+ Other valid records in cache: +  
+ See also our DNS cache documentation. +
+
+
+
+ +
+
+
+
+

DNS reply metrics

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ Local/cache replies: +  
+ Forwarded queries: +  
+ Cache optimizer replies: +  
+ Unanswered queries: +  
+ Authoritative replies: +  
+
+
+
+
+ +
+
+
+
+
+
+

Actions  

+
+
+
+
+ + + + + +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+ + + + + diff --git a/settings.php b/settings.php deleted file mode 100644 index 61f1e61d..00000000 --- a/settings.php +++ /dev/null @@ -1,858 +0,0 @@ - -
-
- -
-
- - - - - - - - - -