progress on scrollable panels work

public/app/core/components/scroll/scroll.ts

-///<reference path="../../../headers/common.d.ts" />
-
 import GeminiScrollbar from 'gemini-scrollbar';
 import coreModule from 'app/core/core_module';
 

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

@@ -47,7 +47,7 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
     }
 
     return (
-      <div ref={element => this.element = element} />
+      <div ref={element => this.element = element} className="panel-height-helper" />
     );
   }
 }

public/app/features/dashboard/dashgrid/PanelLoader.ts

@@ -12,7 +12,7 @@ export class PanelLoader {
   }
 
   load(elem, panel, dashboard): AttachedPanel {
-    var template = '<plugin-component type="panel"></plugin-component>';
+    var template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
     var panelScope = this.$rootScope.$new();
     panelScope.panel = panel;
     panelScope.dashboard = dashboard;

public/app/features/panel/panel_ctrl.ts

@@ -5,9 +5,7 @@ import {appEvents, profiler} from 'app/core/core';
 import Remarkable from 'remarkable';
 import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
 
-const TITLE_HEIGHT = 25;
-const EMPTY_TITLE_HEIGHT = 9;
-const PANEL_PADDING = 5;
+const TITLE_HEIGHT = 27;
 const PANEL_BORDER = 2;
 
 import {Emitter} from 'app/core/core';
@@ -31,7 +29,6 @@ export class PanelCtrl {
   containerHeight: any;
   events: Emitter;
   timing: any;
-  scrollable: boolean;
 
   constructor($scope, $injector) {
     this.$injector = $injector;
@@ -40,7 +37,6 @@ export class PanelCtrl {
     this.editorTabIndex = 0;
     this.events = this.panel.events;
     this.timing = {};
-    this.scrollable = false;
 
     var plugin = config.panels[this.panel.type];
     if (plugin) {
@@ -66,7 +62,6 @@ export class PanelCtrl {
   }
 
   refresh() {
-    this.setPanelHeight();
     this.events.emit('refresh', null);
   }
 
@@ -75,7 +70,6 @@ export class PanelCtrl {
   }
 
   changeView(fullscreen, edit) {
-    this.setPanelHeight();
     this.publishAppEvent('panel-change-view', {
       fullscreen: fullscreen, edit: edit, panelId: this.panel.id
     });
@@ -169,18 +163,13 @@ export class PanelCtrl {
       this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN);
     }
 
-    this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
-  }
-
-  setPanelHeight() {
-    if (this.scrollable) {
-      this.$scope.setPanelHeight();
-    }
+    console.log(this.containerHeight);
+    this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
+    console.log(PANEL_BORDER + TITLE_HEIGHT);
   }
 
   render(payload?) {
     this.timing.renderStart = new Date().getTime();
-    this.setPanelHeight();
     this.events.emit('render', payload);
   }
 

public/app/features/panel/panel_directive.ts

-///<reference path="../../headers/common.d.ts" />
-
 import angular from 'angular';
 import Drop from 'tether-drop';
+import GeminiScrollbar from 'gemini-scrollbar';
 
 var module = angular.module('grafana.directives');
 
@@ -21,14 +20,9 @@ var panelTemplate = `
     </div>
 
     <div class="panel-content">
-      <div gemini-scrollbar ng-if="ctrl.scrollable">
-        <div class="panel-content--scrollable">
       <ng-transclude></ng-transclude>
     </div>
   </div>
-      <ng-transclude ng-if="!ctrl.scrollable"></ng-transclude>
-    </div>
-  </div>
 
   <div class="panel-full-edit" ng-if="ctrl.editMode">
     <div class="tabbed-view tabbed-view--panel-edit">
@@ -78,7 +72,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);
@@ -90,16 +84,17 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         ctrl.dashboard.setPanelFocus(0);
       }
 
-      function setPanelHeight() {
-        panelContent.height(ctrl.height);
-      }
-      ctrl.$scope.setPanelHeight = setPanelHeight;
-
       // set initial height
-      if (!ctrl.containerHeight) {
+      if (!ctrl.height) {
         ctrl.calculatePanelHeight();
-        panelContainer.css({minHeight: ctrl.containerHeight});
-        lastHeight = ctrl.containerHeight;
+        if (ctrl.__proto__.constructor.scrollable) {
+          panelContent.addClass('panel-content--scrollable');
+
+          var myScrollbar = new GeminiScrollbar({
+            autoshow: false,
+            element: panelContent[0]
+          }).create();
+        }
       }
 
       // set initial transparency
@@ -109,10 +104,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       }
 
       ctrl.events.on('render', () => {
-        if (lastHeight !== ctrl.containerHeight) {
-          panelContainer.css({minHeight: ctrl.containerHeight});
-          lastHeight = ctrl.containerHeight;
-        }
+        // if (lastHeight !== ctrl.height) {
+        //   panelContent.css({'height': ctrl.height + 'px'});
+        //   lastHeight = ctrl.height;
+        // }
 
         if (transparentLastState !== ctrl.panel.transparent) {
           panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);

public/app/features/plugins/plugin_component.ts

@@ -68,7 +68,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     var componentInfo: any = {
       name: 'panel-plugin-' + scope.panel.type,
       bindings: {dashboard: "=", panel: "=", row: "="},
-      attrs: {dashboard: "dashboard", panel: "panel"},
+      attrs: {dashboard: "dashboard", panel: "panel", class: "panel-height-helper"},
     };
 
     let panelInfo = config.panels[scope.panel.type];
@@ -98,7 +98,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
 
       PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
         PanelCtrl.templateUrl = null;
-        PanelCtrl.template = `<grafana-panel ctrl="ctrl">${template}</grafana-panel>`;
+        PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
         return componentInfo;
       });
 

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

@@ -9,6 +9,7 @@ import * as dateMath from 'app/core/utils/datemath';
 
 class AlertListPanel extends PanelCtrl {
   static templateUrl = 'module.html';
+  static scrollable = true;
 
   showOptions = [
     { text: 'Current state', value: 'current' },
@@ -38,7 +39,6 @@ class AlertListPanel extends PanelCtrl {
   constructor($scope, $injector, private backendSrv) {
     super($scope, $injector);
     _.defaults(this.panel, this.panelDefaults);
-    this.scrollable = true;
 
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.events.on('refresh', this.onRefresh.bind(this));

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

@@ -6,6 +6,7 @@ import {impressions} from 'app/features/dashboard/impression_store';
 
 class DashListCtrl extends PanelCtrl {
   static templateUrl = 'module.html';
+  static scrollable = true;
 
   groups: any[];
   modes: any[];
@@ -25,7 +26,6 @@ class DashListCtrl extends PanelCtrl {
   constructor($scope, $injector, private backendSrv, private dashboardSrv) {
     super($scope, $injector);
     _.defaults(this.panel, this.panelDefaults);
-    this.scrollable = true;
 
     if (this.panel.tag) {
       this.panel.tags = [this.panel.tag];

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

@@ -395,9 +395,10 @@ 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');
+      /// elem.css('height', ctrl.height + 'px');
     }
 
     function applyColoringThresholds(value, valueString) {
@@ -560,6 +561,8 @@ 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 = {
@@ -596,6 +599,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       if (!ctrl.data) { return; }
       data = ctrl.data;
 
+      console.log('singlestat', elem.html());
+
       // get thresholds
       data.thresholds = panel.thresholds.split(',').map(function(strVale) {
         return Number(strVale.trim());

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

@@ -5,6 +5,7 @@ import {PanelCtrl} from 'app/plugins/sdk';
 
 export class TextPanelCtrl extends PanelCtrl {
   static templateUrl = `public/app/plugins/panel/text/module.html`;
+  static scrollable = true;
 
   remarkable: any;
   content: string;
@@ -19,11 +20,11 @@ export class TextPanelCtrl extends PanelCtrl {
     super($scope, $injector);
 
     _.defaults(this.panel, this.panelDefaults);
-    this.scrollable = true;
 
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.events.on('refresh', this.onRefresh.bind(this));
     this.events.on('render', this.onRender.bind(this));
+
     $scope.$watch('ctrl.panel.content',
      _.throttle(() => {
        this.render();

public/sass/components/_panel_singlestat.scss

@@ -2,6 +2,7 @@
   position: relative;
   display: table;
   width: 100%;
+  height: 100%;
 }
 
 .singlestat-panel-value-container {

public/sass/pages/_dashboard.scss

@@ -23,6 +23,11 @@ div.flot-text {
   }
 }
 
+.panel-height-helper {
+  display: block;
+  height: 100%;
+}
+
 .panel-container {
   background-color: $panel-bg;
   border: $panel-border;
@@ -38,12 +43,11 @@ div.flot-text {
 
 .panel-content {
   padding: 0px 10px 5px 10px;
-  height: 100%;
+  height: calc(100% - 27px);
 
   &--scrollable {
     // Add space for scrollbar
     padding-right: 10px;
-    padding-left: 6px;
   }
 }