From 2dc5872bd68ce996e64551cd757bf8cfa41298c2 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Thu, 27 Apr 2023 11:11:19 +0100 Subject: [PATCH] New Dashboard: Fix "build a dashboard" when empty dash page feature is enabled (#66816) * New Dashboard: Fix "build a dashboard" when used with empty dash page feature Closes #66659 --- .../AddPanelButton/AddPanelMenu.tsx | 8 ++++- .../containers/NewDashboardWithDS.tsx | 32 ++++++++++++------- .../dashboard/dashgrid/DashboardEmpty.tsx | 8 ++++- .../app/features/dashboard/state/reducers.ts | 5 +++ .../app/features/dashboard/utils/dashboard.ts | 3 +- public/app/types/dashboard.ts | 3 +- 6 files changed, 43 insertions(+), 16 deletions(-) diff --git a/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx b/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx index f7f69edb45e..4ec49a60bfc 100644 --- a/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx +++ b/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx @@ -12,6 +12,9 @@ import { onCreateNewRow, onPasteCopiedPanel, } from 'app/features/dashboard/utils/dashboard'; +import { useDispatch, useSelector } from 'app/types'; + +import { setInitialDatasource } from '../../state/reducers'; interface Props { dashboard: DashboardModel; @@ -19,6 +22,8 @@ interface Props { export const AddPanelMenu = ({ dashboard }: Props) => { const copiedPanelPlugin = useMemo(() => getCopiedPanelPlugin(), []); + const dispatch = useDispatch(); + const initialDatasource = useSelector((state) => state.dashboard.initialDatasource); return ( @@ -27,9 +32,10 @@ export const AddPanelMenu = ({ dashboard }: Props) => { label={t('dashboard.add-menu.visualization', 'Visualization')} testId={selectors.components.PageToolbar.itemButton('Add new visualization menu item')} onClick={() => { + const id = onCreateNewPanel(dashboard, initialDatasource); reportInteraction('dashboards_toolbar_add_clicked', { item: 'add_visualization' }); - const id = onCreateNewPanel(dashboard); locationService.partial({ editPanel: id }); + dispatch(setInitialDatasource(undefined)); }} /> ) { const [error, setError] = useState(null); const { datasourceUid } = props.match.params; + const dispatch = useDispatch(); useEffect(() => { const ds = getDataSourceSrv().getInstanceSettings(datasourceUid); @@ -17,19 +20,24 @@ export default function NewDashboardWithDS(props: GrafanaRouteComponentProps<{ d return; } - const newDashboard = getNewDashboardModelData(); - const { dashboard } = newDashboard; - dashboard.panels[0] = { - ...dashboard.panels[0], - datasource: { - uid: ds.uid, - type: ds.type, - }, - }; + if (!config.featureToggles.emptyDashboardPage) { + const newDashboard = getNewDashboardModelData(); + const { dashboard } = newDashboard; + dashboard.panels[0] = { + ...dashboard.panels[0], + datasource: { + uid: ds.uid, + type: ds.type, + }, + }; + + setDashboardToFetchFromLocalStorage(newDashboard); + } else { + dispatch(setInitialDatasource(datasourceUid)); + } - setDashboardToFetchFromLocalStorage(newDashboard); locationService.replace('/dashboard/new'); - }, [datasourceUid]); + }, [datasourceUid, dispatch]); if (error) { return ( diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx index 19070bda0cd..581d8f5e3fe 100644 --- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx @@ -7,6 +7,9 @@ import { Button, useStyles2 } from '@grafana/ui'; import { Trans } from 'app/core/internationalization'; import { DashboardModel } from 'app/features/dashboard/state'; import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard'; +import { useDispatch, useSelector } from 'app/types'; + +import { setInitialDatasource } from '../state/reducers'; export interface Props { dashboard: DashboardModel; @@ -15,6 +18,8 @@ export interface Props { export const DashboardEmpty = ({ dashboard, canCreate }: Props) => { const styles = useStyles2(getStyles); + const dispatch = useDispatch(); + const initialDatasource = useSelector((state) => state.dashboard.initialDatasource); return (
@@ -36,9 +41,10 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => { icon="plus" aria-label="Add new panel" onClick={() => { + const id = onCreateNewPanel(dashboard, initialDatasource); reportInteraction('dashboards_emptydashboard_clicked', { item: 'add_visualization' }); - const id = onCreateNewPanel(dashboard); locationService.partial({ editPanel: id }); + dispatch(setInitialDatasource(undefined)); }} disabled={!canCreate} > diff --git a/public/app/features/dashboard/state/reducers.ts b/public/app/features/dashboard/state/reducers.ts index 03e536c5a68..c047aa9051f 100644 --- a/public/app/features/dashboard/state/reducers.ts +++ b/public/app/features/dashboard/state/reducers.ts @@ -14,6 +14,7 @@ export const initialState: DashboardState = { getModel: () => null, permissions: [], initError: null, + initialDatasource: undefined, }; const dashboardSlice = createSlice({ @@ -53,6 +54,9 @@ const dashboardSlice = createSlice({ addPanel: (state, action: PayloadAction) => { //state.panels[action.payload.id] = { pluginId: action.payload.type }; }, + setInitialDatasource: (state, action: PayloadAction) => { + state.initialDatasource = action.payload; + }, }, }); @@ -79,6 +83,7 @@ export const { dashboardInitServices, cleanUpDashboard, addPanel, + setInitialDatasource, } = dashboardSlice.actions; export const dashboardReducer = dashboardSlice.reducer; diff --git a/public/app/features/dashboard/utils/dashboard.ts b/public/app/features/dashboard/utils/dashboard.ts index 3b31aec7c09..bdd342d3c4d 100644 --- a/public/app/features/dashboard/utils/dashboard.ts +++ b/public/app/features/dashboard/utils/dashboard.ts @@ -7,11 +7,12 @@ import store from 'app/core/store'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; import { calculateNewPanelGridPos } from 'app/features/dashboard/utils/panel'; -export function onCreateNewPanel(dashboard: DashboardModel): number | undefined { +export function onCreateNewPanel(dashboard: DashboardModel, datasource?: string): number | undefined { const newPanel: Partial = { type: 'timeseries', title: 'Panel Title', gridPos: calculateNewPanelGridPos(dashboard), + datasource: datasource ? { uid: datasource } : null, isNew: true, }; diff --git a/public/app/types/dashboard.ts b/public/app/types/dashboard.ts index 7ab00843728..f984571ece9 100644 --- a/public/app/types/dashboard.ts +++ b/public/app/types/dashboard.ts @@ -1,5 +1,5 @@ import { DataQuery } from '@grafana/data'; -import { Dashboard } from '@grafana/schema'; +import { Dashboard, DataSourceRef } from '@grafana/schema'; import { DashboardModel } from 'app/features/dashboard/state/DashboardModel'; import { DashboardAcl } from './acl'; @@ -101,6 +101,7 @@ export interface QueriesToUpdateOnDashboardLoad { export interface DashboardState { getModel: GetMutableDashboardModelFn; initPhase: DashboardInitPhase; + initialDatasource?: DataSourceRef['uid']; initError: DashboardInitError | null; permissions: DashboardAcl[]; }