From dd11ba9f4809db9f6aee50266195f2b0c8702734 Mon Sep 17 00:00:00 2001 From: Aditya Singh Date: Mon, 2 Jun 2025 13:32:09 +0530 Subject: [PATCH] fix: remove create dashboard call before navigate (#8029) * fix: remove create dashboard call before navigate * feat: minor refactor --------- Co-authored-by: Aditya Singh --- .../src/container/LogsExplorerViews/index.tsx | 75 ++---------------- .../MetricsExplorer/Explorer/Explorer.tsx | 71 ++--------------- frontend/src/pages/TracesExplorer/index.tsx | 78 +++---------------- 3 files changed, 26 insertions(+), 198 deletions(-) diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index d92457ae43..1050b9f598 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/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; }): 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(v4()); const [queryStats, setQueryStats] = useState(); - 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, { - onSuccess: (data) => { - if (data.error) { - const message = - data.error === 'feature usage exceeded' ? ( - - Panel limit exceeded for {DataSource.LOGS} in community edition. Please - checkout our paid plans{' '} - - here - - - ) : ( - data.error - ); - notifications.error({ - message, - }); - - return; - } - - const dashboardEditView = generateExportToDashboardLink({ - query, - panelType: panelTypeParam, - dashboardId: data.payload?.uuid || '', - widgetId, - }); - - safeNavigate(dashboardEditView); - }, - onError: handleAxisError, + const dashboardEditView = generateExportToDashboardLink({ + query, + panelType: panelTypeParam, + dashboardId: dashboard.uuid, + widgetId, }); + + safeNavigate(dashboardEditView); }, - [ - getUpdatedQueryForExport, - exportDefaultQuery, - options.selectColumns, - safeNavigate, - notifications, - panelType, - updateDashboard, - handleAxisError, - ], + [getUpdatedQueryForExport, exportDefaultQuery, safeNavigate, panelType], ); useEffect(() => { @@ -811,7 +753,6 @@ function LogsExplorerViews({ diff --git a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx index 1aed2e567b..958ea7cfc4 100644 --- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx +++ b/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( - dashboard, - queryToExport || exportDefaultQuery, + const dashboardEditView = generateExportToDashboardLink({ + query: 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' ? ( - - Panel limit exceeded for {DataSource.METRICS} in community edition. - Please checkout our paid plans{' '} - - here - - - ) : ( - 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, notifications, updateDashboard], + [exportDefaultQuery, safeNavigate], ); const splitedQueries = useMemo( @@ -201,7 +145,6 @@ function Explorer(): JSX.Element { { + const getUpdatedQueryForExport = useCallback((): 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, { - onSuccess: (data) => { - if (data.error) { - const message = - data.error === 'feature usage exceeded' ? ( - - Panel limit exceeded for {DataSource.TRACES} in community edition. - Please checkout our paid plans{' '} - - here - - - ) : ( - 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, - }); - } - }, + const dashboardEditView = generateExportToDashboardLink({ + query, + panelType: panelTypeParam, + dashboardId: dashboard?.uuid || '', + widgetId, }); + + safeNavigate(dashboardEditView); }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [exportDefaultQuery, notifications, panelType, updateDashboard], + [exportDefaultQuery, panelType, safeNavigate, getUpdatedQueryForExport], ); useShareBuilderUrl(defaultQuery); @@ -282,11 +231,7 @@ function TracesExplorer(): JSX.Element { - +