mirror of
https://github.com/pi-hole/web.git
synced 2025-12-20 02:38:28 +00:00
367 lines
10 KiB
JavaScript
367 lines
10 KiB
JavaScript
/* Pi-hole: A black hole for Internet advertisements
|
|
* (c) 2023 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 apiFailure:false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false */
|
|
|
|
var hostinfoTimer = null;
|
|
var cachePieChart = null;
|
|
var cacheSize = 0,
|
|
cacheEntries = 0;
|
|
|
|
// Register the ChartDeferred plugin to all charts:
|
|
Chart.register(ChartDeferred);
|
|
Chart.defaults.set("plugins.deferred", {
|
|
yOffset: "50%",
|
|
delay: 500,
|
|
});
|
|
|
|
function updateCachePie(data) {
|
|
var v = [],
|
|
c = [],
|
|
k = [],
|
|
i = 0;
|
|
|
|
// Compute total number of cache entries
|
|
cacheEntries = 0;
|
|
Object.keys(data).forEach(function (item) {
|
|
cacheEntries += data[item].valid;
|
|
cacheEntries += data[item].stale;
|
|
});
|
|
|
|
// Sort data by value, put OTHER always as last
|
|
var sorted = Object.keys(data).sort(function (a, b) {
|
|
if (a === "OTHER") {
|
|
return 1;
|
|
} else if (b === "OTHER") {
|
|
return -1;
|
|
} else {
|
|
return data[b].valid + data[b].stale - (data[a].valid + data[a].stale);
|
|
}
|
|
});
|
|
|
|
// Rebuild data object
|
|
var tmp = {};
|
|
sorted.forEach(function (item) {
|
|
tmp[item] = data[item];
|
|
});
|
|
data = tmp;
|
|
|
|
// Add empty space to chart
|
|
data.empty = {};
|
|
data.empty.valid = cacheSize - cacheEntries;
|
|
|
|
// Fill chart with data
|
|
Object.keys(data).forEach(function (item) {
|
|
if (data[item].valid > 0) {
|
|
v.push((100 * data[item].valid) / cacheSize);
|
|
c.push(item !== "empty" ? THEME_COLORS[i++ % THEME_COLORS.length] : "#80808040");
|
|
k.push(item);
|
|
}
|
|
|
|
if (data[item].stale > 0) {
|
|
// There are no stale empty entries
|
|
v.push((100 * data[item].stale) / cacheSize);
|
|
c.push(THEME_COLORS[i++ % THEME_COLORS.length]);
|
|
k.push(item + " (stale)");
|
|
}
|
|
});
|
|
|
|
// Build a single dataset with the data to be pushed
|
|
var dd = { data: v, backgroundColor: c };
|
|
// and push it at once
|
|
cachePieChart.data.datasets[0] = dd;
|
|
cachePieChart.data.labels = k;
|
|
$("#cache-pie-chart .overlay").hide();
|
|
// Passing 'none' will prevent rotation animation for further updates
|
|
//https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations
|
|
cachePieChart.update("none");
|
|
}
|
|
|
|
function updateHostInfo() {
|
|
$.ajax({
|
|
url: "/api/info/host",
|
|
})
|
|
.done(function (data) {
|
|
var host = data.host;
|
|
var uname = host.uname;
|
|
if (uname.domainname !== "(none)") {
|
|
$("#sysinfo-hostname").text(uname.nodename + "." + uname.domainname);
|
|
} else {
|
|
$("#sysinfo-hostname").text(uname.nodename);
|
|
}
|
|
|
|
$("#sysinfo-kernel").text(
|
|
uname.sysname +
|
|
" " +
|
|
uname.nodename +
|
|
" " +
|
|
uname.release +
|
|
" " +
|
|
uname.version +
|
|
" " +
|
|
uname.machine
|
|
);
|
|
// Update every 120 seconds
|
|
clearTimeout(hostinfoTimer);
|
|
hostinfoTimer = setTimeout(updateHostInfo, 120000);
|
|
})
|
|
.fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
}
|
|
|
|
// Walk nested objects, create a dash-separated global key and assign the value
|
|
// to the corresponding element (add percentage for DNS replies)
|
|
function setMetrics(data, prefix) {
|
|
var cacheData = {};
|
|
for (const [key, val] of Object.entries(data)) {
|
|
if (prefix === "sysinfo-dns-cache-content-") {
|
|
// Create table row for each DNS cache entry
|
|
// (if table exists)
|
|
if ($("#dns-cache-table").length > 0) {
|
|
const name =
|
|
val.name !== "OTHER"
|
|
? "Valid " + (val.name !== null ? val.name : "TYPE " + val.type)
|
|
: "Other valid";
|
|
const tr = "<tr><th>" + name + " records in cache:</th><td>" + val.count + "</td></tr>";
|
|
// Append row to DNS cache table
|
|
$("#dns-cache-table").append(tr);
|
|
}
|
|
|
|
cacheData[val.name] = val.count;
|
|
} else if (typeof val === "object") {
|
|
setMetrics(val, prefix + key + "-");
|
|
} else if (prefix === "sysinfo-dns-replies-") {
|
|
// Compute and display percentage of DNS replies in addition to the absolute value
|
|
const lval = val.toLocaleString();
|
|
const percent = (100 * val) / data.sum;
|
|
$("#" + prefix + key).text(lval + " (" + percent.toFixed(1) + "%)");
|
|
} else {
|
|
const lval = val.toLocaleString();
|
|
$("#" + prefix + key).text(lval);
|
|
}
|
|
}
|
|
|
|
// Draw pie chart if data is available
|
|
if (Object.keys(cacheData).length > 0) {
|
|
updateCachePie(cacheData);
|
|
}
|
|
}
|
|
|
|
var metricsTimer = null;
|
|
|
|
function updateMetrics() {
|
|
$.ajax({
|
|
url: "/api/info/metrics",
|
|
})
|
|
.done(function (data) {
|
|
var metrics = data.metrics;
|
|
$("#dns-cache-table").empty();
|
|
|
|
// Set global cache size
|
|
cacheSize = metrics.dns.cache.size;
|
|
|
|
// Set metrics
|
|
setMetrics(metrics, "sysinfo-");
|
|
|
|
$("#cache-utilization").text(
|
|
cacheEntries.toLocaleString() + " (" + ((100 * cacheEntries) / cacheSize).toFixed(1) + "%)"
|
|
);
|
|
|
|
$("div[id^='sysinfo-metrics-overlay']").hide();
|
|
// Update every 10 seconds
|
|
clearTimeout(metricsTimer);
|
|
metricsTimer = setTimeout(updateMetrics, 10000);
|
|
})
|
|
.fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
}
|
|
|
|
function showQueryLoggingButton(state) {
|
|
if (state) {
|
|
$("#loggingButton").addClass("btn-warning");
|
|
$("#loggingButton").removeClass("btn-success");
|
|
$("#loggingButton").text("Disable query logging");
|
|
$("#loggingButton").data("state", "enabled");
|
|
} else {
|
|
$("#loggingButton").addClass("btn-success");
|
|
$("#loggingButton").removeClass("btn-warning");
|
|
$("#loggingButton").text("Enable query logging");
|
|
$("#loggingButton").data("state", "disabled");
|
|
}
|
|
}
|
|
|
|
function getLoggingButton() {
|
|
$.ajax({
|
|
url: "/api/config/dns/queryLogging",
|
|
})
|
|
.done(function (data) {
|
|
showQueryLoggingButton(data.config.dns.queryLogging);
|
|
})
|
|
.fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
}
|
|
|
|
$(".confirm-restartdns").confirm({
|
|
text:
|
|
"Are you sure you want to send a restart command to your DNS server?<br><br>" +
|
|
"This will clear the DNS cache and may temporarily interrupt your internet connection.<br>" +
|
|
"Furthermore, you will be logged out of the web interface as consequence of this action.",
|
|
title: "Confirmation required",
|
|
confirm: function () {
|
|
$.ajax({
|
|
url: "/api/action/restartdns",
|
|
type: "POST",
|
|
}).fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
},
|
|
cancel: function () {
|
|
// nothing to do
|
|
},
|
|
confirmButton: "Yes, restart DNS server",
|
|
cancelButton: "No, go back",
|
|
post: true,
|
|
confirmButtonClass: "btn-danger",
|
|
cancelButtonClass: "btn-success",
|
|
dialogClass: "modal-dialog",
|
|
});
|
|
|
|
$(".confirm-flushlogs").confirm({
|
|
text:
|
|
"Are you sure you want to flush your logs?<br><br>" +
|
|
"<strong>This will clear all logs and cannot be undone.</strong>",
|
|
title: "Confirmation required",
|
|
confirm: function () {
|
|
$.ajax({
|
|
url: "/api/action/flush/logs",
|
|
type: "POST",
|
|
}).fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
},
|
|
cancel: function () {
|
|
// nothing to do
|
|
},
|
|
confirmButton: "Yes, flush logs",
|
|
cancelButton: "No, go back",
|
|
post: true,
|
|
confirmButtonClass: "btn-danger",
|
|
cancelButtonClass: "btn-success",
|
|
dialogClass: "modal-dialog",
|
|
});
|
|
|
|
$(".confirm-flusharp").confirm({
|
|
text:
|
|
"Are you sure you want to flush your network table?<br><br>" +
|
|
"<strong>This will clear all entries and cannot be undone.</strong>",
|
|
title: "Confirmation required",
|
|
confirm: function () {
|
|
$.ajax({
|
|
url: "/api/action/flush/arp",
|
|
type: "POST",
|
|
}).fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
},
|
|
cancel: function () {
|
|
// nothing to do
|
|
},
|
|
confirmButton: "Yes, flush my network table",
|
|
cancelButton: "No, go back",
|
|
post: true,
|
|
confirmButtonClass: "btn-warning",
|
|
cancelButtonClass: "btn-success",
|
|
dialogClass: "modal-dialog",
|
|
});
|
|
|
|
$("#loggingButton").confirm({
|
|
text:
|
|
"Are you sure you want to switch query logging mode?<br><br>" +
|
|
"<strong>This will restart the DNS server.</strong><br>" +
|
|
"As consequence of this action, your DNS cache will be cleared and you may temporarily loose your internet connection.<br>" +
|
|
"Furthermore, you will be logged out of the web interface.",
|
|
title: "Confirmation required",
|
|
confirm: function () {
|
|
const data = {};
|
|
data.config = {};
|
|
data.config.dns = {};
|
|
data.config.dns.queryLogging = $("#loggingButton").data("state") !== "enabled";
|
|
$.ajax({
|
|
url: "/api/config/dns/queryLogging",
|
|
type: "PATCH",
|
|
dataType: "json",
|
|
processData: false,
|
|
data: JSON.stringify(data),
|
|
})
|
|
.done(function (data) {
|
|
showQueryLoggingButton(data.config.dns.queryLogging);
|
|
})
|
|
.fail(function (data) {
|
|
apiFailure(data);
|
|
});
|
|
},
|
|
cancel: function () {
|
|
// nothing to do
|
|
},
|
|
confirmButton: "Yes, change query logging",
|
|
cancelButton: "No, go back",
|
|
post: true,
|
|
confirmButtonClass: "btn-warning",
|
|
cancelButtonClass: "btn-success",
|
|
dialogClass: "modal-dialog",
|
|
});
|
|
|
|
$(function () {
|
|
updateHostInfo();
|
|
updateMetrics();
|
|
getLoggingButton();
|
|
|
|
var ctx = document.getElementById("cachePieChart").getContext("2d");
|
|
cachePieChart = new Chart(ctx, {
|
|
type: "doughnut",
|
|
data: {
|
|
labels: [],
|
|
datasets: [{ data: [], parsing: false }],
|
|
},
|
|
plugins: [htmlLegendPlugin],
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
elements: {
|
|
arc: {
|
|
borderColor: $(".box").css("background-color"),
|
|
},
|
|
},
|
|
plugins: {
|
|
htmlLegend: {
|
|
containerID: "cache-legend",
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
tooltip: {
|
|
// Disable the on-canvas tooltip
|
|
enabled: false,
|
|
external: customTooltips,
|
|
callbacks: {
|
|
title: function () {
|
|
return "Cache content";
|
|
},
|
|
label: doughnutTooltip,
|
|
},
|
|
},
|
|
},
|
|
animation: {
|
|
duration: 750,
|
|
},
|
|
},
|
|
});
|
|
});
|