From 06622088a1f3f2ac2011a1ac10ca774323dac40b Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 16 Nov 2017 14:10:28 +0300 Subject: [PATCH 1/7] dashlist: fix panel resizing --- public/app/plugins/panel/dashlist/module.ts | 26 ++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 6b956f80278..f9ccd1c7b32 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -32,6 +32,7 @@ class DashListCtrl extends PanelCtrl { } this.events.on('refresh', this.onRefresh.bind(this)); + this.events.on('panel-size-changed', this.onPanelSizeChanged.bind(this)); this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); this.groups = [ @@ -58,6 +59,8 @@ class DashListCtrl extends PanelCtrl { } delete this.panel.mode; } + + console.log(this); } onInitEditMode() { @@ -66,6 +69,24 @@ class DashListCtrl extends PanelCtrl { this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html'); } + onPanelSizeChanged() { + this.setPanelHeight(); + } + + setPanelHeight() { + this.$scope.setPanelHeight(); + } + + link(scope, elem, attrs, ctrl: DashListCtrl) { + let panelContentElem = elem.find('.panel-content'); + console.log(elem, panelContentElem); + panelContentElem.height(ctrl.height); + + scope.setPanelHeight = () => { + panelContentElem.height(ctrl.height); + }; + } + onRefresh() { var promises = []; @@ -74,7 +95,10 @@ class DashListCtrl extends PanelCtrl { promises.push(this.getSearch()); return Promise.all(promises) - .then(this.renderingCompleted.bind(this)); + .then(() => { + this.setPanelHeight(); + return this.renderingCompleted(); + }); } getSearch() { From 7d8b2cb05f29d264b8956e3cacf712ca736adb2d Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 16 Nov 2017 14:11:01 +0300 Subject: [PATCH 2/7] dashlist: add scrollbar --- public/app/plugins/panel/dashlist/module.html | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index b5c59862e5d..da4558aa2f1 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,17 +1,19 @@ -
-
-
- {{group.header}} -
-
- - - {{dash.title}} - - - - - +
+
+
+
+ {{group.header}} +
+
+ + + {{dash.title}} + + + + + +
From e89e64e94ed7d1fc82f529719cb79a0f9085b2e7 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 16 Nov 2017 14:40:09 +0300 Subject: [PATCH 3/7] dashlist: fix resizing after mode switching --- public/app/plugins/panel/dashlist/module.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index f9ccd1c7b32..7d2393553f1 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -32,8 +32,10 @@ class DashListCtrl extends PanelCtrl { } this.events.on('refresh', this.onRefresh.bind(this)); - this.events.on('panel-size-changed', this.onPanelSizeChanged.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",}, @@ -59,8 +61,6 @@ class DashListCtrl extends PanelCtrl { } delete this.panel.mode; } - - console.log(this); } onInitEditMode() { @@ -69,17 +69,12 @@ class DashListCtrl extends PanelCtrl { this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html'); } - onPanelSizeChanged() { - this.setPanelHeight(); - } - setPanelHeight() { this.$scope.setPanelHeight(); } link(scope, elem, attrs, ctrl: DashListCtrl) { let panelContentElem = elem.find('.panel-content'); - console.log(elem, panelContentElem); panelContentElem.height(ctrl.height); scope.setPanelHeight = () => { From fd046428b4da5e6db2782ce3fe31778983170f11 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 16 Nov 2017 14:41:42 +0300 Subject: [PATCH 4/7] dashlist: css adjustments for scrollbar --- public/sass/components/_panel_dashlist.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index 71ae2bc3b08..3fd37a1bed6 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -7,6 +7,12 @@ margin-bottom: $spacer; } +.dashlist { + // Add space for scrollbar + margin-right: 6px; + margin-left: 4px; +} + .dashlist-link { display: block; margin: 5px; From 4b88cc0226c6639d987160eb69272fe79665d125 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 16 Nov 2017 15:33:12 +0300 Subject: [PATCH 5/7] panels: general property which makes panel scrollable --- public/app/features/panel/panel_ctrl.ts | 11 +++++++ public/app/features/panel/panel_directive.ts | 11 ++++++- .../app/plugins/panel/alertlist/module.html | 2 +- public/app/plugins/panel/alertlist/module.ts | 3 +- public/app/plugins/panel/dashlist/module.html | 30 +++++++++---------- public/app/plugins/panel/dashlist/module.ts | 22 ++------------ 6 files changed, 39 insertions(+), 40 deletions(-) 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() { From 126f3703dc5bb0c091d634be7933264dfe94334e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 16 Nov 2017 15:43:04 +0300 Subject: [PATCH 6/7] text panel: make scrollable --- public/app/plugins/panel/text/module.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index 5f453aea15b..7df4874c6d1 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)); From 490b8fc50fc7245a26f7320bc1abde5037d3e41b Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 17 Nov 2017 12:13:56 +0300 Subject: [PATCH 7/7] panels: add css tweaks for scrollable panels --- public/app/features/panel/panel_directive.ts | 4 +++- public/sass/components/_panel_dashlist.scss | 8 -------- public/sass/pages/_dashboard.scss | 6 ++++++ 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 93ed3ebc08d..1313294b83f 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -22,7 +22,9 @@ var panelTemplate = `
    - +
    + +
    diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index 3fd37a1bed6..ecd2caeab4e 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -7,12 +7,6 @@ margin-bottom: $spacer; } -.dashlist { - // Add space for scrollbar - margin-right: 6px; - margin-left: 4px; -} - .dashlist-link { display: block; margin: 5px; @@ -31,5 +25,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 {