From 95836bdb2c33426db942825f4676ce5356965f9b Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 19 Oct 2023 09:27:56 +0200 Subject: [PATCH] Don't use proxy for rendering dashboard page --- .../pages/DashboardScenePage.tsx | 26 ++++++++++++----- .../pages/DashboardScenePageStateManager.ts | 22 ++++++++++++++- .../dashboard-scene/scene/DashboardScene.tsx | 7 ++--- .../scene/DashboardSceneRenderer.tsx | 10 ++----- .../transformSaveModelToScene.ts | 19 +++++++++---- .../dashboard/containers/DashboardPage.tsx | 16 +++++++++++ .../containers/DashboardPageProxy.tsx | 28 ------------------- public/app/routes/routes.tsx | 4 +-- 8 files changed, 76 insertions(+), 56 deletions(-) delete mode 100644 public/app/features/dashboard/containers/DashboardPageProxy.tsx diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx index 1ab9569cb1f..60eee66fc3c 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx @@ -6,27 +6,39 @@ import { Page } from 'app/core/components/Page/Page'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { DashboardPageRouteParams } from 'app/features/dashboard/containers/types'; +import { DashboardModel } from 'app/features/dashboard/state'; import { DashboardRoutes } from 'app/types'; import { getDashboardScenePageStateManager } from './DashboardScenePageStateManager'; -export interface Props extends GrafanaRouteComponentProps {} +export interface Props extends GrafanaRouteComponentProps { + preloadedDashboard?: DashboardModel; +} -export function DashboardScenePage({ match, route }: Props) { +export function DashboardScenePage({ match, route, preloadedDashboard }: Props) { const stateManager = getDashboardScenePageStateManager(); const { dashboard, isLoading, loadError } = stateManager.useState(); useEffect(() => { - if (route.routeName === DashboardRoutes.Home) { - stateManager.loadDashboard(route.routeName); - } else { - stateManager.loadDashboard(match.params.uid); + if (!preloadedDashboard) { + if (route.routeName === DashboardRoutes.Home) { + stateManager.loadDashboard(route.routeName); + } else { + stateManager.loadDashboard(match.params.uid); + } + } + + if ( + (preloadedDashboard && preloadedDashboard.uid === match.params.uid) || + (preloadedDashboard && preloadedDashboard.uid === null && route.routeName === DashboardRoutes.Home) + ) { + stateManager.loadSceneFromDashboardModel(preloadedDashboard, route.routeName === DashboardRoutes.Home); } return () => { stateManager.clearState(); }; - }, [stateManager, match.params.uid, route.routeName]); + }, [stateManager, match.params.uid, route.routeName, preloadedDashboard]); if (!dashboard) { return ( diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts b/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts index 0baad9ac824..820858e1f5c 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts +++ b/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts @@ -2,11 +2,15 @@ import { getBackendSrv } from '@grafana/runtime'; import { StateManagerBase } from 'app/core/services/StateManagerBase'; import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; +import { DashboardModel } from 'app/features/dashboard/state'; import { DashboardDTO, DashboardRoutes } from 'app/types'; import { buildPanelEditScene, PanelEditor } from '../panel-edit/PanelEditor'; import { DashboardScene } from '../scene/DashboardScene'; -import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene'; +import { + createDashboardSceneFromDashboardModel, + transformSaveModelToScene, +} from '../serialization/transformSaveModelToScene'; import { getVizPanelKeyForPanelId, findVizPanelByKey } from '../utils/utils'; export interface DashboardScenePageState { @@ -88,6 +92,22 @@ export class DashboardScenePageStateManager extends StateManagerBase { canEditDashboard() { const { meta } = this.state; - return ( - contextSrv.hasPermission(AccessControlAction.DashboardsWrite) && Boolean(meta.canEdit || meta.canMakeEditable) - ); + return Boolean(meta.canEdit || meta.canMakeEditable); } } diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index f7459a8a0c7..4b0b86dbb38 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -17,15 +17,13 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps
- {hasControls && ( + {controls && (
{controls.map((control) => ( @@ -33,7 +31,7 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps
)} -
+
@@ -60,9 +58,7 @@ function getStyles(theme: GrafanaTheme2) { gap: '8px', marginBottom: theme.spacing(2), }), - bodyNoControls: css({ - paddingTop: theme.spacing(2), - }), + controls: css({ display: 'flex', flexWrap: 'wrap', diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts index 825342252c0..70372708def 100644 --- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts +++ b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts @@ -202,18 +202,25 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel) }); } - const controls: SceneObject[] = [ + let controls: SceneObject[] = [ new VariableValueSelectors({}), ...filtersSets, new SceneDataLayerControls(), new SceneControlsSpacer(), - new SceneTimePicker({}), - new SceneRefreshPicker({ - refresh: oldModel.refresh, - intervals: oldModel.timepicker.refresh_intervals, - }), ]; + if (!Boolean(oldModel.timepicker.hidden)) { + controls = controls.concat([ + new SceneTimePicker({ + hidePicker: Boolean(oldModel.timepicker.hidden), + }), + new SceneRefreshPicker({ + refresh: oldModel.refresh, + intervals: oldModel.timepicker.refresh_intervals, + }), + ]); + } + return new DashboardScene({ title: oldModel.title, uid: oldModel.uid, diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 8e20cf9a98b..93a505a9b16 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -16,6 +16,7 @@ import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { getNavModel } from 'app/core/selectors/navModel'; import { newBrowseDashboardsEnabled } from 'app/features/browse-dashboards/featureFlag'; import { PanelModel } from 'app/features/dashboard/state'; +import DashboardScenePage from 'app/features/dashboard-scene/pages/DashboardScenePage'; import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher'; import { AngularDeprecationNotice } from 'app/features/plugins/angularDeprecation/AngularDeprecationNotice'; import { getPageNavFromSlug, getRootContentNavModel } from 'app/features/storage/StorageFolderPage'; @@ -339,6 +340,21 @@ export class UnthemedDashboardPage extends PureComponent { ); } + if (config.featureToggles.dashboardSceneForViewers) { + if (dashboard && !dashboard.meta.canEdit) { + return ( + + ); + } + } + return ( <> ; - -// This proxy component is used for Dashboard -> Scenes migration. -// It will render DashboardScenePage if user does not have write permissions to a dashboard. -function DashboardPageProxy(props: Props) { - if (config.featureToggles.dashboardSceneForViewers) { - if (contextSrv.hasPermission(AccessControlAction.DashboardsWrite)) { - return ; - } else { - return ; - } - } - - return ; -} - -export default DashboardPageProxy; diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx index 650795045c6..b46e9e8f86d 100644 --- a/public/app/routes/routes.tsx +++ b/public/app/routes/routes.tsx @@ -36,7 +36,7 @@ export function getAppRoutes(): RouteDescriptor[] { pageClass: 'page-dashboard', routeName: DashboardRoutes.Home, component: SafeDynamicImport( - () => import(/* webpackChunkName: "DashboardPageProxy" */ '../features/dashboard/containers/DashboardPageProxy') + () => import(/* webpackChunkName: "DashboardPage" */ '../features/dashboard/containers/DashboardPage') ), }, { @@ -44,7 +44,7 @@ export function getAppRoutes(): RouteDescriptor[] { pageClass: 'page-dashboard', routeName: DashboardRoutes.Normal, component: SafeDynamicImport( - () => import(/* webpackChunkName: "DashboardPageProxy" */ '../features/dashboard/containers/DashboardPageProxy') + () => import(/* webpackChunkName: "DashboardPage" */ '../features/dashboard/containers/DashboardPage') ), }, {