further refactoring of #13984

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

@@ -7,7 +7,6 @@ import { getTimeSrv } from '../time_srv';
 // Components
 import { PanelHeader } from './PanelHeader/PanelHeader';
 import { DataPanel } from './DataPanel';
-import { PanelHeaderMenu } from './PanelHeader/PanelHeaderMenu';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -79,9 +78,7 @@ export class PanelChrome extends PureComponent<Props, State> {
     console.log('panelChrome render');
     return (
       <div className="panel-container">
-        <PanelHeader title={panel.title}>
-          <PanelHeaderMenu panel={panel} dashboard={dashboard} />
-        </PanelHeader>
+        <PanelHeader panel={panel} dashboard={dashboard} />
         <div className="panel-content">
           <DataPanel
             datasource={datasource}

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

 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 
-interface Props {
-  title: string;
+import { PanelHeaderMenu } from './PanelHeaderMenu';
+
+import { DashboardModel } from 'app/features/dashboard/dashboard_model';
+import { PanelModel } from 'app/features/dashboard/panel_model';
+
+export interface Props {
+  panel: PanelModel;
+  dashboard: DashboardModel;
 }
 
 export class PanelHeader extends PureComponent<Props> {
@@ -10,7 +16,7 @@ export class PanelHeader extends PureComponent<Props> {
     const isFullscreen = false;
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
-    const { title } = this.props;
+    const { panel, dashboard } = this.props;
 
     return (
       <div className={panelHeaderClass}>
@@ -29,10 +35,11 @@ export class PanelHeader extends PureComponent<Props> {
           <div className="panel-title">
             <span className="icon-gf panel-alert-icon" />
             <span className="panel-title-text" data-toggle="dropdown">
-              {title} <span className="fa fa-caret-down panel-menu-toggle" />
+              {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
             </span>
 
-            {this.props.children}
+            <PanelHeaderMenu panel={panel} dashboard={dashboard} />
+
             <span className="panel-time-info">
               <i className="fa fa-clock-o" /> 4m
             </span>

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

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
 import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
-import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu';
+import { getPanelMenu } from 'app/features/dashboard/utils/getPanelMenu';
 import { PanelMenuItem } from 'app/types/panel';
 
 export interface Props {

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

 import React, { SFC } from 'react';
 import { PanelMenuItem } from 'app/types/panel';
 
-export const PanelHeaderMenuItem: SFC<PanelMenuItem> = props => {
+interface Props {
+  children: any;
+}
+
+export const PanelHeaderMenuItem: SFC<Props & PanelMenuItem> = props => {
   const isSubMenu = props.type === 'submenu';
   const isDivider = props.type === 'divider';
   return isDivider ? (

public/app/types/panel.ts

@@ -19,6 +19,5 @@ export interface PanelMenuItem {
   iconClassName?: string;
   onClick?: () => void;
   shortcut?: string;
-  children?: any;
   subMenu?: PanelMenuItem[];
 }