Merge branch 'load_on_Scroll' of git://github.com/jifwin/grafana into jifwin-load_on_Scroll

This commit is contained in:
Daniel Lee 2017-03-07 15:58:14 +01:00
commit 08b2edf98c
4 changed files with 38 additions and 1 deletions

View File

@ -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) {

View File

@ -61,6 +61,12 @@
checked="dashboard.hideControls"
label-class="width-11">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Load on scroll"
tooltip="Load panels as they become visible"
checked="dashboard.loadOnScroll"
label-class="width-11">
</gf-form-switch>
</div>
</div>

View File

@ -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,14 @@ 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();

View File

@ -57,7 +57,7 @@ var panelTemplate = `
</div>
`;
module.directive('grafanaPanel', function($rootScope) {
module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
return {
restrict: 'E',
template: panelTemplate,
@ -183,6 +183,19 @@ module.directive('grafanaPanel', function($rootScope) {
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));
}
};
});