fix: implemented the filter retention across view switch in explorer pages

This commit is contained in:
SagarRajput-7 2025-06-26 15:01:29 +05:30
parent 137a3f6d27
commit 5575334893
3 changed files with 118 additions and 27 deletions

View File

@ -244,6 +244,15 @@ function HavingFilter({
return null;
}
// Hide suggestions while typing a value after an operator
if (
!text.endsWith(' ') &&
tokens.length >= 2 &&
havingOperators.some((op) => op.value === tokens[tokens.length - 2])
) {
return null;
}
// Suggest key/operator pairs and ( for grouping
if (
tokens.length === 0 ||

View File

@ -32,6 +32,7 @@ import { usePreferenceContext } from 'providers/preferences/context/PreferenceCo
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom-v5-compat';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
import { DataSource } from 'types/common/queryBuilder';
import {
getExplorerViewForPanelType,
@ -82,6 +83,8 @@ function LogsExplorer(): JSX.Element {
handleRunQuery,
handleSetConfig,
updateAllQueriesOperators,
currentQuery,
updateQueriesData,
} = useQueryBuilder();
const { handleExplorerTabChange } = useHandleExplorerTabChange();
@ -94,6 +97,14 @@ function LogsExplorer(): JSX.Element {
const [shouldReset, setShouldReset] = useState(false);
const [defaultQuery, setDefaultQuery] = useState<Query>(() =>
updateAllQueriesOperators(
initialQueriesMap.logs,
PANEL_TYPES.LIST,
DataSource.LOGS,
),
);
const handleChangeSelectedView = useCallback(
(view: ExplorerViews): void => {
if (selectedView === ExplorerViews.LIST) {
@ -101,6 +112,30 @@ function LogsExplorer(): JSX.Element {
}
if (view === ExplorerViews.LIST) {
if (
selectedView !== ExplorerViews.LIST &&
currentQuery?.builder?.queryData?.[0]
) {
const filterToRetain = currentQuery.builder.queryData[0].filter;
const newDefaultQuery = updateAllQueriesOperators(
initialQueriesMap.logs,
PANEL_TYPES.LIST,
DataSource.LOGS,
);
const newListQuery = updateQueriesData(
newDefaultQuery,
'queryData',
(item, index) => {
if (index === 0) {
return { ...item, filter: filterToRetain };
}
return item;
},
);
setDefaultQuery(newListQuery);
}
setShouldReset(true);
}
@ -109,27 +144,34 @@ function LogsExplorer(): JSX.Element {
view === ExplorerViews.TIMESERIES ? PANEL_TYPES.TIME_SERIES : view,
);
},
[handleSetConfig, handleExplorerTabChange, selectedView],
);
const defaultListQuery = useMemo(
() =>
updateAllQueriesOperators(
initialQueriesMap.logs,
PANEL_TYPES.LIST,
DataSource.LOGS,
),
[updateAllQueriesOperators],
[
handleSetConfig,
handleExplorerTabChange,
selectedView,
currentQuery,
updateAllQueriesOperators,
updateQueriesData,
setSelectedView,
],
);
useShareBuilderUrl({
defaultValue: defaultListQuery,
defaultValue: defaultQuery,
forceReset: shouldReset,
});
useEffect(() => {
if (shouldReset) setShouldReset(false);
}, [shouldReset]);
if (shouldReset) {
setShouldReset(false);
setDefaultQuery(
updateAllQueriesOperators(
initialQueriesMap.logs,
PANEL_TYPES.LIST,
DataSource.LOGS,
),
);
}
}, [shouldReset, updateAllQueriesOperators]);
const handleFilterVisibilityChange = (): void => {
setLocalStorageApi(

View File

@ -51,6 +51,7 @@ function TracesExplorer(): JSX.Element {
handleRunQuery,
stagedQuery,
handleSetConfig,
updateQueriesData,
} = useQueryBuilder();
const { options } = useOptionsMenu({
@ -94,6 +95,14 @@ function TracesExplorer(): JSX.Element {
const [shouldReset, setShouldReset] = useState(false);
const [defaultQuery, setDefaultQuery] = useState<Query>(() =>
updateAllQueriesOperators(
initialQueriesMap.traces,
PANEL_TYPES.LIST,
DataSource.TRACES,
),
);
const handleChangeSelectedView = useCallback(
(view: ExplorerViews): void => {
if (selectedView === ExplorerViews.LIST) {
@ -101,6 +110,30 @@ function TracesExplorer(): JSX.Element {
}
if (view === ExplorerViews.LIST) {
if (
selectedView !== ExplorerViews.LIST &&
currentQuery?.builder?.queryData?.[0]
) {
const filterToRetain = currentQuery.builder.queryData[0].filter;
const newDefaultQuery = updateAllQueriesOperators(
initialQueriesMap.traces,
PANEL_TYPES.LIST,
DataSource.TRACES,
);
const newListQuery = updateQueriesData(
newDefaultQuery,
'queryData',
(item, index) => {
if (index === 0) {
return { ...item, filter: filterToRetain };
}
return item;
},
);
setDefaultQuery(newListQuery);
}
setShouldReset(true);
}
@ -109,7 +142,15 @@ function TracesExplorer(): JSX.Element {
view === ExplorerViews.TIMESERIES ? PANEL_TYPES.TIME_SERIES : view,
);
},
[handleSetConfig, handleExplorerTabChange, selectedView],
[
handleSetConfig,
handleExplorerTabChange,
selectedView,
currentQuery,
updateAllQueriesOperators,
updateQueriesData,
setSelectedView,
],
);
const listQuery = useMemo(() => {
@ -118,16 +159,6 @@ function TracesExplorer(): JSX.Element {
return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
}, [stagedQuery]);
const defaultQuery = useMemo(
() =>
updateAllQueriesOperators(
initialQueriesMap.traces,
PANEL_TYPES.LIST,
DataSource.TRACES,
),
[updateAllQueriesOperators],
);
const exportDefaultQuery = useMemo(
() =>
updateAllQueriesOperators(
@ -186,8 +217,17 @@ function TracesExplorer(): JSX.Element {
useShareBuilderUrl({ defaultValue: defaultQuery, forceReset: shouldReset });
useEffect(() => {
if (shouldReset) setShouldReset(false);
}, [shouldReset]);
if (shouldReset) {
setShouldReset(false);
setDefaultQuery(
updateAllQueriesOperators(
initialQueriesMap.traces,
PANEL_TYPES.LIST,
DataSource.TRACES,
),
);
}
}, [shouldReset, updateAllQueriesOperators]);
const [isOpen, setOpen] = useState<boolean>(true);
const logEventCalledRef = useRef(false);