From 220b65afd244e21eade8da55d5f3d1b2b1c1b68f Mon Sep 17 00:00:00 2001 From: Grzegorz Pietrusza Date: Sat, 4 Feb 2017 14:10:40 +0000 Subject: [PATCH 1/3] implement panels loading on scroll --- .../app/features/panel/metrics_panel_ctrl.ts | 15 ++++++++++ public/app/features/panel/panel_directive.ts | 28 +++++++++++++++---- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index d37a3f5db41..de6e331e8a1 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -12,6 +12,8 @@ import * as dateMath from 'app/core/utils/datemath'; import {Subject} from 'vendor/npm/rxjs/Subject'; class MetricsPanelCtrl extends PanelCtrl { + scope: any; + needsRefresh: boolean; loading: boolean; datasource: any; datasourceName: any; @@ -40,6 +42,8 @@ class MetricsPanelCtrl extends PanelCtrl { this.datasourceSrv = $injector.get('datasourceSrv'); this.timeSrv = $injector.get('timeSrv'); this.templateSrv = $injector.get('templateSrv'); + this.scope = $scope; + this.needsRefresh = false; if (!this.panel.targets) { this.panel.targets = [{}]; @@ -50,6 +54,10 @@ 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(); @@ -66,6 +74,13 @@ class MetricsPanelCtrl extends PanelCtrl { // ignore fetching data if another panel is in fullscreen if (this.otherPanelInFullscreenMode()) { return; } + 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_directive.ts b/public/app/features/panel/panel_directive.ts index 24977bd386c..8c51c8795d5 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -1,9 +1,8 @@ /// -import angular from 'angular'; -import $ from 'jquery'; -import _ from 'lodash'; -import Drop from 'tether-drop'; +import angular from "angular"; +import $ from "jquery"; +import Drop from "tether-drop"; var module = angular.module('grafana.directives'); @@ -57,7 +56,7 @@ var panelTemplate = ` `; -module.directive('grafanaPanel', function($rootScope) { +module.directive('grafanaPanel', function($rootScope, $document, $timeout) { return { restrict: 'E', template: panelTemplate, @@ -183,6 +182,25 @@ module.directive('grafanaPanel', function($rootScope) { infoDrop.destroy(); } }); + + var getDataPromise = null; + scope.needsRefresh = false; + + scope.isVisible = function () { + var position = panelContainer[0].getBoundingClientRect(); + return (0 < position.top) && (position.top < window.innerHeight); + }; + + $document.bind('scroll', function () { + if (getDataPromise) { + $timeout.cancel(getDataPromise); + } + if (scope.needsRefresh) { + getDataPromise = $timeout(function () { + scope.ctrl.refresh(); + }, 250); + } + }); } }; }); From a3019a9789caa8c3433e8659cfe963be899638d4 Mon Sep 17 00:00:00 2001 From: Grzegorz Pietrusza Date: Sat, 4 Feb 2017 14:30:24 +0000 Subject: [PATCH 2/3] cleanup --- public/app/features/panel/panel_directive.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 8c51c8795d5..637facb50c1 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -1,8 +1,9 @@ /// -import angular from "angular"; -import $ from "jquery"; -import Drop from "tether-drop"; +import angular from 'angular'; +import $ from 'jquery'; +import _ from 'lodash'; +import Drop from 'tether-drop'; var module = angular.module('grafana.directives'); From c09cd4ba296fa899dbed18229d53155d3c002707 Mon Sep 17 00:00:00 2001 From: jifwin Date: Wed, 1 Mar 2017 15:02:59 +0000 Subject: [PATCH 3/3] make load on scroll configurable and use debouce --- public/app/features/dashboard/model.ts | 2 ++ .../app/features/dashboard/partials/settings.html | 6 ++++++ public/app/features/panel/metrics_panel_ctrl.ts | 11 ++++++----- public/app/features/panel/panel_directive.ts | 14 ++++---------- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index e31a6c1afd0..959b5ff2116 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -36,6 +36,7 @@ export class DashboardModel { meta: any; events: any; editMode: boolean; + loadOnScroll: boolean; constructor(data, meta?) { if (!data) { @@ -64,6 +65,7 @@ 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 b8d8303a51b..7475fceb2d8 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -61,6 +61,12 @@ 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 de6e331e8a1..d9670291481 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -74,13 +74,14 @@ class MetricsPanelCtrl extends PanelCtrl { // ignore fetching data if another panel is in fullscreen if (this.otherPanelInFullscreenMode()) { return; } - if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) { - this.scope.$$childHead.needsRefresh = true; - 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; } - 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_directive.ts b/public/app/features/panel/panel_directive.ts index 637facb50c1..3aa195e706c 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -184,7 +184,6 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { } }); - var getDataPromise = null; scope.needsRefresh = false; scope.isVisible = function () { @@ -192,16 +191,11 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { return (0 < position.top) && (position.top < window.innerHeight); }; - $document.bind('scroll', function () { - if (getDataPromise) { - $timeout.cancel(getDataPromise); + $document.bind('scroll', _.debounce(function () { + if (scope.ctrl.dashboard.loadOnScroll && scope.needsRefresh) { + scope.ctrl.refresh(); } - if (scope.needsRefresh) { - getDataPromise = $timeout(function () { - scope.ctrl.refresh(); - }, 250); - } - }); + }, 250)); } }; });