vmui: update time picker behavior (#2847)

* vmui: update time picker behavior

* docs/CHANGELOG.md: document the change

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx

@@ -1,4 +1,5 @@
 import React, {FC, useEffect, useState, useMemo} from "preact/compat";
+import {KeyboardEvent} from "react";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
 import {dateFromSeconds, formatDateForNativeInput} from "../../../../utils/time";
 import TimeDurationSelector from "./TimeDurationSelector";
@@ -13,6 +14,7 @@ import Paper from "@mui/material/Paper";
 import Divider from "@mui/material/Divider";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Tooltip from "@mui/material/Tooltip";
+import AlarmAdd from "@mui/icons-material/AlarmAdd";
 
 const formatDate = "YYYY-MM-DD HH:mm:ss";
 
@@ -35,6 +37,7 @@ const classes = {
 
 export const TimeSelector: FC = () => {
 
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [until, setUntil] = useState<string>();
   const [from, setFrom] = useState<string>();
 
@@ -63,8 +66,30 @@ export const TimeSelector: FC = () => {
     };
   }, [start, end]);
 
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const open = Boolean(anchorEl);
+  const setTimeAndClosePicker = () => {
+    if (from) {
+      dispatch({type: "SET_FROM", payload: new Date(from)});
+    }
+    if (until) {
+      dispatch({type: "SET_UNTIL", payload: new Date(until)});
+    }
+    setAnchorEl(null);
+  };
+  const onFromChange = (from: dayjs.Dayjs | null) => setFrom(from?.format(formatDate));
+  const onUntilChange = (until: dayjs.Dayjs | null) => setUntil(until?.format(formatDate));
+  const onApplyClick = () => setTimeAndClosePicker();
+  const onSwitchToNow = () => dispatch({type: "RUN_QUERY_TO_NOW"});
+  const onCancelClick = () => {
+    setUntil(formatDateForNativeInput(dateFromSeconds(end)));
+    setFrom(formatDateForNativeInput(dateFromSeconds(start)));
+    setAnchorEl(null);
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" || e.keyCode === 13) {
+      setTimeAndClosePicker();
+    }
+  };
 
   return <>
     <Tooltip title="Time range controls">
@@ -95,11 +120,11 @@ export const TimeSelector: FC = () => {
                   label="From"
                   ampm={false}
                   value={from}
-                  onChange={date => date && dispatch({type: "SET_FROM", payload: date as unknown as Date})}
+                  onChange={onFromChange}
                   onError={console.log}
                   inputFormat={formatDate}
                   mask="____-__-__ __:__:__"
-                  renderInput={(params) => <TextField {...params} variant="standard"/>}
+                  renderInput={(params) => <TextField {...params} variant="standard" onKeyDown={onKeyDown}/>}
                   maxDate={dayjs(until)}
                   PopperProps={{disablePortal: true}}/>
               </Box>
@@ -108,18 +133,21 @@ export const TimeSelector: FC = () => {
                   label="To"
                   ampm={false}
                   value={until}
-                  onChange={date => date && dispatch({type: "SET_UNTIL", payload: date as unknown as Date})}
+                  onChange={onUntilChange}
                   onError={console.log}
                   inputFormat={formatDate}
                   mask="____-__-__ __:__:__"
-                  renderInput={(params) => <TextField {...params} variant="standard"/>}
+                  renderInput={(params) => <TextField {...params} variant="standard" onKeyDown={onKeyDown}/>}
                   PopperProps={{disablePortal: true}}/>
               </Box>
               <Box display="grid" gridTemplateColumns="auto 1fr" gap={1}>
-                <Button variant="outlined" onClick={() => setAnchorEl(null)}>
+                <Button variant="outlined" onClick={onCancelClick}>
                   Cancel
                 </Button>
-                <Button variant="contained" onClick={() => dispatch({type: "RUN_QUERY_TO_NOW"})}>
+                <Button variant="outlined" onClick={onApplyClick} color={"success"}>
+                  Apply
+                </Button>
+                <Button startIcon={<AlarmAdd />} onClick={onSwitchToNow}>
                   switch to now
                 </Button>
               </Box>

docs/CHANGELOG.md

@@ -76,6 +76,7 @@ scrape_configs:
 * BUGFIX: accept tags without values when reading data in [DataDog format](https://docs.victoriametrics.com/Single-server-VictoriaMetrics.html#how-to-send-data-from-datadog-agent). Thanks to @PerGon for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/2839).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): properly pass the end of the selected time range to `time` query arg to [/api/v1/query](https://prometheus.io/docs/prometheus/latest/querying/api/#instant-queries) when displaying the requested data in JSON and table views. Previously the `time` query arg wasn't set, so `/api/v1/query` was always returning query results for the current time regardless of the selected time range. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2781).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): allow clicking on the suggestion from autocomplete list. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2804).
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): apply the selected time range in date picker only after clicking the `Apply` button. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2811).
 
 ## [v1.78.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.78.1)