Repository: prometheus/prometheus (language: go)

Issue:
React UI: Millisecond durations cause x-axis to be set to ~26 years
<!--

    Please do *NOT* ask support questions in Github issues.

    If your issue is not a feature request or bug report use our
    community support.

    https://prometheus.io/community/

    There is also commercial support available.

    https://prometheus.io/support-training/

-->

**What did you do?**

I set a range of 1ms.

**What did you expect to see?**

Metrics over a range of 1ms.

**What did you see instead? Under which circumstances?**

Metrics over a range of ~26 years:

https://prometheus.demo.do.prometheus.io/graph?g0.expr=prometheus_http_requests_total&g0.tab=0&g0.stacked=0&g0.range_input=1ms

**Environment**

* Prometheus version:

	In this example, `2.27.0`, but it's present in every React UI release as far as I can tell.

I discovered this while working on #8977, and now that it's going to be released I expect a lot more users will run into this bug. I'm not sure if we can (reasonably) or should do anything about it, it's more of just a minor annoyance, I don't think we even allow that level of precision in the graph. But, I thought I'd make a note of it here.


Discussion / hints:
In IRC we discussed a few solutions to this newfound ability to "hack" time...

cc @juliusv
Hello from the bug-scrub!

I verified this still happens with v2.52.

This kind of things still happen with Mantine UI

http://127.0.0.1:9090/query?g0.expr=up&g0.show_tree=0&g0.tab=graph&g0.end_input=2024-09-19+09%3A01%3A24&g0.moment_input=2024-09-19+09%3A01%3A24&g0.range_input=43ms&g0.res_type=auto&g0.res_density=medium&g0.display_mode=lines&g0.show_exemplars=0


![bug](https://github.com/user-attachments/assets/f601a1a2-4bc6-45ae-b25b-81ac8bc07c64)


Fix patch:
diff --git a/web/ui/mantine-ui/src/pages/query/uPlotChartHelpers.ts b/web/ui/mantine-ui/src/pages/query/uPlotChartHelpers.ts
index b7a81831c90..e9dad3665ff 100644
--- a/web/ui/mantine-ui/src/pages/query/uPlotChartHelpers.ts
+++ b/web/ui/mantine-ui/src/pages/query/uPlotChartHelpers.ts
@@ -380,10 +380,11 @@ export const getUPlotOptions = (
   hooks: {
     setSelect: [
       (self: uPlot) => {
-        onSelectRange(
-          self.posToVal(self.select.left, "x"),
-          self.posToVal(self.select.left + self.select.width, "x")
-        );
+        // Disallow sub-second zoom as this cause inconsistenices in the X axis in uPlot.
+        const leftVal = self.posToVal(self.select.left, "x");
+        const rightVal = Math.max(self.posToVal(self.select.left + self.select.width, "x"), leftVal + 1);
+
+        onSelectRange(leftVal, rightVal);
       },
     ],
   },


Test patch: