github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-21 14:44:00 +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 IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
@ -18,15 +18,12 @@ export interface QueryConfiguratorProps {
const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) => {
const {query, queryHistory, queryControls: {autocomplete}} = useAppState();
const [stateQuery, setStateQuery] = useState(query || []);
const dispatch = useAppDispatch();
const queryRef = useRef(query);
useEffect(() => {
queryRef.current = query;
}, [query]);
const updateHistory = () => {
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 queryEqual = q === h.values[h.values.length - 1];
return {
@ -39,22 +36,20 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
const onRunQuery = () => {
updateHistory();
dispatch({type: "SET_QUERY", payload: query});
dispatch({type: "SET_QUERY", payload: stateQuery});
dispatch({type: "RUN_QUERY"});
};
const onAddQuery = () => dispatch({type: "SET_QUERY", payload: [...queryRef.current, ""]});
const onAddQuery = () => {
setStateQuery(prev => [...prev, ""]);
};
const onRemoveQuery = (index: number) => {
const newQuery = [...queryRef.current];
newQuery.splice(index, 1);
dispatch({type: "SET_QUERY", payload: newQuery});
setStateQuery(prev => prev.filter((q, i) => i !== index));
};
const onSetQuery = (value: string, index: number) => {
const newQuery = [...queryRef.current];
newQuery[index] = value;
dispatch({type: "SET_QUERY", payload: newQuery});
setStateQuery(prev => prev.map((q, i) => i === index ? value : q));
};
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}>
<Box>
{query.map((q, i) =>
{stateQuery.map((q, i) =>
<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
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}
label={`Query ${i + 1}`}/>
{i === 0 && <Tooltip title="Execute Query">
@ -81,7 +76,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
<PlayCircleOutlineIcon/>
</IconButton>
</Tooltip>}
{query.length < 2 && <Tooltip title="Add Query">
{stateQuery.length < 2 && <Tooltip title="Add Query">
<IconButton onClick={onAddQuery} sx={{height: "49px", width: "49px"}}>
<AddCircleOutlineIcon/>
</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,
time: {
...state.time,
duration: action.payload.duration,
period: getTimeperiodForDuration(action.payload.duration, new Date(action.payload.until)),
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 => {
const route = window.location.hash.replace("#", "");
const params = stateToUrlParams[route] || {};
const params = stateToUrlParams[route] || graphStateToUrlParams;
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);
setQueryStringWithoutPageReload(newQsValue.join("&"));
};