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
+
+