diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts index d7ae2b010a..6460e094c0 100644 --- a/frontend/src/constants/localStorage.ts +++ b/frontend/src/constants/localStorage.ts @@ -6,5 +6,6 @@ export enum LOCALSTORAGE { THEME = 'THEME', LOGS_VIEW_MODE = 'LOGS_VIEW_MODE', LOGS_LINES_PER_ROW = 'LOGS_LINES_PER_ROW', - LIST_OPTIONS = 'LIST_OPTIONS', + LOGS_LIST_OPTIONS = 'LOGS_LIST_OPTIONS', + TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS', } diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx index b21e17437f..7cfaaf4bc2 100644 --- a/frontend/src/container/LogsExplorerList/index.tsx +++ b/frontend/src/container/LogsExplorerList/index.tsx @@ -3,6 +3,7 @@ import { Card, Typography } from 'antd'; import ListLogView from 'components/Logs/ListLogView'; import RawLogView from 'components/Logs/RawLogView'; import Spinner from 'components/Spinner'; +import { LOCALSTORAGE } from 'constants/localStorage'; import ExplorerControlPanel from 'container/ExplorerControlPanel'; import { Heading } from 'container/LogsTable/styles'; import { useOptionsMenu } from 'container/OptionsMenu'; @@ -35,6 +36,7 @@ function LogsExplorerList({ const { initialDataSource } = useQueryBuilder(); const { options, config } = useOptionsMenu({ + storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS, dataSource: initialDataSource || DataSource.METRICS, aggregateOperator: currentStagedQueryData?.aggregateOperator || StringOperators.NOOP, diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts index 5017580e2f..96094a7995 100644 --- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts +++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts @@ -24,6 +24,7 @@ interface UseOptionsMenuProps { dataSource: DataSource; aggregateOperator: string; initialOptions?: InitialOptions; + storageKey: LOCALSTORAGE; } interface UseOptionsMenu { @@ -32,6 +33,7 @@ interface UseOptionsMenu { } const useOptionsMenu = ({ + storageKey, dataSource, aggregateOperator, initialOptions = {}, @@ -42,8 +44,9 @@ const useOptionsMenu = ({ const [isFocused, setIsFocused] = useState(false); const debouncedSearchText = useDebounce(searchText, 300); - const localStorageOptionsQuery = getFromLocalstorage( - LOCALSTORAGE.LIST_OPTIONS, + const localStorageOptionsQuery = useMemo( + () => getFromLocalstorage(storageKey), + [storageKey], ); const initialQueryParams = useMemo( @@ -157,9 +160,9 @@ const useOptionsMenu = ({ (newQueryData: OptionsQuery) => { redirectWithOptionsData(newQueryData); - setToLocalstorage(LOCALSTORAGE.LIST_OPTIONS, JSON.stringify(newQueryData)); + setToLocalstorage(storageKey, JSON.stringify(newQueryData)); }, - [redirectWithOptionsData], + [storageKey, redirectWithOptionsData], ); const handleSelectColumns = useCallback( diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx index 7869a5d2b5..7e70b0adf8 100644 --- a/frontend/src/container/TracesExplorer/ListView/index.tsx +++ b/frontend/src/container/TracesExplorer/ListView/index.tsx @@ -1,4 +1,5 @@ import { ResizeTable } from 'components/ResizeTable'; +import { LOCALSTORAGE } from 'constants/localStorage'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import { useOptionsMenu } from 'container/OptionsMenu'; @@ -28,6 +29,7 @@ function ListView(): JSX.Element { >((state) => state.globalTime); const { options, config } = useOptionsMenu({ + storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS, dataSource: DataSource.TRACES, aggregateOperator: 'count', initialOptions: {