work on scrollable panels

public/app/features/panel/panel_ctrl.ts

@@ -45,16 +45,24 @@ export class PanelCtrl {
     }
 
     $scope.$on("refresh", () => this.refresh());
+    $scope.$on("component-did-mount", () => this.panelDidMount());
+
     $scope.$on("$destroy", () => {
       this.events.emit('panel-teardown');
       this.events.removeAllListeners();
     });
+
+    this.calculatePanelHeight();
   }
 
   init() {
     this.events.on('panel-size-changed', this.onSizeChanged.bind(this));
-    this.publishAppEvent('panel-initialized', {scope: this.$scope});
     this.events.emit('panel-initialized');
+    this.publishAppEvent('panel-initialized', {scope: this.$scope});
+  }
+
+  panelDidMount() {
+    this.events.emit('component-did-mount');
   }
 
   renderingCompleted() {
@@ -62,7 +70,6 @@ export class PanelCtrl {
   }
 
   refresh() {
-    this.setPanelHeight();
     this.events.emit('refresh', null);
   }
 
@@ -171,14 +178,14 @@ export class PanelCtrl {
   }
 
   setPanelHeight() {
-    if (this.$scope.setPanelHeight) {
-      this.$scope.setPanelHeight();
-    }
+    // console.log('setPanelHeight');
+    // if (this.$scope.setPanelHeight) {
+    //   this.$scope.setPanelHeight();
+    // }
   }
 
   render(payload?) {
     this.timing.renderStart = new Date().getTime();
-    this.setPanelHeight();
     this.events.emit('render', payload);
   }
 

public/app/features/panel/panel_directive.ts

@@ -73,7 +73,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       var lastHasAlertRule = false;
       var lastAlertState;
       var hasAlertRule;
-      // var lastHeight = 0;
+      var lastHeight = 0;
 
       function mouseEnter() {
         panelContainer.toggleClass('panel-hover-highlight', true);
@@ -85,28 +85,11 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         ctrl.dashboard.setPanelFocus(0);
       }
 
-      // set initial height
-      if (!ctrl.height) {
-        ctrl.calculatePanelHeight();
-        if (ctrl.__proto__.constructor.scrollable) {
-          panelContent.addClass('panel-content--scrollable');
-
-          panelScrollbar = new GeminiScrollbar({
-            autoshow: false,
-            element: panelContent[0]
-          }).create();
-        }
-      }
-
-      function setPanelHeight() {
-        panelContent.height(ctrl.height);
+      function panelHeightUpdated() {
         if (panelScrollbar) {
           panelScrollbar.update();
         }
-      }
-
-      if (ctrl.__proto__.constructor.scrollable) {
-        ctrl.$scope.setPanelHeight = setPanelHeight;
+        lastHeight = ctrl.height;
       }
 
       // set initial transparency
@@ -115,11 +98,20 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         panelContainer.addClass('panel-transparent', true);
       }
 
+      if (ctrl.__proto__.constructor.scrollable) {
+        panelContent.addClass('panel-content--scrollable');
+        panelScrollbar = new GeminiScrollbar({ autoshow: false, element: panelContent[0] }).create();
+      }
+
+      // update scrollbar after mounting
+      ctrl.events.on('component-did-mount', () => {
+        panelHeightUpdated();
+      });
+
       ctrl.events.on('render', () => {
-        // if (lastHeight !== ctrl.height) {
-        //   panelContent.css({'height': ctrl.height + 'px'});
-        //   lastHeight = ctrl.height;
-        // }
+        if (lastHeight !== ctrl.height) {
+          panelHeightUpdated();
+        }
 
         if (transparentLastState !== ctrl.panel.transparent) {
           panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);

public/app/features/plugins/plugin_component.ts

@@ -221,6 +221,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     setTimeout(function() {
       elem.append(child);
       scope.$applyAsync(function() {
+        scope.$broadcast('component-did-mount');
         scope.$broadcast('refresh');
       });
     });

public/app/plugins/panel/dashlist/module.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import {PanelCtrl} from 'app/plugins/sdk';
 import {impressions} from 'app/features/dashboard/impression_store';

public/app/plugins/panel/pluginlist/module.ts

@@ -1,10 +1,9 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import {PanelCtrl} from '../../../features/panel/panel_ctrl';
 
 class PluginListCtrl extends PanelCtrl {
   static templateUrl = 'module.html';
+  static scrollable = true;
 
   pluginList: any[];
   viewModel: any;
@@ -15,6 +14,7 @@ class PluginListCtrl extends PanelCtrl {
   /** @ngInject */
   constructor($scope, $injector, private backendSrv, private $location) {
     super($scope, $injector);
+
     _.defaults(this.panel, this.panelDefaults);
 
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));

public/app/plugins/panel/singlestat/module.ts

@@ -395,11 +395,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     var data, linkInfo;
     var $panelContainer = elem.find('.panel-container');
     elem = elem.find('.singlestat-panel');
-    console.log('singlestat element', elem.length);
-
-    function setElementHeight() {
-      /// elem.css('height', ctrl.height + 'px');
-    }
 
     function applyColoringThresholds(value, valueString) {
       if (!panel.colorValue) {
@@ -561,8 +556,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         plotCss.height = Math.floor(height * 0.25) + "px";
       }
 
-      console.log('singlestat height', ctrl.height);
-      console.log('singlestat plotCss', plotCss.height);
       plotCanvas.css(plotCss);
 
       var options = {
@@ -607,8 +600,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       });
       data.colorMap = panel.colors;
 
-      setElementHeight();
-
       var body = panel.gauge.show ? '' : getBigValueHtml();
 
       if (panel.colorBackground) {