fix[FE]: fix the update view button not visible on changes to Not Updating in Logs and Traces List View.

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 {

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)
 	);
 };
 

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,

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],
 	);

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;
 };