Merge pull request #15481 from grafana/react-panel-header-issue

Fixed issue with PanelHeader and grid-drag-handle in fullscreen

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

@@ -131,10 +131,10 @@ export class DashboardPanel extends PureComponent<Props, State> {
   };
   };
 
 
   renderReactPanel() {
   renderReactPanel() {
-    const { dashboard, panel } = this.props;
+    const { dashboard, panel, isFullscreen } = this.props;
     const { plugin } = this.state;
     const { plugin } = this.state;
 
 
-    return <PanelChrome plugin={plugin} panel={panel} dashboard={dashboard} />;
+    return <PanelChrome plugin={plugin} panel={panel} dashboard={dashboard} isFullscreen={isFullscreen} />;
   }
   }
 
 
   renderAngularPanel() {
   renderAngularPanel() {

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

@@ -29,6 +29,7 @@ export interface Props {
   panel: PanelModel;
   panel: PanelModel;
   dashboard: DashboardModel;
   dashboard: DashboardModel;
   plugin: PanelPlugin;
   plugin: PanelPlugin;
+  isFullscreen: boolean;
 }
 }
 
 
 export interface State {
 export interface State {
@@ -193,7 +194,7 @@ export class PanelChrome extends PureComponent<Props, State> {
   };
   };
 
 
   render() {
   render() {
-    const { dashboard, panel } = this.props;
+    const { dashboard, panel, isFullscreen } = this.props;
     const { errorMessage, timeInfo } = this.state;
     const { errorMessage, timeInfo } = this.state;
     const { transparent } = panel;
     const { transparent } = panel;
 
 
@@ -216,6 +217,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 scopedVars={panel.scopedVars}
                 scopedVars={panel.scopedVars}
                 links={panel.links}
                 links={panel.links}
                 error={errorMessage}
                 error={errorMessage}
+                isFullscreen={isFullscreen}
               />
               />
               <ErrorBoundary>
               <ErrorBoundary>
                 {({ error, errorInfo }) => {
                 {({ error, errorInfo }) => {

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

@@ -19,6 +19,7 @@ export interface Props {
   scopedVars?: string;
   scopedVars?: string;
   links?: [];
   links?: [];
   error?: string;
   error?: string;
+  isFullscreen: boolean;
 }
 }
 
 
 interface ClickCoordinates {
 interface ClickCoordinates {
@@ -69,10 +70,9 @@ export class PanelHeader extends Component<Props, State> {
   };
   };
 
 
   render() {
   render() {
-    const isFullscreen = false;
-    const isLoading = false;
+    const { panel, dashboard, timeInfo, scopedVars, error, isFullscreen } = this.props;
+
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
-    const { panel, dashboard, timeInfo, scopedVars, error } = this.props;
     const title = templateSrv.replaceWithText(panel.title, scopedVars);
     const title = templateSrv.replaceWithText(panel.title, scopedVars);
 
 
     return (
     return (
@@ -86,11 +86,6 @@ export class PanelHeader extends Component<Props, State> {
           error={error}
           error={error}
         />
         />
         <div className={panelHeaderClass}>
         <div className={panelHeaderClass}>
-          {isLoading && (
-            <span className="panel-loading">
-              <i className="fa fa-spinner fa-spin" />
-            </span>
-          )}
           <div className="panel-title-container" onClick={this.onMenuToggle} onMouseDown={this.onMouseDown}>
           <div className="panel-title-container" onClick={this.onMenuToggle} onMouseDown={this.onMouseDown}>
             <div className="panel-title">
             <div className="panel-title">
               <span className="icon-gf panel-alert-icon" />
               <span className="icon-gf panel-alert-icon" />