From eab6250142bec7fd1f46358420b04ed1816cd9aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 25 Aug 2023 14:11:47 +0200 Subject: [PATCH] DashboardScene: Move to new folder structure, some refactorings and progress on inspect (#73810) * Progress refactoring * Update * Update * Update * DashboardScene: Folder struct propsal * Rename loading to persistance * Moving and renaming --- .betterer.results | 14 +-- .../inspect/InspectDataTab.tsx | 20 ++++ .../inspect/InspectJsonTab.tsx | 18 ++++ .../inspect/InspectStatsTab.tsx | 26 +++++ .../inspect/PanelInspectDrawer.tsx | 100 ++++++++++++++++++ .../features/dashboard-scene/inspect/types.ts | 7 ++ .../pages}/DashboardScenePage.test.tsx | 3 +- .../pages}/DashboardScenePage.tsx | 2 +- .../scene}/DashboardScene.test.tsx | 0 .../scene}/DashboardScene.tsx | 41 ++++--- .../scene}/DashboardSceneRenderer.tsx | 25 ++--- .../scene}/LibraryVizPanel.tsx | 2 +- .../scene}/NavToolbarActions.tsx | 0 .../scene}/PanelMenuBehavior.tsx | 0 .../scene}/ShareQueryDataProvider.test.ts | 3 +- .../scene}/ShareQueryDataProvider.ts | 2 +- .../serialization}/DashboardsLoader.test.ts | 7 +- .../serialization}/DashboardsLoader.ts | 10 +- .../utils/createPanelDataProvider.ts | 2 +- .../dashboard-scene/utils/findVizPanel.ts | 14 +++ .../utils}/test-utils.ts | 0 .../utils}/utils.ts | 0 .../HelpWizard/SupportSnapshotService.ts | 2 +- .../scenes/dashboard/ScenePanelInspector.tsx | 26 ----- .../scenes/scenes/gridMultiTimeRange.tsx | 2 +- .../features/scenes/scenes/gridMultiple.tsx | 2 +- .../scenes/scenes/gridWithMultipleData.tsx | 2 +- public/app/features/scenes/scenes/index.tsx | 2 +- .../scenes/scenes/queryVariableDemo.tsx | 2 +- .../features/scenes/scenes/sceneWithRows.tsx | 2 +- .../scenes/scenes/transformations.tsx | 2 +- .../features/scenes/scenes/variablesDemo.tsx | 2 +- public/app/routes/routes.tsx | 2 +- 33 files changed, 243 insertions(+), 99 deletions(-) create mode 100644 public/app/features/dashboard-scene/inspect/InspectDataTab.tsx create mode 100644 public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx create mode 100644 public/app/features/dashboard-scene/inspect/InspectStatsTab.tsx create mode 100644 public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx create mode 100644 public/app/features/dashboard-scene/inspect/types.ts rename public/app/features/{scenes/dashboard => dashboard-scene/pages}/DashboardScenePage.test.tsx (98%) rename public/app/features/{scenes/dashboard => dashboard-scene/pages}/DashboardScenePage.tsx (93%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/DashboardScene.test.tsx (100%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/DashboardScene.tsx (83%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/DashboardSceneRenderer.tsx (72%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/LibraryVizPanel.tsx (96%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/NavToolbarActions.tsx (100%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/PanelMenuBehavior.tsx (100%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/ShareQueryDataProvider.test.ts (98%) rename public/app/features/{scenes/dashboard => dashboard-scene/scene}/ShareQueryDataProvider.ts (97%) rename public/app/features/{scenes/dashboard => dashboard-scene/serialization}/DashboardsLoader.test.ts (99%) rename public/app/features/{scenes/dashboard => dashboard-scene/serialization}/DashboardsLoader.ts (96%) rename public/app/features/{scenes/dashboard => dashboard-scene}/utils/createPanelDataProvider.ts (94%) create mode 100644 public/app/features/dashboard-scene/utils/findVizPanel.ts rename public/app/features/{scenes/dashboard => dashboard-scene/utils}/test-utils.ts (100%) rename public/app/features/{scenes/dashboard => dashboard-scene/utils}/utils.ts (100%) delete mode 100644 public/app/features/scenes/dashboard/ScenePanelInspector.tsx diff --git a/.betterer.results b/.betterer.results index 0ca5970d53b..1ce829901f0 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1952,6 +1952,13 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], + "public/app/features/dashboard-scene/utils/test-utils.ts:5381": [ + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "Do not use any type assertions.", "1"], + [0, 0, 0, "Do not use any type assertions.", "2"], + [0, 0, 0, "Unexpected any. Specify a different type.", "3"], + [0, 0, 0, "Do not use any type assertions.", "4"] + ], "public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -2830,13 +2837,6 @@ exports[`better eslint`] = { "public/app/features/sandbox/TestStuffPage.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/features/scenes/dashboard/test-utils.ts:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"] - ], "public/app/features/search/components/SearchCard.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], diff --git a/public/app/features/dashboard-scene/inspect/InspectDataTab.tsx b/public/app/features/dashboard-scene/inspect/InspectDataTab.tsx new file mode 100644 index 00000000000..489b39b738a --- /dev/null +++ b/public/app/features/dashboard-scene/inspect/InspectDataTab.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { SceneComponentProps, SceneObjectBase, VizPanel } from '@grafana/scenes'; +import { t } from 'app/core/internationalization'; + +import { InspectTab } from '../../inspector/types'; + +import { InspectTabState } from './types'; + +export class InspectDataTab extends SceneObjectBase { + constructor(public panel: VizPanel) { + super({ label: t('dashboard.inspect.data-tab', 'Data'), value: InspectTab.Data }); + } + + static Component = ({ model }: SceneComponentProps) => { + //const data = sceneGraph.getData(model.panel).useState(); + + return
Data tab
; + }; +} diff --git a/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx b/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx new file mode 100644 index 00000000000..2689c1dbc42 --- /dev/null +++ b/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import { SceneComponentProps, SceneObjectBase, VizPanel } from '@grafana/scenes'; +import { t } from 'app/core/internationalization'; + +import { InspectTab } from '../../inspector/types'; + +import { InspectTabState } from './types'; + +export class InspectJsonTab extends SceneObjectBase { + constructor(public panel: VizPanel) { + super({ label: t('dashboard.inspect.json-tab', 'JSON'), value: InspectTab.JSON }); + } + + static Component = ({ model }: SceneComponentProps) => { + return
JSON
; + }; +} diff --git a/public/app/features/dashboard-scene/inspect/InspectStatsTab.tsx b/public/app/features/dashboard-scene/inspect/InspectStatsTab.tsx new file mode 100644 index 00000000000..9fa07c7896e --- /dev/null +++ b/public/app/features/dashboard-scene/inspect/InspectStatsTab.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { SceneComponentProps, sceneGraph, SceneObjectBase, VizPanel } from '@grafana/scenes'; +import { t } from 'app/core/internationalization'; + +import { InspectStatsTab as OldInspectStatsTab } from '../../inspector/InspectStatsTab'; +import { InspectTab } from '../../inspector/types'; + +import { InspectTabState } from './types'; + +export class InspectStatsTab extends SceneObjectBase { + constructor(public panel: VizPanel) { + super({ label: t('dashboard.inspect.stats-tab', 'Stats'), value: InspectTab.Stats }); + } + + static Component = ({ model }: SceneComponentProps) => { + const data = sceneGraph.getData(model.panel).useState(); + const timeRange = sceneGraph.getTimeRange(model.panel); + + if (!data.data) { + return null; + } + + return ; + }; +} diff --git a/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx b/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx new file mode 100644 index 00000000000..83e0418a481 --- /dev/null +++ b/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { useLocation } from 'react-router-dom'; + +import { locationUtil } from '@grafana/data'; +import { locationService } from '@grafana/runtime'; +import { + SceneComponentProps, + SceneObjectBase, + SceneObjectState, + SceneObject, + sceneGraph, + VizPanel, +} from '@grafana/scenes'; +import { Drawer, Tab, TabsBar } from '@grafana/ui'; +import { supportsDataQuery } from 'app/features/dashboard/components/PanelEditor/utils'; + +import { InspectDataTab } from './InspectDataTab'; +import { InspectJsonTab } from './InspectJsonTab'; +import { InspectStatsTab } from './InspectStatsTab'; +import { InspectTabState } from './types'; + +interface PanelInspectDrawerState extends SceneObjectState { + tabs?: Array>; +} + +export class PanelInspectDrawer extends SceneObjectBase { + static Component = ScenePanelInspectorRenderer; + + // Not stored in state as this is just a reference and it never changes + private _panel: VizPanel; + + constructor(panel: VizPanel) { + super({}); + + this._panel = panel; + this.buildTabs(); + } + + buildTabs() { + const plugin = this._panel.getPlugin(); + const tabs: Array> = []; + + if (plugin) { + if (supportsDataQuery(plugin)) { + tabs.push(new InspectDataTab(this._panel)); + tabs.push(new InspectStatsTab(this._panel)); + } + } + + tabs.push(new InspectJsonTab(this._panel)); + + this.setState({ tabs }); + } + + getDrawerTitle() { + return sceneGraph.interpolate(this._panel, `Inspect: ${this._panel.state.title}`); + } + + onClose = () => { + locationService.partial({ inspect: null, inspectTab: null }); + }; +} + +function ScenePanelInspectorRenderer({ model }: SceneComponentProps) { + const { tabs } = model.useState(); + const location = useLocation(); + const queryParams = new URLSearchParams(location.search); + + if (!tabs) { + return null; + } + + const urlTab = queryParams.get('inspectTab'); + const currentTab = tabs.find((tab) => tab.state.value === urlTab) ?? tabs[0]; + + return ( + + {tabs.map((tab) => { + return ( + + ); + })} + + } + > + {currentTab.Component && } + + ); +} diff --git a/public/app/features/dashboard-scene/inspect/types.ts b/public/app/features/dashboard-scene/inspect/types.ts new file mode 100644 index 00000000000..209b3218ce2 --- /dev/null +++ b/public/app/features/dashboard-scene/inspect/types.ts @@ -0,0 +1,7 @@ +import { SceneObjectState } from '@grafana/scenes'; +import { InspectTab } from 'app/features/inspector/types'; + +export interface InspectTabState extends SceneObjectState { + label: string; + value: InspectTab; +} diff --git a/public/app/features/scenes/dashboard/DashboardScenePage.test.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx similarity index 98% rename from public/app/features/scenes/dashboard/DashboardScenePage.test.tsx rename to public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx index f1bb1af432a..f619fa5ccd4 100644 --- a/public/app/features/scenes/dashboard/DashboardScenePage.test.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx @@ -9,8 +9,9 @@ import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks'; import { config, locationService, setPluginImportUtils } from '@grafana/runtime'; import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps'; +import { setupLoadDashboardMock } from '../utils/test-utils'; + import { DashboardScenePage, Props } from './DashboardScenePage'; -import { setupLoadDashboardMock } from './test-utils'; function setup() { const context = getGrafanaContextMock(); diff --git a/public/app/features/scenes/dashboard/DashboardScenePage.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx similarity index 93% rename from public/app/features/scenes/dashboard/DashboardScenePage.tsx rename to public/app/features/dashboard-scene/pages/DashboardScenePage.tsx index e774cd75786..711959833f2 100644 --- a/public/app/features/scenes/dashboard/DashboardScenePage.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx @@ -6,7 +6,7 @@ import { Page } from 'app/core/components/Page/Page'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; -import { getDashboardLoader } from './DashboardsLoader'; +import { getDashboardLoader } from '../serialization/DashboardsLoader'; export interface Props extends GrafanaRouteComponentProps<{ uid: string }> {} diff --git a/public/app/features/scenes/dashboard/DashboardScene.test.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx similarity index 100% rename from public/app/features/scenes/dashboard/DashboardScene.test.tsx rename to public/app/features/dashboard-scene/scene/DashboardScene.test.tsx diff --git a/public/app/features/scenes/dashboard/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx similarity index 83% rename from public/app/features/scenes/dashboard/DashboardScene.tsx rename to public/app/features/dashboard-scene/scene/DashboardScene.tsx index e67047351c4..7090665c0b9 100644 --- a/public/app/features/scenes/dashboard/DashboardScene.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.tsx @@ -4,7 +4,6 @@ import { AppEvents, locationUtil, NavModelItem } from '@grafana/data'; import { locationService } from '@grafana/runtime'; import { getUrlSyncManager, - sceneGraph, SceneGridItem, SceneGridLayout, SceneObject, @@ -13,12 +12,13 @@ import { SceneObjectStateChangedEvent, SceneObjectUrlSyncHandler, SceneObjectUrlValues, - VizPanel, } from '@grafana/scenes'; import appEvents from 'app/core/app_events'; -import { DashboardSceneRenderer } from './DashboardSceneRenderer'; -import { forceRenderChildren } from './utils'; +import { PanelInspectDrawer } from '../inspect/PanelInspectDrawer'; +import { DashboardSceneRenderer } from '../scene/DashboardSceneRenderer'; +import { findVizPanel } from '../utils/findVizPanel'; +import { forceRenderChildren } from '../utils/utils'; export interface DashboardSceneState extends SceneObjectState { title: string; @@ -32,6 +32,8 @@ export interface DashboardSceneState extends SceneObjectState { inspectPanelKey?: string; /** Scene object key for object to view in fullscreen */ viewPanelKey?: string; + /** Scene object that handles the current drawer */ + drawer?: SceneObject; } export class DashboardScene extends SceneObjectBase { @@ -51,19 +53,6 @@ export class DashboardScene extends SceneObjectBase { this.subscribeToEvent(SceneObjectStateChangedEvent, this.onChildStateChanged); } - findPanel(key: string | undefined): VizPanel | null { - if (!key) { - return null; - } - - const obj = sceneGraph.findObject(this, (obj) => obj.state.key === key); - if (obj instanceof VizPanel) { - return obj; - } - - return null; - } - onChildStateChanged = (event: SceneObjectStateChangedEvent) => { // Temporary hacky way to detect changes if (event.payload.changedObject instanceof SceneGridItem) { @@ -97,10 +86,6 @@ export class DashboardScene extends SceneObjectBase { } }; - onCloseInspectDrawer = () => { - locationService.partial({ inspect: null }); - }; - getPageNav(location: H.Location) { let pageNav: NavModelItem = { text: this.state.title, @@ -116,6 +101,14 @@ export class DashboardScene extends SceneObjectBase { return pageNav; } + + /** + * Returns the body (layout) or the full view panel + */ + getBodyToRender(viewPanelKey?: string): SceneObject { + const viewPanel = findVizPanel(this, viewPanelKey); + return viewPanel ?? this.state.body; + } } class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { @@ -136,7 +129,7 @@ class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { // Handle inspect object state if (typeof values.inspect === 'string') { - const panel = this._scene.findPanel(values.inspect); + const panel = findVizPanel(this._scene, values.inspect); if (!panel) { appEvents.emit(AppEvents.alertError, ['Panel not found']); locationService.partial({ inspect: null }); @@ -144,13 +137,15 @@ class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { } update.inspectPanelKey = values.inspect; + update.drawer = new PanelInspectDrawer(panel); } else if (inspectPanelKey) { update.inspectPanelKey = undefined; + update.drawer = undefined; } // Handle view panel state if (typeof values.viewPanel === 'string') { - const panel = this._scene.findPanel(values.viewPanel); + const panel = findVizPanel(this._scene, values.viewPanel); if (!panel) { appEvents.emit(AppEvents.alertError, ['Panel not found']); locationService.partial({ viewPanel: null }); diff --git a/public/app/features/scenes/dashboard/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx similarity index 72% rename from public/app/features/scenes/dashboard/DashboardSceneRenderer.tsx rename to public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index cba4e03cca9..5e81c05c243 100644 --- a/public/app/features/scenes/dashboard/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -9,15 +9,13 @@ import { Page } from 'app/core/components/Page/Page'; import { DashboardScene } from './DashboardScene'; import { NavToolbarActions } from './NavToolbarActions'; -import { ScenePanelInspector } from './ScenePanelInspector'; export function DashboardSceneRenderer({ model }: SceneComponentProps) { - const { body, controls, inspectPanelKey, viewPanelKey } = model.useState(); + const { controls, viewPanelKey, drawer } = model.useState(); const styles = useStyles2(getStyles); - const inspectPanel = model.findPanel(inspectPanelKey); - const viewPanel = model.findPanel(viewPanelKey); const location = useLocation(); const pageNav = model.getPageNav(location); + const bodyToRender = model.getBodyToRender(viewPanelKey); return ( @@ -31,18 +29,12 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps )} - {viewPanel ? ( -
- -
- ) : ( -
- -
- )} +
+ +
- {inspectPanel && } + {drawer && } ); } @@ -62,11 +54,6 @@ function getStyles(theme: GrafanaTheme2) { flexGrow: 1, display: 'flex', gap: '8px', - }), - viewPanel: css({ - display: 'flex', - position: 'relative', - flexGrow: 1, marginBottom: theme.spacing(2), }), controls: css({ diff --git a/public/app/features/scenes/dashboard/LibraryVizPanel.tsx b/public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx similarity index 96% rename from public/app/features/scenes/dashboard/LibraryVizPanel.tsx rename to public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx index a72ac551f19..731ad9d5068 100644 --- a/public/app/features/scenes/dashboard/LibraryVizPanel.tsx +++ b/public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx @@ -4,7 +4,7 @@ import { SceneComponentProps, SceneObjectBase, SceneObjectState, VizPanel } from import { PanelModel } from 'app/features/dashboard/state'; import { getLibraryPanel } from 'app/features/library-panels/state/api'; -import { createPanelDataProvider } from './utils/createPanelDataProvider'; +import { createPanelDataProvider } from '../utils/createPanelDataProvider'; interface LibraryVizPanelState extends SceneObjectState { // Library panels use title from dashboard JSON's panel model, not from library panel definition, hence we pass it. diff --git a/public/app/features/scenes/dashboard/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx similarity index 100% rename from public/app/features/scenes/dashboard/NavToolbarActions.tsx rename to public/app/features/dashboard-scene/scene/NavToolbarActions.tsx diff --git a/public/app/features/scenes/dashboard/PanelMenuBehavior.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx similarity index 100% rename from public/app/features/scenes/dashboard/PanelMenuBehavior.tsx rename to public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx diff --git a/public/app/features/scenes/dashboard/ShareQueryDataProvider.test.ts b/public/app/features/dashboard-scene/scene/ShareQueryDataProvider.test.ts similarity index 98% rename from public/app/features/scenes/dashboard/ShareQueryDataProvider.test.ts rename to public/app/features/dashboard-scene/scene/ShareQueryDataProvider.test.ts index 04eb9fc3b17..317414aa5b4 100644 --- a/public/app/features/scenes/dashboard/ShareQueryDataProvider.test.ts +++ b/public/app/features/dashboard-scene/scene/ShareQueryDataProvider.test.ts @@ -8,8 +8,9 @@ import { SceneObjectState, } from '@grafana/scenes'; +import { activateFullSceneTree, getVizPanelKeyForPanelId } from '../utils/utils'; + import { ShareQueryDataProvider } from './ShareQueryDataProvider'; -import { activateFullSceneTree, getVizPanelKeyForPanelId } from './utils'; export class SceneDummyPanel extends SceneObjectBase {} diff --git a/public/app/features/scenes/dashboard/ShareQueryDataProvider.ts b/public/app/features/dashboard-scene/scene/ShareQueryDataProvider.ts similarity index 97% rename from public/app/features/scenes/dashboard/ShareQueryDataProvider.ts rename to public/app/features/dashboard-scene/scene/ShareQueryDataProvider.ts index 703c4c9eb0f..d0bc18a5d3b 100644 --- a/public/app/features/scenes/dashboard/ShareQueryDataProvider.ts +++ b/public/app/features/dashboard-scene/scene/ShareQueryDataProvider.ts @@ -10,7 +10,7 @@ import { } from '@grafana/scenes'; import { DashboardQuery } from 'app/plugins/datasource/dashboard/types'; -import { getVizPanelKeyForPanelId } from './utils'; +import { getVizPanelKeyForPanelId } from '../utils/utils'; export interface ShareQueryDataProviderState extends SceneDataState { query: DashboardQuery; diff --git a/public/app/features/scenes/dashboard/DashboardsLoader.test.ts b/public/app/features/dashboard-scene/serialization/DashboardsLoader.test.ts similarity index 99% rename from public/app/features/scenes/dashboard/DashboardsLoader.test.ts rename to public/app/features/dashboard-scene/serialization/DashboardsLoader.test.ts index 7f40eafd124..a5378a1f28c 100644 --- a/public/app/features/scenes/dashboard/DashboardsLoader.test.ts +++ b/public/app/features/dashboard-scene/serialization/DashboardsLoader.test.ts @@ -19,15 +19,16 @@ import { createPanelJSONFixture } from 'app/features/dashboard/state/__fixtures_ import { SHARED_DASHBOARD_QUERY } from 'app/plugins/datasource/dashboard'; import { DASHBOARD_DATASOURCE_PLUGIN_ID } from 'app/plugins/datasource/dashboard/types'; -import { DashboardScene } from './DashboardScene'; +import { DashboardScene } from '../scene/DashboardScene'; +import { ShareQueryDataProvider } from '../scene/ShareQueryDataProvider'; +import { setupLoadDashboardMock } from '../utils/test-utils'; + import { createDashboardSceneFromDashboardModel, createVizPanelFromPanelModel, createSceneVariableFromVariableModel, DashboardLoader, } from './DashboardsLoader'; -import { ShareQueryDataProvider } from './ShareQueryDataProvider'; -import { setupLoadDashboardMock } from './test-utils'; describe('DashboardLoader', () => { describe('when fetching/loading a dashboard', () => { diff --git a/public/app/features/scenes/dashboard/DashboardsLoader.ts b/public/app/features/dashboard-scene/serialization/DashboardsLoader.ts similarity index 96% rename from public/app/features/scenes/dashboard/DashboardsLoader.ts rename to public/app/features/dashboard-scene/serialization/DashboardsLoader.ts index 2190b318c3f..50edf30a7de 100644 --- a/public/app/features/scenes/dashboard/DashboardsLoader.ts +++ b/public/app/features/dashboard-scene/serialization/DashboardsLoader.ts @@ -29,11 +29,11 @@ import { StateManagerBase } from 'app/core/services/StateManagerBase'; import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; -import { DashboardScene } from './DashboardScene'; -import { LibraryVizPanel } from './LibraryVizPanel'; -import { panelMenuBehavior } from './PanelMenuBehavior'; -import { getVizPanelKeyForPanelId } from './utils'; -import { createPanelDataProvider } from './utils/createPanelDataProvider'; +import { DashboardScene } from '../scene/DashboardScene'; +import { LibraryVizPanel } from '../scene/LibraryVizPanel'; +import { panelMenuBehavior } from '../scene/PanelMenuBehavior'; +import { createPanelDataProvider } from '../utils/createPanelDataProvider'; +import { getVizPanelKeyForPanelId } from '../utils/utils'; export interface DashboardLoaderState { dashboard?: DashboardScene; diff --git a/public/app/features/scenes/dashboard/utils/createPanelDataProvider.ts b/public/app/features/dashboard-scene/utils/createPanelDataProvider.ts similarity index 94% rename from public/app/features/scenes/dashboard/utils/createPanelDataProvider.ts rename to public/app/features/dashboard-scene/utils/createPanelDataProvider.ts index 71ba47b717b..fa2c3b8da05 100644 --- a/public/app/features/scenes/dashboard/utils/createPanelDataProvider.ts +++ b/public/app/features/dashboard-scene/utils/createPanelDataProvider.ts @@ -3,7 +3,7 @@ import { SceneDataProvider, SceneDataTransformer, SceneQueryRunner } from '@graf import { PanelModel } from 'app/features/dashboard/state'; import { SHARED_DASHBOARD_QUERY } from 'app/plugins/datasource/dashboard'; -import { ShareQueryDataProvider } from '../ShareQueryDataProvider'; +import { ShareQueryDataProvider } from '../scene/ShareQueryDataProvider'; export function createPanelDataProvider(panel: PanelModel): SceneDataProvider | undefined { // Skip setting query runner for panels without queries diff --git a/public/app/features/dashboard-scene/utils/findVizPanel.ts b/public/app/features/dashboard-scene/utils/findVizPanel.ts new file mode 100644 index 00000000000..a55c54d31ef --- /dev/null +++ b/public/app/features/dashboard-scene/utils/findVizPanel.ts @@ -0,0 +1,14 @@ +import { sceneGraph, SceneObject, VizPanel } from '@grafana/scenes'; + +export function findVizPanel(scene: SceneObject, key: string | undefined): VizPanel | null { + if (!key) { + return null; + } + + const obj = sceneGraph.findObject(scene, (obj) => obj.state.key === key); + if (obj instanceof VizPanel) { + return obj; + } + + return null; +} diff --git a/public/app/features/scenes/dashboard/test-utils.ts b/public/app/features/dashboard-scene/utils/test-utils.ts similarity index 100% rename from public/app/features/scenes/dashboard/test-utils.ts rename to public/app/features/dashboard-scene/utils/test-utils.ts diff --git a/public/app/features/scenes/dashboard/utils.ts b/public/app/features/dashboard-scene/utils/utils.ts similarity index 100% rename from public/app/features/scenes/dashboard/utils.ts rename to public/app/features/dashboard-scene/utils/utils.ts diff --git a/public/app/features/dashboard/components/HelpWizard/SupportSnapshotService.ts b/public/app/features/dashboard/components/HelpWizard/SupportSnapshotService.ts index 54d29528b70..4b8dd8e83c9 100644 --- a/public/app/features/dashboard/components/HelpWizard/SupportSnapshotService.ts +++ b/public/app/features/dashboard/components/HelpWizard/SupportSnapshotService.ts @@ -4,7 +4,7 @@ import { dateTimeFormat, formattedValueToString, getValueFormat, SelectableValue import { config } from '@grafana/runtime'; import { SceneObject } from '@grafana/scenes'; import { StateManagerBase } from 'app/core/services/StateManagerBase'; -import { createDashboardSceneFromDashboardModel } from 'app/features/scenes/dashboard/DashboardsLoader'; +import { createDashboardSceneFromDashboardModel } from 'app/features/dashboard-scene/serialization/DashboardsLoader'; import { getTimeSrv } from '../../services/TimeSrv'; import { DashboardModel, PanelModel } from '../../state'; diff --git a/public/app/features/scenes/dashboard/ScenePanelInspector.tsx b/public/app/features/scenes/dashboard/ScenePanelInspector.tsx deleted file mode 100644 index 2bde4efd89a..00000000000 --- a/public/app/features/scenes/dashboard/ScenePanelInspector.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { VizPanel } from '@grafana/scenes'; -import { Drawer } from '@grafana/ui'; - -import { DashboardScene } from './DashboardScene'; - -interface Props { - dashboard: DashboardScene; - panel: VizPanel; -} - -export const ScenePanelInspector = React.memo(({ panel, dashboard }) => { - return ( - - Magic content - - ); -}); - -ScenePanelInspector.displayName = 'ScenePanelInspector'; diff --git a/public/app/features/scenes/scenes/gridMultiTimeRange.tsx b/public/app/features/scenes/scenes/gridMultiTimeRange.tsx index af6477ad56a..6b9768fd359 100644 --- a/public/app/features/scenes/scenes/gridMultiTimeRange.tsx +++ b/public/app/features/scenes/scenes/gridMultiTimeRange.tsx @@ -9,7 +9,7 @@ import { } from '@grafana/scenes'; import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getQueryRunnerWithRandomWalkQuery } from './queries'; diff --git a/public/app/features/scenes/scenes/gridMultiple.tsx b/public/app/features/scenes/scenes/gridMultiple.tsx index 5c9ab168158..73633d61873 100644 --- a/public/app/features/scenes/scenes/gridMultiple.tsx +++ b/public/app/features/scenes/scenes/gridMultiple.tsx @@ -9,7 +9,7 @@ import { PanelBuilders, } from '@grafana/scenes'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getQueryRunnerWithRandomWalkQuery } from './queries'; diff --git a/public/app/features/scenes/scenes/gridWithMultipleData.tsx b/public/app/features/scenes/scenes/gridWithMultipleData.tsx index 8ece96231a4..31d8aa7fc01 100644 --- a/public/app/features/scenes/scenes/gridWithMultipleData.tsx +++ b/public/app/features/scenes/scenes/gridWithMultipleData.tsx @@ -9,7 +9,7 @@ import { } from '@grafana/scenes'; import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getQueryRunnerWithRandomWalkQuery } from './queries'; diff --git a/public/app/features/scenes/scenes/index.tsx b/public/app/features/scenes/scenes/index.tsx index 6915368b9ea..6a07ab95c8a 100644 --- a/public/app/features/scenes/scenes/index.tsx +++ b/public/app/features/scenes/scenes/index.tsx @@ -1,4 +1,4 @@ -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getGridWithMultipleTimeRanges } from './gridMultiTimeRange'; import { getMultipleGridLayoutTest } from './gridMultiple'; diff --git a/public/app/features/scenes/scenes/queryVariableDemo.tsx b/public/app/features/scenes/scenes/queryVariableDemo.tsx index 809eea886ac..d51143cf783 100644 --- a/public/app/features/scenes/scenes/queryVariableDemo.tsx +++ b/public/app/features/scenes/scenes/queryVariableDemo.tsx @@ -13,7 +13,7 @@ import { SceneFlexItem, } from '@grafana/scenes'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; export function getQueryVariableDemo(): DashboardScene { return new DashboardScene({ diff --git a/public/app/features/scenes/scenes/sceneWithRows.tsx b/public/app/features/scenes/scenes/sceneWithRows.tsx index a77cb82f7c1..2657294c940 100644 --- a/public/app/features/scenes/scenes/sceneWithRows.tsx +++ b/public/app/features/scenes/scenes/sceneWithRows.tsx @@ -8,7 +8,7 @@ import { PanelBuilders, } from '@grafana/scenes'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getQueryRunnerWithRandomWalkQuery } from './queries'; diff --git a/public/app/features/scenes/scenes/transformations.tsx b/public/app/features/scenes/scenes/transformations.tsx index e135561a9e1..15325910085 100644 --- a/public/app/features/scenes/scenes/transformations.tsx +++ b/public/app/features/scenes/scenes/transformations.tsx @@ -8,7 +8,7 @@ import { PanelBuilders, } from '@grafana/scenes'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getQueryRunnerWithRandomWalkQuery } from './queries'; diff --git a/public/app/features/scenes/scenes/variablesDemo.tsx b/public/app/features/scenes/scenes/variablesDemo.tsx index 4a979db4dec..1b63739b602 100644 --- a/public/app/features/scenes/scenes/variablesDemo.tsx +++ b/public/app/features/scenes/scenes/variablesDemo.tsx @@ -15,7 +15,7 @@ import { PanelBuilders, } from '@grafana/scenes'; -import { DashboardScene } from '../dashboard/DashboardScene'; +import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; import { getQueryRunnerWithRandomWalkQuery } from './queries'; diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx index 18da4376132..549cfd8f7ee 100644 --- a/public/app/routes/routes.tsx +++ b/public/app/routes/routes.tsx @@ -560,7 +560,7 @@ export function getDynamicDashboardRoutes(cfg = config): RouteDescriptor[] { { path: '/scenes/dashboard/:uid', component: SafeDynamicImport( - () => import(/* webpackChunkName: "scenes"*/ 'app/features/scenes/dashboard/DashboardScenePage') + () => import(/* webpackChunkName: "scenes"*/ 'app/features/dashboard-scene/pages/DashboardScenePage') ), }, {