From be6d443947ee65ae0c67222804495177ce90e2bc Mon Sep 17 00:00:00 2001
From: Julien <roidelapluie@o11y.eu>
Date: Tue, 10 Sep 2024 12:39:27 +0200
Subject: [PATCH] Mantine UI: Use actual lookback delta in explain

Signed-off-by: Julien <roidelapluie@o11y.eu>
---
 web/ui/mantine-ui/index.html                              | 8 +++++---
 .../mantine-ui/src/pages/query/ExplainViews/Selector.tsx  | 6 ++++--
 web/ui/mantine-ui/src/state/settingsSlice.ts              | 7 +++++++
 web/web.go                                                | 1 +
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/web/ui/mantine-ui/index.html b/web/ui/mantine-ui/index.html
index deb5f7f56..d2723488a 100644
--- a/web/ui/mantine-ui/index.html
+++ b/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>
 
     <!--
diff --git a/web/ui/mantine-ui/src/pages/query/ExplainViews/Selector.tsx b/web/ui/mantine-ui/src/pages/query/ExplainViews/Selector.tsx
index 26f62fb33..1b71e3591 100644
--- a/web/ui/mantine-ui/src/pages/query/ExplainViews/Selector.tsx
+++ b/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 && (
diff --git a/web/ui/mantine-ui/src/state/settingsSlice.ts b/web/ui/mantine-ui/src/state/settingsSlice.ts
index a4ccc8cb4..1591c4388 100644
--- a/web/ui/mantine-ui/src/state/settingsSlice.ts
+++ b/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,
diff --git a/web/web.go b/web/web.go
index 91e5de1c4..b4d285108 100644
--- a/web/web.go
+++ b/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)
 	}