From 97a423aedcbe339354edbb7c656a921376f4cfe6 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Thu, 18 Nov 2021 11:43:47 +0000 Subject: [PATCH] Dashboard: Remove the current panel from the list of options in the Dashboard datasource (#41826) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Dashboard: Update check for current panel * Get datasource name as before * Update public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx Co-authored-by: Hugo Häggmark * import SHARED_DASHBOARD_QUERY * Add some unit tests Co-authored-by: Hugo Häggmark --- .../dashboard/DashboardQueryEditor.test.tsx | 102 ++++++++++++++++++ .../dashboard/DashboardQueryEditor.tsx | 9 +- .../app/plugins/datasource/dashboard/index.ts | 2 +- .../datasource/dashboard/runSharedRequest.ts | 6 +- .../app/plugins/datasource/dashboard/types.ts | 2 +- 5 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx new file mode 100644 index 00000000000..f8499fdbda7 --- /dev/null +++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { getDefaultTimeRange, LoadingState } from '@grafana/data'; +import { SHARED_DASHBOARD_QUERY } from './types'; +import { DashboardQueryEditor } from './DashboardQueryEditor'; +import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; +import { DashboardModel } from 'app/features/dashboard/state'; + +jest.mock('app/core/config', () => ({ + ...((jest.requireActual('app/core/config') as unknown) as object), + panels: { + timeseries: { + info: { + logos: { + small: '', + }, + }, + }, + }, +})); + +jest.mock('app/features/plugins/datasource_srv', () => ({ + getDatasourceSrv: () => ({ + get: () => ({}), + getInstanceSettings: () => ({}), + }), +})); + +describe('DashboardQueryEditor', () => { + const mockOnChange = jest.fn(); + const mockOnRunQueries = jest.fn(); + const mockPanelData = { + state: LoadingState.Done, + series: [], + timeRange: getDefaultTimeRange(), + }; + const mockQueries = [{ refId: 'A' }]; + let mockDashboard: DashboardModel; + + beforeEach(() => { + mockDashboard = new DashboardModel({ + panels: [ + { + targets: [], + type: 'timeseries', + id: 1, + title: 'My first panel', + }, + { + targets: [], + id: 2, + type: 'timeseries', + title: 'Another panel', + }, + { + datasource: { + uid: SHARED_DASHBOARD_QUERY, + }, + targets: [], + id: 3, + type: 'timeseries', + title: 'A dashboard query panel', + }, + ], + }); + jest.spyOn(getDashboardSrv(), 'getCurrent').mockImplementation(() => mockDashboard); + }); + + it('does not show a panel with the SHARED_DASHBOARD_QUERY datasource as an option in the dropdown', () => { + render( + + ); + const select = screen.getByText('Choose panel'); + userEvent.click(select); + expect(screen.getByText('My first panel')).toBeInTheDocument(); + expect(screen.getByText('Another panel')).toBeInTheDocument(); + expect(screen.queryByText('A dashboard query panel')).not.toBeInTheDocument(); + }); + + it('does not show the current panelInEdit as an option in the dropdown', () => { + mockDashboard.initEditPanel(mockDashboard.panels[0]); + render( + + ); + const select = screen.getByText('Choose panel'); + userEvent.click(select); + expect(screen.queryByText('My first panel')).not.toBeInTheDocument(); + expect(screen.getByText('Another panel')).toBeInTheDocument(); + expect(screen.queryByText('A dashboard query panel')).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx index 90f7e037388..4705abb4f02 100644 --- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx +++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx @@ -3,7 +3,7 @@ import { LegacyForms, VerticalGroup } from '@grafana/ui'; import { DataQuery, PanelData, SelectableValue } from '@grafana/data'; import { css } from '@emotion/css'; -import { DashboardQuery, ResultInfo, SHARED_DASHBODARD_QUERY } from './types'; +import { DashboardQuery, ResultInfo, SHARED_DASHBOARD_QUERY } from './types'; import config from 'app/core/config'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { PanelModel } from 'app/features/dashboard/state'; @@ -115,7 +115,8 @@ export class DashboardQueryEditor extends PureComponent { getPanelDescription = (panel: PanelModel): string => { const { defaultDatasource } = this.state; - const dsname = panel.datasource ? panel.datasource : defaultDatasource; + const datasource = panel.datasource ? panel.datasource : defaultDatasource; + const dsname = getDatasourceSrv().getInstanceSettings(datasource)?.name; if (panel.targets.length === 1) { return '1 query to ' + dsname; @@ -141,7 +142,7 @@ export class DashboardQueryEditor extends PureComponent { continue; } - if (panel.targets && panel.datasource !== SHARED_DASHBODARD_QUERY) { + if (panel.targets && panel.id !== dashboard.panelInEdit?.id && panel.datasource?.uid !== SHARED_DASHBOARD_QUERY) { const item = { value: panel.id, label: panel.title ? panel.title : 'Panel ' + panel.id, @@ -174,7 +175,7 @@ export class DashboardQueryEditor extends PureComponent {
Use results from panel