diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx index 77460d9dc83..d0122363668 100644 --- a/public/app/features/dashboard/dashgrid/DataPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx @@ -1,9 +1,11 @@ // Library import React, { Component } from 'react'; +// Services +import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; + // Types import { TimeRange, LoadingState, DataQueryOptions, DataQueryResponse, TimeSeries } from 'app/types'; -import { DataSourceApi } from 'app/types/series'; interface RenderProps { loading: LoadingState; @@ -11,7 +13,7 @@ interface RenderProps { } export interface Props { - dataSourceApi: DataSourceApi; + datasource: string | null; queries: any[]; panelId?: number; dashboardId?: number; @@ -19,7 +21,6 @@ export interface Props { timeRange?: TimeRange; refreshCounter: number; children: (r: RenderProps) => JSX.Element; - onIssueQueryResponse: any; } export interface State { @@ -37,6 +38,7 @@ export class DataPanel extends Component { constructor(props: Props) { super(props); + this.state = { loading: LoadingState.NotStarted, response: { @@ -59,19 +61,13 @@ export class DataPanel extends Component { } hasPropsChanged(prevProps: Props) { - const { refreshCounter, isVisible, dataSourceApi } = this.props; - - return ( - refreshCounter !== prevProps.refreshCounter || - isVisible !== prevProps.isVisible || - dataSourceApi !== prevProps.dataSourceApi - ); + return this.props.refreshCounter !== prevProps.refreshCounter || this.props.isVisible !== prevProps.isVisible; } issueQueries = async () => { - const { isVisible, queries, panelId, dashboardId, timeRange, dataSourceApi } = this.props; + const { isVisible, queries, datasource, panelId, dashboardId, timeRange } = this.props; - if (!isVisible || !dataSourceApi) { + if (!isVisible) { return; } @@ -83,6 +79,9 @@ export class DataPanel extends Component { this.setState({ loading: LoadingState.Loading }); try { + const dataSourceSrv = getDatasourceSrv(); + const ds = await dataSourceSrv.get(datasource); + const queryOptions: DataQueryOptions = { timezone: 'browser', panelId: panelId, @@ -98,7 +97,7 @@ export class DataPanel extends Component { }; console.log('Issuing DataPanel query', queryOptions); - const resp = await dataSourceApi.query(queryOptions); + const resp = await ds.query(queryOptions); console.log('Issuing DataPanel query Resp', resp); this.setState({ @@ -106,8 +105,6 @@ export class DataPanel extends Component { response: resp, isFirstLoad: false, }); - - this.props.onIssueQueryResponse(resp.data); } catch (err) { console.log('Loading error', err); this.setState({ loading: LoadingState.Error, isFirstLoad: false }); diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index ba0e9ecedce..4a4669a3950 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -3,7 +3,6 @@ import React, { ComponentClass, PureComponent } from 'react'; // Services import { getTimeSrv } from '../time_srv'; -import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; // Components import { PanelHeader } from './PanelHeader/PanelHeader'; @@ -13,52 +12,36 @@ import { PanelHeaderMenu } from './PanelHeader/PanelHeaderMenu'; // Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; -import { TimeRange, PanelProps, TimeSeries } from 'app/types'; +import { TimeRange, PanelProps } from 'app/types'; import { PanelHeaderGetMenuAdditional } from 'app/types/panel'; -import { DataSourceApi } from 'app/types/series'; -export interface PanelChromeProps { +export interface Props { panel: PanelModel; dashboard: DashboardModel; component: ComponentClass; getMenuAdditional?: PanelHeaderGetMenuAdditional; } -export interface PanelChromeState { +export interface State { refreshCounter: number; renderCounter: number; timeRange?: TimeRange; - timeSeries?: TimeSeries[]; - dataSourceApi?: DataSourceApi; } -export class PanelChrome extends PureComponent { +export class PanelChrome extends PureComponent { constructor(props) { super(props); + this.state = { refreshCounter: 0, renderCounter: 0, }; } - async componentDidMount() { - const { panel } = this.props; - const { datasource } = panel; - + componentDidMount() { this.props.panel.events.on('refresh', this.onRefresh); this.props.panel.events.on('render', this.onRender); this.props.dashboard.panelInitialized(this.props.panel); - - try { - const dataSourceSrv = getDatasourceSrv(); - const dataSourceApi = await dataSourceSrv.get(datasource); - this.setState((prevState: PanelChromeState) => ({ - ...prevState, - dataSourceApi, - })); - } catch (err) { - console.log('Datasource loading error', err); - } } componentWillUnmount() { @@ -78,15 +61,9 @@ export class PanelChrome extends PureComponent { console.log('onRender'); - this.setState({ - renderCounter: this.state.renderCounter + 1, - }); - }; - - onIssueQueryResponse = (timeSeries: any) => { this.setState(prevState => ({ ...prevState, - timeSeries, + renderCounter: this.state.renderCounter + 1, })); }; @@ -96,11 +73,11 @@ export class PanelChrome extends PureComponent
{({ loading, timeSeries }) => { console.log('panelcrome inner render'); diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx index 80cd5663658..aa55a35743f 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx @@ -4,16 +4,12 @@ import { PanelModel } from 'app/features/dashboard/panel_model'; import { PanelHeaderMenuItem } from './PanelHeaderMenuItem'; import { PanelHeaderMenuItemProps } from 'app/types/panel'; import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu'; -import { TimeSeries } from 'app/types'; -import { DataSourceApi } from 'app/types/series'; export interface PanelHeaderMenuProps { panel: PanelModel; dashboard: DashboardModel; - dataSourceApi: DataSourceApi; additionalMenuItems?: PanelHeaderMenuItemProps[]; additionalSubMenuItems?: PanelHeaderMenuItemProps[]; - timeSeries?: TimeSeries[]; } export class PanelHeaderMenu extends PureComponent { diff --git a/public/app/plugins/panel/graph2/moduleMenu.tsx b/public/app/plugins/panel/graph2/moduleMenu.tsx index 2951c9e0fe1..7ceff68514f 100644 --- a/public/app/plugins/panel/graph2/moduleMenu.tsx +++ b/public/app/plugins/panel/graph2/moduleMenu.tsx @@ -1,53 +1,18 @@ -import config from 'app/core/config'; -import { contextSrv } from 'app/core/services/context_srv'; -import { getExploreUrl } from 'app/core/utils/explore'; -import { updateLocation } from 'app/core/actions'; -import { getTimeSrv } from 'app/features/dashboard/time_srv'; -import { store } from 'app/store/configureStore'; -import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; -import appEvents from 'app/core/app_events'; -import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel'; -import { TimeSeries } from 'app/types/series'; -import { DataSource } from 'app/types/datasources'; +import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel'; import { PanelModel } from 'app/features/dashboard/panel_model'; -export const getMenuAdditional = (panel: PanelModel, dataSourceApi: DataSource, timeSeries: TimeSeries[]) => { - const onExploreClick = async () => { - const datasourceSrv = getDatasourceSrv(); - const timeSrv = getTimeSrv(); - const url = await getExploreUrl(panel, panel.targets, dataSourceApi, datasourceSrv, timeSrv); - if (url) { - store.dispatch(updateLocation({ path: url })); - } - }; - - const onExportCsv = () => { - const model = {} as { seriesList: TimeSeries[] }; - model.seriesList = timeSeries; - appEvents.emit('show-modal', { - templateHtml: '', - model, - modalClass: 'modal--narrow', - }); - }; - +export const getMenuAdditional = (panel: PanelModel) => { const getAdditionalMenuItems = () => { - const items = []; - if ( - config.exploreEnabled && - contextSrv.isEditor && - dataSourceApi && - (dataSourceApi.meta.explore || dataSourceApi.meta.id === 'mixed') - ) { - items.push({ + return [ + { type: PanelHeaderMenuItemTypes.Link, - text: 'Explore', - handleClick: onExploreClick, - iconClassName: 'fa fa-fw fa-rocket', - shortcut: 'x', - }); - } - return items; + text: 'Hello menu', + handleClick: () => { + alert('Hello world from menu'); + }, + shortcut: 'hi', + }, + ] as PanelHeaderMenuItemProps[]; }; const getAdditionalSubMenuItems = () => { @@ -56,14 +21,9 @@ export const getMenuAdditional = (panel: PanelModel, dataSourceApi: DataSource, type: PanelHeaderMenuItemTypes.Link, text: 'Hello Sub Menu', handleClick: () => { - alert('Hello world from moduleMenu'); + alert('Hello world from sub menu'); }, - shortcut: 'hi', - }, - { - type: PanelHeaderMenuItemTypes.Link, - text: 'Export CSV', - handleClick: onExportCsv, + shortcut: 'subhi', }, ] as PanelHeaderMenuItemProps[]; }; diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts index 815aefd6203..17a312bf55a 100644 --- a/public/app/types/panel.ts +++ b/public/app/types/panel.ts @@ -1,4 +1,4 @@ -import { LoadingState, TimeSeries, TimeRange, DataSourceApi } from './series'; +import { LoadingState, TimeSeries, TimeRange } from './series'; import { PanelModel } from 'app/features/dashboard/panel_model'; export interface PanelProps { @@ -38,5 +38,5 @@ export interface PanelHeaderMenuAdditional { } export interface PanelHeaderGetMenuAdditional { - (panel: PanelModel, dataSourceApi: DataSourceApi, timeSeries: TimeSeries[]): PanelHeaderMenuAdditional; + (panel: PanelModel): PanelHeaderMenuAdditional; }