fix: change step setting field (#3270)

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

README.md

@@ -282,7 +282,7 @@ Multi-line queries can be entered by pressing `Shift-Enter` in query input field
 
 When querying the [backfilled data](https://docs.victoriametrics.com/#backfilling) or during [query troubleshooting](https://docs.victoriametrics.com/Troubleshooting.html#unexpected-query-results), it may be useful disabling response cache by clicking `Disable cache` checkbox.
 
-VMUI automatically adjusts the interval between datapoints on the graph depending on the horizontal resolution and on the selected time range. The step value can be customized by clicking `Override step value` checkbox.
+VMUI automatically adjusts the interval between datapoints on the graph depending on the horizontal resolution and on the selected time range. The step value can be customized by changing `Step value` input.
 
 VMUI allows investigating correlations between multiple queries on the same graph. Just click `Add Query` button, enter an additional query in the newly appeared input field and press `Ctrl+Enter`. Results for all the queries should be displayed simultaneously on the same graph.
 

app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/StepConfigurator.tsx

@@ -1,7 +1,11 @@
 import React, {FC, useCallback, useState} from "preact/compat";
-import {ChangeEvent} from "react";
+import {ChangeEvent, useEffect} from "react";
 import TextField from "@mui/material/TextField";
 import debounce from "lodash.debounce";
+import InputAdornment from "@mui/material/InputAdornment";
+import Tooltip from "@mui/material/Tooltip";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import IconButton from "@mui/material/IconButton";
 
 interface StepConfiguratorProps {
   defaultStep?: number,
@@ -18,6 +22,11 @@ const StepConfigurator: FC<StepConfiguratorProps> = ({defaultStep, setStep}) =>
 
   const onChangeStep = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const value = +e.target.value;
+    if (!value) return;
+    handleSetStep(value);
+  };
+
+  const handleSetStep = (value: number) => {
     if (value > 0) {
       setCustomStep(value);
       debouncedHandleApply(value);
@@ -27,6 +36,10 @@ const StepConfigurator: FC<StepConfiguratorProps> = ({defaultStep, setStep}) =>
     }
   };
 
+  useEffect(() => {
+    if (defaultStep) handleSetStep(defaultStep);
+  }, [defaultStep]);
+
   return <TextField
     label="Step value"
     type="number"
@@ -35,7 +48,20 @@ const StepConfigurator: FC<StepConfiguratorProps> = ({defaultStep, setStep}) =>
     value={customStep}
     error={error}
     helperText={error ? "step is out of allowed range" : " "}
-    onChange={onChangeStep}/>;
+    onChange={onChangeStep}
+    InputProps={{
+      inputProps: {min: 0},
+      endAdornment: (
+        <InputAdornment position="start" sx={{mr: -0.5, cursor: "pointer"}}>
+          <Tooltip title={"Reset step to default"}>
+            <IconButton size={"small"} onClick={() => handleSetStep(defaultStep || 1)}>
+              <RestartAltIcon fontSize={"small"} />
+            </IconButton>
+          </Tooltip>
+        </InputAdornment>
+      ),
+    }}
+  />;
 };
 
 export default StepConfigurator;

app/vmui/packages/vmui/src/index.css

@@ -27,3 +27,9 @@ code {
   border: 1px solid #dedede;
   cursor: default;
 }
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

app/vmui/packages/vmui/src/state/graph/reducer.ts

@@ -1,3 +1,5 @@
+import {getQueryStringValue} from "../../utils/query-string";
+
 export interface AxisRange {
   [key: string]: [number, number]
 }
@@ -20,7 +22,7 @@ export type GraphAction =
   | { type: "SET_CUSTOM_STEP", payload: number}
 
 export const initialGraphState: GraphState = {
-  customStep: 1,
+  customStep: parseFloat(getQueryStringValue("g0.step_input", "0") as string),
   yaxis: {
     limits: {enable: false, range: {"1": [0, 0]}}
   }

docs/README.md

@@ -283,7 +283,7 @@ Multi-line queries can be entered by pressing `Shift-Enter` in query input field
 
 When querying the [backfilled data](https://docs.victoriametrics.com/#backfilling) or during [query troubleshooting](https://docs.victoriametrics.com/Troubleshooting.html#unexpected-query-results), it may be useful disabling response cache by clicking `Disable cache` checkbox.
 
-VMUI automatically adjusts the interval between datapoints on the graph depending on the horizontal resolution and on the selected time range. The step value can be customized by clicking `Override step value` checkbox.
+VMUI automatically adjusts the interval between datapoints on the graph depending on the horizontal resolution and on the selected time range. The step value can be customized by changing `Step value` input.
 
 VMUI allows investigating correlations between multiple queries on the same graph. Just click `Add Query` button, enter an additional query in the newly appeared input field and press `Ctrl+Enter`. Results for all the queries should be displayed simultaneously on the same graph.
 

docs/Single-server-VictoriaMetrics.md

@@ -286,7 +286,7 @@ Multi-line queries can be entered by pressing `Shift-Enter` in query input field
 
 When querying the [backfilled data](https://docs.victoriametrics.com/#backfilling) or during [query troubleshooting](https://docs.victoriametrics.com/Troubleshooting.html#unexpected-query-results), it may be useful disabling response cache by clicking `Disable cache` checkbox.
 
-VMUI automatically adjusts the interval between datapoints on the graph depending on the horizontal resolution and on the selected time range. The step value can be customized by clicking `Override step value` checkbox.
+VMUI automatically adjusts the interval between datapoints on the graph depending on the horizontal resolution and on the selected time range. The step value can be customized by changing `Step value` input.
 
 VMUI allows investigating correlations between multiple queries on the same graph. Just click `Add Query` button, enter an additional query in the newly appeared input field and press `Ctrl+Enter`. Results for all the queries should be displayed simultaneously on the same graph.