Merge branch 'feat-9887' of https://github.com/alexanderzobnin/grafana into alexanderzobnin-feat-9887

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,12 @@ var panelTemplate = `
     </div>
 
     <div class="panel-content">
-      <ng-transclude></ng-transclude>
+      <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>
 
@@ -62,6 +67,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 +90,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.ts

@@ -38,6 +38,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('refresh', this.onRefresh.bind(this));

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

@@ -25,6 +25,7 @@ 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/text/module.ts

@@ -19,6 +19,7 @@ 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));

public/sass/components/_panel_dashlist.scss

@@ -27,5 +27,3 @@
     background-color: $tight-form-func-bg;
   }
 }
-
-

public/sass/pages/_dashboard.scss

@@ -39,6 +39,12 @@ div.flot-text {
 .panel-content {
   padding: 0px 10px 5px 10px;
   height: 100%;
+
+  &--scrollable {
+    // Add space for scrollbar
+    padding-right: 10px;
+    padding-left: 6px;
+  }
 }
 
 .panel-title-container {