panels: general property which makes panel scrollable

public/app/features/panel/panel_ctrl.ts

@@ -31,6 +31,7 @@ export class PanelCtrl {
   containerHeight: any;
   events: Emitter;
   timing: any;
+  scrollable: boolean;
 
   constructor($scope, $injector) {
     this.$injector = $injector;
@@ -39,6 +40,7 @@ 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) {
@@ -64,6 +66,7 @@ export class PanelCtrl {
   }
 
   refresh() {
+    this.setPanelHeight();
     this.events.emit('refresh', null);
   }
 
@@ -72,6 +75,7 @@ export class PanelCtrl {
   }
 
   changeView(fullscreen, edit) {
+    this.setPanelHeight();
     this.publishAppEvent('panel-change-view', {
       fullscreen: fullscreen, edit: edit, panelId: this.panel.id
     });
@@ -168,8 +172,15 @@ export class PanelCtrl {
     this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
   }
 
+  setPanelHeight() {
+    if (this.scrollable) {
+      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

@@ -21,7 +21,10 @@ var panelTemplate = `
     </div>
 
     <div class="panel-content">
-      <ng-transclude></ng-transclude>
+      <div gemini-scrollbar ng-if="ctrl.scrollable">
+        <ng-transclude></ng-transclude>
+      </div>
+      <ng-transclude ng-if="!ctrl.scrollable"></ng-transclude>
     </div>
   </div>
 
@@ -62,6 +65,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
     scope: { ctrl: "=" },
     link: function(scope, elem) {
       var panelContainer = elem.find('.panel-container');
+      var panelContent = elem.find('.panel-content');
       var cornerInfoElem = elem.find('.panel-info-corner');
       var ctrl = scope.ctrl;
       var infoDrop;
@@ -84,6 +88,11 @@ 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) {
         ctrl.calculatePanelHeight();

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

@@ -1,4 +1,4 @@
-<div class="panel-alert-list" style="{{ctrl.contentHeight}}">
+<div class="panel-alert-list">
 	<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
 		<ol class="card-list">
 			<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">

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

@@ -21,7 +21,6 @@ class AlertListPanel extends PanelCtrl {
     {text: 'Importance', value: 3},
   ];
 
-  contentHeight: string;
   stateFilter: any = {};
   currentAlerts: any = [];
   alertHistory: any = [];
@@ -38,6 +37,7 @@ 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('render',  this.onRender.bind(this));
@@ -75,7 +75,6 @@ class AlertListPanel extends PanelCtrl {
   }
 
   onRender() {
-    this.contentHeight = "max-height: " + this.height + "px;";
     if (this.panel.show === 'current') {
       this.getCurrentAlertState();
     }

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

@@ -1,19 +1,17 @@
-<div gemini-scrollbar>
-  <div class="dashlist" ng-repeat="group in ctrl.groups">
-    <div class="dashlist-section" ng-if="group.show">
-      <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
-        {{group.header}}
-      </h6>
-      <div class="dashlist-item" ng-repeat="dash in group.list">
-        <a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
-          <span class="dashlist-title">
-            {{dash.title}}
-          </span>
-          <span class="dashlist-star">
-            <i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
-          </span>
-        </a>
-      </div>
+<div class="dashlist" ng-repeat="group in ctrl.groups">
+  <div class="dashlist-section" ng-if="group.show">
+    <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
+      {{group.header}}
+    </h6>
+    <div class="dashlist-item" ng-repeat="dash in group.list">
+      <a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
+        <span class="dashlist-title">
+          {{dash.title}}
+        </span>
+        <span class="dashlist-star">
+          <i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
+        </span>
+      </a>
     </div>
   </div>
 </div>

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

@@ -25,6 +25,7 @@ class DashListCtrl extends PanelCtrl {
   constructor($scope, $injector, private backendSrv) {
     super($scope, $injector);
     _.defaults(this.panel, this.panelDefaults);
+    this.scrollable = true;
 
     if (this.panel.tag) {
       this.panel.tags = [this.panel.tag];
@@ -33,9 +34,6 @@ class DashListCtrl extends PanelCtrl {
 
     this.events.on('refresh', this.onRefresh.bind(this));
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
-    this.events.on('render', this.setPanelHeight.bind(this));
-    this.events.on('panel-size-changed', this.setPanelHeight.bind(this));
-    this.events.on('panel-change-view', this.setPanelHeight.bind(this));
 
     this.groups = [
       {list: [], show: false, header: "Starred dashboards",},
@@ -69,19 +67,6 @@ class DashListCtrl extends PanelCtrl {
     this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
   }
 
-  setPanelHeight() {
-    this.$scope.setPanelHeight();
-  }
-
-  link(scope, elem, attrs, ctrl: DashListCtrl) {
-    let panelContentElem = elem.find('.panel-content');
-    panelContentElem.height(ctrl.height);
-
-    scope.setPanelHeight = () => {
-      panelContentElem.height(ctrl.height);
-    };
-  }
-
   onRefresh() {
     var promises = [];
 
@@ -90,10 +75,7 @@ class DashListCtrl extends PanelCtrl {
     promises.push(this.getSearch());
 
     return Promise.all(promises)
-    .then(() => {
-      this.setPanelHeight();
-      return this.renderingCompleted();
-    });
+      .then(this.renderingCompleted.bind(this));
   }
 
   getSearch() {