Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: store columns while saving view and restore columns on selecting view without select columns #5647

Merged
merged 4 commits into from
Oct 4, 2024
Merged

feat: store columns while saving view and restore columns on selecting view without select columns #5647

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aad4aa5
feat: store columns while saving view and restore columns on selectin…
ahmadshaheer Aug 6, 2024
8114ec5
fix: add null check to prevent storing empty selectItems
ahmadshaheer Aug 6, 2024
cfeb4d8
fix: restore the default select columns and remove OLD_SELECT_COLUMNS
ahmadshaheer Sep 10, 2024
af0f393
chore: pr review changes
ahmadshaheer Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion frontend/src/components/ExplorerCard/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ExplorerCard/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
ahmadshaheer marked this conversation as resolved.
Show resolved Hide resolved
const query = mapQueryDataFromApi(compositeQuery);
return { query, name, uuid, panelType: compositeQuery.panelType };
return { query, name, uuid, panelType: compositeQuery.panelType, extraData };
}
return undefined;
};
Expand Down
55 changes: 52 additions & 3 deletions frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -59,6 +62,7 @@ import { useHistory } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { Dashboard } from 'types/api/dashboard/getAll';
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';
Expand Down Expand Up @@ -252,6 +256,38 @@ function ExplorerOptions({

const { handleExplorerTabChange } = useHandleExplorerTabChange();

const { options, handleOptionsChange } = useOptionsMenu({
storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
dataSource: DataSource.TRACES,
aggregateOperator: StringOperators.NOOP,
});

const updateOrRestoreSelectColumns = (
key: string,
allViewsData: ViewProps[] | undefined,
options: OptionsQuery,
handleOptionsChange: (newQueryData: OptionsQuery) => void,
): void => {
const currentViewDetails = getViewDetailsUsingViewKey(key, allViewsData);
ahmadshaheer marked this conversation as resolved.
Show resolved Hide resolved
if (!currentViewDetails) {
return;
}

const extraData = JSON.parse(currentViewDetails?.extraData ?? '{}');
ahmadshaheer marked this conversation as resolved.
Show resolved Hide resolved

if (!!extraData && extraData?.selectColumns) {
ahmadshaheer marked this conversation as resolved.
Show resolved Hide resolved
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(
Expand Down Expand Up @@ -321,6 +357,13 @@ function ExplorerOptions({

updatePreservedViewInLocalStorage(option);

updateOrRestoreSelectColumns(
option.key,
viewsData?.data?.data,
ahmadshaheer marked this conversation as resolved.
Show resolved Hide resolved
options,
handleOptionsChange,
);

if (ref.current) {
ref.current.blur();
}
Expand Down Expand Up @@ -360,14 +403,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,
Expand Down
Loading