chore: fix query builder datasource issue in metrics explorer

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -17,7 +17,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useCallback, useMemo, useState } from 'react';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { DataSource } from 'types/common/queryBuilder';
 import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
 import { v4 as uuid } from 'uuid';
@@ -74,7 +74,20 @@ function Explorer(): JSX.Element {
 				options.selectColumns,
 			);
 
-			updateDashboard(updatedDashboard, {
+			const newDashboard: Dashboard = {
+				...updatedDashboard,
+				data: {
+					...updatedDashboard.data,
+					widgets: [
+						{
+							...(updatedDashboard.data?.widgets?.[0] as Widgets),
+							yAxisUnit: exportDefaultQuery.unit,
+						},
+					],
+				},
+			};
+
+			updateDashboard(newDashboard, {
 				onSuccess: (data) => {
 					if (data.error) {
 						const message =

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -1,16 +1,17 @@
 import './Summary.styles.scss';
 
 import * as Sentry from '@sentry/react';
+import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
 import { useGetMetricsTreeMap } from 'hooks/metricsExplorer/useGetMetricsTreeMap';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import MetricDetails from '../MetricDetails';
@@ -43,7 +44,7 @@ function Summary(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
-	const { currentQuery } = useQueryBuilder();
+	const currentQuery = initialQueriesMap[DataSource.METRICS];
 	const queryFilters = useMemo(
 		() =>
 			currentQuery?.builder?.queryData[0]?.filters || {

frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx

@@ -39,6 +39,7 @@ function YAxisUnitSelector({
 				rootClassName="y-axis-root-popover"
 				options={options}
 				allowClear
+				value={findCategoryById(defaultValue)?.name}
 				defaultValue={findCategoryById(defaultValue)?.name}
 				onClear={handleClear}
 				onSelect={onSelectHandler}

frontend/src/container/NewWidget/index.tsx

@@ -132,7 +132,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const getWidget = useCallback(() => {
+	const currentWidget = useMemo(() => {
 		const widgetId = query.get('widgetId');
 		const selectedWidget = widgets?.find((e) => e.id === widgetId);
 		return defaultTo(
@@ -141,7 +141,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		) as Widgets;
 	}, [query, selectedGraph, widgets]);
 
-	const [selectedWidget, setSelectedWidget] = useState(getWidget());
+	const [selectedWidget, setSelectedWidget] = useState(currentWidget);
 
 	const [title, setTitle] = useState<string>(
 		selectedWidget?.title?.toString() || '',
@@ -153,6 +153,11 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		selectedWidget?.yAxisUnit || 'none',
 	);
 
+	useEffect(() => {
+		setSelectedWidget(currentWidget);
+		setYAxisUnit(currentWidget?.yAxisUnit || 'none');
+	}, [currentWidget]);
+
 	const [stacked, setStacked] = useState<boolean>(
 		selectedWidget?.isStacked || false,
 	);