mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-16 08:55:54 +08:00
fix: clear query builder staged query (#3479)
This commit is contained in:
parent
89e8fb715c
commit
8e6a7f13a1
@ -17,7 +17,7 @@ import { constructCompositeQuery } from '../constants';
|
|||||||
function BackButton(): JSX.Element {
|
function BackButton(): JSX.Element {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
|
||||||
const { updateAllQueriesOperators, resetQuery } = useQueryBuilder();
|
const { updateAllQueriesOperators } = useQueryBuilder();
|
||||||
|
|
||||||
const compositeQuery = useGetCompositeQueryParam();
|
const compositeQuery = useGetCompositeQueryParam();
|
||||||
|
|
||||||
@ -36,14 +36,12 @@ function BackButton(): JSX.Element {
|
|||||||
DataSource.LOGS,
|
DataSource.LOGS,
|
||||||
);
|
);
|
||||||
|
|
||||||
resetQuery(updatedQuery);
|
|
||||||
|
|
||||||
const JSONCompositeQuery = encodeURIComponent(JSON.stringify(updatedQuery));
|
const JSONCompositeQuery = encodeURIComponent(JSON.stringify(updatedQuery));
|
||||||
|
|
||||||
const path = `${ROUTES.LOGS_EXPLORER}?${queryParamNamesMap.compositeQuery}=${JSONCompositeQuery}`;
|
const path = `${ROUTES.LOGS_EXPLORER}?${queryParamNamesMap.compositeQuery}=${JSONCompositeQuery}`;
|
||||||
|
|
||||||
history.push(path);
|
history.push(path);
|
||||||
}, [history, compositeQuery, resetQuery, updateAllQueriesOperators]);
|
}, [history, compositeQuery, updateAllQueriesOperators]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button icon={<ArrowLeftOutlined />} onClick={handleBack}>
|
<Button icon={<ArrowLeftOutlined />} onClick={handleBack}>
|
||||||
|
@ -17,5 +17,5 @@ export const useShareBuilderUrl = (defaultQuery: Query): void => {
|
|||||||
if (!compositeQuery) {
|
if (!compositeQuery) {
|
||||||
redirectWithQueryBuilderData(defaultQuery);
|
redirectWithQueryBuilderData(defaultQuery);
|
||||||
}
|
}
|
||||||
}, [defaultQuery, urlQuery, redirectWithQueryBuilderData, compositeQuery]);
|
}, [defaultQuery, urlQuery, compositeQuery, redirectWithQueryBuilderData]);
|
||||||
};
|
};
|
||||||
|
@ -27,6 +27,7 @@ import {
|
|||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
@ -67,7 +68,6 @@ export const QueryBuilderContext = createContext<QueryBuilderContextType>({
|
|||||||
addNewQueryItem: () => {},
|
addNewQueryItem: () => {},
|
||||||
redirectWithQueryBuilderData: () => {},
|
redirectWithQueryBuilderData: () => {},
|
||||||
handleRunQuery: () => {},
|
handleRunQuery: () => {},
|
||||||
resetQuery: () => {},
|
|
||||||
updateAllQueriesOperators: () => initialQueriesMap.metrics,
|
updateAllQueriesOperators: () => initialQueriesMap.metrics,
|
||||||
updateQueriesData: () => initialQueriesMap.metrics,
|
updateQueriesData: () => initialQueriesMap.metrics,
|
||||||
initQueryBuilderData: () => {},
|
initQueryBuilderData: () => {},
|
||||||
@ -80,6 +80,8 @@ export function QueryBuilderProvider({
|
|||||||
const urlQuery = useUrlQuery();
|
const urlQuery = useUrlQuery();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
const currentPathnameRef = useRef<string | null>(null);
|
||||||
|
|
||||||
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
|
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
|
||||||
(state) => state.globalTime,
|
(state) => state.globalTime,
|
||||||
);
|
);
|
||||||
@ -94,9 +96,7 @@ export function QueryBuilderProvider({
|
|||||||
|
|
||||||
const [panelType, setPanelType] = useState<PANEL_TYPES | null>(null);
|
const [panelType, setPanelType] = useState<PANEL_TYPES | null>(null);
|
||||||
|
|
||||||
const [currentQuery, setCurrentQuery] = useState<QueryState>(
|
const [currentQuery, setCurrentQuery] = useState<QueryState>(queryState);
|
||||||
queryState || initialQueryState,
|
|
||||||
);
|
|
||||||
const [stagedQuery, setStagedQuery] = useState<Query | null>(null);
|
const [stagedQuery, setStagedQuery] = useState<Query | null>(null);
|
||||||
|
|
||||||
const [queryType, setQueryType] = useState<EQueryType>(queryTypeParam);
|
const [queryType, setQueryType] = useState<EQueryType>(queryTypeParam);
|
||||||
@ -526,14 +526,6 @@ export function QueryBuilderProvider({
|
|||||||
});
|
});
|
||||||
}, [currentQuery, queryType, maxTime, minTime, redirectWithQueryBuilderData]);
|
}, [currentQuery, queryType, maxTime, minTime, redirectWithQueryBuilderData]);
|
||||||
|
|
||||||
const resetQuery = useCallback((newCurrentQuery?: QueryState) => {
|
|
||||||
setStagedQuery(null);
|
|
||||||
|
|
||||||
if (newCurrentQuery) {
|
|
||||||
setCurrentQuery(newCurrentQuery);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!compositeQueryParam) return;
|
if (!compositeQueryParam) return;
|
||||||
|
|
||||||
@ -558,6 +550,14 @@ export function QueryBuilderProvider({
|
|||||||
stagedQuery,
|
stagedQuery,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (stagedQuery && location.pathname !== currentPathnameRef.current) {
|
||||||
|
currentPathnameRef.current = location.pathname;
|
||||||
|
|
||||||
|
setStagedQuery(null);
|
||||||
|
}
|
||||||
|
}, [location, stagedQuery, currentQuery]);
|
||||||
|
|
||||||
const handleOnUnitsChange = useCallback(
|
const handleOnUnitsChange = useCallback(
|
||||||
(unit: string) => {
|
(unit: string) => {
|
||||||
setCurrentQuery((prevState) => ({
|
setCurrentQuery((prevState) => ({
|
||||||
@ -599,7 +599,6 @@ export function QueryBuilderProvider({
|
|||||||
addNewQueryItem,
|
addNewQueryItem,
|
||||||
redirectWithQueryBuilderData,
|
redirectWithQueryBuilderData,
|
||||||
handleRunQuery,
|
handleRunQuery,
|
||||||
resetQuery,
|
|
||||||
updateAllQueriesOperators,
|
updateAllQueriesOperators,
|
||||||
updateQueriesData,
|
updateQueriesData,
|
||||||
initQueryBuilderData,
|
initQueryBuilderData,
|
||||||
@ -622,7 +621,6 @@ export function QueryBuilderProvider({
|
|||||||
addNewQueryItem,
|
addNewQueryItem,
|
||||||
redirectWithQueryBuilderData,
|
redirectWithQueryBuilderData,
|
||||||
handleRunQuery,
|
handleRunQuery,
|
||||||
resetQuery,
|
|
||||||
updateAllQueriesOperators,
|
updateAllQueriesOperators,
|
||||||
updateQueriesData,
|
updateQueriesData,
|
||||||
initQueryBuilderData,
|
initQueryBuilderData,
|
||||||
|
@ -6,7 +6,6 @@ import {
|
|||||||
IClickHouseQuery,
|
IClickHouseQuery,
|
||||||
IPromQLQuery,
|
IPromQLQuery,
|
||||||
Query,
|
Query,
|
||||||
QueryState,
|
|
||||||
} from 'types/api/queryBuilder/queryBuilderData';
|
} from 'types/api/queryBuilder/queryBuilderData';
|
||||||
|
|
||||||
import { EQueryType } from './dashboard';
|
import { EQueryType } from './dashboard';
|
||||||
@ -189,7 +188,6 @@ export type QueryBuilderContextType = {
|
|||||||
) => void;
|
) => void;
|
||||||
handleRunQuery: () => void;
|
handleRunQuery: () => void;
|
||||||
handleOnUnitsChange: (units: Format['id']) => void;
|
handleOnUnitsChange: (units: Format['id']) => void;
|
||||||
resetQuery: (newCurrentQuery?: QueryState) => void;
|
|
||||||
updateAllQueriesOperators: (
|
updateAllQueriesOperators: (
|
||||||
queryData: Query,
|
queryData: Query,
|
||||||
panelType: PANEL_TYPES,
|
panelType: PANEL_TYPES,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user