Set "All Time " range for query log datepicker based on Database ranges (moment) (#3657)

This commit is contained in:
Adam Warner
2025-11-19 20:39:35 +00:00
committed by GitHub
2 changed files with 66 additions and 13 deletions

View File

@@ -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>

View File

@@ -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: {