diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 94a213ea30a..1716e85166b 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/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); } diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index f1ffff2e6d4..1313294b83f 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -21,7 +21,12 @@ var panelTemplate = `
- +
+
+ +
+
+
@@ -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(); diff --git a/public/app/plugins/panel/alertlist/module.ts b/public/app/plugins/panel/alertlist/module.ts index 7aeb99c9918..a481ca0524d 100644 --- a/public/app/plugins/panel/alertlist/module.ts +++ b/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)); diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 94be5ec780a..d0391763367 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/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]; diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index a3a58e968fc..6c4e6a11418 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/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)); diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index 267d7b79dc0..3c643fdd945 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -27,5 +27,3 @@ background-color: $tight-form-func-bg; } } - - diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 0549d5f6dda..732102493fa 100644 --- a/public/sass/pages/_dashboard.scss +++ b/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 {