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..93ed3ebc08d 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -21,7 +21,10 @@ var panelTemplate = `
- +
+ +
+
@@ -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(); diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index a88c4ebadc7..ecedab9cbb9 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -1,4 +1,4 @@ -
+
  1. diff --git a/public/app/plugins/panel/alertlist/module.ts b/public/app/plugins/panel/alertlist/module.ts index d0b6ddc3db7..704b28fa451 100644 --- a/public/app/plugins/panel/alertlist/module.ts +++ b/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(); } diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index da4558aa2f1..b5c59862e5d 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,19 +1,17 @@ -
    -
    -
    -
    - {{group.header}} -
    -
    - - - {{dash.title}} - - - - - -
    +
    +
    +
    + {{group.header}} +
    +
    + + + {{dash.title}} + + + + +
    diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 7d2393553f1..2a53a2caede 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) { 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() {