Skip to content

Commit

Permalink
fix[FE]: fix the update view button not visible on changes to columns…
Browse files Browse the repository at this point in the history
… in logs and traces list view
  • Loading branch information
Aarif5435 committed Nov 16, 2024
1 parent 323da34 commit eb4e88d
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 16 deletions.
2 changes: 2 additions & 0 deletions frontend/src/components/ExplorerCard/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -36,6 +37,7 @@ export interface IsQueryUpdatedInViewProps {
data: ViewProps[] | undefined;
stagedQuery: Query | null;
currentPanelType: PANEL_TYPES | null;
options: OptionsQuery;
}

export interface SaveViewWithNameProps {
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/ExplorerCard/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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)
);
};

Expand Down
41 changes: 30 additions & 11 deletions frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand All @@ -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,
},
Expand All @@ -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[];
};
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/providers/QueryBuilder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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],
);
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/types/common/queryBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -246,6 +247,7 @@ export type QueryBuilderContextType = {
isStagedQueryUpdated: (
viewData: ViewProps[] | undefined,
viewKey: string,
options: OptionsQuery
) => boolean;
};

Expand Down

0 comments on commit eb4e88d

Please sign in to comment.