diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index a76dd5b77c..eeac5513b9 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -41,6 +41,7 @@ import { import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder'; import { GlobalReducer } from 'types/reducer/globalTime'; import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink'; +import { v4 } from 'uuid'; import { ActionsWrapper } from './LogsExplorerViews.styled'; @@ -268,9 +269,12 @@ function LogsExplorerViews(): JSX.Element { ? panelType : PANEL_TYPES.TIME_SERIES; + const widgetId = v4(); + const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery( dashboard, exportDefaultQuery, + widgetId, panelTypeParam, ); @@ -304,6 +308,7 @@ function LogsExplorerViews(): JSX.Element { query: exportDefaultQuery, panelType: panelTypeParam, dashboardId: data.payload?.uuid || '', + widgetId, }); history.push(dashboardEditView); diff --git a/frontend/src/hooks/dashboard/utils.ts b/frontend/src/hooks/dashboard/utils.ts index ba02cea7a4..930fc080b2 100644 --- a/frontend/src/hooks/dashboard/utils.ts +++ b/frontend/src/hooks/dashboard/utils.ts @@ -5,6 +5,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData'; export const addEmptyWidgetInDashboardJSONWithQuery = ( dashboard: Dashboard, query: Query, + widgetId: string, panelTypes?: PANEL_TYPES, ): Dashboard => ({ ...dashboard, @@ -12,7 +13,7 @@ export const addEmptyWidgetInDashboardJSONWithQuery = ( ...dashboard.data, layout: [ { - i: 'empty', + i: widgetId, w: 6, x: 0, h: 3, @@ -23,7 +24,7 @@ export const addEmptyWidgetInDashboardJSONWithQuery = ( widgets: [ ...(dashboard?.data?.widgets || []), { - id: 'empty', + id: widgetId, query, description: '', isStacked: false, diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx index 42cbe1028b..3fbdca1a83 100644 --- a/frontend/src/pages/TracesExplorer/index.tsx +++ b/frontend/src/pages/TracesExplorer/index.tsx @@ -19,6 +19,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { Dashboard } from 'types/api/dashboard/getAll'; import { DataSource } from 'types/common/queryBuilder'; import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink'; +import { v4 } from 'uuid'; import { ActionsWrapper, Container } from './styles'; import { getTabsItems } from './utils'; @@ -99,9 +100,12 @@ function TracesExplorer(): JSX.Element { ? panelType : PANEL_TYPES.TIME_SERIES; + const widgetId = v4(); + const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery( dashboard, exportDefaultQuery, + widgetId, panelTypeParam, ); @@ -134,6 +138,7 @@ function TracesExplorer(): JSX.Element { query: exportDefaultQuery, panelType: panelTypeParam, dashboardId: data.payload?.uuid || '', + widgetId, }); history.push(dashboardEditView); diff --git a/frontend/src/utils/dashboard/generateExportToDashboardLink.ts b/frontend/src/utils/dashboard/generateExportToDashboardLink.ts index 6dac5c97c2..58d68a4db1 100644 --- a/frontend/src/utils/dashboard/generateExportToDashboardLink.ts +++ b/frontend/src/utils/dashboard/generateExportToDashboardLink.ts @@ -8,15 +8,19 @@ type GenerateExportToDashboardLinkParams = { dashboardId: string; panelType: PANEL_TYPES; query: Query; + widgetId: string; }; export const generateExportToDashboardLink = ({ query, dashboardId, panelType, + widgetId, }: GenerateExportToDashboardLinkParams): string => `${generatePath(ROUTES.DASHBOARD, { dashboardId, - })}/new?${QueryParams.graphType}=${panelType}&${QueryParams.widgetId}=empty&${ - QueryParams.compositeQuery - }=${encodeURIComponent(JSON.stringify(query))}`; + })}/new?${QueryParams.graphType}=${panelType}&${ + QueryParams.widgetId + }=${widgetId}&${QueryParams.compositeQuery}=${encodeURIComponent( + JSON.stringify(query), + )}`;