From bd348a47c74a190b1873228e386e4ed251c8f720 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 8 Mar 2017 17:52:33 +0100 Subject: [PATCH] panel: update to #7452 panel loading on scroll Moves the logic up a level to the panel_ctrl. This cleans up the code and makes the lazy loading available for all panels. Removes the config option and making this default behavior. We can add back the config option if we get feedback that it is needed during the beta phase of the v4.3.0 release. Unbind the scroll handler on panel destroy to avoid memory leaks. Fix for png rendering, it did not match all forms of dashboard-solo. e.g. /render/dashboard-solo/db... Fix for when taking a snapshot. All the panels get refreshed then even the panels that are not visible. Closes #5216. --- public/app/features/dashboard/model.ts | 2 -- .../features/dashboard/partials/settings.html | 6 ---- .../app/features/panel/metrics_panel_ctrl.ts | 14 --------- public/app/features/panel/panel_ctrl.ts | 13 +++++++++ public/app/features/panel/panel_directive.ts | 29 ++++++++++--------- 5 files changed, 28 insertions(+), 36 deletions(-) diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index 959b5ff2116..e31a6c1afd0 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -36,7 +36,6 @@ export class DashboardModel { meta: any; events: any; editMode: boolean; - loadOnScroll: boolean; constructor(data, meta?) { if (!data) { @@ -65,7 +64,6 @@ export class DashboardModel { this.version = data.version || 0; this.links = data.links || []; this.gnetId = data.gnetId || null; - this.loadOnScroll = data.loadOnScroll || false; this.rows = []; if (data.rows) { diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 7475fceb2d8..b8d8303a51b 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -61,12 +61,6 @@ checked="dashboard.hideControls" label-class="width-11"> - - diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index d9670291481..7ed360aab1a 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -13,7 +13,6 @@ import {Subject} from 'vendor/npm/rxjs/Subject'; class MetricsPanelCtrl extends PanelCtrl { scope: any; - needsRefresh: boolean; loading: boolean; datasource: any; datasourceName: any; @@ -43,7 +42,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.timeSrv = $injector.get('timeSrv'); this.templateSrv = $injector.get('templateSrv'); this.scope = $scope; - this.needsRefresh = false; if (!this.panel.targets) { this.panel.targets = [{}]; @@ -54,10 +52,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.events.on('panel-teardown', this.onPanelTearDown.bind(this)); } - private isRenderGraph () { - return window.location.href.indexOf("/dashboard-solo/") === 0; - } - private onPanelTearDown() { if (this.dataSubscription) { this.dataSubscription.unsubscribe(); @@ -74,14 +68,6 @@ class MetricsPanelCtrl extends PanelCtrl { // ignore fetching data if another panel is in fullscreen if (this.otherPanelInFullscreenMode()) { return; } - if (this.scope.ctrl.dashboard.loadOnScroll) { - if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) { - this.scope.$$childHead.needsRefresh = true; - return; - } - this.scope.$$childHead.needsRefresh = false; - } - // if we have snapshot data use that if (this.panel.snapshotData) { this.updateTimeRange(); diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 83c79f4123b..0c80d7a88e3 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -35,6 +35,8 @@ export class PanelCtrl { containerHeight: any; events: Emitter; timing: any; + skippedLastRefresh: boolean; + isPanelVisible: any; constructor($scope, $injector) { this.$injector = $injector; @@ -74,7 +76,18 @@ export class PanelCtrl { profiler.renderingCompleted(this.panel.id, this.timing); } + private isRenderingPng () { + return window.location.href.indexOf("/dashboard-solo/db") >= 0; + } + refresh() { + if (!this.isPanelVisible() && !this.isRenderingPng() && !this.dashboard.snapshot) { + this.skippedLastRefresh = true; + return; + } + + this.skippedLastRefresh = false; + this.events.emit('refresh', null); } diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 3aa195e706c..6f3987d872f 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -57,7 +57,7 @@ var panelTemplate = ` `; -module.directive('grafanaPanel', function($rootScope, $document, $timeout) { +module.directive('grafanaPanel', function($rootScope, $document) { return { restrict: 'E', template: panelTemplate, @@ -175,27 +175,28 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { elem.on('mouseenter', mouseEnter); elem.on('mouseleave', mouseLeave); + ctrl.isPanelVisible = function () { + var position = panelContainer[0].getBoundingClientRect(); + return (0 < position.top) && (position.top < window.innerHeight); + }; + + const refreshOnScroll = _.debounce(function () { + if (ctrl.skippedLastRefresh) { + ctrl.refresh(); + } + }, 250); + + $document.on('scroll', refreshOnScroll); + scope.$on('$destroy', function() { elem.off(); cornerInfoElem.off(); + $document.off('scroll', refreshOnScroll); if (infoDrop) { infoDrop.destroy(); } }); - - scope.needsRefresh = false; - - scope.isVisible = function () { - var position = panelContainer[0].getBoundingClientRect(); - return (0 < position.top) && (position.top < window.innerHeight); - }; - - $document.bind('scroll', _.debounce(function () { - if (scope.ctrl.dashboard.loadOnScroll && scope.needsRefresh) { - scope.ctrl.refresh(); - } - }, 250)); } }; });