From 2c52304ee64fe8e9fa08bf374b13e9b00b582cc0 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Thu, 27 Apr 2023 11:55:33 +0100 Subject: [PATCH] [v9.5.x] New Dashboard: Fix "build a dashboard" when empty dash page feature is enabled (#67375) New Dashboard: Fix "build a dashboard" when empty dash page feature is enabled (#66816) Closes #66659 (cherry picked from commit 2dc5872bd68ce996e64551cd757bf8cfa41298c2) --- .../AddPanelButton/AddPanelMenu.tsx | 10 ++++-- .../containers/NewDashboardWithDS.tsx | 32 ++++++++++++------- .../dashboard/dashgrid/DashboardEmpty.tsx | 10 ++++-- .../app/features/dashboard/state/reducers.ts | 5 +++ .../app/features/dashboard/utils/dashboard.ts | 3 +- public/app/types/dashboard.ts | 3 +- 6 files changed, 45 insertions(+), 18 deletions(-) diff --git a/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx b/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx index 60a7205d589..eeca3acea5e 100644 --- a/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx +++ b/public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx @@ -11,6 +11,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; @@ -18,6 +21,8 @@ interface Props { export const AddPanelMenu = ({ dashboard }: Props) => { const copiedPanelPlugin = useMemo(() => getCopiedPanelPlugin(), []); + const dispatch = useDispatch(); + const initialDatasource = useSelector((state) => state.dashboard.initialDatasource); return ( @@ -26,9 +31,10 @@ export const AddPanelMenu = ({ dashboard }: Props) => { label="Visualization" testId={selectors.components.PageToolbar.itemButton('Add new visualization menu item')} onClick={() => { - reportInteraction('Create new panel'); - const id = onCreateNewPanel(dashboard); + const id = onCreateNewPanel(dashboard, initialDatasource); + reportInteraction('dashboards_toolbar_add_clicked', { item: 'add_visualization' }); 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 756d8d83053..cd97a028b03 100644 --- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx @@ -6,6 +6,9 @@ import { locationService, reportInteraction } from '@grafana/runtime'; import { Button, useStyles2 } from '@grafana/ui'; 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; @@ -14,6 +17,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 (
@@ -31,9 +36,10 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => { icon="plus" aria-label="Add new panel" onClick={() => { - reportInteraction('Create new panel'); - const id = onCreateNewPanel(dashboard); + const id = onCreateNewPanel(dashboard, initialDatasource); + reportInteraction('dashboards_emptydashboard_clicked', { item: 'add_visualization' }); 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 13fe36eecaa..3b20957cea5 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, }; dashboard.addPanel(newPanel); 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[]; }