diff --git a/frontend/src/pages/TracesModulePage/constants.tsx b/frontend/src/pages/TracesModulePage/constants.tsx index 90ecd5fffa..85b33b5a03 100644 --- a/frontend/src/pages/TracesModulePage/constants.tsx +++ b/frontend/src/pages/TracesModulePage/constants.tsx @@ -4,9 +4,14 @@ import { Compass, Cone, TowerControl } from 'lucide-react'; import SaveView from 'pages/SaveView'; import TracesExplorer from 'pages/TracesExplorer'; import TracesFunnels from 'pages/TracesFunnels'; +import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider'; export const tracesExplorer: TabRoutes = { - Component: TracesExplorer, + Component: (): JSX.Element => ( + + + + ), name: (
Explorer diff --git a/frontend/src/providers/preferences/configs/logsUpdaterConfig.ts b/frontend/src/providers/preferences/configs/logsUpdaterConfig.ts index bcd916bffe..dfb76e8a60 100644 --- a/frontend/src/providers/preferences/configs/logsUpdaterConfig.ts +++ b/frontend/src/providers/preferences/configs/logsUpdaterConfig.ts @@ -29,10 +29,11 @@ const getLogsUpdaterConfig = ( } if (mode === 'direct') { - // redirectWithOptionsData({ - // ...defaultOptionsQuery, - // selectColumns: newColumns, - // }); + // just need to update the columns see for remove props + redirectWithOptionsData({ + ...defaultOptionsQuery, + selectColumns: newColumns, + }); // Also update local storage const local = JSON.parse( diff --git a/frontend/src/providers/preferences/configs/tracesUpdaterConfig.ts b/frontend/src/providers/preferences/configs/tracesUpdaterConfig.ts index ed84a7a7ac..bfb9a728c8 100644 --- a/frontend/src/providers/preferences/configs/tracesUpdaterConfig.ts +++ b/frontend/src/providers/preferences/configs/tracesUpdaterConfig.ts @@ -1,17 +1,41 @@ import setLocalStorageKey from 'api/browser/localstorage/set'; import { LOCALSTORAGE } from 'constants/localStorage'; +import { defaultOptionsQuery } from 'container/OptionsMenu/constants'; +import { FontSize, OptionsQuery } from 'container/OptionsMenu/types'; +import { Dispatch, SetStateAction } from 'react'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { Preferences } from '../types'; + // --- TRACES preferences updater config --- -const tracesUpdater = { +const getTracesUpdaterConfig = ( + redirectWithOptionsData: (options: OptionsQuery) => void, + setSavedViewPreferences: Dispatch>, +): { + updateColumns: (newColumns: BaseAutocompleteData[], mode: string) => void; + updateFormatting: () => void; +} => ({ updateColumns: (newColumns: BaseAutocompleteData[], mode: string): void => { - const url = new URL(window.location.href); - const options = JSON.parse(url.searchParams.get('options') || '{}'); - options.selectColumns = newColumns; - url.searchParams.set('options', JSON.stringify(options)); - window.history.replaceState({}, '', url.toString()); + // remove the formatting props + if (mode === 'savedView') { + setSavedViewPreferences({ + columns: newColumns, + formatting: { + maxLines: 2, + format: 'table', + fontSize: 'small' as FontSize, + version: 1, + }, + }); + } if (mode === 'direct') { + // just need to update the columns see for remove props + redirectWithOptionsData({ + ...defaultOptionsQuery, + selectColumns: newColumns, + }); + const local = JSON.parse( localStorage.getItem(LOCALSTORAGE.TRACES_LIST_OPTIONS) || '{}', ); @@ -20,6 +44,6 @@ const tracesUpdater = { } }, updateFormatting: (): void => {}, // no-op for traces -}; +}); -export default tracesUpdater; +export default getTracesUpdaterConfig; diff --git a/frontend/src/providers/preferences/loader/usePreferenceLoader.ts b/frontend/src/providers/preferences/loader/usePreferenceLoader.ts index 9d4a021992..b9822fee7c 100644 --- a/frontend/src/providers/preferences/loader/usePreferenceLoader.ts +++ b/frontend/src/providers/preferences/loader/usePreferenceLoader.ts @@ -1,17 +1,12 @@ /* eslint-disable sonarjs/cognitive-complexity */ /* eslint-disable no-empty */ -// import { -// defaultLogsSelectedColumns, -// defaultTraceSelectedColumns, -// } from 'container/OptionsMenu/constants'; -import { useGetAllViews } from 'hooks/saveViews/useGetAllViews'; import { useEffect, useState } from 'react'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { DataSource } from 'types/common/queryBuilder'; import logsLoaderConfig from '../configs/logsLoaderConfig'; import tracesLoaderConfig from '../configs/tracesLoaderConfig'; -import { FormattingOptions, PreferenceMode, Preferences } from '../types'; +import { FormattingOptions, Preferences } from '../types'; // Generic preferences loader that works with any config async function preferencesLoader(config: { @@ -53,13 +48,9 @@ async function tracesPreferencesLoader(): Promise<{ } export function usePreferenceLoader({ - mode, - savedViewId, dataSource, reSync, }: { - mode: PreferenceMode; - savedViewId: string; dataSource: DataSource; reSync: number; }): { @@ -71,46 +62,20 @@ export function usePreferenceLoader({ const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const { data: viewsData } = useGetAllViews(dataSource); - useEffect((): void => { async function loadPreferences(): Promise { setLoading(true); setError(null); try { - if (mode === 'savedView' && savedViewId) { - // we can also switch to the URL options params - // as we are essentially setting the options in the URL - // in ExplorerOptions.tsx#430 (updateOrRestoreSelectColumns) - // const extraData = viewsData?.data?.data?.find( - // (view) => view.id === savedViewId, - // )?.extraData; - // const parsedExtraData = JSON.parse(extraData || '{}'); - // let columns: BaseAutocompleteData[] = []; - // let formatting: FormattingOptions | undefined; - // if (dataSource === DataSource.LOGS) { - // columns = parsedExtraData?.selectColumns || defaultLogsSelectedColumns; - // formatting = { - // maxLines: parsedExtraData?.maxLines ?? 2, - // format: parsedExtraData?.format ?? 'table', - // fontSize: parsedExtraData?.fontSize ?? 'small', - // version: parsedExtraData?.version ?? 1, - // }; - // } else if (dataSource === DataSource.TRACES) { - // columns = parsedExtraData?.selectColumns || defaultTraceSelectedColumns; - // } - // setPreferences(savedViewPreferences); - } else { - if (dataSource === DataSource.LOGS) { - const { columns, formatting } = await logsPreferencesLoader(); - setPreferences({ columns, formatting }); - } + if (dataSource === DataSource.LOGS) { + const { columns, formatting } = await logsPreferencesLoader(); + setPreferences({ columns, formatting }); + } - if (dataSource === DataSource.TRACES) { - const { columns } = await tracesPreferencesLoader(); - setPreferences({ columns }); - } + if (dataSource === DataSource.TRACES) { + const { columns } = await tracesPreferencesLoader(); + setPreferences({ columns }); } } catch (e) { setError(e as Error); @@ -119,7 +84,7 @@ export function usePreferenceLoader({ } } loadPreferences(); - }, [mode, savedViewId, dataSource, reSync, viewsData]); + }, [dataSource, reSync]); return { preferences, loading, error }; } diff --git a/frontend/src/providers/preferences/sync/usePreferenceSync.ts b/frontend/src/providers/preferences/sync/usePreferenceSync.ts index 216af220c7..75908c6c56 100644 --- a/frontend/src/providers/preferences/sync/usePreferenceSync.ts +++ b/frontend/src/providers/preferences/sync/usePreferenceSync.ts @@ -1,4 +1,5 @@ import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants'; +import { defaultSelectedColumns as defaultTracesSelectedColumns } from 'container/TracesExplorer/ListView/configs'; import { useGetAllViews } from 'hooks/saveViews/useGetAllViews'; import { useEffect, useState } from 'react'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; @@ -24,6 +25,7 @@ export function usePreferenceSync({ updateFormatting: (newFormatting: FormattingOptions) => void; } { const { data: viewsData } = useGetAllViews(dataSource); + const [ savedViewPreferences, setSavedViewPreferences, @@ -35,6 +37,10 @@ export function usePreferenceSync({ )?.extraData; const parsedExtraData = JSON.parse(extraData || '{}'); + console.log('uncaught extraData', { + extraData, + parsedExtraData, + }); let columns: BaseAutocompleteData[] = []; let formatting: FormattingOptions | undefined; if (dataSource === DataSource.LOGS) { @@ -46,6 +52,9 @@ export function usePreferenceSync({ version: parsedExtraData?.version ?? 1, }; } + if (dataSource === DataSource.TRACES) { + columns = parsedExtraData?.selectColumns || defaultTracesSelectedColumns; + } setSavedViewPreferences({ columns, formatting }); }, [viewsData, dataSource, savedViewId, mode]); @@ -53,8 +62,6 @@ export function usePreferenceSync({ // and we want to make sure we are always using the latest preferences const [reSync, setReSync] = useState(0); const { preferences, loading, error } = usePreferenceLoader({ - mode, - savedViewId: savedViewId || '', dataSource, reSync, }); diff --git a/frontend/src/providers/preferences/updater/usePreferenceUpdater.ts b/frontend/src/providers/preferences/updater/usePreferenceUpdater.ts index 0e412afeaa..cb9a45fe54 100644 --- a/frontend/src/providers/preferences/updater/usePreferenceUpdater.ts +++ b/frontend/src/providers/preferences/updater/usePreferenceUpdater.ts @@ -9,7 +9,7 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe import { DataSource } from 'types/common/queryBuilder'; import getLogsUpdaterConfig from '../configs/logsUpdaterConfig'; -import tracesUpdater from '../configs/tracesUpdaterConfig'; +import getTracesUpdaterConfig from '../configs/tracesUpdaterConfig'; import { FormattingOptions, Preferences } from '../types'; const metricsUpdater = { @@ -31,7 +31,10 @@ const getUpdaterConfig = ( redirectWithOptionsData, setSavedViewPreferences, ), - [DataSource.TRACES]: tracesUpdater, + [DataSource.TRACES]: getTracesUpdaterConfig( + redirectWithOptionsData, + setSavedViewPreferences, + ), [DataSource.METRICS]: metricsUpdater, }); diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000000..fb57ccd13a --- /dev/null +++ b/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + +