Merge pull request #14705 from grafana/panel-size-fixes

Fixed issues with panel size in edit mode, fixes #14703

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

@@ -160,14 +160,14 @@ export class DashboardPanel extends PureComponent<Props, State> {
     return (
       <div className={containerClass}>
         <PanelResizer
-          isEditing={!!isEditing}
+          isEditing={isEditing}
           panel={panel}
-          render={(panelHeight: number | 'inherit') => (
+          render={styles => (
             <div
               className={panelWrapperClass}
               onMouseEnter={this.onMouseEnter}
               onMouseLeave={this.onMouseLeave}
-              style={{ height: panelHeight }}
+              style={styles}
             >
               {plugin.exports.Panel && this.renderReactPanel()}
               {plugin.exports.PanelCtrl && this.renderAngularPanel()}

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { throttle } from 'lodash';
 import Draggable from 'react-draggable';
 
@@ -6,7 +6,7 @@ import { PanelModel } from '../panel_model';
 
 interface Props {
   isEditing: boolean;
-  render: (height: number | 'inherit') => JSX.Element;
+  render: (styles: object) => JSX.Element;
   panel: PanelModel;
 }
 
@@ -19,6 +19,7 @@ export class PanelResizer extends PureComponent<Props, State> {
   prevEditorHeight: number;
   throttledChangeHeight: (height: number) => void;
   throttledResizeDone: () => void;
+  noStyles: object = {};
 
   constructor(props) {
     super(props);
@@ -65,7 +66,7 @@ export class PanelResizer extends PureComponent<Props, State> {
 
     return (
       <>
-        {render(isEditing ? editorHeight : 'inherit')}
+        {render(isEditing ? {height: editorHeight} : this.noStyles)}
         {isEditing && (
           <div className="panel-editor-container__resizer">
             <Draggable axis="y" grid={[100, 1]} onDrag={this.onDrag} position={{ x: 0, y: 0 }}>

public/app/features/panel/panel_ctrl.ts

@@ -198,11 +198,10 @@ export class PanelCtrl {
   }
 
   calculatePanelHeight() {
-    if (this.panel.fullscreen) {
-      const docHeight = $('.react-grid-layout').height();
-      const editHeight = Math.floor(docHeight * 0.35);
-      const fullscreenHeight = Math.floor(docHeight * 0.8);
-      this.containerHeight = this.panel.isEditing ? editHeight : fullscreenHeight;
+    if (this.panel.isEditing) {
+      this.containerHeight = $('.panel-wrapper--edit').height();
+    } else if (this.panel.fullscreen)  {
+      this.containerHeight = $('.panel-wrapper--view').height();
     } else {
       this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + (this.panel.gridPos.h - 1) * GRID_CELL_VMARGIN;
     }

public/sass/components/_panel_editor.scss

@@ -14,7 +14,7 @@
 
   &--view {
     flex: 1 1 0;
-    height: 80%;
+    height: 90%;
     margin: 0 $dashboard-padding;
     padding-top: $dashboard-padding;
   }