From ecdbcb16ed8fbf3b2383306ac3fd90134a172199 Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Thu, 23 Feb 2023 03:25:32 +0100 Subject: [PATCH] fix: change query params update (#3860) --- .../vmui/src/components/Layout/Header/Header.tsx | 6 ++---- .../CardinalityPanel/hooks/useSetQueryParams.ts | 5 +++-- .../pages/CustomPanel/hooks/useSetQueryParams.ts | 5 +++-- .../ExploreMetrics/hooks/useSetQueryParams.ts | 5 +++-- .../PredefinedPanels/hooks/useSetQueryParams.ts | 5 +++-- .../pages/TopQueries/hooks/useSetQueryParams.ts | 5 +++-- .../packages/vmui/src/pages/TracePage/index.tsx | 5 +++-- app/vmui/packages/vmui/src/utils/query-string.ts | 15 +++------------ 8 files changed, 23 insertions(+), 28 deletions(-) diff --git a/app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx b/app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx index 623eba300..24e6a72bf 100644 --- a/app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx +++ b/app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx @@ -1,6 +1,5 @@ import React, { FC, useMemo } from "preact/compat"; import { ExecutionControls } from "../../Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls"; -import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; import { TimeSelector } from "../../Configurators/TimeRangeSettings/TimeSelector/TimeSelector"; import GlobalSettings from "../../Configurators/GlobalSettings/GlobalSettings"; import { useLocation, useNavigate } from "react-router-dom"; @@ -43,15 +42,14 @@ const Header: FC = () => { }, [primaryColor]); const navigate = useNavigate(); - const { search, pathname } = useLocation(); + const { pathname } = useLocation(); const headerSetup = useMemo(() => { return ((routerOptions[pathname] || {}) as RouterOptions).header || {}; }, [pathname]); const onClickLogo = () => { - navigate({ pathname: router.home, search: search }); - setQueryStringWithoutPageReload({}); + navigate({ pathname: router.home }); window.location.reload(); }; diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useSetQueryParams.ts b/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useSetQueryParams.ts index 1d69d56f0..abcdf5354 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useSetQueryParams.ts +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useSetQueryParams.ts @@ -1,10 +1,11 @@ import { useEffect } from "react"; import { useCardinalityState } from "../../../state/cardinality/CardinalityStateContext"; import { compactObject } from "../../../utils/object"; -import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; +import { useSearchParams } from "react-router-dom"; export const useSetQueryParams = () => { const { topN, match, date, focusLabel, extraLabel } = useCardinalityState(); + const [, setSearchParams] = useSearchParams(); const setSearchParamsFromState = () => { const params = compactObject({ @@ -15,7 +16,7 @@ export const useSetQueryParams = () => { focusLabel, }); - setQueryStringWithoutPageReload(params); + setSearchParams(params as Record); }; useEffect(setSearchParamsFromState, [topN, match, date, focusLabel, extraLabel]); diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/hooks/useSetQueryParams.ts b/app/vmui/packages/vmui/src/pages/CustomPanel/hooks/useSetQueryParams.ts index 8c51aad28..0b3f22feb 100644 --- a/app/vmui/packages/vmui/src/pages/CustomPanel/hooks/useSetQueryParams.ts +++ b/app/vmui/packages/vmui/src/pages/CustomPanel/hooks/useSetQueryParams.ts @@ -4,9 +4,9 @@ import { useCustomPanelState } from "../../../state/customPanel/CustomPanelState import { useAppState } from "../../../state/common/StateContext"; import { useQueryState } from "../../../state/query/QueryStateContext"; import { displayTypeTabs } from "../DisplayTypeSwitch"; -import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; import { compactObject } from "../../../utils/object"; import { useGraphState } from "../../../state/graph/GraphStateContext"; +import { useSearchParams } from "react-router-dom"; export const useSetQueryParams = () => { const { tenantId } = useAppState(); @@ -14,6 +14,7 @@ export const useSetQueryParams = () => { const { query } = useQueryState(); const { duration, relativeTime, period: { date, step } } = useTimeState(); const { customStep } = useGraphState(); + const [, setSearchParams] = useSearchParams(); const setSearchParamsFromState = () => { const params: Record = {}; @@ -29,7 +30,7 @@ export const useSetQueryParams = () => { if ((step !== customStep) && customStep) params[`${group}.step_input`] = customStep; }); - setQueryStringWithoutPageReload(compactObject(params)); + setSearchParams(compactObject(params) as Record); }; useEffect(setSearchParamsFromState, [tenantId, displayType, query, duration, relativeTime, date, step, customStep]); diff --git a/app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useSetQueryParams.ts b/app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useSetQueryParams.ts index c0fe6d70b..cea591cc5 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useSetQueryParams.ts +++ b/app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useSetQueryParams.ts @@ -1,8 +1,8 @@ import { useEffect } from "react"; import { compactObject } from "../../../utils/object"; import { useTimeState } from "../../../state/time/TimeStateContext"; -import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; import { useGraphState } from "../../../state/graph/GraphStateContext"; +import { useSearchParams } from "react-router-dom"; interface queryProps { job: string @@ -14,6 +14,7 @@ interface queryProps { export const useSetQueryParams = ({ job, instance, metrics, size }: queryProps) => { const { duration, relativeTime, period: { date } } = useTimeState(); const { customStep } = useGraphState(); + const [, setSearchParams] = useSearchParams(); const setSearchParamsFromState = () => { const params = compactObject({ @@ -27,7 +28,7 @@ export const useSetQueryParams = ({ job, instance, metrics, size }: queryProps) metrics }); - setQueryStringWithoutPageReload(params); + setSearchParams(params); }; useEffect(setSearchParamsFromState, [duration, relativeTime, date, customStep, job, instance, metrics, size]); diff --git a/app/vmui/packages/vmui/src/pages/PredefinedPanels/hooks/useSetQueryParams.ts b/app/vmui/packages/vmui/src/pages/PredefinedPanels/hooks/useSetQueryParams.ts index da901be97..4ee814cc4 100644 --- a/app/vmui/packages/vmui/src/pages/PredefinedPanels/hooks/useSetQueryParams.ts +++ b/app/vmui/packages/vmui/src/pages/PredefinedPanels/hooks/useSetQueryParams.ts @@ -1,12 +1,13 @@ import { useEffect } from "react"; import { compactObject } from "../../../utils/object"; import { useTimeState } from "../../../state/time/TimeStateContext"; -import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; import { useGraphState } from "../../../state/graph/GraphStateContext"; +import { useSearchParams } from "react-router-dom"; export const useSetQueryParams = () => { const { duration, relativeTime, period: { date } } = useTimeState(); const { customStep } = useGraphState(); + const [, setSearchParams] = useSearchParams(); const setSearchParamsFromState = () => { const params = compactObject({ @@ -16,7 +17,7 @@ export const useSetQueryParams = () => { ["g0.relative_time"]: relativeTime }); - setQueryStringWithoutPageReload(params); + setSearchParams(params); }; useEffect(setSearchParamsFromState, [duration, relativeTime, date, customStep]); diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useSetQueryParams.ts b/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useSetQueryParams.ts index 712d03273..87c52d20b 100644 --- a/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useSetQueryParams.ts +++ b/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useSetQueryParams.ts @@ -1,10 +1,11 @@ import { useTopQueriesState } from "../../../state/topQueries/TopQueriesStateContext"; import { useEffect } from "react"; import { compactObject } from "../../../utils/object"; -import { setQueryStringWithoutPageReload } from "../../../utils/query-string"; +import { useSearchParams } from "react-router-dom"; export const useSetQueryParams = () => { const { topN, maxLifetime } = useTopQueriesState(); + const [, setSearchParams] = useSearchParams(); const setSearchParamsFromState = () => { const params = compactObject({ @@ -12,7 +13,7 @@ export const useSetQueryParams = () => { maxLifetime: maxLifetime, }); - setQueryStringWithoutPageReload(params); + setSearchParams(params); }; useEffect(setSearchParamsFromState, [topN, maxLifetime]); diff --git a/app/vmui/packages/vmui/src/pages/TracePage/index.tsx b/app/vmui/packages/vmui/src/pages/TracePage/index.tsx index 498fccea6..b8307fa23 100644 --- a/app/vmui/packages/vmui/src/pages/TracePage/index.tsx +++ b/app/vmui/packages/vmui/src/pages/TracePage/index.tsx @@ -10,13 +10,14 @@ import { CloseIcon } from "../../components/Main/Icons"; import Modal from "../../components/Main/Modal/Modal"; import JsonForm from "./JsonForm/JsonForm"; import { ErrorTypes } from "../../types"; -import { setQueryStringWithoutPageReload } from "../../utils/query-string"; +import { useSearchParams } from "react-router-dom"; const TracePage: FC = () => { const [openModal, setOpenModal] = useState(false); const [tracesState, setTracesState] = useState([]); const [errors, setErrors] = useState<{filename: string, text: string}[]>([]); const hasTraces = useMemo(() => !!tracesState.length, [tracesState]); + const [, setSearchParams] = useSearchParams(); const handleOpenModal = () => { setOpenModal(true); @@ -74,7 +75,7 @@ const TracePage: FC = () => { }; useEffect(() => { - setQueryStringWithoutPageReload({}); + setSearchParams({}); }, []); const UploadButtons = () => ( diff --git a/app/vmui/packages/vmui/src/utils/query-string.ts b/app/vmui/packages/vmui/src/utils/query-string.ts index 576a7be47..6a99e50da 100644 --- a/app/vmui/packages/vmui/src/utils/query-string.ts +++ b/app/vmui/packages/vmui/src/utils/query-string.ts @@ -2,27 +2,18 @@ import qs from "qs"; import get from "lodash.get"; import { MAX_QUERY_FIELDS } from "../constants/graph"; -export const setQueryStringWithoutPageReload = (params: Record): 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 = ( key: string, defaultValue?: unknown, - queryString = window.location.search ): unknown => { + const queryString = window.location.hash.split("?")[1]; const values = qs.parse(queryString, { ignoreQueryPrefix: true }); return get(values, key, defaultValue || ""); }; 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) .fill(1) .map((q, i) => getQueryStringValue(`g${i}.expr`, "") as string);