fix: remove create dashboard call before navigate (#8029)

* fix: remove create dashboard call before navigate

* feat: minor refactor

---------

Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -28,16 +28,12 @@ import LogsExplorerTable from 'container/LogsExplorerTable';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import dayjs from 'dayjs';
-import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useAxiosError from 'hooks/useAxiosError';
 import useClickOutside from 'hooks/useClickOutside';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
-import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -98,7 +94,6 @@ function LogsExplorerViews({
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	chartQueryKeyRef: MutableRefObject<any>;
 }): JSX.Element {
-	const { notifications } = useNotifications();
 	const { safeNavigate } = useSafeNavigate();
 
 	// this is to respect the panel type present in the URL rather than defaulting it to list always.
@@ -141,8 +136,6 @@ function LogsExplorerViews({
 	const [queryId, setQueryId] = useState<string>(v4());
 	const [queryStats, setQueryStats] = useState<WsDataEvent>();
 
-	const handleAxisError = useAxiosError();
-
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
 
@@ -396,11 +389,6 @@ function LogsExplorerViews({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data?.payload]);
 
-	const {
-		mutate: updateDashboard,
-		isLoading: isUpdateDashboardLoading,
-	} = useUpdateDashboard();
-
 	const getUpdatedQueryForExport = useCallback((): Query => {
 		const updatedQuery = cloneDeep(currentQuery);
 
@@ -424,68 +412,22 @@ function LogsExplorerViews({
 					? getUpdatedQueryForExport()
 					: exportDefaultQuery;
 
-			const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery(
-				dashboard,
-				query,
-				widgetId,
-				panelTypeParam,
-				options.selectColumns,
-			);
-
 			logEvent('Logs Explorer: Add to dashboard successful', {
 				panelType,
 				isNewDashboard,
 				dashboardName: dashboard?.data?.title,
 			});
 
-			updateDashboard(updatedDashboard, {
+			const dashboardEditView = generateExportToDashboardLink({
-				onSuccess: (data) => {
+				query,
-					if (data.error) {
+				panelType: panelTypeParam,
-						const message =
+				dashboardId: dashboard.uuid,
-							data.error === 'feature usage exceeded' ? (
+				widgetId,
-								<span>
-									Panel limit exceeded for {DataSource.LOGS} in community edition. Please
-									checkout our paid plans{' '}
-									<a
-										href="https://signoz.io/pricing/?utm_source=product&utm_medium=dashboard-limit"
-										rel="noreferrer noopener"
-										target="_blank"
-									>
-										here
-									</a>
-								</span>
-							) : (
-								data.error
-							);
-						notifications.error({
-							message,
-						});
-
-						return;
-					}
-
-					const dashboardEditView = generateExportToDashboardLink({
-						query,
-						panelType: panelTypeParam,
-						dashboardId: data.payload?.uuid || '',
-						widgetId,
-					});
-
-					safeNavigate(dashboardEditView);
-				},
-				onError: handleAxisError,
 			});
+
+			safeNavigate(dashboardEditView);
 		},
-		[
+		[getUpdatedQueryForExport, exportDefaultQuery, safeNavigate, panelType],
-			getUpdatedQueryForExport,
-			exportDefaultQuery,
-			options.selectColumns,
-			safeNavigate,
-			notifications,
-			panelType,
-			updateDashboard,
-			handleAxisError,
-		],
 	);
 
 	useEffect(() => {
@@ -811,7 +753,6 @@ function LogsExplorerViews({
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}
-				isLoading={isUpdateDashboardLoading}
 				onExport={handleExport}
 				sourcepage={DataSource.LOGS}
 			/>

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

@@ -2,18 +2,12 @@ import './Explorer.styles.scss';
 
 import * as Sentry from '@sentry/react';
 import { Switch } from 'antd';
-import axios from 'axios';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
-import { useOptionsMenu } from 'container/OptionsMenu';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
-import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useCallback, useMemo, useState } from 'react';
@@ -39,13 +33,6 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
-	const { notifications } = useNotifications();
-	const { mutate: updateDashboard, isLoading } = useUpdateDashboard();
-	const { options } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.METRICS_LIST_OPTIONS,
-		dataSource: DataSource.METRICS,
-		aggregateOperator: 'noop',
-	});
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const isOneChartPerQueryEnabled =
@@ -86,59 +73,16 @@ function Explorer(): JSX.Element {
 
 			const widgetId = uuid();
 
-			const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery(
+			const dashboardEditView = generateExportToDashboardLink({
-				dashboard,
+				query: queryToExport || exportDefaultQuery,
-				queryToExport || exportDefaultQuery,
+				panelType: PANEL_TYPES.TIME_SERIES,
+				dashboardId: dashboard?.uuid || '',
 				widgetId,
-				PANEL_TYPES.TIME_SERIES,
-				options.selectColumns,
-			);
-
-			updateDashboard(updatedDashboard, {
-				onSuccess: (data) => {
-					if (data.error) {
-						const message =
-							data.error === 'feature usage exceeded' ? (
-								<span>
-									Panel limit exceeded for {DataSource.METRICS} in community edition.
-									Please checkout our paid plans{' '}
-									<a
-										href="https://signoz.io/pricing/?utm_source=product&utm_medium=dashboard-limit"
-										rel="noreferrer noopener"
-										target="_blank"
-									>
-										here
-									</a>
-								</span>
-							) : (
-								data.error
-							);
-						notifications.error({
-							message,
-						});
-
-						return;
-					}
-					const dashboardEditView = generateExportToDashboardLink({
-						query: queryToExport || exportDefaultQuery,
-						panelType: PANEL_TYPES.TIME_SERIES,
-						dashboardId: data.payload?.uuid || '',
-						widgetId,
-					});
-
-					safeNavigate(dashboardEditView);
-				},
-				onError: (error) => {
-					if (axios.isAxiosError(error)) {
-						notifications.error({
-							message: error.message,
-						});
-					}
-				},
 			});
+
+			safeNavigate(dashboardEditView);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[exportDefaultQuery, safeNavigate],
-		[exportDefaultQuery, notifications, updateDashboard],
 	);
 
 	const splitedQueries = useMemo(
@@ -201,7 +145,6 @@ function Explorer(): JSX.Element {
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}
-				isLoading={isLoading}
 				sourcepage={DataSource.METRICS}
 				onExport={handleExport}
 				isOneChartPerQuery={showOneChartPerQuery}

frontend/src/pages/TracesExplorer/index.tsx

@@ -4,7 +4,6 @@ import { FilterOutlined } from '@ant-design/icons';
 import * as Sentry from '@sentry/react';
 import { Button, Card, Tabs, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
-import axios from 'axios';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
@@ -19,13 +18,10 @@ import RightToolbarActions from 'container/QueryBuilder/components/ToolbarAction
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { defaultSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import QuerySection from 'container/TracesExplorer/QuerySection';
-import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
-import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { cloneDeep, isEmpty, set } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -40,8 +36,6 @@ import { ActionsWrapper, Container } from './styles';
 import { getTabsItems } from './utils';
 
 function TracesExplorer(): JSX.Element {
-	const { notifications } = useNotifications();
-
 	const {
 		currentQuery,
 		panelType,
@@ -124,9 +118,7 @@ function TracesExplorer(): JSX.Element {
 		[currentQuery, updateAllQueriesOperators],
 	);
 
-	const { mutate: updateDashboard, isLoading } = useUpdateDashboard();
+	const getUpdatedQueryForExport = useCallback((): Query => {
-
-	const getUpdatedQueryForExport = (): Query => {
 		const updatedQuery = cloneDeep(currentQuery);
 
 		set(
@@ -136,7 +128,7 @@ function TracesExplorer(): JSX.Element {
 		);
 
 		return updatedQuery;
-	};
+	}, [currentQuery, options.selectColumns]);
 
 	const handleExport = useCallback(
 		(dashboard: Dashboard | null, isNewDashboard?: boolean): void => {
@@ -153,65 +145,22 @@ function TracesExplorer(): JSX.Element {
 					? getUpdatedQueryForExport()
 					: exportDefaultQuery;
 
-			const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery(
-				dashboard,
-				query,
-				widgetId,
-				panelTypeParam,
-				options.selectColumns,
-			);
-
 			logEvent('Traces Explorer: Add to dashboard successful', {
 				panelType,
 				isNewDashboard,
 				dashboardName: dashboard?.data?.title,
 			});
 
-			updateDashboard(updatedDashboard, {
+			const dashboardEditView = generateExportToDashboardLink({
-				onSuccess: (data) => {
+				query,
-					if (data.error) {
+				panelType: panelTypeParam,
-						const message =
+				dashboardId: dashboard?.uuid || '',
-							data.error === 'feature usage exceeded' ? (
+				widgetId,
-								<span>
-									Panel limit exceeded for {DataSource.TRACES} in community edition.
-									Please checkout our paid plans{' '}
-									<a
-										href="https://signoz.io/pricing/?utm_source=product&utm_medium=dashboard-limit"
-										rel="noreferrer noopener"
-										target="_blank"
-									>
-										here
-									</a>
-								</span>
-							) : (
-								data.error
-							);
-						notifications.error({
-							message,
-						});
-
-						return;
-					}
-					const dashboardEditView = generateExportToDashboardLink({
-						query,
-						panelType: panelTypeParam,
-						dashboardId: data.payload?.uuid || '',
-						widgetId,
-					});
-
-					safeNavigate(dashboardEditView);
-				},
-				onError: (error) => {
-					if (axios.isAxiosError(error)) {
-						notifications.error({
-							message: error.message,
-						});
-					}
-				},
 			});
+
+			safeNavigate(dashboardEditView);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[exportDefaultQuery, panelType, safeNavigate, getUpdatedQueryForExport],
-		[exportDefaultQuery, notifications, panelType, updateDashboard],
 	);
 
 	useShareBuilderUrl(defaultQuery);
@@ -282,11 +231,7 @@ function TracesExplorer(): JSX.Element {
 
 					<Container className="traces-explorer-views">
 						<ActionsWrapper>
-							<ExportPanel
+							<ExportPanel query={exportDefaultQuery} onExport={handleExport} />
-								query={exportDefaultQuery}
-								isLoading={isLoading}
-								onExport={handleExport}
-							/>
 						</ActionsWrapper>
 
 						<Tabs
@@ -299,7 +244,6 @@ function TracesExplorer(): JSX.Element {
 					<ExplorerOptionWrapper
 						disabled={!stagedQuery}
 						query={exportDefaultQuery}
-						isLoading={isLoading}
 						sourcepage={DataSource.TRACES}
 						onExport={handleExport}
 					/>