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

fix: change query params update (#3860)

Browse source
This commit is contained in:
Yury Molodov 2023-02-23 03:25:32 +01:00 committed by Aliaksandr Valialkin
parent 66764ea4a0
commit ecdbcb16ed
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
8 changed files with 23 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx
View file

@ -1,6 +1,5 @@
import React, { FC, useMemo } from "preact/compat"; import React, { FC, useMemo } from "preact/compat";
import { ExecutionControls } from "../../Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls"; import { ExecutionControls } from "../../Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls";
import { setQueryStringWithoutPageReload } from "../../../utils/query-string";
import { TimeSelector } from "../../Configurators/TimeRangeSettings/TimeSelector/TimeSelector"; import { TimeSelector } from "../../Configurators/TimeRangeSettings/TimeSelector/TimeSelector";
import GlobalSettings from "../../Configurators/GlobalSettings/GlobalSettings"; import GlobalSettings from "../../Configurators/GlobalSettings/GlobalSettings";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
@ -43,15 +42,14 @@ const Header: FC = () => {
}, [primaryColor]); }, [primaryColor]);
const navigate = useNavigate(); const navigate = useNavigate();
const { search, pathname } = useLocation(); const { pathname } = useLocation();
const headerSetup = useMemo(() => { const headerSetup = useMemo(() => {
return ((routerOptions[pathname] || {}) as RouterOptions).header || {}; return ((routerOptions[pathname] || {}) as RouterOptions).header || {};
}, [pathname]); }, [pathname]);
const onClickLogo = () => { const onClickLogo = () => {
navigate({ pathname: router.home, search: search }); navigate({ pathname: router.home });
setQueryStringWithoutPageReload({});
window.location.reload(); window.location.reload();
}; };

5
app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useSetQueryParams.ts
View file

@ -1,10 +1,11 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useCardinalityState } from "../../../state/cardinality/CardinalityStateContext"; import { useCardinalityState } from "../../../state/cardinality/CardinalityStateContext";
import { compactObject } from "../../../utils/object"; import { compactObject } from "../../../utils/object";
import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; import { useSearchParams } from "react-router-dom";
export const useSetQueryParams = () => { export const useSetQueryParams = () => {
const { topN, match, date, focusLabel, extraLabel } = useCardinalityState(); const { topN, match, date, focusLabel, extraLabel } = useCardinalityState();
const [, setSearchParams] = useSearchParams();
const setSearchParamsFromState = () => { const setSearchParamsFromState = () => {
const params = compactObject({ const params = compactObject({
@ -15,7 +16,7 @@ export const useSetQueryParams = () => {
focusLabel, focusLabel,
}); });
setQueryStringWithoutPageReload(params); setSearchParams(params as Record<string, string>);
}; };
useEffect(setSearchParamsFromState, [topN, match, date, focusLabel, extraLabel]); useEffect(setSearchParamsFromState, [topN, match, date, focusLabel, extraLabel]);

5
app/vmui/packages/vmui/src/pages/CustomPanel/hooks/useSetQueryParams.ts
View file

@ -4,9 +4,9 @@ import { useCustomPanelState } from "../../../state/customPanel/CustomPanelState
import { useAppState } from "../../../state/common/StateContext"; import { useAppState } from "../../../state/common/StateContext";
import { useQueryState } from "../../../state/query/QueryStateContext"; import { useQueryState } from "../../../state/query/QueryStateContext";
import { displayTypeTabs } from "../DisplayTypeSwitch"; import { displayTypeTabs } from "../DisplayTypeSwitch";
import { setQueryStringWithoutPageReload } from "../../../utils/query-string";
import { compactObject } from "../../../utils/object"; import { compactObject } from "../../../utils/object";
import { useGraphState } from "../../../state/graph/GraphStateContext"; import { useGraphState } from "../../../state/graph/GraphStateContext";
import { useSearchParams } from "react-router-dom";
export const useSetQueryParams = () => { export const useSetQueryParams = () => {
const { tenantId } = useAppState(); const { tenantId } = useAppState();
@ -14,6 +14,7 @@ export const useSetQueryParams = () => {
const { query } = useQueryState(); const { query } = useQueryState();
const { duration, relativeTime, period: { date, step } } = useTimeState(); const { duration, relativeTime, period: { date, step } } = useTimeState();
const { customStep } = useGraphState(); const { customStep } = useGraphState();
const [, setSearchParams] = useSearchParams();
const setSearchParamsFromState = () => { const setSearchParamsFromState = () => {
const params: Record<string, unknown> = {}; const params: Record<string, unknown> = {};
@ -29,7 +30,7 @@ export const useSetQueryParams = () => {
if ((step !== customStep) && customStep) params[`${group}.step_input`] = customStep; if ((step !== customStep) && customStep) params[`${group}.step_input`] = customStep;
}); });
setQueryStringWithoutPageReload(compactObject(params)); setSearchParams(compactObject(params) as Record<string, string>);
}; };
useEffect(setSearchParamsFromState, [tenantId, displayType, query, duration, relativeTime, date, step, customStep]); useEffect(setSearchParamsFromState, [tenantId, displayType, query, duration, relativeTime, date, step, customStep]);

5
app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useSetQueryParams.ts
View file

@ -1,8 +1,8 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { compactObject } from "../../../utils/object"; import { compactObject } from "../../../utils/object";
import { useTimeState } from "../../../state/time/TimeStateContext"; import { useTimeState } from "../../../state/time/TimeStateContext";
import { setQueryStringWithoutPageReload } from "../../../utils/query-string";
import { useGraphState } from "../../../state/graph/GraphStateContext"; import { useGraphState } from "../../../state/graph/GraphStateContext";
import { useSearchParams } from "react-router-dom";
interface queryProps { interface queryProps {
job: string job: string
@ -14,6 +14,7 @@ interface queryProps {
export const useSetQueryParams = ({ job, instance, metrics, size }: queryProps) => { export const useSetQueryParams = ({ job, instance, metrics, size }: queryProps) => {
const { duration, relativeTime, period: { date } } = useTimeState(); const { duration, relativeTime, period: { date } } = useTimeState();
const { customStep } = useGraphState(); const { customStep } = useGraphState();
const [, setSearchParams] = useSearchParams();
const setSearchParamsFromState = () => { const setSearchParamsFromState = () => {
const params = compactObject({ const params = compactObject({
@ -27,7 +28,7 @@ export const useSetQueryParams = ({ job, instance, metrics, size }: queryProps)
metrics metrics
}); });
setQueryStringWithoutPageReload(params); setSearchParams(params);
}; };
useEffect(setSearchParamsFromState, [duration, relativeTime, date, customStep, job, instance, metrics, size]); useEffect(setSearchParamsFromState, [duration, relativeTime, date, customStep, job, instance, metrics, size]);

5
app/vmui/packages/vmui/src/pages/PredefinedPanels/hooks/useSetQueryParams.ts
View file

@ -1,12 +1,13 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { compactObject } from "../../../utils/object"; import { compactObject } from "../../../utils/object";
import { useTimeState } from "../../../state/time/TimeStateContext"; import { useTimeState } from "../../../state/time/TimeStateContext";
import { setQueryStringWithoutPageReload } from "../../../utils/query-string";
import { useGraphState } from "../../../state/graph/GraphStateContext"; import { useGraphState } from "../../../state/graph/GraphStateContext";
import { useSearchParams } from "react-router-dom";
export const useSetQueryParams = () => { export const useSetQueryParams = () => {
const { duration, relativeTime, period: { date } } = useTimeState(); const { duration, relativeTime, period: { date } } = useTimeState();
const { customStep } = useGraphState(); const { customStep } = useGraphState();
const [, setSearchParams] = useSearchParams();
const setSearchParamsFromState = () => { const setSearchParamsFromState = () => {
const params = compactObject({ const params = compactObject({
@ -16,7 +17,7 @@ export const useSetQueryParams = () => {
["g0.relative_time"]: relativeTime ["g0.relative_time"]: relativeTime
}); });
setQueryStringWithoutPageReload(params); setSearchParams(params);
}; };
useEffect(setSearchParamsFromState, [duration, relativeTime, date, customStep]); useEffect(setSearchParamsFromState, [duration, relativeTime, date, customStep]);

5
app/vmui/packages/vmui/src/pages/TopQueries/hooks/useSetQueryParams.ts
View file

@ -1,10 +1,11 @@
import { useTopQueriesState } from "../../../state/topQueries/TopQueriesStateContext"; import { useTopQueriesState } from "../../../state/topQueries/TopQueriesStateContext";
import { useEffect } from "react"; import { useEffect } from "react";
import { compactObject } from "../../../utils/object"; import { compactObject } from "../../../utils/object";
import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; import { useSearchParams } from "react-router-dom";
export const useSetQueryParams = () => { export const useSetQueryParams = () => {
const { topN, maxLifetime } = useTopQueriesState(); const { topN, maxLifetime } = useTopQueriesState();
const [, setSearchParams] = useSearchParams();
const setSearchParamsFromState = () => { const setSearchParamsFromState = () => {
const params = compactObject({ const params = compactObject({
@ -12,7 +13,7 @@ export const useSetQueryParams = () => {
maxLifetime: maxLifetime, maxLifetime: maxLifetime,
}); });
setQueryStringWithoutPageReload(params); setSearchParams(params);
}; };
useEffect(setSearchParamsFromState, [topN, maxLifetime]); useEffect(setSearchParamsFromState, [topN, maxLifetime]);

5
app/vmui/packages/vmui/src/pages/TracePage/index.tsx
View file

@ -10,13 +10,14 @@ import { CloseIcon } from "../../components/Main/Icons";
import Modal from "../../components/Main/Modal/Modal"; import Modal from "../../components/Main/Modal/Modal";
import JsonForm from "./JsonForm/JsonForm"; import JsonForm from "./JsonForm/JsonForm";
import { ErrorTypes } from "../../types"; import { ErrorTypes } from "../../types";
import { setQueryStringWithoutPageReload } from "../../utils/query-string"; import { useSearchParams } from "react-router-dom";
const TracePage: FC = () => { const TracePage: FC = () => {
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
const [tracesState, setTracesState] = useState<Trace[]>([]); const [tracesState, setTracesState] = useState<Trace[]>([]);
const [errors, setErrors] = useState<{filename: string, text: string}[]>([]); const [errors, setErrors] = useState<{filename: string, text: string}[]>([]);
const hasTraces = useMemo(() => !!tracesState.length, [tracesState]); const hasTraces = useMemo(() => !!tracesState.length, [tracesState]);
const [, setSearchParams] = useSearchParams();
const handleOpenModal = () => { const handleOpenModal = () => {
setOpenModal(true); setOpenModal(true);
@ -74,7 +75,7 @@ const TracePage: FC = () => {
}; };
useEffect(() => { useEffect(() => {
setQueryStringWithoutPageReload({}); setSearchParams({});
}, []); }, []);
const UploadButtons = () => ( const UploadButtons = () => (

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

@ -2,27 +2,18 @@ import qs from "qs";
import get from "lodash.get"; import get from "lodash.get";
import { MAX_QUERY_FIELDS } from "../constants/graph"; import { MAX_QUERY_FIELDS } from "../constants/graph";
export const setQueryStringWithoutPageReload = (params: Record<string, unknown>): void => {
const w = window;
if (w) {
const qsValue = Object.entries(params).map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`).join("&");
const qs = qsValue ? `?${qsValue}` : "";
const newurl = `${w.location.protocol}//${w.location.host}${w.location.pathname}${qs}${w.location.hash}`;
w.history.pushState({ path: newurl }, "", newurl);
}
};
export const getQueryStringValue = ( export const getQueryStringValue = (
key: string, key: string,
defaultValue?: unknown, defaultValue?: unknown,
queryString = window.location.search
): unknown => { ): unknown => {
const queryString = window.location.hash.split("?")[1];
const values = qs.parse(queryString, { ignoreQueryPrefix: true }); const values = qs.parse(queryString, { ignoreQueryPrefix: true });
return get(values, key, defaultValue || ""); return get(values, key, defaultValue || "");
}; };
export const getQueryArray = (): string[] => { export const getQueryArray = (): string[] => {
const queryLength = window.location.search.match(/g\d+\.expr/g)?.length || 1; const queryString = window.location.hash.split("?")[1] || "";
const queryLength = queryString.match(/g\d+\.expr/g)?.length || 1;
return new Array(queryLength > MAX_QUERY_FIELDS ? MAX_QUERY_FIELDS : queryLength) return new Array(queryLength > MAX_QUERY_FIELDS ? MAX_QUERY_FIELDS : queryLength)
.fill(1) .fill(1)
.map((q, i) => getQueryStringValue(`g${i}.expr`, "") as string); .map((q, i) => getQueryStringValue(`g${i}.expr`, "") as string);