From 2dcd375a91d14bdf1bf1f036fb6f567fa4fd2861 Mon Sep 17 00:00:00 2001 From: aarif5435 Date: Sat, 16 Nov 2024 12:45:44 +0530 Subject: [PATCH] fix[FE]: fix the update view button not visible on changes to columns in logs and traces list view --- frontend/src/components/ExplorerCard/types.ts | 2 + frontend/src/components/ExplorerCard/utils.ts | 9 ++-- .../ExplorerOptions/ExplorerOptions.tsx | 41 ++++++++++++++----- frontend/src/providers/QueryBuilder.tsx | 4 +- frontend/src/types/common/queryBuilder.ts | 2 + 5 files changed, 42 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/ExplorerCard/types.ts b/frontend/src/components/ExplorerCard/types.ts index 94e7ab788f..f4f0426925 100644 --- a/frontend/src/components/ExplorerCard/types.ts +++ b/frontend/src/components/ExplorerCard/types.ts @@ -2,6 +2,7 @@ import { FormInstance } from 'antd'; import { NotificationInstance } from 'antd/es/notification/interface'; import { AxiosResponse } from 'axios'; import { PANEL_TYPES } from 'constants/queryBuilder'; +import { OptionsQuery } from 'container/OptionsMenu/types'; import { UseMutateAsyncFunction } from 'react-query'; import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; @@ -36,6 +37,7 @@ export interface IsQueryUpdatedInViewProps { data: ViewProps[] | undefined; stagedQuery: Query | null; currentPanelType: PANEL_TYPES | null; + options: OptionsQuery; } export interface SaveViewWithNameProps { diff --git a/frontend/src/components/ExplorerCard/utils.ts b/frontend/src/components/ExplorerCard/utils.ts index 0c1ef66469..3c02a49464 100644 --- a/frontend/src/components/ExplorerCard/utils.ts +++ b/frontend/src/components/ExplorerCard/utils.ts @@ -80,12 +80,13 @@ export const isQueryUpdatedInView = ({ data, stagedQuery, currentPanelType, + options }: IsQueryUpdatedInViewProps): boolean => { const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data); if (!currentViewDetails) { return false; } - const { query, panelType } = currentViewDetails; + const { query, panelType, extraData } = currentViewDetails; // Omitting id from aggregateAttribute and groupBy const updatedCurrentQuery = omitIdFromQuery(stagedQuery); @@ -96,13 +97,13 @@ export const isQueryUpdatedInView = ({ updatedCurrentQuery.promql === undefined ) { return false; - } - + } return ( panelType !== currentPanelType || !isEqual(query.builder, updatedCurrentQuery?.builder) || !isEqual(query.clickhouse_sql, updatedCurrentQuery?.clickhouse_sql) || - !isEqual(query.promql, updatedCurrentQuery?.promql) + !isEqual(query.promql, updatedCurrentQuery?.promql) || + !isEqual(options?.selectColumns, extraData && JSON.parse(extraData)?.selectColumns) ); }; diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 8edd0444bf..aa74fb9918 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx @@ -210,13 +210,40 @@ function ExplorerOptions({ 0.08, ); + const { options, handleOptionsChange } = useOptionsMenu({ + storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS, + dataSource: DataSource.TRACES, + aggregateOperator: StringOperators.NOOP, + }); + + const getUpdatedExtraData =( + extraData: string | undefined, + newSelectedColumns: BaseAutocompleteData[], + ): string => { + let updatedExtraData; + + if (extraData) { + const parsedExtraData = JSON.parse(extraData); + parsedExtraData.selectColumns = newSelectedColumns; + updatedExtraData = JSON.stringify(parsedExtraData); + } else { + updatedExtraData = JSON.stringify({ + color: Color.BG_SIENNA_500, + selectColumns: newSelectedColumns, + }); + } + return updatedExtraData; + }; + + const updatedExtraData = getUpdatedExtraData(extraData, options?.selectColumns); + const { mutateAsync: updateViewAsync, isLoading: isViewUpdating, } = useUpdateView({ compositeQuery, viewKey, - extraData: extraData || JSON.stringify({ color: Color.BG_SIENNA_500 }), + extraData: updatedExtraData, sourcePage: sourcepage, viewName, }); @@ -228,13 +255,11 @@ function ExplorerOptions({ }; const onUpdateQueryHandler = (): void => { - const extraData = viewsData?.data?.data?.find((view) => view.uuid === viewKey) - ?.extraData; updateViewAsync( { compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType), viewKey, - extraData: extraData || JSON.stringify({ color: Color.BG_SIENNA_500 }), + extraData: updatedExtraData, sourcePage: sourcepage, viewName, }, @@ -256,12 +281,6 @@ function ExplorerOptions({ const { handleExplorerTabChange } = useHandleExplorerTabChange(); - const { options, handleOptionsChange } = useOptionsMenu({ - storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS, - dataSource: DataSource.TRACES, - aggregateOperator: StringOperators.NOOP, - }); - type ExtraData = { selectColumns?: BaseAutocompleteData[]; }; @@ -402,7 +421,7 @@ function ExplorerOptions({ history.replace(DATASOURCE_VS_ROUTES[sourcepage]); }; - const isQueryUpdated = isStagedQueryUpdated(viewsData?.data?.data, viewKey); + const isQueryUpdated = isStagedQueryUpdated(viewsData?.data?.data, viewKey, options); const { isLoading: isSaveViewLoading, diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx index b79538cb45..7cf3815a6e 100644 --- a/frontend/src/providers/QueryBuilder.tsx +++ b/frontend/src/providers/QueryBuilder.tsx @@ -20,6 +20,7 @@ import { panelTypeDataSourceFormValuesMap, PartialPanelTypes, } from 'container/NewWidget/utils'; +import { OptionsQuery } from 'container/OptionsMenu/types'; import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import useUrlQuery from 'hooks/useUrlQuery'; @@ -662,12 +663,13 @@ export function QueryBuilderProvider({ ); const isStagedQueryUpdated = useCallback( - (viewData: ViewProps[] | undefined, viewKey: string): boolean => + (viewData: ViewProps[] | undefined, viewKey: string, options: OptionsQuery): boolean => isQueryUpdatedInView({ currentPanelType: panelType, data: viewData, stagedQuery, viewKey, + options }), [panelType, stagedQuery], ); diff --git a/frontend/src/types/common/queryBuilder.ts b/frontend/src/types/common/queryBuilder.ts index 0987347fd5..dda47fa814 100644 --- a/frontend/src/types/common/queryBuilder.ts +++ b/frontend/src/types/common/queryBuilder.ts @@ -13,6 +13,7 @@ import { import { ViewProps } from 'types/api/saveViews/types'; import { EQueryType } from './dashboard'; +import { OptionsQuery } from 'container/OptionsMenu/types'; export enum DataSource { METRICS = 'metrics', @@ -246,6 +247,7 @@ export type QueryBuilderContextType = { isStagedQueryUpdated: ( viewData: ViewProps[] | undefined, viewKey: string, + options: OptionsQuery ) => boolean; };