wip: panel-header: Merge conflicts

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import config from 'app/core/config';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
@@ -123,6 +123,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
         <div className={panelWrapperClass}>
           <PanelChrome
             component={pluginExports.PanelComponent}
+            withMenuOptions={pluginExports.withMenuOptions}
             panel={this.props.panel}
             dashboard={this.props.dashboard}
           />

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -13,19 +13,20 @@ import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { TimeRange, PanelProps } from 'app/types';
 
-export interface Props {
+export interface PanelChromeProps {
   panel: PanelModel;
   dashboard: DashboardModel;
   component: ComponentClass<PanelProps>;
+  withMenuOptions: any;
 }
 
-export interface State {
+export interface PanelChromeState {
   refreshCounter: number;
   renderCounter: number;
   timeRange?: TimeRange;
 }
 
-export class PanelChrome extends PureComponent<Props, State> {
+export class PanelChrome extends PureComponent<PanelChromeProps, PanelChromeState> {
   constructor(props) {
     super(props);
 
@@ -67,16 +68,15 @@ export class PanelChrome extends PureComponent<Props, State> {
   }
 
   render() {
-    const { panel, dashboard } = this.props;
+    const { panel, dashboard, withMenuOptions } = this.props;
     const { datasource, targets } = panel;
     const { timeRange, renderCounter, refreshCounter } = this.state;
     const PanelComponent = this.props.component;
-
     console.log('Panel chrome render');
 
     return (
       <div className="panel-container">
-        <PanelHeader panel={panel} dashboard={dashboard} />
+        <PanelHeader panel={panel} dashboard={dashboard} withMenuOptions={withMenuOptions} />
         <div className="panel-content">
           <DataPanel
             datasource={datasource}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

-import React from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { PanelModel } from 'app/features/dashboard/panel_model';
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
-// import { store } from 'app/store/configureStore';
-// import { updateLocation } from 'app/core/actions';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
-// import appEvents from 'app/core/app_events';
 
 interface PanelHeaderProps {
   panel: PanelModel;
   dashboard: DashboardModel;
+  withMenuOptions: any;
 }
-
-export class PanelHeader extends React.Component<PanelHeaderProps, any> {
+export class PanelHeader extends PureComponent<PanelHeaderProps, any> {
   render() {
-    const { dashboard } = this.props;
+    const { dashboard, withMenuOptions, panel } = this.props;
     const isFullscreen = false;
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
+    const PanelHeaderMenuComponent = withMenuOptions ? withMenuOptions(PanelHeaderMenu, panel) : PanelHeaderMenu;
 
     return (
       <div className={panelHeaderClass}>
@@ -39,7 +37,7 @@ export class PanelHeader extends React.Component<PanelHeaderProps, any> {
               {this.props.panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
             </span>
 
-            <PanelHeaderMenu panelId={this.props.panel.id} dashboard={dashboard} />
+            <PanelHeaderMenuComponent panelId={panel.id} dashboard={dashboard} />
             <span className="panel-time-info">
               <i className="fa fa-clock-o" /> 4m
             </span>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx

@@ -6,6 +6,9 @@ import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu';
 export interface PanelHeaderMenuProps {
   panelId: number;
   dashboard: DashboardModel;
+  datasource: any;
+  additionalMenuItems?: PanelHeaderMenuItemProps[];
+  additionalSubMenuItems?: PanelHeaderMenuItemProps[];
 }
 
 export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
@@ -19,10 +22,10 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
   renderItems = (menu: PanelHeaderMenuItemProps[], isSubMenu = false) => {
     return (
       <ul className="dropdown-menu dropdown-menu--menu panel-menu" role={isSubMenu ? '' : 'menu'}>
-        {menu.map(menuItem => {
-          console.log(this);
+        {menu.map((menuItem, idx) => {
           return (
             <PanelHeaderMenuItem
+              key={idx} // TODO: Fix proper key
               type={menuItem.type}
               text={menuItem.text}
               iconClassName={menuItem.iconClassName}
@@ -38,8 +41,9 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
   };
 
   render() {
-    const { dashboard } = this.props;
-    const menu = getPanelMenu(dashboard, this.getPanel());
+    console.log('PanelHeaderMenu render');
+    const { dashboard, additionalMenuItems, additionalSubMenuItems } = this.props;
+    const menu = getPanelMenu(dashboard, this.getPanel(), additionalMenuItems, additionalSubMenuItems);
     return <div className="panel-menu-container dropdown">{this.renderItems(menu)}</div>;
   }
 }

public/app/features/dashboard/utils/panel_menu.ts

@@ -8,8 +8,8 @@ import { removePanel, duplicatePanel, copyPanel, editPanelJson, sharePanel } fro
 export const getPanelMenu = (
   dashboard: DashboardModel,
   panel: PanelModel,
-  extraMenuItems: PanelHeaderMenuItemProps[] = [],
-  extraSubMenuItems: PanelHeaderMenuItemProps[] = []
+  additionalMenuItems: PanelHeaderMenuItemProps[] = [],
+  additionalSubMenuItems: PanelHeaderMenuItemProps[] = []
 ) => {
   const onViewPanel = () => {
     store.dispatch(
@@ -80,9 +80,7 @@ export const getPanelMenu = (
       handleClick: onEditPanelJson,
     });
 
-    // TODO: Handle this somehow
-    // this.events.emit('init-panel-actions', menu);
-    extraSubMenuItems.forEach(item => {
+    additionalSubMenuItems.forEach(item => {
       menu.push(item);
     });
     return menu;
@@ -117,7 +115,7 @@ export const getPanelMenu = (
     shortcut: 'p s',
   });
 
-  extraMenuItems.forEach(item => {
+  additionalMenuItems.forEach(item => {
     menu.push(item);
   });
 

public/app/plugins/panel/graph2/module.tsx

@@ -73,3 +73,4 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
 }
 
 export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
+export { withMenuOptions } from './withMenuOptions';

public/app/plugins/panel/graph2/withMenuOptions.tsx

+// Libraries
+import React, { PureComponent } from 'react';
+
+// Services
+import { getTimeSrv } from 'app/features/dashboard/time_srv';
+import { contextSrv } from 'app/core/services/context_srv';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { store } from 'app/store/configureStore';
+
+// Components
+import { PanelHeaderMenu } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu';
+import config from 'app/core/config';
+import { getExploreUrl } from 'app/core/utils/explore';
+import { updateLocation } from 'app/core/actions';
+
+// Types
+import { PanelModel } from 'app/features/dashboard/panel_model';
+import { PanelHeaderMenuProps } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu';
+import {
+  PanelHeaderMenuItemProps,
+  PanelHeaderMenuItemTypes,
+} from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
+
+interface LocalState {
+  datasource: any;
+}
+
+export const withMenuOptions = (WrappedPanelHeaderMenu: typeof PanelHeaderMenu, panel: PanelModel) => {
+  return class extends PureComponent<PanelHeaderMenuProps, LocalState> {
+    private datasourceSrv = getDatasourceSrv();
+    private timeSrv = getTimeSrv();
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        datasource: undefined,
+      };
+    }
+
+    componentDidMount() {
+      const dsPromise = getDatasourceSrv().get(panel.datasource);
+      dsPromise.then((datasource: any) => {
+        this.setState(() => ({ datasource }));
+      });
+    }
+
+    onExploreClick = async () => {
+      const { datasource } = this.state;
+      const url = await getExploreUrl(panel, panel.targets, datasource, this.datasourceSrv, this.timeSrv);
+      if (url) {
+        store.dispatch(updateLocation({ path: url }));
+      }
+    };
+
+    getAdditionalMenuItems = () => {
+      const { datasource } = this.state;
+      const items = [];
+      if (
+        config.exploreEnabled &&
+        contextSrv.isEditor &&
+        datasource &&
+        (datasource.meta.explore || datasource.meta.id === 'mixed')
+      ) {
+        items.push({
+          type: PanelHeaderMenuItemTypes.Link,
+          text: 'Explore',
+          handleClick: this.onExploreClick,
+          iconClassName: 'fa fa-fw fa-rocket',
+          shortcut: 'x',
+        });
+      }
+      return items;
+    };
+
+    getAdditionalSubMenuItems = () => {
+      return [
+        {
+          type: PanelHeaderMenuItemTypes.Link,
+          text: 'Hello Sub Menu',
+          handleClick: () => {
+            alert('Hello world from HOC!');
+          },
+          shortcut: 's h w',
+        },
+      ] as PanelHeaderMenuItemProps[];
+    };
+
+    render() {
+      const menu: PanelHeaderMenuItemProps[] = this.getAdditionalMenuItems();
+      const subMenu: PanelHeaderMenuItemProps[] = this.getAdditionalSubMenuItems();
+      return <WrappedPanelHeaderMenu {...this.props} additionalMenuItems={menu} additionalSubMenuItems={subMenu} />;
+    }
+  };
+};

public/app/types/plugins.ts

@@ -13,6 +13,7 @@ export interface PluginExports {
   PanelCtrl?;
   PanelComponent?: ComponentClass<PanelProps>;
   PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
+  withMenuOptions?: any;
 }
 
 export interface PanelPlugin {