Mark variables set by environment variable as read only in the web interface (#2787)

2024-12-06 19:36:21 +01:00 · 2023-10-29 17:42:53 +00:00
parent a8a5d39487 188f8ee412
commit efc52cd15e
10 changed files with 167 additions and 143 deletions
@@ -41,11 +41,17 @@ function generateRow(topic, key, value) {
    '<h3 class="box-title">' +
    key +
    (value.modified
-      ? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified"></i>'
+      ? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
      : "") +
    (value.flags.advanced
      ? '&nbsp;&nbsp;<i class="fas fa-cogs text-yellow" title="Expert-level setting"></i>'
      : "") +
+    (value.flags.restart_dnsmasq
+      ? '&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
+      : "") +
+    (value.flags.env_var
+      ? '&nbsp;&nbsp;<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
+      : "") +
    "</h3>" +
    "<p>" +
    utils.escapeHtml(value.description).replace("\n", "<br>") +
@@ -84,6 +90,11 @@ function generateRow(topic, key, value) {
    }
  }

+  let extraAttributes = "";
+  if (value.flags.env_var) {
+    extraAttributes = " disabled";
+  }
+
  switch (value.type) {
    case "IPv4 address":
    case "IPv6 address":
@@ -95,7 +106,9 @@ function generateRow(topic, key, value) {
        value.value +
        '" data-key="' +
        key +
-        '"> ' +
+        '"' +
+        extraAttributes +
+        "> " +
        defaultValueHint +
        addAllowedValues(value.allowed) +
        "</div>";
@@ -111,7 +124,9 @@ function generateRow(topic, key, value) {
        key +
        '-checkbox" data-key="' +
        key +
-        '"><label for="' +
+        '"' +
+        extraAttributes +
+        '><label for="' +
        key +
        '-checkbox">Enabled ' +
        defaultValueHint +
@@ -129,7 +144,9 @@ function generateRow(topic, key, value) {
        value.value +
        '" data-key="' +
        key +
-        '" data-type="float"> ' +
+        '" data-type="float"' +
+        extraAttributes +
+        "> " +
        defaultValueHint +
        "</div>";

@@ -144,7 +161,9 @@ function generateRow(topic, key, value) {
        value.value +
        '" data-key="' +
        key +
-        '" data-type="integer"> ' +
+        '" data-type="integer"' +
+        extraAttributes +
+        "> " +
        defaultValueHint +
        "</div>";

@@ -159,7 +178,9 @@ function generateRow(topic, key, value) {
        value.value +
        '" data-key="' +
        key +
-        '" data-type="integer"> ' +
+        '" data-type="integer"' +
+        extraAttributes +
+        "> " +
        defaultValueHint +
        "</div>";

@@ -174,7 +195,9 @@ function generateRow(topic, key, value) {
        value.value +
        '" data-key="' +
        key +
-        '" data-type="integer"> ' +
+        '" data-type="integer"' +
+        extraAttributes +
+        "> " +
        defaultValueHint +
        "</div>";

@@ -187,7 +210,9 @@ function generateRow(topic, key, value) {
        '<div class="col-sm-7">' +
        '<textarea class="form-control" data-key="' +
        key +
-        '">' +
+        '"' +
+        extraAttributes +
+        ">" +
        value.value.join("\n") +
        "</textarea> " +
        defaultValueHint +
@@ -204,7 +229,9 @@ function generateRow(topic, key, value) {
        '<div class="col-sm-8">' +
        '<select class="form-control" data-key="' +
        key +
-        '">';
+        '"' +
+        extraAttributes +
+        ">";
      value.allowed.forEach(function (option) {
        box +=
          '<option value="' +
@@ -234,7 +261,9 @@ function generateRow(topic, key, value) {
        value.value +
        '" data-key="' +
        key +
-        '"> ' +
+        '"' +
+        extraAttributes +
+        "> " +
        defaultValueHint +
        addAllowedValues(value.allowed) +
        "</div>";
@@ -7,9 +7,6 @@

 /* global utils: false, apiFailure:false */

-var dnsRecordsTable = null;
-var customCNAMETable = null;
-
 function hostsDomain(data) {
  // Split record in format IP NAME1 [NAME2 [NAME3 [NAME...]]]
  const name = data.substring(data.indexOf(" ") + 1);
@@ -40,85 +37,44 @@ function CNAMEttl(data) {
  return CNAMEarr.length > 2 ? CNAMEarr[2] : "-";
 }

-$(function () {
-  dnsRecordsTable = $("#dnsRecordsTable").DataTable({
-    ajax: {
-      url: "/api/config/dns/hosts",
-      type: "GET",
-      dataSrc: "config.dns.hosts",
-    },
-    order: [[0, "asc"]],
-    columns: [
+function populateDataTable(endpoint) {
+  var columns = "";
+  if (endpoint === "hosts") {
+    columns = [
      { data: null, render: hostsDomain },
      { data: null, type: "ip-address", render: hostsIP },
      { data: null, width: "22px", orderable: false },
-    ],
-    columnDefs: [
-      {
-        targets: "_all",
-        render: $.fn.dataTable.render.text(),
-      },
-    ],
-    drawCallback: function () {
-      $('button[id^="deleteRecord"]').on("click", deleteRecord);
-
-      // Remove visible dropdown to prevent orphaning
-      $("body > .bootstrap-select.dropdown").remove();
-    },
-    rowCallback: function (row, data) {
-      $(row).attr("data-id", data);
-      var button =
-        '<button type="button" class="btn btn-danger btn-xs" id="deleteRecord' +
-        utils.hexEncode(data) +
-        '" data-tag="' +
-        data +
-        '" data-type="hosts">' +
-        '<span class="far fa-trash-alt"></span>' +
-        "</button>";
-      $("td:eq(2)", row).html(button);
-    },
-    dom:
-      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
-      "<'row'<'col-sm-12'i>>",
-    lengthMenu: [
-      [10, 25, 50, 100, -1],
-      [10, 25, 50, 100, "All"],
-    ],
-    language: {
-      emptyTable: "No local DNS records defined.",
-    },
-    stateSave: true,
-    stateDuration: 0,
-    processing: true,
-    stateSaveCallback: function (settings, data) {
-      utils.stateSaveCallback("dns-records-table", data);
-    },
-    stateLoadCallback: function () {
-      var data = utils.stateLoadCallback("dns-records-table");
-      // Return if not available
-      if (data === null) {
-        return null;
-      }
-
-      // Apply loaded state to table
-      return data;
-    },
-  });
-
-  dnsRecordsTable = $("#customCNAMETable").DataTable({
-    ajax: {
-      url: "/api/config/dns/cnameRecords",
-      type: "GET",
-      dataSrc: "config.dns.cnameRecords",
-    },
-    order: [[0, "asc"]],
-    columns: [
+    ];
+  } else {
+    columns = [
      { data: null, render: CNAMEdomain },
      { data: null, render: CNAMEtarget },
      { data: null, render: CNAMEttl },
      { data: null, width: "22px", orderable: false },
-    ],
+    ];
+  }
+
+  var setByEnv = false;
+  $.ajax({
+    url: `/api/config/dns/${endpoint}?detailed=true`,
+  }).done(function (data) {
+    setByEnv = data.config.dns[endpoint].flags.env_var;
+
+    if (setByEnv) {
+      $(`#title-${endpoint}`).append(
+        `<span class="env-warning">&nbsp;&nbsp;<i class="fas fa-lock text-orange env-warning" title="Settings overwritten by an environmental variable are read-only"></i></span>`
+      );
+      $(`.${endpoint}`).prop("disabled", true);
+    }
+  });
+
+  $(`#${endpoint}-Table`).DataTable({
+    ajax: {
+      url: `/api/config/dns/${endpoint}`,
+      type: "GET",
+      dataSrc: `config.dns.${endpoint}`,
+    },
+    columns: columns,
    columnDefs: [
      {
        targets: "_all",
@@ -126,22 +82,22 @@ $(function () {
      },
    ],
    drawCallback: function () {
-      $('button[id^="deleteCNAME"]').on("click", deleteRecord);
+      $(`button[id^="delete${endpoint}"]`).on("click", deleteRecord);

      // Remove visible dropdown to prevent orphaning
      $("body > .bootstrap-select.dropdown").remove();
    },
    rowCallback: function (row, data) {
      $(row).attr("data-id", data);
-      var button =
-        '<button type="button" class="btn btn-danger btn-xs" id="deleteCNAME' +
-        utils.hexEncode(data) +
-        '" data-tag="' +
-        data +
-        '" data-type="cname">' +
-        '<span class="far fa-trash-alt"></span>' +
-        "</button>";
-      $("td:eq(3)", row).html(button);
+      var button = `<button type="button"
+                      class="btn btn-danger btn-xs"
+                      id="delete${endpoint}${utils.hexEncode(data)}"
+                      data-tag="${data}"
+                      data-type="${endpoint}"
+                      ${setByEnv ? "disabled" : ""}>
+                      <span class="far fa-trash-alt"></span>
+                    </button>`;
+      $(`td:eq(${endpoint === "hosts" ? 2 : 3})`, row).html(button);
    },
    dom:
      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
@@ -152,16 +108,20 @@ $(function () {
      [10, 25, 50, 100, "All"],
    ],
    language: {
-      emptyTable: "No local CNAME records defined.",
+      emptyTable: function () {
+        return endpoint === "hosts"
+          ? "No local DNS records defined."
+          : "No local CNAME records defined.";
+      },
    },
    stateSave: true,
    stateDuration: 0,
    processing: true,
    stateSaveCallback: function (settings, data) {
-      utils.stateSaveCallback("dns-cname-records-table", data);
+      utils.stateSaveCallback(`${endpoint}-records-table`, data);
    },
    stateLoadCallback: function () {
-      var data = utils.stateLoadCallback("dns-cname-records-table");
+      var data = utils.stateLoadCallback(`${endpoint}-records-table`);
      // Return if not available
      if (data === null) {
        return null;
@@ -171,13 +131,17 @@ $(function () {
      return data;
    },
  });
+}
+
+$(function () {
+  populateDataTable("hosts");
+  populateDataTable("cnameRecords");
 });

 function deleteRecord() {
  // Get the tags
  var tags = [$(this).attr("data-tag")];
  var types = [$(this).attr("data-type")];
-
  // Check input validity
  if (!Array.isArray(tags)) return;

@@ -202,7 +166,7 @@ function delHosts(elem) {
    .done(function () {
      utils.enableAll();
      utils.showAlert("success", "far fa-trash-alt", "Successfully deleted DNS record", "");
-      dnsRecordsTable.ajax.reload(null, false);
+      $("#hosts-Table").DataTable().ajax.reload(null, false);
    })
    .fail(function (data, exception) {
      utils.enableAll();
@@ -229,7 +193,7 @@ function delCNAME(elem) {
    .done(function () {
      utils.enableAll();
      utils.showAlert("success", "far fa-trash-alt", "Successfully deleted local CNAME record", "");
-      customCNAMETable.ajax.reload(null, false);
+      $("#cnameRecords-Table").DataTable().ajax.reload(null, false);
    })
    .fail(function (data, exception) {
      utils.enableAll();
@@ -256,8 +220,8 @@ $(document).ready(function () {
    })
      .done(function () {
        utils.enableAll();
-        utils.showAlert("success", "fas fa-plus", "Successfully added DNS record", elem);
-        dnsRecordsTable.ajax.reload(null, false);
+        utils.showAlert("success", "far fa-plus", "Successfully added DNS record", "");
+        $("#hosts-Table").DataTable().ajax.reload(null, false);
      })
      .fail(function (data, exception) {
        utils.enableAll();
@@ -280,8 +244,8 @@ $(document).ready(function () {
    })
      .done(function () {
        utils.enableAll();
-        utils.showAlert("success", "fas fa-plus", "Successfully added CNAME record", elem);
-        dnsRecordsTable.ajax.reload(null, false);
+        utils.showAlert("success", "far fa-plus", "Successfully added CNAME record", "");
+        $("#cnameRecords-Table").DataTable().ajax.reload(null, false);
      })
      .fail(function (data, exception) {
        utils.enableAll();
@@ -18,6 +18,12 @@ function removeFromArray(arr, what) {
 }

 function fillDNSupstreams(value, servers) {
+  var disabledStr = "";
+  if (value.flags.env_var === true) {
+    $("#DNSupstreamsTextfield").prop("disabled", true);
+    disabledStr = 'disabled="Disabled"';
+  }
+
  var i = 0;
  var customServers = value.value.length;
  servers.forEach(element => {
@@ -30,21 +36,21 @@ function fillDNSupstreams(value, servers) {
      // Loop over available addresses (up to 2)
      for (let index = 0; index < 2; index++) {
        if (address.length > index) {
-          row +=
-            '<td title="' +
-            address[index] +
-            '"><div><input type="checkbox" id="DNSupstreams-' +
-            i +
-            '"';
+          var checkedStr = "";
          if (
            value.value.includes(address[index]) ||
            value.value.includes(address[index] + "#53")
          ) {
-            row += " checked";
+            checkedStr = "checked";
            customServers--;
          }

-          row += '><label for="DNSupstreams-' + i++ + '"></label></div></td>';
+          row += `<td title="${address[index]}">
+                    <div>
+                      <input type="checkbox" id="DNSupstreams-${i}" ${disabledStr} ${checkedStr}>
+                      <label for="DNSupstreams-${i++}"></label>
+                    </div>
+                  </td>`;
        } else {
          row += "<td></td>";
        }
@@ -37,6 +37,31 @@ function setConfigValues(topic, key, value) {

  // else: we have a setting we can set
  var escapedKey = key.replaceAll(".", "\\.");
+  var envTitle = $(`.${escapedKey}`);
+
+  if (value.flags.advanced && envTitle.find(".advanced-warning").length === 0) {
+    envTitle.append(
+      `<span class="advanced-warning">&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced level setting"></i></span>`
+    );
+  }
+
+  if (value.flags.restart_dnsmasq && envTitle.find(".restart-warning").length === 0) {
+    envTitle.append(
+      `<span class="restart-warning">&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i></span>`
+    );
+  }
+
+  if (value.flags.env_var) {
+    // If this setting has been set by environment variable, display a padlock in the section title
+    if (envTitle.find(".env-warning").length === 0) {
+      envTitle.append(
+        `<span class="env-warning">&nbsp;&nbsp;<i class="fas fa-lock text-orange env-warning" title="Settings overwritten by an environmental variable are read-only"></i></span>`
+      );
+    }
+
+    $(`#${escapedKey}`).prop("disabled", "disabled");
+  }
+
  switch (value.type) {
    case "enum (unsigned integer)": // fallthrough
    case "enum (string)": {
@@ -44,6 +69,7 @@ function setConfigValues(topic, key, value) {
      $("#" + escapedKey + " option").remove();
      // Add allowed select items (if available)
      value.allowed.forEach(function (allowedValue) {
+        $("#" + escapedKey + "-" + allowedValue.item).prop("disabled", value.flags.env_var);
        var newopt = $("<option></option>")
          .attr("value", allowedValue.item)
          .text(allowedValue.description);
@@ -70,7 +96,6 @@ function setConfigValues(topic, key, value) {
    case "string array": {
      // Set input field values from array (if available)
      $("#" + escapedKey).val(value.value.join("\n"));
-
      break;
    }

@@ -19,7 +19,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
            <div class="col-md-12 settings-level-1">
                <div class="box box-warning">
                    <div class="box-header with-border">
-                        <h3 class="box-title">Exclusions</h3>
+                        <h3 class="box-title webserver.api.excludeDomains webserver.api.excludeClients">Exclusions</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
@@ -40,7 +40,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
            <div class="col-md-12 settings-level-0">
                <div class="box box-warning">
                    <div class="box-header with-border">
-                        <h3 class="box-title">Theme settings</h3>
+                        <h3 class="box-title webserver.interface.theme webserver.interface.boxed">Theme settings</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
@@ -65,7 +65,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                </div>
            </div>
        </div>
-    </div><!--
+    </div><!-- TODO: Why is this commented out?
    <div class="col-md-6">
        <div class="box box-warning">
            <div class="box-header with-border">
@@ -92,7 +92,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-6 settings-level-1">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">Advanced Settings</h3>
+                <h3 class="box-title webserver.api.localAPIauth webserver.api.prettyJSON webserver.api.allow_destructive webserver.api.temp.limit webserver.api.temp.unit">Advanced Settings</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -18,7 +18,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-6 settings-level-0">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">DHCP Settings</h3>
+                <h3 class="box-title dhcp.active dhcp.start dhcp.end dhcp.router dhcp.ipv6">DHCP Settings</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -71,7 +71,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-6 settings-level-1">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">Advanced DHCP Settings</h3>
+                <h3 class="box-title dhcp.domain dhcp.leaseTime dhcp.rapidCommit chdp.multiDNS">Advanced DHCP Settings</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -146,7 +146,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-12 settings-level-2">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">Static DHCP configuration&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced-level setting"></i></h3>
+                <h3 class="box-title">Static DHCP configuration</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -17,7 +17,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-lg-6">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h1 class="box-title">Upstream DNS Servers</h1>
+                <h1 class="box-title dns.upstreams" id="lblDNSupstreams">Upstream DNS Servers</h1>
            </div>
            <div class="box-body">
                <div class="row">
@@ -59,7 +59,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
        </div>
        <div class="box box-warning settings-level-1">
            <div class="box-header with-border">
-                <h3 class="box-title">Conditional forwarding&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced-level setting"></i></h3>
+                <h3 class="box-title dns.revServer.active dns.revServer.cidr dns.revServer.target dns.revServer.domain">Conditional forwarding</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -125,7 +125,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-lg-6 settings-level-1">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h1 class="box-title">Interface settings&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced-level setting"></i></h1>
+                <h1 class="box-title dns.listeningMode">Interface settings</h1>
            </div>
            <div class="box-body">
                <div class="row">
@@ -166,7 +166,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
        </div>
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">Advanced DNS settings</h3>
+                <h3 class="box-title dns.domainNeeded dns.bogusPriv dns.dnssec">Advanced DNS settings</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -212,7 +212,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
        </div>
        <div class="box box-warning settings-level-2">
            <div class="box-header with-border">
-                <h3 class="box-title">Rate-limiting&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced-level setting"></i></h3>
+                <h3 class="box-title dns.rateLimit.count dns.rateLimit.interval">Rate-limiting</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -17,7 +17,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-6 settings-level-1">
        <div class="box">
            <div class="box-header with-border">
-                <h3 class="box-title">Local DNS records</h3>
+                <h3 class="box-title" id="title-hosts">Local DNS records<span class="restart-warning">&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i></span></h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -29,7 +29,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                                    Add new DNS record
                                </h3>
                                <div class="box-tools pull-right">
-                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
+                                    <button type="button" class="btn btn-box-tool hosts" data-widget="collapse"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                            <!-- /.box-header -->
@@ -37,11 +37,11 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label for="domain">Domain:</label>
-                                        <input id="Hdomain" type="url" class="form-control" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                                        <input id="Hdomain" type="url" class="form-control hosts" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="target">IP address:</label>
-                                        <input id="Hip" type="text" class="form-control" placeholder="Associated IP address" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                                        <input id="Hip" type="text" class="form-control hosts" placeholder="Associated IP address" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                                    </div>
                                </div>
                            </div>
@@ -51,14 +51,14 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                            <p>The reason for this is that Pi-hole will not send additional queries upstream when serving <code>CNAME</code> replies. As consequence, if you set a target that isn't already known, the reply to the client may be incomplete. Pi-hole just returns the information it knows at the time of the query. This results in certain limitations for <code>CNAME</code> targets,
                                for instance, only <i>active</i> DHCP leases work as targets - mere DHCP <i>leases</i> aren't sufficient as they aren't (yet) valid DNS records.</p>
                                <p>Additionally, you can't <code>CNAME</code> external domains (<code>bing.com</code> to <code>google.com</code>) successfully as this could result in invalid SSL certificate errors when the target server does not serve content for the requested domain.</p>
-                                <button type="button" id="btnAdd-host" class="btn btn-primary pull-right">Add</button>
+                                <button type="button" id="btnAdd-host" class="btn btn-primary pull-right hosts">Add</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <h3 class="box-title">List of local DNS records</h3>
                            <!-- /.box-header -->
-                        <table id="dnsRecordsTable" class="table table-striped table-bordered" width="100%">
+                        <table id="hosts-Table" class="table table-striped table-bordered" width="100%">
                            <thead>
                            <tr>
                                <th>Domain</th>
@@ -76,7 +76,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-6 settings-level-1">
        <div class="box">
            <div class="box-header with-border">
-                <h3 class="box-title">Local CNAME records records</h3>
+                <h3 class="box-title" id="title-cnameRecords">Local CNAME records records<span class="restart-warning">&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i></span></h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -88,7 +88,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                                    Add new CNAME record
                                </h3>
                                <div class="box-tools pull-right">
-                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
+                                    <button type="button" class="btn btn-box-tool cnameRecords" data-widget="collapse"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                            <!-- /.box-header -->
@@ -96,27 +96,27 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                                <div class="row">
                                    <div class="form-group col-md-5">
                                        <label for="domain">Domain:</label>
-                                        <input id="Cdomain" type="url" class="form-control" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                                        <input id="Cdomain" type="url" class="form-control cnameRecords" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                                    </div>
                                    <div class="form-group col-md-5">
                                        <label for="target">Target Domain:</label>
-                                        <input id="Ctarget" type="url" class="form-control" placeholder="Associated Target Domain" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                                        <input id="Ctarget" type="url" class="form-control cnameRecords" placeholder="Associated Target Domain" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label for="target">TTL (optional):</label>
-                                        <input id="Cttl" type="numeric" class="form-control" placeholder="TTL in seconds" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                                        <input id="Cttl" type="numeric" class="form-control cnameRecords" placeholder="TTL in seconds" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer clearfix">
-                                <button type="button" id="btnAdd-cname" class="btn btn-primary pull-right">Add</button>
+                                <button type="button" id="btnAdd-cname" class="btn btn-primary pull-right cnameRecords">Add</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <h3 class="box-title">List of local CNAME records</h3>
                            <!-- /.box-header -->
-                        <table id="customCNAMETable" class="table table-striped table-bordered" width="100%">
+                        <table id="cnameRecords-Table" class="table table-striped table-bordered" width="100%">
                            <thead>
                            <tr>
                                <th>Domain</th>
@@ -19,7 +19,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
            <div class="col-md-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
-                        <h3 class="box-title">Query Logging</h3>
+                        <h3 class="box-title dns.queryLogging">Query Logging</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
@@ -37,7 +37,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
            <div class="col-md-12 settings-level-2">
                <div class="box box-warning">
                    <div class="box-header with-border">
-                        <h3 class="box-title">Privacy-related database settings</h3>
+                        <h3 class="box-title database.DBimport database.DBexport database.maxDBdays database.network.expire">Privacy-related database settings</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
@@ -70,7 +70,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-6 settings-level-1">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">Query Anonymization ("Privacy Level")</h3>
+                <h3 class="box-title misc.privacylevel">Query Anonymization ("Privacy Level")</h3>
            </div>
            <div class="box-body">
                <div class="row">
@@ -282,7 +282,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
    <div class="col-md-12 settings-level-1">
        <div class="box box-warning">
            <div class="box-header with-border">
-                <h3 class="box-title">Actions<span id="actions-title"></span>&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced-level setting"></i></h3>
+                <h3 class="box-title">Actions<span id="actions-title"></span></h3>
            </div>
            <div class="box-body">
                <div class="row">