wip: fixed issues now things are starting to work as before for angular panels

public/app/core/constants.ts

@@ -8,3 +8,6 @@ export const DEFAULT_ROW_HEIGHT = 250;
 export const MIN_PANEL_HEIGHT = GRID_CELL_HEIGHT * 3;
 export const MIN_PANEL_HEIGHT = GRID_CELL_HEIGHT * 3;
 
 
 export const LS_PANEL_COPY_KEY = 'panel-copy';
 export const LS_PANEL_COPY_KEY = 'panel-copy';
+
+export const DASHBOARD_TOOLBAR_HEIGHT = 55;
+export const DASHBOARD_TOP_PADDING = 20;

public/app/features/panel/metrics_panel_ctrl.ts

@@ -57,7 +57,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
   }
 
 
   private onInitMetricsPanelEditMode() {
   private onInitMetricsPanelEditMode() {
-    this.addEditorTab('Queries', metricsTabDirective, 1, 'fa fa-database');
+    this.addEditorTab('Metrics', metricsTabDirective, 1, 'fa fa-database');
     this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
     this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
   }
   }
 
 

public/app/features/panel/panel_ctrl.ts

@@ -220,8 +220,8 @@ export class PanelCtrl {
 
 
   calculatePanelHeight() {
   calculatePanelHeight() {
     if (this.panel.fullscreen) {
     if (this.panel.fullscreen) {
-      const docHeight = $(window).height();
-      const editHeight = Math.floor(docHeight * 0.4);
+      const docHeight = $('.react-grid-layout').height();
+      const editHeight = Math.floor(docHeight * 0.35);
       const fullscreenHeight = Math.floor(docHeight * 0.8);
       const fullscreenHeight = Math.floor(docHeight * 0.8);
       this.containerHeight = this.panel.isEditing ? editHeight : fullscreenHeight;
       this.containerHeight = this.panel.isEditing ? editHeight : fullscreenHeight;
     } else {
     } else {

public/app/features/panel/panel_directive.ts

@@ -90,10 +90,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
         ctrl.dashboard.setPanelFocus(0);
         ctrl.dashboard.setPanelFocus(0);
       }
       }
 
 
-      function panelHeightUpdated() {
-        // panelContent.css({ height: ctrl.height + 'px' });
-      }
-
       function resizeScrollableContent() {
       function resizeScrollableContent() {
         if (panelScrollbar) {
         if (panelScrollbar) {
           panelScrollbar.update();
           panelScrollbar.update();
@@ -138,7 +134,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
 
 
       ctrl.events.on('panel-size-changed', () => {
       ctrl.events.on('panel-size-changed', () => {
         ctrl.calculatePanelHeight();
         ctrl.calculatePanelHeight();
-        panelHeightUpdated();
         $timeout(() => {
         $timeout(() => {
           console.log('panel directive panel size changed, render');
           console.log('panel directive panel size changed, render');
           resizeScrollableContent();
           resizeScrollableContent();
@@ -148,7 +143,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
 
 
       // set initial height
       // set initial height
       ctrl.calculatePanelHeight();
       ctrl.calculatePanelHeight();
-      panelHeightUpdated();
 
 
       ctrl.events.on('render', () => {
       ctrl.events.on('render', () => {
         console.log('panel_directive: render', ctrl.panel.id);
         console.log('panel_directive: render', ctrl.panel.id);

public/app/features/plugins/plugin_component.ts

@@ -8,7 +8,7 @@ import { importPluginModule } from './plugin_loader';
 import { UnknownPanelCtrl } from 'app/plugins/panel/unknown/module';
 import { UnknownPanelCtrl } from 'app/plugins/panel/unknown/module';
 
 
 /** @ngInject */
 /** @ngInject */
-function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) {
+function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache, $timeout) {
   function getTemplate(component) {
   function getTemplate(component) {
     if (component.template) {
     if (component.template) {
       return $q.when(component.template);
       return $q.when(component.template);
@@ -207,12 +207,16 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
 
 
     // let a binding digest cycle complete before adding to dom
     // let a binding digest cycle complete before adding to dom
     setTimeout(() => {
     setTimeout(() => {
+      scope.$applyAsync(() => {
         elem.append(child);
         elem.append(child);
+        setTimeout(() => {
           scope.$applyAsync(() => {
           scope.$applyAsync(() => {
             console.log('post appendAndCompile, broadcast refresh', scope.panel);
             console.log('post appendAndCompile, broadcast refresh', scope.panel);
             scope.$broadcast('component-did-mount');
             scope.$broadcast('component-did-mount');
           });
           });
         });
         });
+      });
+    });
   }
   }
 
 
   function registerPluginComponent(scope, elem, attrs, componentInfo) {
   function registerPluginComponent(scope, elem, attrs, componentInfo) {

public/app/partials/dashboard.html

@@ -7,7 +7,7 @@
                         class="dashboard-settings">
                         class="dashboard-settings">
     </dashboard-settings>
     </dashboard-settings>
 
 
-    <div class="dashboard-container">
+		<div class="dashboard-container" ng-class="{'dashboard-container--has-submenu': ctrl.dashboard.meta.submenuEnabled}">
       <dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
       <dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
       </dashboard-submenu>
       </dashboard-submenu>
 
 

public/sass/pages/_dashboard.scss

@@ -3,6 +3,10 @@
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
+
+  &--has-submenu {
+    height: calc(100% - 50px);
+  }
 }
 }
 
 
 .template-variable {
 .template-variable {