Mantine UI: Use actual lookback delta in explain

Signed-off-by: Julien <roidelapluie@o11y.eu>

web/ui/mantine-ui/index.html

@@ -7,19 +7,21 @@
 
     <!--
       Placeholders replaced by Prometheus during serving:
-      - GLOBAL_CONSOLES_LINK is replaced and set to the consoles link if it exists.
+      - CONSOLES_LINK_PLACEHOLDER is replaced and set to the consoles link if it exists.
         It will render a "Consoles" link in the navbar when it is non-empty.
-      - PROMETHEUS_AGENT_MODE is replaced by a boolean indicating if Prometheus is running in agent mode.
+      - AGENT_MODE_PLACEHOLDER is replaced by a boolean indicating if Prometheus is running in agent mode.
         It true, it will disable querying capacities in the UI and generally adapt the UI to the agent mode.
         It has to be represented as a string, because booleans can be mangled to !1 in production builds.
-      - PROMETHEUS_READY is replaced by a boolean indicating whether Prometheus was ready at the time the
+      - READY_PLACEHOLDER is replaced by a boolean indicating whether Prometheus was ready at the time the
         web app was served. It has to be represented as a string, because booleans can be mangled to !1 in
         production builds.
+      - LOOKBACKDELTA_PLACEHOLDER is replaced by the default lookback delta duration used for queries.
     -->
     <script>
       const GLOBAL_CONSOLES_LINK='CONSOLES_LINK_PLACEHOLDER';
       const GLOBAL_AGENT_MODE='AGENT_MODE_PLACEHOLDER';
       const GLOBAL_READY='READY_PLACEHOLDER';
+      const GLOBAL_LOOKBACKDELTA='LOOKBACKDELTA_PLACEHOLDER';
     </script>
 
     <!--

web/ui/mantine-ui/src/pages/query/ExplainViews/Selector.tsx

@@ -11,6 +11,7 @@ import { useSuspenseAPIQuery } from "../../../api/api";
 import { Card, Text, Divider, List } from "@mantine/core";
 import { MetadataResult } from "../../../api/responseTypes/metadata";
 import { formatPrometheusDuration } from "../../../lib/formatTime";
+import { useSettings } from "../../../state/settingsSlice";
 
 interface SelectorExplainViewProps {
   node: VectorSelector | MatrixSelector;
@@ -126,6 +127,7 @@ const matchingCriteriaList = (
 
 const SelectorExplainView: FC<SelectorExplainViewProps> = ({ node }) => {
   const baseMetricName = node.name.replace(/(_count|_sum|_bucket)$/, "");
+  const { lookbackDelta } = useSettings();
   const { data: metricMeta } = useSuspenseAPIQuery<MetadataResult>({
     path: `/metadata`,
     params: {
@@ -159,7 +161,7 @@ const SelectorExplainView: FC<SelectorExplainViewProps> = ({ node }) => {
         {node.type === nodeType.vectorSelector ? (
           <>
             This node selects the latest (non-stale) sample value within the
-            last <span className="promql-code promql-duration">5m</span>
+            last <span className="promql-code promql-duration">{lookbackDelta}</span>
           </>
         ) : (
           <>
@@ -208,7 +210,7 @@ const SelectorExplainView: FC<SelectorExplainViewProps> = ({ node }) => {
         If a series has no values in the last{" "}
         <span className="promql-code promql-duration">
           {node.type === nodeType.vectorSelector
-            ? "5m"
+            ? lookbackDelta
             : formatPrometheusDuration(node.range)}
         </span>
         {node.offset > 0 && (

web/ui/mantine-ui/src/state/settingsSlice.ts

@@ -4,6 +4,7 @@ import { initializeFromLocalStorage } from "./initializeFromLocalStorage";
 
 interface Settings {
   consolesLink: string | null;
+  lookbackDelta: string,
   agentMode: boolean;
   ready: boolean;
   pathPrefix: string;
@@ -19,6 +20,7 @@ interface Settings {
 declare const GLOBAL_CONSOLES_LINK: string;
 declare const GLOBAL_AGENT_MODE: string;
 declare const GLOBAL_READY: string;
+declare const GLOBAL_LOOKBACKDELTA: string;
 
 export const localStorageKeyUseLocalTime = "settings.useLocalTime";
 export const localStorageKeyEnableQueryHistory = "settings.enableQueryHistory";
@@ -37,6 +39,11 @@ export const initialState: Settings = {
       : GLOBAL_CONSOLES_LINK,
   agentMode: GLOBAL_AGENT_MODE === "true",
   ready: GLOBAL_READY === "true",
+  lookbackDelta:
+    GLOBAL_LOOKBACKDELTA === "LOOKBACKDELTA_PLACEHOLDER" ||
+    GLOBAL_LOOKBACKDELTA === null
+      ? ""
+      : GLOBAL_LOOKBACKDELTA,
   pathPrefix: "",
   useLocalTime: initializeFromLocalStorage<boolean>(
     localStorageKeyUseLocalTime,

web/web.go

@@ -444,6 +444,7 @@ func New(logger log.Logger, o *Options) *Handler {
 		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("TITLE_PLACEHOLDER"), []byte(h.options.PageTitle))
 		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("AGENT_MODE_PLACEHOLDER"), []byte(strconv.FormatBool(h.options.IsAgent)))
 		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("READY_PLACEHOLDER"), []byte(strconv.FormatBool(h.isReady())))
+		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("LOOKBACKDELTA_PLACEHOLDER"), []byte(model.Duration(h.options.LookbackDelta).String()))
 		w.Write(replacedIdx)
 	}