diff --git a/README.md b/README.md index c6d50f01ba..b5ffac1c5c 100644 --- a/README.md +++ b/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. diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/StepConfigurator.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/StepConfigurator.tsx index 727a4140b8..7edde9d310 100644 --- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/StepConfigurator.tsx +++ b/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 = ({defaultStep, setStep}) => const onChangeStep = (e: ChangeEvent) => { 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 = ({defaultStep, setStep}) => } }; + useEffect(() => { + if (defaultStep) handleSetStep(defaultStep); + }, [defaultStep]); + return = ({defaultStep, setStep}) => value={customStep} error={error} helperText={error ? "step is out of allowed range" : " "} - onChange={onChangeStep}/>; + onChange={onChangeStep} + InputProps={{ + inputProps: {min: 0}, + endAdornment: ( + + + handleSetStep(defaultStep || 1)}> + + + + + ), + }} + />; }; export default StepConfigurator; diff --git a/app/vmui/packages/vmui/src/index.css b/app/vmui/packages/vmui/src/index.css index 01b13f8679..7c71446020 100644 --- a/app/vmui/packages/vmui/src/index.css +++ b/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; +} diff --git a/app/vmui/packages/vmui/src/state/graph/reducer.ts b/app/vmui/packages/vmui/src/state/graph/reducer.ts index a4c89db3fa..7b3d8d5c19 100644 --- a/app/vmui/packages/vmui/src/state/graph/reducer.ts +++ b/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]}} } diff --git a/docs/README.md b/docs/README.md index 9c9d3c299d..489e73c3f9 100644 --- a/docs/README.md +++ b/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. diff --git a/docs/Single-server-VictoriaMetrics.md b/docs/Single-server-VictoriaMetrics.md index 449ede768a..c801869b1a 100644 --- a/docs/Single-server-VictoriaMetrics.md +++ b/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.