mirror of
https://github.com/pi-hole/web.git
synced 2025-12-20 02:38:28 +00:00
Set "All Time " range for query log datepicker based on Database ranges (moment) (#3657)
This commit is contained in:
@@ -64,6 +64,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
|
|||||||
</div>
|
</div>
|
||||||
<input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
|
<input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
|
||||||
</div>
|
</div>
|
||||||
|
<small id="querytime-note" class="form-text text-muted" style="margin-top: 5px;"></small>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group col-md-6">
|
<div class="form-group col-md-6">
|
||||||
<div><input type="checkbox" id="disk"><label for="disk">Query on-disk data. This is <em>a lot</em> slower but necessary if you want to obtain queries older than 24 hours. This option disables live update.</label></div>
|
<div><input type="checkbox" id="disk"><label for="disk">Query on-disk data. This is <em>a lot</em> slower but necessary if you want to obtain queries older than 24 hours. This option disables live update.</label></div>
|
||||||
|
|||||||
@@ -9,10 +9,13 @@
|
|||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const beginningOfTime = 1_262_304_000; // Jan 01 2010, 00:00 in seconds
|
// These values are provided by the API (/info/database).
|
||||||
const endOfTime = 2_147_483_647; // Jan 19, 2038, 03:14 in seconds
|
// We initialize them as null and populate them during page init.
|
||||||
let from = beginningOfTime;
|
let beginningOfTime = null; // seconds since epoch (set from API: info/database.earliest_timestamp)
|
||||||
let until = endOfTime;
|
// endOfTime should be the end of today (local), in seconds since epoch
|
||||||
|
const endOfTime = moment().endOf("day").unix();
|
||||||
|
let from = null;
|
||||||
|
let until = null;
|
||||||
|
|
||||||
const dateformat = "MMM Do YYYY, HH:mm";
|
const dateformat = "MMM Do YYYY, HH:mm";
|
||||||
|
|
||||||
@@ -40,7 +43,52 @@ function getDnssecConfig() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fetch database info (earliest timestamp, sizes, ...) from the API and
|
||||||
|
// initialize related globals.
|
||||||
|
function getDatabaseInfo() {
|
||||||
|
$.getJSON(document.body.dataset.apiurl + "/info/database", data => {
|
||||||
|
// earliest_timestamp is provided in seconds since epoch
|
||||||
|
// We have two sources: earliest_timestamp_disk (on-disk) and earliest_timestamp (in-memory)
|
||||||
|
// Use whichever is smallest and non-zero
|
||||||
|
const diskTimestamp = Number(data.earliest_timestamp_disk);
|
||||||
|
const memoryTimestamp = Number(data.earliest_timestamp);
|
||||||
|
|
||||||
|
// Filter out zero/invalid timestamps
|
||||||
|
const validTimestamps = [diskTimestamp, memoryTimestamp].filter(ts => ts > 0);
|
||||||
|
|
||||||
|
// Use the smallest valid timestamp, or null if none exist
|
||||||
|
beginningOfTime = validTimestamps.length > 0 ? Math.min(...validTimestamps) : null;
|
||||||
|
|
||||||
|
// Round down to nearest 5-minute segment (300 seconds) if valid
|
||||||
|
if (beginningOfTime !== null) {
|
||||||
|
beginningOfTime = Math.floor(beginningOfTime / 300) * 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If from/until were not provided via GET, default them
|
||||||
|
// Only use defaults if beginningOfTime is valid
|
||||||
|
if (beginningOfTime !== null) {
|
||||||
|
from ??= beginningOfTime;
|
||||||
|
until ??= endOfTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDateRangePicker();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function initDateRangePicker() {
|
function initDateRangePicker() {
|
||||||
|
// If there's no valid data in the database, disable the datepicker
|
||||||
|
if (beginningOfTime === null) {
|
||||||
|
$("#querytime").prop("disabled", true);
|
||||||
|
$("#querytime").addClass("disabled");
|
||||||
|
$("#querytime-note").text("ℹ️ No data in the database");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const minDateMoment = moment.unix(beginningOfTime);
|
||||||
|
const maxDateMoment = moment.unix(endOfTime);
|
||||||
|
const earliestDateStr = minDateMoment.format(dateformat);
|
||||||
|
$("#querytime-note").text(`Earliest date: ${earliestDateStr}`);
|
||||||
|
|
||||||
$("#querytime").daterangepicker(
|
$("#querytime").daterangepicker(
|
||||||
{
|
{
|
||||||
timePicker: true,
|
timePicker: true,
|
||||||
@@ -52,21 +100,24 @@ function initDateRangePicker() {
|
|||||||
ranges: {
|
ranges: {
|
||||||
"Last 10 Minutes": [moment().subtract(10, "minutes"), moment()],
|
"Last 10 Minutes": [moment().subtract(10, "minutes"), moment()],
|
||||||
"Last Hour": [moment().subtract(1, "hours"), moment()],
|
"Last Hour": [moment().subtract(1, "hours"), moment()],
|
||||||
Today: [moment().startOf("day"), moment().endOf("day")],
|
Today: [moment().startOf("day"), maxDateMoment],
|
||||||
Yesterday: [
|
Yesterday: [
|
||||||
moment().subtract(1, "days").startOf("day"),
|
moment().subtract(1, "days").startOf("day"),
|
||||||
moment().subtract(1, "days").endOf("day"),
|
moment().subtract(1, "days").endOf("day"),
|
||||||
],
|
],
|
||||||
"Last 7 Days": [moment().subtract(6, "days"), moment().endOf("day")],
|
"Last 7 Days": [moment().subtract(6, "days").startOf("day"), maxDateMoment],
|
||||||
"Last 30 Days": [moment().subtract(29, "days"), moment().endOf("day")],
|
"Last 30 Days": [moment().subtract(29, "days").startOf("day"), maxDateMoment],
|
||||||
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
"This Month": [moment().startOf("month"), maxDateMoment],
|
||||||
"Last Month": [
|
"Last Month": [
|
||||||
moment().subtract(1, "month").startOf("month"),
|
moment().subtract(1, "month").startOf("month"),
|
||||||
moment().subtract(1, "month").endOf("month"),
|
moment().subtract(1, "month").endOf("month"),
|
||||||
],
|
],
|
||||||
"This Year": [moment().startOf("year"), moment().endOf("year")],
|
"This Year": [moment().startOf("year"), maxDateMoment],
|
||||||
"All Time": [moment(beginningOfTime * 1000), moment(endOfTime * 1000)], // convert to milliseconds since epoch
|
"All Time": [minDateMoment, maxDateMoment],
|
||||||
},
|
},
|
||||||
|
// Don't allow selecting dates outside the database range
|
||||||
|
minDate: minDateMoment,
|
||||||
|
maxDate: maxDateMoment,
|
||||||
opens: "center",
|
opens: "center",
|
||||||
showDropdowns: true,
|
showDropdowns: true,
|
||||||
autoUpdateInput: true,
|
autoUpdateInput: true,
|
||||||
@@ -510,14 +561,15 @@ $(() => {
|
|||||||
const apiURL = getAPIURL(GETDict);
|
const apiURL = getAPIURL(GETDict);
|
||||||
|
|
||||||
if ("from" in GETDict) {
|
if ("from" in GETDict) {
|
||||||
from = GETDict.from;
|
from = Number(GETDict.from);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ("until" in GETDict) {
|
if ("until" in GETDict) {
|
||||||
until = GETDict.until;
|
until = Number(GETDict.until);
|
||||||
}
|
}
|
||||||
|
|
||||||
initDateRangePicker();
|
// Fetch earliest timestamp from API and initialize date picker / table
|
||||||
|
getDatabaseInfo();
|
||||||
|
|
||||||
table = $("#all-queries").DataTable({
|
table = $("#all-queries").DataTable({
|
||||||
ajax: {
|
ajax: {
|
||||||
|
|||||||
Reference in New Issue
Block a user