From 79631bdd154120d71010983bc0780bad801e579f Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com> Date: Wed, 10 Apr 2024 20:39:43 +0300 Subject: [PATCH] DashboardScene: prevent panel hovel header crop with scenes (#85869) * add behaviour that adjusts hoverHeaderOffset * clean up behaviour logic * optimise and extract behaviour to separate file * fix hoverHeaderOffsetBehavior unsubscribe * update to latest scenes version * Fix PanelOptionsTest * fix: test value for adhoc filter url param * Fix transformation tab tests * bump scenes version * Revert "Fix transformation tab tests" This reverts commit 3ec9f5b226dc528781cc8a3184f403b19fb1f940. --------- Co-authored-by: Dominik Prokop Co-authored-by: Darren Janeczek Co-authored-by: oscarkilhed --- package.json | 2 +- .../panel-edit/PanelOptions.test.tsx | 7 +++++++ .../scene/hoverHeaderOffsetBehavior.ts | 18 ++++++++++++++++++ .../serialization/transformSaveModelToScene.ts | 3 +++ .../trails/TrailStore/TrailStore.test.ts | 2 +- yarn.lock | 10 +++++----- 6 files changed, 35 insertions(+), 7 deletions(-) create mode 100644 public/app/features/dashboard-scene/scene/hoverHeaderOffsetBehavior.ts diff --git a/package.json b/package.json index 07979a04182..77ec738d675 100644 --- a/package.json +++ b/package.json @@ -255,7 +255,7 @@ "@grafana/prometheus": "workspace:*", "@grafana/runtime": "workspace:*", "@grafana/saga-icons": "workspace:*", - "@grafana/scenes": "^4.5.4", + "@grafana/scenes": "^4.6.0", "@grafana/schema": "workspace:*", "@grafana/sql": "workspace:*", "@grafana/ui": "workspace:*", diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx index 973d6a433fb..e8d70ee76d7 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx @@ -22,6 +22,13 @@ jest.mock('react-router-dom', () => ({ }), })); +jest.mock('@grafana/runtime', () => ({ + ...jest.requireActual('@grafana/runtime'), + getPluginImportUtils: () => ({ + getPanelPluginFromCache: jest.fn(), + }), +})); + // Needed when the panel is not part of an DashboardScene jest.spyOn(utils, 'getDashboardSceneFor').mockReturnValue(new DashboardScene({})); diff --git a/public/app/features/dashboard-scene/scene/hoverHeaderOffsetBehavior.ts b/public/app/features/dashboard-scene/scene/hoverHeaderOffsetBehavior.ts new file mode 100644 index 00000000000..9a8df0480ea --- /dev/null +++ b/public/app/features/dashboard-scene/scene/hoverHeaderOffsetBehavior.ts @@ -0,0 +1,18 @@ +import { VizPanel } from '@grafana/scenes'; + +import { DashboardGridItem } from './DashboardGridItem'; + +export const hoverHeaderOffsetBehavior = (grid: DashboardGridItem) => { + const sub = grid.subscribeToState((newState, prevState) => { + if ([newState.y, prevState.y].includes(0) && newState.y !== prevState.y) { + grid.forEachChild((child) => { + if (child instanceof VizPanel && child.state.hoverHeader) { + child.setState({ hoverHeaderOffset: grid.state.y === 0 ? 0 : undefined }); + } + }); + } + }); + return () => { + sub.unsubscribe(); + }; +}; diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts index bbbae286968..68286638784 100644 --- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts +++ b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts @@ -47,6 +47,7 @@ import { panelLinksBehavior, panelMenuBehavior } from '../scene/PanelMenuBehavio import { PanelNotices } from '../scene/PanelNotices'; import { PanelTimeRange } from '../scene/PanelTimeRange'; import { RowRepeaterBehavior } from '../scene/RowRepeaterBehavior'; +import { hoverHeaderOffsetBehavior } from '../scene/hoverHeaderOffsetBehavior'; import { RowActions } from '../scene/row-actions/RowActions'; import { setDashboardPanelContext } from '../scene/setDashboardPanelContext'; import { createPanelDataProvider } from '../utils/createPanelDataProvider'; @@ -506,6 +507,7 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem { displayMode: panel.transparent ? 'transparent' : undefined, // To be replaced with it's own option persited option instead derived hoverHeader: !panel.title && !panel.timeFrom && !panel.timeShift, + hoverHeaderOffset: (panel.gridPos?.y ?? 0) === 0 ? 0 : undefined, $data: createPanelDataProvider(panel), titleItems, @@ -539,6 +541,7 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem { body, maxPerRow: panel.maxPerRow, ...repeatOptions, + $behaviors: [hoverHeaderOffsetBehavior], }); } diff --git a/public/app/features/trails/TrailStore/TrailStore.test.ts b/public/app/features/trails/TrailStore/TrailStore.test.ts index 2aa5d1671e6..1b6c1447fa6 100644 --- a/public/app/features/trails/TrailStore/TrailStore.test.ts +++ b/public/app/features/trails/TrailStore/TrailStore.test.ts @@ -136,7 +136,7 @@ describe('TrailStore', () => { ['to', 'now-30m'], ['var-ds', '1234'], ['var-groupby', 'job'], - ['var-filters', 'test'], + ['var-filters', 'cluster|=|dev-eu-west-2'], ])(`new recent trails with a different '%p' value should insert new entry`, (key, differentValue) => { const store = getTrailStore(); // We expect the initialized trail to be there diff --git a/yarn.lock b/yarn.lock index 44ca7a23360..3325f2d2166 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4183,9 +4183,9 @@ __metadata: languageName: unknown linkType: soft -"@grafana/scenes@npm:^4.5.4": - version: 4.5.4 - resolution: "@grafana/scenes@npm:4.5.4" +"@grafana/scenes@npm:^4.6.0": + version: 4.6.0 + resolution: "@grafana/scenes@npm:4.6.0" dependencies: "@grafana/e2e-selectors": "npm:10.3.3" react-grid-layout: "npm:1.3.4" @@ -4199,7 +4199,7 @@ __metadata: "@grafana/ui": ^10.0.3 react: ^18.0.0 react-dom: ^18.0.0 - checksum: 10/db483dfd204b5b3f2d61b72e1a4209137734ed20d860f823e48a549fee2f2ef490ab26ed239a13aed095d74f929200cb18a666bb995aad6ef785fb806cac65ce + checksum: 10/72682ce36cd505b7d0842f19e5e433b3dcb1675111c78b29d5c18761316e0e80c128e03cb0f72db72c6a9cde502915cb78751c2c13fc70412a0bead5d76fb050 languageName: node linkType: hard @@ -18671,7 +18671,7 @@ __metadata: "@grafana/prometheus": "workspace:*" "@grafana/runtime": "workspace:*" "@grafana/saga-icons": "workspace:*" - "@grafana/scenes": "npm:^4.5.4" + "@grafana/scenes": "npm:^4.6.0" "@grafana/schema": "workspace:*" "@grafana/sql": "workspace:*" "@grafana/tsconfig": "npm:^1.3.0-rc1"