github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2025-02-09 15:27:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

vmui: fix relative time and query params (#2716)

Browse source 
* fix: correct update query params

* fix: change select relative time
This commit is contained in:
Yury Molodov 2022-06-13 09:32:09 +03:00 committed by GitHub
parent 55a0d34be5
commit 7979e5cd26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryConfigurator.tsx
View file

@ -1,4 +1,4 @@
import React, {FC, useEffect, useRef} from "preact/compat"; import React, {FC, useState} from "preact/compat";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
@ -18,15 +18,12 @@ export interface QueryConfiguratorProps {
const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) => { const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) => {
const {query, queryHistory, queryControls: {autocomplete}} = useAppState(); const {query, queryHistory, queryControls: {autocomplete}} = useAppState();
const [stateQuery, setStateQuery] = useState(query || []);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const queryRef = useRef(query);
useEffect(() => {
queryRef.current = query;
}, [query]);
const updateHistory = () => { const updateHistory = () => {
dispatch({ dispatch({
type: "SET_QUERY_HISTORY", payload: query.map((q, i) => { type: "SET_QUERY_HISTORY", payload: stateQuery.map((q, i) => {
const h = queryHistory[i] || {values: []}; const h = queryHistory[i] || {values: []};
const queryEqual = q === h.values[h.values.length - 1]; const queryEqual = q === h.values[h.values.length - 1];
return { return {
@ -39,22 +36,20 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
const onRunQuery = () => { const onRunQuery = () => {
updateHistory(); updateHistory();
dispatch({type: "SET_QUERY", payload: query}); dispatch({type: "SET_QUERY", payload: stateQuery});
dispatch({type: "RUN_QUERY"}); dispatch({type: "RUN_QUERY"});
}; };
const onAddQuery = () => dispatch({type: "SET_QUERY", payload: [...queryRef.current, ""]}); const onAddQuery = () => {
setStateQuery(prev => [...prev, ""]);
};
const onRemoveQuery = (index: number) => { const onRemoveQuery = (index: number) => {
const newQuery = [...queryRef.current]; setStateQuery(prev => prev.filter((q, i) => i !== index));
newQuery.splice(index, 1);
dispatch({type: "SET_QUERY", payload: newQuery});
}; };
const onSetQuery = (value: string, index: number) => { const onSetQuery = (value: string, index: number) => {
const newQuery = [...queryRef.current]; setStateQuery(prev => prev.map((q, i) => i === index ? value : q));
newQuery[index] = value;
dispatch({type: "SET_QUERY", payload: newQuery});
}; };
const setHistoryIndex = (step: number, indexQuery: number) => { const setHistoryIndex = (step: number, indexQuery: number) => {
@ -69,11 +64,11 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
}; };
return <Box boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" p={4} pb={2} m={-4} mb={2}> return <Box boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" p={4} pb={2} m={-4} mb={2}>
<Box> <Box>
{query.map((q, i) => {stateQuery.map((q, i) =>
<Box key={i} display="grid" gridTemplateColumns="1fr auto auto" gap="4px" width="100%" <Box key={i} display="grid" gridTemplateColumns="1fr auto auto" gap="4px" width="100%"
mb={i === query.length - 1 ? 0 : 2.5}> mb={i === stateQuery.length - 1 ? 0 : 2.5}>
<QueryEditor <QueryEditor
query={query[i]} index={i} autocomplete={autocomplete} queryOptions={queryOptions} query={stateQuery[i]} index={i} autocomplete={autocomplete} queryOptions={queryOptions}
error={error} setHistoryIndex={setHistoryIndex} runQuery={onRunQuery} setQuery={onSetQuery} error={error} setHistoryIndex={setHistoryIndex} runQuery={onRunQuery} setQuery={onSetQuery}
label={`Query ${i + 1}`}/> label={`Query ${i + 1}`}/>
{i === 0 && <Tooltip title="Execute Query"> {i === 0 && <Tooltip title="Execute Query">
@ -81,7 +76,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
<PlayCircleOutlineIcon/> <PlayCircleOutlineIcon/>
</IconButton> </IconButton>
</Tooltip>} </Tooltip>}
{query.length < 2 && <Tooltip title="Add Query"> {stateQuery.length < 2 && <Tooltip title="Add Query">
<IconButton onClick={onAddQuery} sx={{height: "49px", width: "49px"}}> <IconButton onClick={onAddQuery} sx={{height: "49px", width: "49px"}}>
<AddCircleOutlineIcon/> <AddCircleOutlineIcon/>
</IconButton> </IconButton>

1
app/vmui/packages/vmui/src/state/common/reducer.ts
View file

@ -125,6 +125,7 @@ export function reducer(state: AppState, action: Action): AppState {
...state, ...state,
time: { time: {
...state.time, ...state.time,
duration: action.payload.duration,
period: getTimeperiodForDuration(action.payload.duration, new Date(action.payload.until)), period: getTimeperiodForDuration(action.payload.duration, new Date(action.payload.until)),
relativeTime: action.payload.id, relativeTime: action.payload.id,
} }

4
app/vmui/packages/vmui/src/utils/query-string.ts
View file

@ -52,9 +52,9 @@ export const setQueryStringWithoutPageReload = (qsValue: string): void => {
export const setQueryStringValue = (newValue: Record<string, unknown>): void => { export const setQueryStringValue = (newValue: Record<string, unknown>): void => {
const route = window.location.hash.replace("#", ""); const route = window.location.hash.replace("#", "");
const params = stateToUrlParams[route] || {}; const params = stateToUrlParams[route] || graphStateToUrlParams;
const queryMap = new Map(Object.entries(params)); const queryMap = new Map(Object.entries(params));
const isGraphRoute = route === router.home || route === router.dashboards; const isGraphRoute = route === router.home || route === router.dashboards || !route;
const newQsValue = isGraphRoute ? getGraphQsValue(newValue, queryMap) : getQsValue(newValue, queryMap); const newQsValue = isGraphRoute ? getGraphQsValue(newValue, queryMap) : getQsValue(newValue, queryMap);
setQueryStringWithoutPageReload(newQsValue.join("&")); setQueryStringWithoutPageReload(newQsValue.join("&"));
}; };