From eae6063450944b28fdaeb541a821817b304b3ddc Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Wed, 26 Oct 2022 01:46:46 +0200 Subject: [PATCH] fix: change step setting field (#3270) Co-authored-by: Aliaksandr Valialkin --- README.md | 2 +- .../Configurator/Query/StepConfigurator.tsx | 30 +++++++++++++++++-- app/vmui/packages/vmui/src/index.css | 6 ++++ .../packages/vmui/src/state/graph/reducer.ts | 4 ++- docs/README.md | 2 +- docs/Single-server-VictoriaMetrics.md | 2 +- 6 files changed, 40 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c6d50f01b..b5ffac1c5 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 727a4140b..7edde9d31 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 01b13f867..7c7144602 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 a4c89db3f..7b3d8d5c1 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 9c9d3c299..489e73c3f 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 449ede768..c801869b1 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.