-
-
+
diff --git a/scripts/js/charts.js b/scripts/js/charts.js
index 375989b299..613804c166 100644
--- a/scripts/js/charts.js
+++ b/scripts/js/charts.js
@@ -5,12 +5,11 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
-/* global upstreams:false */
+/* global upstreamIPs:false */
"use strict";
-// eslint-disable-next-line no-unused-vars
-const THEME_COLORS = [
+globalThis.THEME_COLORS = [
"#f56954",
"#3c8dbc",
"#00a65a",
@@ -29,24 +28,24 @@ const THEME_COLORS = [
"#d2d6de",
];
-// eslint-disable-next-line no-unused-vars
-const htmlLegendPlugin = {
+globalThis.htmlLegendPlugin = {
id: "htmlLegend",
afterUpdate(chart, args, options) {
- const ul = getOrCreateLegendList(chart, options.containerID);
-
// Use the built-in legendItems generator
const items = chart.options.plugins.legend.labels.generateLabels(chart);
// Exit early if the legend has the same items as last time
- if (
+ const isLegendUnchanged =
options.lastLegendItems &&
items.length === options.lastLegendItems.length &&
- items.every((item, i) => item.text === options.lastLegendItems[i].text) &&
- items.every((item, i) => item.hidden === options.lastLegendItems[i].hidden)
- ) {
- return;
- }
+ items.every(
+ (item, i) =>
+ item.text === options.lastLegendItems[i].text &&
+ item.hidden === options.lastLegendItems[i].hidden
+ );
+
+ if (isLegendUnchanged) return;
+
// else: Update the HTML legend if it is different from last time or if it
// did not exist
@@ -54,6 +53,8 @@ const htmlLegendPlugin = {
// need to update the legend
options.lastLegendItems = items;
+ const ul = getOrCreateLegendList(options.containerID);
+
// Remove old legend items
while (ul.firstChild) {
ul.firstChild.remove();
@@ -61,89 +62,89 @@ const htmlLegendPlugin = {
for (const item of items) {
const li = document.createElement("li");
- li.style.alignItems = "center";
- li.style.cursor = "pointer";
- li.style.display = "flex";
- li.style.flexDirection = "row";
+
+ // Select the corresponding "slice" of the chart when the mouse is over a legend item
+ li.addEventListener("mouseover", () => {
+ chart.setActiveElements([
+ {
+ datasetIndex: 0,
+ index: item.index,
+ },
+ ]);
+ chart.update();
+ });
+
+ // Deselect all "slices"
+ li.addEventListener("mouseout", () => {
+ chart.setActiveElements([]);
+ chart.update();
+ });
// Color checkbox (toggle visibility)
const boxSpan = document.createElement("span");
boxSpan.title = "Toggle visibility";
boxSpan.style.color = item.fillStyle;
- boxSpan.style.display = "inline-block";
- boxSpan.style.margin = "0 10px";
- boxSpan.innerHTML = item.hidden
- ? '
'
- : '
';
+ boxSpan.style.cursor = "pointer";
+ boxSpan.innerHTML = `
`;
boxSpan.addEventListener("click", () => {
const { type } = chart.config;
+ const isPieOrDoughnut = type === "pie" || type === "doughnut";
- if (type === "pie" || type === "doughnut") {
+ if (isPieOrDoughnut) {
// Pie and doughnut charts only have a single dataset and visibility is per item
chart.toggleDataVisibility(item.index);
} else {
- chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+ const isVisible = chart.isDatasetVisible(item.datasetIndex);
+ chart.setDatasetVisibility(item.datasetIndex, !isVisible);
}
chart.update();
});
- const textLink = document.createElement("p");
- if (
- chart.canvas.id === "queryTypePieChart" ||
- chart.canvas.id === "forwardDestinationPieChart"
- ) {
+ const link = document.createElement("a");
+ const isQueryTypeChart = chart.canvas.id === "queryTypePieChart";
+ const isForwardDestinationChart = chart.canvas.id === "forwardDestinationPieChart";
+
+ if (isQueryTypeChart || isForwardDestinationChart) {
// Text (link to query log page)
- textLink.title = "List " + item.text + " queries";
-
- textLink.addEventListener("click", () => {
- if (chart.canvas.id === "queryTypePieChart") {
- globalThis.location.href = "queries?type=" + item.text;
- } else if (chart.canvas.id === "forwardDestinationPieChart") {
- // Encode the forward destination as it may contain an "#" character
- const upstream = encodeURIComponent(upstreams[item.text]);
- globalThis.location.href = "queries?upstream=" + upstream;
+ link.title = `List ${item.text} queries`;
+ link.className = "legend-label-text clickable";
+
+ if (isQueryTypeChart) {
+ link.href = `queries?type=${item.text}`;
+ } else {
+ // Encode the forward destination as it may contain an "#" character
+ link.href = `queries?upstream=${encodeURIComponent(upstreamIPs[item.index])}`;
+
+ // If server name and IP are different:
+ if (item.text !== upstreamIPs[item.index]) {
+ // replace the title tooltip to include the upstream IP to the text ...
+ link.title = `List ${item.text} (${upstreamIPs[item.index]}) queries`;
+
+ // ... and include the server name (without port) to the querystring, to match
+ // the text used on the SELECT element (sent by suggestions API endpoint)
+ link.href += ` (${item.text.split("#")[0]})`;
}
- });
+ }
+ } else {
+ // no clickable links in other charts
+ link.className = "legend-label-text";
}
- textLink.style.margin = 0;
- textLink.style.padding = 0;
- textLink.style.textDecoration = item.hidden ? "line-through" : "";
- textLink.className = "legend-label-text";
- textLink.textContent = item.text;
+ link.style.textDecoration = item.hidden ? "line-through" : "";
+ link.textContent = item.text;
- li.append(boxSpan, textLink);
+ li.append(boxSpan, link);
ul.append(li);
}
},
};
-// eslint-disable-next-line no-unused-vars
-const customTooltips = function (context) {
+globalThis.customTooltips = context => {
const tooltip = context.tooltip;
- let tooltipEl = document.getElementById(this.chart.canvas.id + "-customTooltip");
- if (!tooltipEl) {
- // Create Tooltip Element once per chart
- tooltipEl = document.createElement("div");
- tooltipEl.id = this.chart.canvas.id + "-customTooltip";
- tooltipEl.classList.add("chartjs-tooltip");
- tooltipEl.innerHTML = "
";
- // avoid browser's font-zoom since we know that 's
- // font-size was set to 14px by bootstrap's css
- const fontZoom = Number.parseFloat($("body").css("font-size")) / 14;
- // set styles and font
- tooltipEl.style.padding = tooltip.options.padding + "px " + tooltip.options.padding + "px";
- tooltipEl.style.borderRadius = tooltip.options.cornerRadius + "px";
- tooltipEl.style.font = tooltip.options.bodyFont.string;
- tooltipEl.style.fontFamily = tooltip.options.bodyFont.family;
- tooltipEl.style.fontSize = tooltip.options.bodyFont.size / fontZoom + "px";
- tooltipEl.style.fontStyle = tooltip.options.bodyFont.style;
- // append Tooltip next to canvas-containing box
- tooltipEl.ancestor = this.chart.canvas.closest(".box[id]").parentNode;
- tooltipEl.ancestor.append(tooltipEl);
- }
+ const canvasId = context.chart.canvas.id;
+ const tooltipEl = getOrCreateTooltipElement(canvasId, tooltip.options, context);
// Hide if no tooltip
if (tooltip.opacity === 0) {
@@ -152,169 +153,231 @@ const customTooltips = function (context) {
}
// Set caret position
+ setTooltipCaretPosition(tooltipEl, tooltip);
+
+ // Set tooltip content
+ if (tooltip.body) {
+ setTooltipContent(tooltipEl, tooltip);
+ }
+
+ // Position tooltip
+ positionTooltip(tooltipEl, tooltip, context);
+
+ // Make tooltip visible
+ tooltipEl.style.opacity = 1;
+};
+
+function getOrCreateTooltipElement(canvasId, options, context) {
+ let tooltipEl = document.getElementById(`${canvasId}-customTooltip`);
+ if (tooltipEl) return tooltipEl;
+
+ // Create Tooltip Element once per chart
+ tooltipEl = document.createElement("div");
+ tooltipEl.id = `${canvasId}-customTooltip`;
+ tooltipEl.className = "chartjs-tooltip";
+ tooltipEl.innerHTML = '
';
+
+ // Avoid browser's font-zoom since we know that 's
+ // font-size was set to 14px by Bootstrap's CSS
+ const fontZoom = Number.parseFloat(getComputedStyle(document.body).fontSize) / 14;
+
+ // Set styles and font
+ tooltipEl.style.cssText = `
+ padding: ${options.padding}px ${options.padding}px;
+ border-radius: ${options.cornerRadius}px;
+ font: ${options.bodyFont.string};
+ font-family: ${options.bodyFont.family};
+ font-size: ${options.bodyFont.size / fontZoom}px;
+ font-style: ${options.bodyFont.style};
+ `;
+
+ // Append Tooltip next to canvas-containing box
+ tooltipEl.ancestor = context.chart.canvas.closest(".box[id]").parentNode;
+ tooltipEl.ancestor.append(tooltipEl);
+
+ return tooltipEl;
+}
+
+function setTooltipCaretPosition(tooltipEl, tooltip) {
tooltipEl.classList.remove("left", "right", "center", "top", "bottom");
tooltipEl.classList.add(tooltip.xAlign, tooltip.yAlign);
+}
- // Set Text
- if (tooltip.body) {
- const titleLines = tooltip.title || [];
- const bodyLines = tooltip.body.map(bodyItem => bodyItem.lines);
- let innerHtml = "
";
+function setTooltipContent(tooltipEl, tooltip) {
+ const bodyLines = tooltip.body.map(bodyItem => bodyItem.lines);
+ if (bodyLines.length === 0) return;
- for (const title of titleLines) {
- innerHtml += "" + title + " ";
- innerHtml += " ";
- let printed = 0;
-
- const devicePixel = (1 / window.devicePixelRatio).toFixed(1);
- for (const [i, body] of bodyLines.entries()) {
- const labelColors = tooltip.labelColors[i];
- let style = "background-color: " + labelColors.backgroundColor;
- style += "; outline: 1px solid " + labelColors.backgroundColor;
- style += "; border: " + devicePixel + "px solid #fff";
- const span = "" + span + body + " ${title} No activity recorded ";
+
+ const devicePixel = (1 / window.devicePixelRatio).toFixed(1);
+ let printed = 0;
+
+ for (const [i, body] of bodyLines.entries()) {
+ const labelColors = tooltip.labelColors[i];
+ const style =
+ `background-color: ${labelColors.backgroundColor}; ` +
+ `outline: 1px solid ${labelColors.backgroundColor}; ` +
+ `border: ${devicePixel}px solid #fff`;
+ const span = `${span}${body} ";
-
- const tableRoot = tooltipEl.querySelector("table");
- tableRoot.innerHTML = innerHtml;
+ if (printed < 1) {
+ tooltipHtml += "
No activity recorded ";
}
- const canvasPos = this.chart.canvas.getBoundingClientRect();
+ tooltipHtml += "";
+
+ const tableRoot = tooltipEl.querySelector("table");
+ tableRoot.innerHTML = tooltipHtml;
+}
+
+function positionTooltip(tooltipEl, tooltip, context) {
+ if (tooltip.opacity === 0 || tooltipEl.style.opacity === 0) return;
+
+ const canvasPos = context.chart.canvas.getBoundingClientRect();
const boxPos = tooltipEl.ancestor.getBoundingClientRect();
const offsetX = canvasPos.left - boxPos.left;
const offsetY = canvasPos.top - boxPos.top;
const tooltipWidth = tooltipEl.offsetWidth;
const tooltipHeight = tooltipEl.offsetHeight;
- const caretX = tooltip.caretX;
- const caretY = tooltip.caretY;
- const caretPadding = tooltip.options.caretPadding;
- let tooltipX;
- let tooltipY;
- let arrowX;
+ const { caretX, caretY } = tooltip;
+ const { caretPadding } = tooltip.options;
const arrowMinIndent = 2 * tooltip.options.cornerRadius;
const arrowSize = 5;
- // Compute X position
- if ($(document).width() > 2 * tooltip.width || tooltip.xAlign !== "center") {
- // If the viewport is wide enough, let the tooltip follow the caret position
- tooltipX = offsetX + caretX;
- if (tooltip.yAlign === "top" || tooltip.yAlign === "bottom") {
- switch (tooltip.xAlign) {
- case "center": {
- // set a minimal X position to 5px to prevent
- // the tooltip to stick out left of the viewport
- const minX = 5;
- if (2 * tooltipX < tooltipWidth + minX) {
- arrowX = tooltipX - minX;
- tooltipX = minX;
- } else {
- tooltipX -= tooltipWidth / 2;
- }
+ // Check if this is a queryOverTimeChart or clientsChart - these should stick to x-axis
+ const canvasId = context.chart.canvas.id;
+ const isTimelineChart = canvasId === "queryOverTimeChart" || canvasId === "clientsChart";
- break;
- }
+ let tooltipX = offsetX + caretX;
+ let arrowX;
- case "left":
- tooltipX -= arrowMinIndent;
- arrowX = arrowMinIndent;
- break;
- case "right":
- tooltipX -= tooltipWidth - arrowMinIndent;
- arrowX = tooltipWidth - arrowMinIndent;
- break;
- default:
- break;
+ // Compute X position
+ if (tooltip.yAlign === "top" || tooltip.yAlign === "bottom") {
+ switch (tooltip.xAlign) {
+ case "center": {
+ // Set a minimal X position to 5px to prevent
+ // the tooltip to stick out left of the viewport
+ const minX = 5;
+ tooltipX = Math.max(minX, tooltipX - tooltipWidth / 2);
+ arrowX = tooltip.caretX - (tooltipX - offsetX);
+ break;
}
- } else if (tooltip.yAlign === "center") {
- switch (tooltip.xAlign) {
- case "left":
- tooltipX += caretPadding;
- break;
- case "right":
- tooltipX -= tooltipWidth - caretPadding;
- break;
- case "center":
- tooltipX -= tooltipWidth / 2;
- break;
- default:
- break;
+
+ case "left": {
+ tooltipX -= arrowMinIndent;
+ arrowX = arrowMinIndent;
+ break;
}
+
+ case "right": {
+ tooltipX -= tooltipWidth - arrowMinIndent;
+ arrowX = tooltipWidth - arrowMinIndent;
+ break;
+ }
+ // No default
}
- } else {
- // compute the tooltip's center inside ancestor element
- tooltipX = (tooltipEl.ancestor.offsetWidth - tooltipWidth) / 2;
- // move the tooltip if the arrow would stick out to the left
- if (offsetX + caretX - arrowMinIndent < tooltipX) {
- tooltipX = offsetX + caretX - arrowMinIndent;
- }
+ } else if (tooltip.yAlign === "center") {
+ switch (tooltip.xAlign) {
+ case "left": {
+ tooltipX += caretPadding;
+ break;
+ }
+
+ case "right": {
+ tooltipX -= tooltipWidth - caretPadding;
+ break;
+ }
- // move the tooltip if the arrow would stick out to the right
- if (offsetX + caretX - tooltipWidth + arrowMinIndent > tooltipX) {
- tooltipX = offsetX + caretX - tooltipWidth + arrowMinIndent;
+ case "center": {
+ tooltipX -= tooltipWidth / 2;
+ break;
+ }
+ // No default
}
+ }
+ // Adjust X position if tooltip is centered inside ancestor
+ if (document.documentElement.clientWidth <= 2 * tooltip.width && tooltip.xAlign === "center") {
+ tooltipX = (tooltipEl.ancestor.offsetWidth - tooltipWidth) / 2;
+ tooltipX = Math.max(tooltipX, offsetX + caretX - arrowMinIndent); // Prevent left overflow
+ tooltipX = Math.min(tooltipX, offsetX + caretX - tooltipWidth + arrowMinIndent); // Prevent right overflow
arrowX = offsetX + caretX - tooltipX;
}
- // Compute Y position
- switch (tooltip.yAlign) {
- case "top":
- tooltipY = offsetY + caretY + arrowSize + caretPadding;
- break;
- case "center":
- tooltipY = offsetY + caretY - tooltipHeight / 2;
- if (tooltip.xAlign === "left") {
- tooltipX += arrowSize;
- } else if (tooltip.xAlign === "right") {
- tooltipX -= arrowSize;
+ let tooltipY;
+
+ if (isTimelineChart) {
+ // For timeline charts, always position tooltip below the chart with caret pointing to x-axis
+ const chartArea = context.chart.chartArea;
+ const canvasBottom = chartArea.bottom;
+ tooltipY = offsetY + canvasBottom + arrowSize + caretPadding;
+
+ // Ensure the arrow points to the correct X position
+ arrowX = tooltip.caretX - (tooltipX - offsetX);
+ } else {
+ tooltipY = offsetY + caretY;
+ switch (tooltip.yAlign) {
+ case "top": {
+ tooltipY += arrowSize + caretPadding;
+ break;
+ }
+
+ case "center": {
+ tooltipY -= tooltipHeight / 2;
+ if (tooltip.xAlign === "left") tooltipX += arrowSize;
+ if (tooltip.xAlign === "right") tooltipX -= arrowSize;
+ break;
}
- break;
- case "bottom":
- tooltipY = offsetY + caretY - tooltipHeight - arrowSize - caretPadding;
- break;
- default:
- break;
+ case "bottom": {
+ tooltipY -= tooltipHeight + arrowSize + caretPadding;
+ break;
+ }
+ // No default
+ }
}
// Position tooltip and display
- tooltipEl.style.top = tooltipY.toFixed(1) + "px";
- tooltipEl.style.left = tooltipX.toFixed(1) + "px";
- if (arrowX === undefined) {
- tooltipEl.querySelector(".arrow").style.left = "";
- } else {
+ tooltipEl.style.top = `${tooltipY.toFixed(1)}px`;
+ tooltipEl.style.left = `${tooltipX.toFixed(1)}px`;
+
+ // Set arrow position
+ const arrowEl = tooltipEl.querySelector(".arrow");
+ let arrowLeftPosition = "";
+
+ if (arrowX !== undefined) {
// Calculate percentage X value depending on the tooltip's
// width to avoid hanging arrow out on tooltip width changes
const arrowXpercent = ((100 / tooltipWidth) * arrowX).toFixed(1);
- tooltipEl.querySelector(".arrow").style.left = arrowXpercent + "%";
+ arrowLeftPosition = `${arrowXpercent}%`;
}
- tooltipEl.style.opacity = 1;
-};
+ arrowEl.style.left = arrowLeftPosition;
+}
+
+globalThis.doughnutTooltip = tooltipLabel => {
+ if (tooltipLabel.parsed === 0) return "";
-// eslint-disable-next-line no-unused-vars
-function doughnutTooltip(tooltipLabel) {
- let percentageTotalShown = tooltipLabel.chart._metasets[0].total.toFixed(1);
// tooltipLabel.chart._metasets[0].total returns the total percentage of the shown slices
// to compensate rounding errors we round to one decimal
-
- const label = " " + tooltipLabel.label;
+ let percentageTotalShown = tooltipLabel.chart._metasets[0].total.toFixed(1);
+ const label = ` ${tooltipLabel.label}`;
let itemPercentage;
// if we only show < 1% percent of all, show each item with two decimals
@@ -327,41 +390,32 @@ function doughnutTooltip(tooltipLabel) {
tooltipLabel.parsed.toFixed(1) === "0.0" ? "< 0.1" : tooltipLabel.parsed.toFixed(1);
}
- // even if no doughnut slice is hidden, sometimes percentageTotalShown is slightly less then 100
+ // even if no doughnut slice is hidden, sometimes percentageTotalShown is slightly less than 100
// we therefore use 99.9 to decide if slices are hidden (we only show with 0.1 precision)
if (percentageTotalShown > 99.9) {
// All items shown
- return label + ": " + itemPercentage + "%";
+ return `${label}: ${itemPercentage}%`;
}
// set percentageTotalShown again without rounding to account
// for cases where the total shown percentage would be <0.1% of all
percentageTotalShown = tooltipLabel.chart._metasets[0].total;
+ const percentageOfShownItems = ((tooltipLabel.parsed * 100) / percentageTotalShown).toFixed(1);
+
return (
- label +
- ":
• " +
- itemPercentage +
- "% of all data
• " +
- ((tooltipLabel.parsed * 100) / percentageTotalShown).toFixed(1) +
- "% of shown items"
+ `${label}:
• ${itemPercentage}% of all data
` +
+ `• ${percentageOfShownItems}% of shown items`
);
-}
+};
// chartjs plugin used by the custom doughnut legend
-const getOrCreateLegendList = (chart, id) => {
+function getOrCreateLegendList(id) {
const legendContainer = document.getElementById(id);
let listContainer = legendContainer.querySelector("ul");
+ if (listContainer) return listContainer;
- if (!listContainer) {
- listContainer = document.createElement("ul");
- listContainer.style.display = "flex";
- listContainer.style.flexDirection = "column";
- listContainer.style.flexWrap = "wrap";
- listContainer.style.margin = 0;
- listContainer.style.padding = 0;
-
- legendContainer.append(listContainer);
- }
+ listContainer = document.createElement("ul");
+ legendContainer.append(listContainer);
return listContainer;
-};
+}
diff --git a/scripts/js/footer.js b/scripts/js/footer.js
index 873c47d7da..a26b274016 100644
--- a/scripts/js/footer.js
+++ b/scripts/js/footer.js
@@ -29,12 +29,11 @@ const REFRESH_INTERVAL = {
clients: 600_000, // 10 min (dashboard)
};
-function secondsTimeSpanToHMS(s) {
- const h = Math.floor(s / 3600); //Get whole hours
- s -= h * 3600;
- const m = Math.floor(s / 60); //Get remaining minutes
- s -= m * 60;
- return h + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); //zero padding on minutes and seconds
+function secondsTimeSpanToHMS(seconds) {
+ const h = Math.floor(seconds / 3600);
+ const m = Math.floor((seconds % 3600) / 60);
+ const s = seconds % 60;
+ return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
}
function piholeChanged(blocking, timer = null) {
@@ -109,12 +108,6 @@ function countDown() {
}
function checkBlocking() {
- // Skip if page is hidden
- if (document.hidden) {
- utils.setTimer(checkBlocking, REFRESH_INTERVAL.blocking);
- return;
- }
-
$.ajax({
url: document.body.dataset.apiurl + "/dns/blocking",
method: "GET",
@@ -248,28 +241,26 @@ function updateFtlInfo() {
$("#num_lists").text(intl.format(database.lists));
$("#num_gravity").text(intl.format(database.gravity));
$("#num_allowed")
- .text(intl.format(database.domains.allowed + database.regex.allowed))
+ .text(intl.format(database.domains.allowed.enabled + database.regex.allowed.enabled))
.attr(
"title",
"Allowed: " +
- intl.format(database.domains.allowed) +
+ intl.format(database.domains.allowed.enabled) +
" exact domains and " +
- intl.format(database.regex.allowed) +
+ intl.format(database.regex.allowed.enabled) +
" regex filters are enabled"
);
$("#num_denied")
- .text(intl.format(database.domains.denied + database.regex.denied))
+ .text(intl.format(database.domains.denied.enabled + database.regex.denied.enabled))
.attr(
"title",
"Denied: " +
- intl.format(database.domains.denied) +
+ intl.format(database.domains.denied.enabled) +
" exact domains and " +
- intl.format(database.regex.denied) +
+ intl.format(database.regex.denied.enabled) +
" regex filters are enabled"
);
updateQueryFrequency(intl, ftl.query_frequency);
- $("#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);
const startdate = moment()
.subtract(ftl.uptime, "milliseconds")
@@ -353,18 +344,20 @@ function updateSystemInfo() {
);
$("#cpu").prop(
"title",
- "Load averages for the past 1, 5, and 15 minutes\non a system with " +
+ "CPU usage: " +
+ system.cpu["%cpu"].toFixed(1) +
+ "%\nLoad 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)"
+ ? "\n(load is higher than the number of cores)"
: "")
);
- $("#sysinfo-cpu").html(
+ $("#sysinfo-cpu").text(
system.cpu["%cpu"].toFixed(1) +
"% on " +
system.cpu.nprocs +
@@ -375,6 +368,9 @@ function updateSystemInfo() {
" processes"
);
+ $("#sysinfo-cpu-ftl").text("(" + system.ftl["%cpu"].toFixed(1) + "% used by FTL)");
+ $("#sysinfo-ram-ftl").text("(" + system.ftl["%mem"].toFixed(1) + "% used by FTL)");
+
const startdate = moment()
.subtract(system.uptime, "seconds")
.format("dddd, MMMM Do YYYY, HH:mm:ss");
@@ -561,7 +557,7 @@ function updateVersionInfo() {
v.name +
" " +
localVersion +
- ' ·
Update available! '
);
@@ -734,9 +730,6 @@ function addAdvancedInfo() {
advancedInfoTarget.append(
"Render time: " + (totaltime > 0.5 ? totaltime.toFixed(1) : totaltime.toFixed(3)) + " ms"
);
-
- // Show advanced info
- advancedInfoTarget.show();
}
$(() => {
diff --git a/scripts/js/gravity.js b/scripts/js/gravity.js
index 893763e8d6..f3edb1e3b1 100644
--- a/scripts/js/gravity.js
+++ b/scripts/js/gravity.js
@@ -5,76 +5,88 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
+/* global apiFailure:false */
+
"use strict";
function eventsource() {
- const alInfo = $("#alInfo");
- const alSuccess = $("#alSuccess");
- const ta = $("#output");
+ const $alertInfo = $("#alertInfo");
+ const $alertSuccess = $("#alertSuccess");
+ const outputElement = document.getElementById("output");
+ const gravityBtn = document.getElementById("gravityBtn");
+ const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+ const url = `${document.body.dataset.apiurl}/action/gravity`;
+
+ if (outputElement.innerHTML.length > 0) {
+ outputElement.innerHTML = "";
+ }
- ta.html("");
- ta.show();
- alInfo.show();
- alSuccess.hide();
+ if (!outputElement.classList.contains("d-none")) {
+ outputElement.classList.add("d-none");
+ }
- fetch(document.body.dataset.apiurl + "/action/gravity", {
+ $alertSuccess.hide();
+ $alertInfo.show();
+
+ fetch(url, {
method: "POST",
- headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
+ headers: { "X-CSRF-TOKEN": csrfToken },
})
- // Retrieve its body as ReadableStream
+ .then(response => (response.ok ? response : apiFailure(response)))
+ // Retrieve the response as ReadableStream
.then(response => {
- const reader = response.body.getReader();
- return new ReadableStream({
- start(controller) {
- return pump();
- function pump() {
- return reader.read().then(({ done, value }) => {
- // When no more data needs to be consumed, close the stream
- if (done) {
- controller.close();
- alInfo.hide();
- $("#gravityBtn").prop("disabled", false);
- return;
- }
-
- // Enqueue the next data chunk into our target stream
- controller.enqueue(value);
- const string = new TextDecoder().decode(value);
- parseLines(ta, string);
-
- if (string.includes("Done.")) {
- alSuccess.show();
- }
-
- return pump();
- });
- }
- },
+ return handleResponseStream({
+ response,
+ outputElement,
+ alertInfo: $alertInfo,
+ gravityBtn,
+ alertSuccess: $alertSuccess,
});
})
.catch(error => console.error(error)); // eslint-disable-line no-console
}
-$("#gravityBtn").on("click", () => {
- $("#gravityBtn").prop("disabled", true);
- eventsource();
-});
+function handleResponseStream({ response, outputElement, alertInfo, gravityBtn, alertSuccess }) {
+ outputElement.classList.remove("d-none");
+
+ const reader = response.body.getReader();
-// Handle hiding of alerts
-$(() => {
- $("[data-hide]").on("click", function () {
- $(this)
- .closest("." + $(this).attr("data-hide"))
- .hide();
+ function pump(controller) {
+ return reader.read().then(({ done, value }) => {
+ // When no more data needs to be consumed, close the stream
+ if (done) {
+ controller.close();
+ alertInfo.hide();
+ gravityBtn.removeAttribute("disabled");
+ return;
+ }
+
+ // Enqueue the next data chunk into our target stream
+ controller.enqueue(value);
+ const text = new TextDecoder().decode(value);
+ parseLines(outputElement, text);
+
+ if (text.includes("Done.")) {
+ alertSuccess.show();
+ }
+
+ return pump(controller);
+ });
+ }
+
+ return new ReadableStream({
+ start(controller) {
+ return pump(controller);
+ },
});
-});
+}
-function parseLines(ta, str) {
- // str can contain multiple lines.
+function parseLines(outputElement, text) {
+ // text can contain multiple lines.
// We want to split the text before an "OVER" escape sequence to allow overwriting previous line when needed
// Splitting the text on "\r"
- const lines = str.split(/(?=\r)/g);
+ const lines = text.split(/(?=\r)/g);
for (let line of lines) {
if (line[0] === "\r") {
@@ -82,10 +94,69 @@ function parseLines(ta, str) {
line = line.replaceAll("\r[K", "\n").replaceAll("\r", "\n");
// Last line from the textarea will be overwritten, so we remove it
- ta.text(ta.text().substring(0, ta.text().lastIndexOf("\n")));
+ const lastLineIndex = outputElement.innerHTML.lastIndexOf("\n");
+ outputElement.innerHTML = outputElement.innerHTML.substring(0, lastLineIndex);
}
+ // Track the number of opening spans
+ let spanCount = 0;
+
+ // Mapping of ANSI escape codes to their corresponding CSS class names.
+ const ansiMappings = {
+ "\u001B[1m": "text-bold", //COL_BOLD
+ "\u001B[90m": "log-gray", //COL_GRAY
+ "\u001B[91m": "log-red", //COL_RED
+ "\u001B[32m": "log-green", //COL_GREEN
+ "\u001B[33m": "log-yellow", //COL_YELLOW
+ "\u001B[94m": "log-blue", //COL_BLUE
+ "\u001B[95m": "log-purple", //COL_PURPLE
+ "\u001B[96m": "log-cyan", //COL_CYAN
+ };
+
+ // Create a regex that matches all ANSI codes (including reset)
+ /* eslint-disable-next-line no-control-regex */
+ const ansiRegex = /(\u001B\[(?:1|90|91|32|33|94|95|96|0)m)/g;
+
+ // Process the line sequentially, replacing ANSI codes with their corresponding HTML spans
+ // we use a counter to keep track of how many spans are open and close the correct number of spans when we encounter a reset code
+ /* eslint-disable-next-line unicorn/prefer-string-replace-all */
+ line = line.replace(ansiRegex, match => {
+ if (match === "\u001B[0m") {
+ // Reset/close all open spans
+ const closingTags = "".repeat(spanCount);
+ spanCount = 0;
+ return closingTags;
+ }
+
+ if (ansiMappings[match]) {
+ // Opening span
+ spanCount++;
+ return `
`;
+ }
+
+ return match; // Return unchanged if not recognized
+ });
+
// Append the new text to the end of the output
- ta.append(line);
+ outputElement.innerHTML += line;
}
}
+
+document.addEventListener("DOMContentLoaded", () => {
+ const gravityBtn = document.getElementById("gravityBtn");
+
+ gravityBtn.addEventListener("click", () => {
+ gravityBtn.disabled = true;
+ eventsource();
+ });
+
+ // Handle hiding of alerts
+ const dataHideElements = document.querySelectorAll("[data-hide]");
+ for (const element of dataHideElements) {
+ element.addEventListener("click", () => {
+ const hideClass = element.dataset.hide;
+ const closestElement = element.closest(`.${hideClass}`);
+ if (closestElement) $(closestElement).hide();
+ });
+ }
+});
diff --git a/scripts/js/groups-clients.js b/scripts/js/groups-clients.js
index 5d4e970c39..62d664c009 100644
--- a/scripts/js/groups-clients.js
+++ b/scripts/js/groups-clients.js
@@ -92,7 +92,6 @@ $(() => {
});
});
-// eslint-disable-next-line no-unused-vars
function initTable() {
table = $("#clientsTable").DataTable({
processing: true,
@@ -322,7 +321,7 @@ function initTable() {
}
table.on("init select deselect", () => {
- utils.changeBulkDeleteStates(table);
+ utils.changeTableButtonStates(table);
});
table.on("order.dt", () => {
diff --git a/scripts/js/groups-common.js b/scripts/js/groups-common.js
index 865443a0e0..7731c6f8ea 100644
--- a/scripts/js/groups-common.js
+++ b/scripts/js/groups-common.js
@@ -115,7 +115,7 @@ function delGroupItems(type, ids, table, listType = undefined) {
// Clear selection after deletion
table.rows().deselect();
- utils.changeBulkDeleteStates(table);
+ utils.changeTableButtonStates(table);
// Update number of items in the sidebar
updateFtlInfo();
diff --git a/scripts/js/groups-domains.js b/scripts/js/groups-domains.js
index ae7c56a71c..0f4929f4e7 100644
--- a/scripts/js/groups-domains.js
+++ b/scripts/js/groups-domains.js
@@ -99,7 +99,6 @@ function hideSuggestDomains() {
$("#suggest_domains").slideUp("fast");
}
-// eslint-disable-next-line no-unused-vars
function initTable() {
table = $("#domainsTable").DataTable({
processing: true,
@@ -398,7 +397,7 @@ function initTable() {
}
table.on("init select deselect", () => {
- utils.changeBulkDeleteStates(table);
+ utils.changeTableButtonStates(table);
});
table.on("order.dt", () => {
diff --git a/scripts/js/groups-lists.js b/scripts/js/groups-lists.js
index cbac01ec70..47c3db92ce 100644
--- a/scripts/js/groups-lists.js
+++ b/scripts/js/groups-lists.js
@@ -170,7 +170,6 @@ function setTypeIcon(type) {
return `' +
- utils.escapeHtml(data.address) +
- ""
- );
+ const codeElem = document.createElement("code");
+ codeElem.id = "address_" + dataId;
+ codeElem.className = "breakall";
+ codeElem.textContent = data.address;
+ $("td:eq(3)", row).empty().append(codeElem);
} else {
- $("td:eq(3)", row).html(
- '' +
- utils.escapeHtml(data.address) +
- " "
- );
+ const aElem = document.createElement("a");
+ aElem.id = "address_" + dataId;
+ aElem.className = "breakall";
+ aElem.href = data.address;
+ aElem.target = "_blank";
+ aElem.rel = "noopener noreferrer";
+ aElem.textContent = data.address;
+ $("td:eq(3)", row).empty().append(aElem);
}
$("td:eq(4)", row).html(
@@ -440,7 +436,7 @@ function initTable() {
});
table.on("init select deselect", () => {
- utils.changeBulkDeleteStates(table);
+ utils.changeTableButtonStates(table);
});
table.on("order.dt", () => {
@@ -519,12 +515,12 @@ function addList(event) {
}
$.ajax({
- url: document.body.dataset.apiurl + "/lists",
+ url: document.body.dataset.apiurl + "/lists?type=" + encodeURIComponent(type),
method: "post",
dataType: "json",
processData: false,
contentType: "application/json; charset=utf-8",
- data: JSON.stringify({ address: addresses, comment, type, groups: group }),
+ data: JSON.stringify({ address: addresses, comment, groups: group }),
success(data) {
utils.enableAll();
utils.listsAlert(type + "list", addresses, data);
diff --git a/scripts/js/groups.js b/scripts/js/groups.js
index df32260c36..581902f664 100644
--- a/scripts/js/groups.js
+++ b/scripts/js/groups.js
@@ -207,7 +207,7 @@ $(() => {
table.rows(0).deselect();
}
- utils.changeBulkDeleteStates(table);
+ utils.changeTableButtonStates(table);
});
table.on("order.dt", () => {
diff --git a/scripts/js/index.js b/scripts/js/index.js
index 9bf49555e0..f79aa0df2c 100644
--- a/scripts/js/index.js
+++ b/scripts/js/index.js
@@ -226,7 +226,7 @@ function updateClientsOverTime() {
});
}
-const upstreams = {};
+const upstreamIPs = [];
function updateForwardDestinationsPie() {
$.getJSON(document.body.dataset.apiurl + "/stats/upstreams", data => {
const v = [];
@@ -248,11 +248,8 @@ function updateForwardDestinationsPie() {
label += "#" + item.port;
}
- // Store upstreams for generating links to the Query Log
- upstreams[label] = item.ip;
- if (item.port > 0) {
- upstreams[label] += "#" + item.port;
- }
+ // Store upstreams IPs for generating links to the Query Log
+ upstreamIPs.push(item.port > 0 ? item.ip + "#" + item.port : item.ip);
const percent = (100 * item.count) / sum;
values.push([label, percent, THEME_COLORS[i++ % THEME_COLORS.length]]);
@@ -521,8 +518,8 @@ function labelWithPercentage(tooltipLabel, skipZero = false) {
// Sum all queries for the current time by iterating over all keys in the
// current dataset
let sum = 0;
- for (const value of Object.values(tooltipLabel.parsed._stacks.y)) {
- if (value === undefined) continue;
+ for (const [key, value] of Object.entries(tooltipLabel.parsed._stacks.y)) {
+ if (key.startsWith("_") || value === undefined) continue;
const num = Number.parseInt(value, 10);
if (num) sum += num;
}
@@ -639,9 +636,11 @@ $(() => {
display: false,
},
tooltip: {
- enabled: true,
+ // Disable the on-canvas tooltip
+ enabled: false,
intersect: false,
- yAlign: "bottom",
+ external: customTooltips,
+ yAlign: "top",
itemSort(a, b) {
return b.datasetIndex - a.datasetIndex;
},
@@ -656,7 +655,7 @@ $(() => {
return "Queries from " + from + " to " + to;
},
label(tooltipLabel) {
- return labelWithPercentage(tooltipLabel);
+ return labelWithPercentage(tooltipLabel, true);
},
},
},
@@ -893,6 +892,8 @@ $(() => {
elements: {
arc: {
borderColor: $(".box").css("background-color"),
+ hoverBorderColor: $(".box").css("background-color"),
+ hoverOffset: 10,
},
},
plugins: {
@@ -917,6 +918,9 @@ $(() => {
animation: {
duration: 750,
},
+ layout: {
+ padding: 10,
+ },
},
});
@@ -939,6 +943,8 @@ $(() => {
elements: {
arc: {
borderColor: $(".box").css("background-color"),
+ hoverBorderColor: $(".box").css("background-color"),
+ hoverOffset: 10,
},
},
plugins: {
@@ -963,6 +969,9 @@ $(() => {
animation: {
duration: 750,
},
+ layout: {
+ padding: 10,
+ },
},
});
diff --git a/scripts/js/interfaces.js b/scripts/js/interfaces.js
index 0ad5d362f5..d09da1521b 100644
--- a/scripts/js/interfaces.js
+++ b/scripts/js/interfaces.js
@@ -5,462 +5,526 @@
* 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, apiFailure:false */
"use strict";
-$(() => {
- $.ajax({
- url: document.body.dataset.apiurl + "/network/gateway",
- data: { detailed: true },
- }).done(data => {
- const 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");
- // Create a set of the gateways when they are found
- const gateways = new Set();
- if (inet !== undefined) {
- gateways.add(inet.gateway);
+document.addEventListener("DOMContentLoaded", () => {
+ const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+ const url = `${document.body.dataset.apiurl}/network/gateway?detailed=true`;
+
+ fetch(url, {
+ method: "GET",
+ headers: {
+ "X-CSRF-TOKEN": csrfToken,
+ },
+ })
+ .then(response => (response.ok ? response.json() : apiFailure(response)))
+ .then(data => {
+ const intl = new Intl.NumberFormat();
+ const gateways = extractGateways(data.gateway);
+ const { interfaces, masterInterfaces } = processInterfaces(data.interfaces, gateways, intl);
+ const masterInterfacesSorted = sortInterfaces(interfaces, masterInterfaces);
+ const json = masterInterfacesSorted.map(iface => interfaces[iface]);
+
+ renderTreeView(json);
+ expandGatewayInterfaces(gateways);
+ });
+});
+
+function extractGateways(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");
+ // Create a set of the gateways when they are found
+ const gateways = new Set();
+
+ if (inet !== undefined) {
+ gateways.add(inet.gateway);
+ }
+
+ if (inet6 !== undefined) {
+ gateways.add(inet6.gateway);
+ }
+
+ return gateways;
+}
+
+function processInterfaces(interfacesData, gateways, intl) {
+ const interfaces = {};
+ const masterInterfaces = {};
+
+ // For each interface in data.interface, create a new object and push it to json
+ for (const iface of interfacesData) {
+ const obj = createInterfaceObject({ iface, gateways, intl, masterInterfaces, interfacesData });
+ interfaces[iface.name] = obj;
+ }
+
+ return { interfaces, masterInterfaces };
+}
+
+function createInterfaceObject({ iface, gateways, intl, masterInterfaces, interfacesData }) {
+ const carrierColor = iface.carrier ? "text-green" : "text-red";
+ const stateText = determineStateText(iface);
+ const status = `${stateText} `;
+ const master = findMasterInterface({
+ iface,
+ masterInterfaces,
+ interfacesData,
+ });
+ // Show an icon for indenting slave interfaces
+ const icon = master === null ? "" : ' ⤷ ';
+ const obj = {
+ text: `${icon + iface.name} - ${status}`,
+ class: gateways.has(iface.name) ? "text-bold" : null,
+ icon: master === null ? "fa fa-network-wired fa-fw" : "",
+ nodes: [],
+ };
+
+ addMasterDetails(obj, master);
+ addSpeedDetails(obj, iface, intl);
+ addTypeDetails(obj, iface);
+ addFlagsDetails(obj, iface);
+ addHardwareAddressDetails(obj, iface);
+ addAddressDetails(obj, iface, intl);
+ addStatisticsDetails(obj, iface, intl);
+ addFurtherDetails(obj, iface, intl);
+
+ return obj;
+}
+
+function determineStateText(iface) {
+ let stateText = iface.state.toUpperCase();
+
+ if (stateText === "UNKNOWN" && iface.flags !== undefined && iface.flags.length > 0) {
+ // WireGuards, etc. -> the typo is intentional
+ if (iface.flags.includes("pointopoint")) {
+ stateText = "P2P";
+ // Loopback interfaces
+ } else if (iface.flags.includes("loopback")) {
+ stateText = "LOOPBACK";
}
+ }
+
+ return stateText;
+}
+
+function findMasterInterface({ iface, masterInterfaces, interfacesData }) {
+ if (iface.master === undefined) return null;
+
+ const masterObj = interfacesData.find(obj => obj.index === iface.master);
+ if (!masterObj) return null;
+
+ const masterName = masterObj.name;
+ if (masterName in masterInterfaces) {
+ masterInterfaces[masterName].push(iface.name);
+ } else {
+ masterInterfaces[masterName] = [iface.name];
+ }
+
+ return masterName;
+}
+
+function addMasterDetails(obj, master) {
+ if (master !== null) {
+ obj.nodes.push({
+ text: `Master interface: ${utils.escapeHtml(master)}`,
+ icon: "fa fa-network-wired fa-fw",
+ });
+ }
+}
+
+function addSpeedDetails(obj, iface, intl) {
+ if (iface.speed) {
+ obj.nodes.push({
+ text: `Speed: ${intl.format(iface.speed)} Mbit/s`,
+ icon: "fa fa-tachometer-alt fa-fw",
+ });
+ }
+}
+
+function addTypeDetails(obj, iface) {
+ if (iface.type !== undefined) {
+ obj.nodes.push({
+ text: `Type: ${utils.escapeHtml(iface.type)}`,
+ icon: "fa fa-network-wired fa-fw",
+ });
+ }
+}
+
+function addFlagsDetails(obj, iface) {
+ if (iface.flags !== undefined && iface.flags.length > 0) {
+ obj.nodes.push({
+ text: `Flags: ${utils.escapeHtml(iface.flags.join(", "))}`,
+ icon: "fa fa-flag fa-fw",
+ });
+ }
+}
+
+function addHardwareAddressDetails(obj, iface) {
+ if (iface.address === undefined) return;
- if (inet6 !== undefined) {
- gateways.add(inet6.gateway);
+ const extra =
+ iface.perm_address !== undefined && iface.perm_address !== iface.address
+ ? ` (permanent: ${utils.escapeHtml(iface.perm_address)})`
+ : "";
+
+ obj.nodes.push({
+ text: `Hardware address: ${utils.escapeHtml(iface.address)}${extra}`,
+ icon: "fa fa-map-marker-alt fa-fw",
+ });
+}
+
+function addAddressDetails(obj, iface, intl) {
+ if (iface.addresses === undefined) return;
+
+ const count = iface.addresses.length;
+ const label = count === 1 ? " address" : " addresses";
+ const text = `${count + label} connected to interface`;
+
+ const addresses = {
+ text,
+ icon: "fa fa-map-marker-alt fa-fw",
+ nodes: [],
+ };
+
+ for (const addr of iface.addresses) {
+ const jaddr = createAddressNode(addr, intl);
+ addresses.nodes.push(jaddr);
+ }
+
+ obj.nodes.push(addresses);
+}
+
+function createAddressNode(addr, intl) {
+ let extraAddr = addr.prefixlen !== undefined ? ` / ${addr.prefixlen}` : "";
+
+ if (addr.address_type !== undefined) {
+ let familyextra = "";
+ if (addr.family === "inet") {
+ familyextra = "IPv4 ";
+ } else if (addr.family === "inet6") {
+ familyextra = "IPv6 ";
}
- const interfaces = {};
- const masterInterfaces = {};
-
- // For each interface in data.interface, create a new object and push it to json
- for (const iface of data.interfaces) {
- const carrierColor = iface.carrier ? "text-green" : "text-red";
- let stateText = iface.state.toUpperCase();
- if (stateText === "UNKNOWN" && iface.flags !== undefined && iface.flags.length > 0) {
- if (iface.flags.includes("pointopoint")) {
- // WireGuards, etc. -> the typo is intentional
- stateText = "P2P";
- } else if (iface.flags.includes("loopback")) {
- // Loopback interfaces
- stateText = "LOOPBACK";
- }
- }
+ extraAddr += ` (${familyextra}${utils.escapeHtml(addr.address_type)})`;
+ }
- const status = `${stateText} `;
+ const family = addr.family !== undefined ? `${addr.family} ` : "";
- let master = null;
- if (iface.master !== undefined) {
- // Find interface.master in data.interfaces
- master = data.interfaces.find(obj => obj.index === iface.master).name;
- }
+ const jaddr = {
+ text: `Address: ${family}${utils.escapeHtml(addr.address)}${extraAddr}`,
+ icon: "fa fa-map-marker-alt fa-fw",
+ nodes: [],
+ };
- // Show an icon for indenting slave interfaces
- const indentIcon =
- master === null ? "" : " ⤷ ";
-
- const obj = {
- text: indentIcon + iface.name + " - " + status,
- class: gateways.has(iface.name) ? "text-bold" : null,
- icon: master === null ? "fa fa-network-wired fa-fw" : "",
- nodes: [],
- };
-
- if (master !== null) {
- obj.nodes.push({
- text: "Master interface: " + utils.escapeHtml(master) + "",
- icon: "fa fa-network-wired fa-fw",
- });
-
- if (master in masterInterfaces) {
- masterInterfaces[master].push(iface.name);
- } else {
- masterInterfaces[master] = [iface.name];
- }
- }
+ if (addr.local !== undefined) {
+ jaddr.nodes.push({
+ text: `Local: ${utils.escapeHtml(addr.local)}`,
+ icon: "fa fa-map-marker-alt fa-fw",
+ });
+ }
- if (iface.speed) {
- obj.nodes.push({
- text: "Speed: " + intl.format(iface.speed) + " Mbit/s",
- icon: "fa fa-tachometer-alt fa-fw",
- });
- }
+ if (addr.broadcast !== undefined) {
+ jaddr.nodes.push({
+ text: `Broadcast: ${utils.escapeHtml(addr.broadcast)}`,
+ icon: "fa fa-map-marker-alt fa-fw",
+ });
+ }
- if (iface.type !== undefined) {
- obj.nodes.push({
- text: "Type: " + utils.escapeHtml(iface.type),
- icon: "fa fa-network-wired fa-fw",
- });
- }
+ if (addr.scope !== undefined) {
+ jaddr.nodes.push({
+ text: `Scope: ${utils.escapeHtml(addr.scope)}`,
+ icon: "fa fa-map-marker-alt fa-fw",
+ });
+ }
- if (iface.flags !== undefined && iface.flags.length > 0) {
- obj.nodes.push({
- text: "Flags: " + utils.escapeHtml(iface.flags.join(", ")),
- icon: "fa fa-flag 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 (iface.address !== undefined) {
- let extra = "";
- if (iface.perm_address !== undefined && iface.perm_address !== iface.address) {
- extra = " (permanent: " + utils.escapeHtml(iface.perm_address) + ")";
- }
+ if (addr.prefered !== undefined) {
+ const pref = addr.prefered === 4_294_967_295 ? "forever" : `${intl.format(addr.prefered)} s`;
+ jaddr.nodes.push({
+ text: `Preferred lifetime: ${pref}`,
+ icon: "fa fa-clock fa-fw",
+ });
+ }
- obj.nodes.push({
- text: "Hardware address: " + utils.escapeHtml(iface.address) + "" + extra,
- icon: "fa fa-map-marker-alt fa-fw",
- });
- }
+ if (addr.valid !== undefined) {
+ const valid = addr.valid === 4_294_967_295 ? "forever" : `${intl.format(addr.valid)} s`;
+ jaddr.nodes.push({
+ text: `Valid lifetime: ${valid}`,
+ icon: "fa fa-clock fa-fw",
+ });
+ }
- if (iface.addresses !== undefined) {
- const addrs = {
- text:
- iface.addresses.length +
- (iface.addresses.length === 1 ? " address" : " addresses") +
- " connected to interface",
- icon: "fa fa-map-marker-alt fa-fw",
- nodes: [],
- };
-
- for (const addr of iface.addresses) {
- let extraaddr = "";
- if (addr.prefixlen !== undefined) {
- extraaddr += " / " + addr.prefixlen + "";
- }
-
- if (addr.address_type !== undefined) {
- let familyextra = "";
- if (addr.family === "inet") {
- familyextra = "IPv4 ";
- } else if (addr.family === "inet6") {
- familyextra = "IPv6 ";
- }
-
- extraaddr += " (" + familyextra + utils.escapeHtml(addr.address_type) + ")";
- }
-
- let family = "";
- if (addr.family !== undefined) {
- family = addr.family + " ";
- }
-
- const jaddr = {
- text:
- "Address: " + family + utils.escapeHtml(addr.address) + "" + extraaddr,
- icon: "fa fa-map-marker-alt fa-fw",
- nodes: [],
- };
- if (addr.local !== undefined) {
- jaddr.nodes.push({
- text: "Local: " + utils.escapeHtml(addr.local) + "",
- icon: "fa fa-map-marker-alt fa-fw",
- });
- }
-
- if (addr.broadcast !== undefined) {
- jaddr.nodes.push({
- text: "Broadcast: " + utils.escapeHtml(addr.broadcast) + "",
- icon: "fa fa-map-marker-alt fa-fw",
- });
- }
-
- if (addr.scope !== undefined) {
- jaddr.nodes.push({
- text: "Scope: " + utils.escapeHtml(addr.scope),
- 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 === 4_294_967_295 ? "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 === 4_294_967_295 ? "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 (addr.cstamp !== undefined || addr.tstamp !== undefined) {
+ const formatter = new Intl.DateTimeFormat(undefined, {
+ dateStyle: "short",
+ timeStyle: "short",
+ });
- if (iface.stats !== undefined) {
- const stats = {
- text: "Statistics",
- icon: "fa fa-chart-line fa-fw",
- expanded: false,
- nodes: [],
- };
- if (iface.stats.rx_bytes !== undefined) {
- stats.nodes.push({
- text:
- "RX bytes: " +
- intl.format(iface.stats.rx_bytes.value) +
- " " +
- iface.stats.rx_bytes.unit,
- icon: "fa fa-download fa-fw",
- });
- }
-
- if (iface.stats.tx_bytes !== undefined) {
- stats.nodes.push({
- text:
- "TX bytes: " +
- intl.format(iface.stats.tx_bytes.value) +
- " " +
- iface.stats.tx_bytes.unit,
- icon: "fa fa-upload fa-fw",
- });
- }
-
- if (iface.stats.rx_packets !== undefined) {
- stats.nodes.push({
- text: "RX packets: " + intl.format(iface.stats.rx_packets),
- icon: "fa fa-download fa-fw",
- });
- }
-
- if (iface.stats.rx_errors !== undefined) {
- stats.nodes.push({
- text:
- "RX errors: " +
- intl.format(iface.stats.rx_errors) +
- " (" +
- ((iface.stats.rx_errors / iface.stats.rx_packets) * 100).toFixed(1) +
- "%)",
- icon: "fa fa-download fa-fw",
- });
- }
-
- if (iface.stats.rx_dropped !== undefined) {
- stats.nodes.push({
- text:
- "RX dropped: " +
- intl.format(iface.stats.rx_dropped) +
- " (" +
- ((iface.stats.rx_dropped / iface.stats.rx_packets) * 100).toFixed(1) +
- "%)",
- icon: "fa fa-download fa-fw",
- });
- }
-
- if (iface.stats.tx_packets !== undefined) {
- stats.nodes.push({
- text: "TX packets: " + intl.format(iface.stats.tx_packets),
- icon: "fa fa-upload fa-fw",
- });
- }
-
- if (iface.stats.tx_errors !== undefined) {
- stats.nodes.push({
- text:
- "TX errors: " +
- intl.format(iface.stats.tx_errors) +
- " (" +
- ((iface.stats.tx_errors / iface.stats.tx_packets) * 100).toFixed(1) +
- "%)",
- icon: "fa fa-upload fa-fw",
- });
- }
-
- if (iface.stats.tx_dropped !== undefined) {
- stats.nodes.push({
- text:
- "TX dropped: " +
- intl.format(iface.stats.tx_dropped) +
- " (" +
- ((iface.stats.tx_dropped / iface.stats.tx_packets) * 100).toFixed(1) +
- "%)",
- icon: "fa fa-upload fa-fw",
- });
- }
-
- if (iface.stats.multicast !== undefined) {
- stats.nodes.push({
- text: "Multicast: " + intl.format(iface.stats.multicast),
- icon: "fa fa-broadcast-tower fa-fw",
- });
- }
-
- if (iface.stats.collisions !== undefined) {
- stats.nodes.push({
- text: "Collisions: " + intl.format(iface.stats.collisions),
- icon: "fa fa-exchange-alt fa-fw",
- });
- }
-
- obj.nodes.push(stats);
- }
+ if (addr.cstamp !== undefined) {
+ jaddr.nodes.push({
+ text: `Created: ${formatter.format(new Date(addr.cstamp * 1000))}`,
+ icon: "fa fa-clock fa-fw",
+ });
+ }
- const furtherDetails = {
- text: "Further details",
- icon: "fa fa-info-circle fa-fw",
- expanded: false,
- nodes: [],
- };
-
- furtherDetails.nodes.push(
- {
- text:
- "Carrier: " +
- (iface.carrier
- ? "Connected "
- : "Disconnected "),
- icon: "fa fa-link fa-fw",
- },
- {
- text: "State: " + utils.escapeHtml(iface.state.toUpperCase()),
- icon: "fa fa-server fa-fw",
- }
- );
-
- if (iface.parent_dev_name !== undefined) {
- let extra = "";
- if (iface.parent_dev_bus_name !== undefined) {
- extra = " @ " + utils.escapeHtml(iface.parent_dev_bus_name);
- }
-
- furtherDetails.nodes.push({
- text:
- "Parent device: " + utils.escapeHtml(iface.parent_dev_name) + extra + "",
- icon: "fa fa-network-wired fa-fw",
- });
- }
+ if (addr.tstamp !== undefined) {
+ jaddr.nodes.push({
+ text: `Last updated: ${formatter.format(new Date(addr.tstamp * 1000))}`,
+ icon: "fa fa-clock fa-fw",
+ });
+ }
+ }
- if (iface.carrier_changes !== undefined) {
- furtherDetails.nodes.push({
- text: "Carrier changes: " + intl.format(iface.carrier_changes),
- icon: "fa fa-exchange-alt fa-fw",
- });
- }
+ return jaddr;
+}
- if (iface.broadcast) {
- furtherDetails.nodes.push({
- text: "Broadcast: " + utils.escapeHtml(iface.broadcast) + "",
- icon: "fa fa-broadcast-tower fa-fw",
- });
- }
+function addStatisticsDetails(obj, iface, intl) {
+ if (iface.stats === undefined) return;
- if (iface.mtu) {
- let extra = "";
- if (iface.min_mtu !== undefined && iface.max_mtu !== undefined) {
- extra +=
- " (min: " +
- intl.format(iface.min_mtu) +
- " bytes, max: " +
- intl.format(iface.max_mtu) +
- " bytes)";
- }
-
- furtherDetails.nodes.push({
- text: "MTU: " + intl.format(iface.mtu) + " bytes" + extra,
- icon: "fa fa-arrows-alt-h fa-fw",
- });
- }
+ const stats = {
+ text: "Statistics",
+ icon: "fa fa-chart-line fa-fw",
+ expanded: false,
+ nodes: [],
+ };
- if (iface.txqlen) {
- furtherDetails.nodes.push({
- text: "TX queue length: " + intl.format(iface.txqlen),
- icon: "fa fa-file-upload fa-fw",
- });
- }
+ if (iface.stats.rx_bytes !== undefined) {
+ stats.nodes.push({
+ text: `RX bytes: ${intl.format(iface.stats.rx_bytes.value)} ${iface.stats.rx_bytes.unit}`,
+ icon: "fa fa-download fa-fw",
+ });
+ }
- if (iface.promiscuity !== undefined) {
- furtherDetails.nodes.push({
- text: "Promiscuity mode: " + (iface.promiscuity ? "Yes" : "No"),
- icon: "fa fa-eye fa-fw",
- });
- }
+ if (iface.stats.tx_bytes !== undefined) {
+ stats.nodes.push({
+ text: `TX bytes: ${intl.format(iface.stats.tx_bytes.value)} ${iface.stats.tx_bytes.unit}`,
+ icon: "fa fa-upload fa-fw",
+ });
+ }
- if (iface.qdisc !== undefined) {
- furtherDetails.nodes.push({
- text: "Scheduler: " + utils.escapeHtml(iface.qdisc),
- icon: "fa fa-network-wired fa-fw",
- });
- }
+ if (iface.stats.rx_packets !== undefined) {
+ stats.nodes.push({
+ text: `RX packets: ${intl.format(iface.stats.rx_packets)}`,
+ icon: "fa fa-download fa-fw",
+ });
+ }
- if (furtherDetails.nodes.length > 0) {
- obj.nodes.push(furtherDetails);
- }
+ if (iface.stats.rx_errors !== undefined && iface.stats.rx_packets) {
+ const rxErrorPercentage = ((iface.stats.rx_errors / iface.stats.rx_packets) * 100).toFixed(1);
+ stats.nodes.push({
+ text: `RX errors: ${intl.format(iface.stats.rx_errors)} (${rxErrorPercentage}%)`,
+ icon: "fa fa-download fa-fw",
+ });
+ }
+
+ if (iface.stats.rx_dropped !== undefined && iface.stats.rx_packets) {
+ const rxDropped = iface.stats.rx_dropped;
+ const rxPackets = iface.stats.rx_packets;
+ const rxDroppedPercentage = ((rxDropped / rxPackets) * 100).toFixed(1);
+ stats.nodes.push({
+ text: `RX dropped: ${intl.format(rxDropped)} (${rxDroppedPercentage}%)`,
+ icon: "fa fa-download fa-fw",
+ });
+ }
- interfaces[iface.name] = obj;
+ if (iface.stats.tx_packets !== undefined) {
+ stats.nodes.push({
+ text: `TX packets: ${intl.format(iface.stats.tx_packets)}`,
+ icon: "fa fa-upload fa-fw",
+ });
+ }
+
+ if (iface.stats.tx_errors !== undefined && iface.stats.tx_packets) {
+ const txErrorPercentage = ((iface.stats.tx_errors / iface.stats.tx_packets) * 100).toFixed(1);
+ stats.nodes.push({
+ text: `TX errors: ${intl.format(iface.stats.tx_errors)} (${txErrorPercentage}%)`,
+ icon: "fa fa-upload fa-fw",
+ });
+ }
+
+ if (iface.stats.tx_dropped !== undefined && iface.stats.tx_packets) {
+ const txDropped = iface.stats.tx_dropped;
+ const txPackets = iface.stats.tx_packets;
+ const txDroppedPercentage = ((txDropped / txPackets) * 100).toFixed(1);
+ stats.nodes.push({
+ text: `TX dropped: ${intl.format(txDropped)} (${txDroppedPercentage}%)`,
+ icon: "fa fa-upload fa-fw",
+ });
+ }
+
+ if (iface.stats.multicast !== undefined) {
+ stats.nodes.push({
+ text: `Multicast: ${intl.format(iface.stats.multicast)}`,
+ icon: "fa fa-broadcast-tower fa-fw",
+ });
+ }
+
+ if (iface.stats.collisions !== undefined) {
+ stats.nodes.push({
+ text: `Collisions: ${intl.format(iface.stats.collisions)}`,
+ icon: "fa fa-exchange-alt fa-fw",
+ });
+ }
+
+ obj.nodes.push(stats);
+}
+
+function addFurtherDetails(obj, iface, intl) {
+ const furtherDetails = {
+ text: "Further details",
+ icon: "fa fa-info-circle fa-fw",
+ expanded: false,
+ nodes: [],
+ };
+
+ const carrierStatus = iface.carrier
+ ? 'Connected '
+ : 'Disconnected ';
+
+ furtherDetails.nodes.push(
+ {
+ text: `Carrier: ${carrierStatus}`,
+ icon: "fa fa-link fa-fw",
+ },
+ {
+ text: `State: ${utils.escapeHtml(iface.state.toUpperCase())}`,
+ icon: "fa fa-server fa-fw",
}
+ );
- // Sort interfaces based on masterInterfaces. If an item is found in
- // masterInterfaces, it should be placed after the master interface
- const ifaces = Object.keys(interfaces);
- const interfaceList = Object.keys(masterInterfaces);
-
- // Add slave interfaces next to master interfaces
- for (const master of interfaceList) {
- if (master in masterInterfaces) {
- for (const slave of masterInterfaces[master]) {
- ifaces.splice(ifaces.indexOf(slave), 1);
- interfaceList.splice(interfaceList.indexOf(master) + 1, 0, slave);
- }
- }
+ if (iface.parent_dev_name !== undefined) {
+ const extra =
+ iface.parent_dev_bus_name !== undefined
+ ? ` @ ${utils.escapeHtml(iface.parent_dev_bus_name)}`
+ : "";
+
+ furtherDetails.nodes.push({
+ text: `Parent device: ${utils.escapeHtml(iface.parent_dev_name)}${extra}`,
+ icon: "fa fa-network-wired fa-fw",
+ });
+ }
+
+ if (iface.carrier_changes !== undefined) {
+ furtherDetails.nodes.push({
+ text: `Carrier changes: ${intl.format(iface.carrier_changes)}`,
+ icon: "fa fa-exchange-alt fa-fw",
+ });
+ }
+
+ if (iface.broadcast) {
+ furtherDetails.nodes.push({
+ text: `Broadcast: ${utils.escapeHtml(iface.broadcast)}`,
+ icon: "fa fa-broadcast-tower fa-fw",
+ });
+ }
+
+ if (iface.mtu) {
+ let extra = "";
+ if (iface.min_mtu !== undefined && iface.max_mtu !== undefined) {
+ const minMtu = intl.format(iface.min_mtu);
+ const maxMtu = intl.format(iface.max_mtu);
+ extra += ` (min: ${minMtu} bytes, max: ${maxMtu} bytes)`;
}
- // Add interfaces that are not slaves at the top of the list (in reverse order)
- for (const iface of ifaces.reverse()) {
- if (!interfaceList.includes(iface)) {
- interfaceList.unshift(iface);
+ furtherDetails.nodes.push({
+ text: `MTU: ${intl.format(iface.mtu)} bytes${extra}`,
+ icon: "fa fa-arrows-alt-h fa-fw",
+ });
+ }
+
+ if (iface.txqlen) {
+ furtherDetails.nodes.push({
+ text: `TX queue length: ${intl.format(iface.txqlen)}`,
+ icon: "fa fa-file-upload fa-fw",
+ });
+ }
+
+ if (iface.promiscuity !== undefined) {
+ furtherDetails.nodes.push({
+ text: `Promiscuity mode: ${iface.promiscuity ? "Yes" : "No"}`,
+ icon: "fa fa-eye fa-fw",
+ });
+ }
+
+ if (iface.qdisc !== undefined) {
+ furtherDetails.nodes.push({
+ text: `Scheduler: ${utils.escapeHtml(iface.qdisc)}`,
+ icon: "fa fa-network-wired fa-fw",
+ });
+ }
+
+ if (furtherDetails.nodes.length > 0) {
+ obj.nodes.push(furtherDetails);
+ }
+}
+
+function sortInterfaces(interfaces, masterInterfaces) {
+ // Sort interfaces based on masterInterfaces. If an item is found in
+ // masterInterfaces, it should be placed after the master interface
+ const ifaces = Object.keys(interfaces);
+ const interfaceList = Object.keys(masterInterfaces);
+
+ // Add slave interfaces next to master interfaces
+ for (const master of interfaceList) {
+ if (master in masterInterfaces) {
+ for (const slave of masterInterfaces[master]) {
+ ifaces.splice(ifaces.indexOf(slave), 1);
+ interfaceList.splice(interfaceList.indexOf(master) + 1, 0, slave);
}
}
+ }
- // Build the tree view
- const json = [];
- for (const iface of interfaceList) {
- json.push(interfaces[iface]);
+ // Add interfaces that are not slaves at the top of the list (in reverse order)
+ for (const iface of ifaces.reverse()) {
+ if (!interfaceList.includes(iface)) {
+ interfaceList.unshift(iface);
}
+ }
+
+ return interfaceList;
+}
+
+function renderTreeView(json) {
+ $("#tree").bstreeview({
+ data: json,
+ expandIcon: "fa fa-angle-down fa-fw",
+ collapseIcon: "fa fa-angle-right fa-fw",
+ parentsMarginLeft: "0",
+ indent: 2.5,
+ });
+ document.getElementById("spinner").classList.add("d-none");
+}
- $("#tree").bstreeview({
- data: json,
- expandIcon: "fa fa-angle-down fa-fw",
- collapseIcon: "fa fa-angle-right fa-fw",
- parentsMarginLeft: "0",
- indent: 2.5,
- });
- $("#spinner").hide();
+function expandGatewayInterfaces(gateways) {
+ // Expand gateway interfaces by default
+ const tree = document.getElementById("tree");
+ if (!tree) return;
+
+ for (const gw of gateways) {
+ // Find all divs containing the gateway name
+ const divs = tree.querySelectorAll("div");
+ for (const div of divs) {
+ if (!div.textContent.includes(gw)) continue;
+
+ div.classList.remove("collapsed");
+ const nextDiv = div.nextElementSibling;
+ if (nextDiv) $(nextDiv).collapse("show");
- // Expand gateway interfaces by default
- for (const gw of gateways) {
- const 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");
+ const icon = div.querySelector("i");
+ if (!icon) continue;
+
+ icon.classList.remove("fa-angle-right");
+ icon.classList.add("fa-angle-down");
}
- });
-});
+ }
+}
diff --git a/scripts/js/ip-address-sorting.js b/scripts/js/ip-address-sorting.js
index a3cdd96ed3..93ea20b9c0 100644
--- a/scripts/js/ip-address-sorting.js
+++ b/scripts/js/ip-address-sorting.js
@@ -38,6 +38,7 @@ $.extend($.fn.dataTableExt.oSort, {
cidr = m[3].split("/");
if (cidr.length === 2) {
m.pop();
+ // eslint-disable-next-line unicorn/prefer-spread
m = m.concat(cidr);
}
diff --git a/scripts/js/login.js b/scripts/js/login.js
index bea57e67e8..46ec2dd41f 100644
--- a/scripts/js/login.js
+++ b/scripts/js/login.js
@@ -64,12 +64,9 @@ function wrongPassword(isError = false, isSuccess = false, data = null) {
// Only show the forgot password box if the error is NOT caused by an
// invalid TOTP token and this is no error response (= password is wrong)
if (!isErrorResponse && !isInvalidTOTP) {
- $("#forgot-pw-box")
- .removeClass("box-info")
- .removeClass("collapsed-box")
- .addClass("box-danger");
- $("#forgot-pw-box .box-body").show();
- $("#forgot-pw-toggle-icon").removeClass("fa-plus").addClass("fa-minus");
+ const forgotPwBox = document.getElementById("forgot-pw-box");
+ forgotPwBox.classList.replace("box-info", "box-danger");
+ utils.toggleBoxCollapse(forgotPwBox, true);
}
return;
@@ -85,9 +82,9 @@ function wrongPassword(isError = false, isSuccess = false, data = null) {
}
$("#invalid2fa-box").addClass("hidden");
- $("#forgot-pw-box").addClass("box-info").addClass("collapsed-box").removeClass("box-danger");
- $("#forgot-pw-box .box-body").hide();
- $("#forgot-pw-toggle-icon").removeClass("fa-minus").addClass("fa-plus");
+ const forgotPwBox = document.getElementById("forgot-pw-box");
+ forgotPwBox.classList.replace("box-danger", "box-info");
+ utils.toggleBoxCollapse(forgotPwBox, false);
}
function doLogin(password) {
diff --git a/scripts/js/messages.js b/scripts/js/messages.js
index 55ce9b1488..d5fb7e594c 100644
--- a/scripts/js/messages.js
+++ b/scripts/js/messages.js
@@ -32,7 +32,7 @@ $(() => {
{ data: null, visible: true, width: "15px" },
{ data: "timestamp", width: "8%", render: utils.renderTimestamp },
{ data: "type", width: "8%" },
- { data: "html", orderable: false, render: utils.htmlPass },
+ { data: "html", orderable: false, render: (data, _type) => data },
{ data: null, width: "22px", orderable: false },
],
columnDefs: [
diff --git a/scripts/js/queries.js b/scripts/js/queries.js
index af86a0c5fe..41091a2799 100644
--- a/scripts/js/queries.js
+++ b/scripts/js/queries.js
@@ -28,6 +28,14 @@ const filters = [
"reply",
"dnssec",
];
+let doDNSSEC = false;
+
+// Check if pihole is validiting DNSSEC
+function getDnssecConfig() {
+ $.getJSON(document.body.dataset.apiurl + "/config/dns/dnssec", data => {
+ doDNSSEC = data.config.dns.dnssec;
+ });
+}
function initDateRangePicker() {
$("#querytime").daterangepicker(
@@ -345,7 +353,7 @@ function formatInfo(data) {
if (dnssec.color !== "") {
dnssecInfo =
divStart +
- 'DNSSEC status: ' +
dnssec.text +
@@ -362,7 +370,7 @@ function formatInfo(data) {
let replyInfo = "";
replyInfo =
data.reply.type !== "UNKNOWN"
- ? divStart + "Reply: " + data.reply.type + "