wip: panel-header: Reverted a lot of code to pause the "custom menu options" for now

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<Props, State> {
 
   constructor(props: Props) {
     super(props);
+
     this.state = {
       loading: LoadingState.NotStarted,
       response: {
@@ -59,19 +61,13 @@ export class DataPanel extends Component<Props, State> {
   }
 
   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<Props, State> {
     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<Props, State> {
       };
 
       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<Props, State> {
         response: resp,
         isFirstLoad: false,
       });
-
-      this.props.onIssueQueryResponse(resp.data);
     } catch (err) {
       console.log('Loading error', err);
       this.setState({ loading: LoadingState.Error, isFirstLoad: false });

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<PanelProps>;
   getMenuAdditional?: PanelHeaderGetMenuAdditional;
 }
 
-export interface PanelChromeState {
+export interface State {
   refreshCounter: number;
   renderCounter: number;
   timeRange?: TimeRange;
-  timeSeries?: TimeSeries[];
-  dataSourceApi?: DataSourceApi;
 }
 
-export class PanelChrome extends PureComponent<PanelChromeProps, PanelChromeState> {
+export class PanelChrome extends PureComponent<Props, State> {
   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<PanelChromeProps, PanelChromeStat
 
   onRender = () => {
     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<PanelChromeProps, PanelChromeStat
 
   render() {
     const { panel, dashboard, getMenuAdditional } = this.props;
-    const { refreshCounter, timeRange, dataSourceApi, timeSeries, renderCounter } = this.state;
+    const { refreshCounter, timeRange, renderCounter } = this.state;
 
-    const { targets } = panel;
+    const { datasource, targets } = panel;
     const PanelComponent = this.props.component;
-    const panelSpecificMenuOptions = getMenuAdditional(panel, dataSourceApi, timeSeries);
+    const panelSpecificMenuOptions = getMenuAdditional(panel);
     const additionalMenuItems = panelSpecificMenuOptions.additionalMenuItems || undefined;
     const additionalSubMenuItems = panelSpecificMenuOptions.additionalSubMenuItems || undefined;
 
@@ -111,20 +88,17 @@ export class PanelChrome extends PureComponent<PanelChromeProps, PanelChromeStat
           <PanelHeaderMenu
             panel={panel}
             dashboard={dashboard}
-            dataSourceApi={dataSourceApi}
             additionalMenuItems={additionalMenuItems}
             additionalSubMenuItems={additionalSubMenuItems}
-            timeSeries={timeSeries}
           />
         </PanelHeader>
         <div className="panel-content">
           <DataPanel
-            dataSourceApi={dataSourceApi}
+            datasource={datasource}
             queries={targets}
             timeRange={timeRange}
             isVisible={this.isVisible}
             refreshCounter={refreshCounter}
-            onIssueQueryResponse={this.onIssueQueryResponse}
           >
             {({ loading, timeSeries }) => {
               console.log('panelcrome inner render');

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<PanelHeaderMenuProps, any> {

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: '<export-data-modal data="model.seriesList"></export-data-modal>',
-      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[];
   };

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<T = any> {
@@ -38,5 +38,5 @@ export interface PanelHeaderMenuAdditional {
 }
 
 export interface PanelHeaderGetMenuAdditional {
-  (panel: PanelModel, dataSourceApi: DataSourceApi, timeSeries: TimeSeries[]): PanelHeaderMenuAdditional;
+  (panel: PanelModel): PanelHeaderMenuAdditional;
 }