diff --git a/frontend/src/components/ExplorerCard/types.ts b/frontend/src/components/ExplorerCard/types.ts index 9f4eed3f32..94e7ab788f 100644 --- a/frontend/src/components/ExplorerCard/types.ts +++ b/frontend/src/components/ExplorerCard/types.ts @@ -22,7 +22,13 @@ export type GetViewDetailsUsingViewKey = ( viewKey: string, data: ViewProps[] | undefined, ) => - | { query: Query; name: string; uuid: string; panelType: PANEL_TYPES } + | { + query: Query; + name: string; + uuid: string; + panelType: PANEL_TYPES; + extraData?: string; + } | undefined; export interface IsQueryUpdatedInViewProps { diff --git a/frontend/src/components/ExplorerCard/utils.ts b/frontend/src/components/ExplorerCard/utils.ts index 48af06bb3d..0c1ef66469 100644 --- a/frontend/src/components/ExplorerCard/utils.ts +++ b/frontend/src/components/ExplorerCard/utils.ts @@ -29,9 +29,9 @@ export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = ( ) => { const selectedView = data?.find((view) => view.uuid === viewKey); if (selectedView) { - const { compositeQuery, name, uuid } = selectedView; + const { compositeQuery, name, uuid, extraData } = selectedView; const query = mapQueryDataFromApi(compositeQuery); - return { query, name, uuid, panelType: compositeQuery.panelType }; + return { query, name, uuid, panelType: compositeQuery.panelType, extraData }; } return undefined; }; diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 5be22deb2e..e882dd790e 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx @@ -24,6 +24,9 @@ import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; import ROUTES from 'constants/routes'; import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer'; +import { useOptionsMenu } from 'container/OptionsMenu'; +import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants'; +import { OptionsQuery } from 'container/OptionsMenu/types'; import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useGetAllViews } from 'hooks/saveViews/useGetAllViews'; @@ -34,7 +37,7 @@ import useErrorNotification from 'hooks/useErrorNotification'; import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange'; import { useNotifications } from 'hooks/useNotifications'; import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery'; -import { cloneDeep } from 'lodash-es'; +import { cloneDeep, isEqual } from 'lodash-es'; import { Check, ConciergeBell, @@ -58,7 +61,9 @@ import { useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { AppState } from 'store/reducers'; import { Dashboard } from 'types/api/dashboard/getAll'; +import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; +import { ViewProps } from 'types/api/saveViews/types'; import { DataSource, StringOperators } from 'types/common/queryBuilder'; import AppReducer from 'types/reducer/app'; import { USER_ROLES } from 'types/roles'; @@ -252,6 +257,46 @@ function ExplorerOptions({ const { handleExplorerTabChange } = useHandleExplorerTabChange(); + const { options, handleOptionsChange } = useOptionsMenu({ + storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS, + dataSource: DataSource.TRACES, + aggregateOperator: StringOperators.NOOP, + }); + + type ExtraData = { + selectColumns?: BaseAutocompleteData[]; + }; + + const updateOrRestoreSelectColumns = ( + key: string, + allViewsData: ViewProps[] | undefined, + options: OptionsQuery, + handleOptionsChange: (newQueryData: OptionsQuery) => void, + ): void => { + const currentViewDetails = getViewDetailsUsingViewKey(key, allViewsData); + if (!currentViewDetails) { + return; + } + + let extraData: ExtraData = {}; + try { + extraData = JSON.parse(currentViewDetails?.extraData ?? '{}') as ExtraData; + } catch (error) { + console.error('Error parsing extraData:', error); + } + + if (extraData.selectColumns?.length) { + handleOptionsChange({ + ...options, + selectColumns: extraData.selectColumns, + }); + } else if (!isEqual(defaultTraceSelectedColumns, options.selectColumns)) { + handleOptionsChange({ + ...options, + selectColumns: defaultTraceSelectedColumns, + }); + } + }; const onMenuItemSelectHandler = useCallback( ({ key }: { key: string }): void => { const currentViewDetails = getViewDetailsUsingViewKey( @@ -321,6 +366,13 @@ function ExplorerOptions({ updatePreservedViewInLocalStorage(option); + updateOrRestoreSelectColumns( + option.key, + viewsData?.data?.data, + options, + handleOptionsChange, + ); + if (ref.current) { ref.current.blur(); } @@ -360,14 +412,20 @@ function ExplorerOptions({ viewName: newViewName || '', compositeQuery, sourcePage: sourcepage, - extraData: JSON.stringify({ color }), + extraData: JSON.stringify({ + color, + selectColumns: options.selectColumns, + }), }); const onSaveHandler = (): void => { saveNewViewHandler({ compositeQuery, handlePopOverClose: hideSaveViewModal, - extraData: JSON.stringify({ color }), + extraData: JSON.stringify({ + color, + selectColumns: options.selectColumns, + }), notifications, panelType: panelType || PANEL_TYPES.LIST, redirectWithQueryBuilderData,