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 GitHub
parent 383bf9689e
commit fc720a5a78
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 { 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();
};

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

@ -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<string, string>);
};
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 { 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<string, unknown> = {};
@ -29,7 +30,7 @@ export const useSetQueryParams = () => {
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]);

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

@ -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]);

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

@ -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]);

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

@ -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]);

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 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<Trace[]>([]);
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 = () => (

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 { 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 = (
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);