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

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

public/app/features/dashboard/partials/settings.html

@@ -61,12 +61,6 @@
                         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>
 

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();

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);
   }
 

public/app/features/panel/panel_directive.ts

@@ -57,7 +57,7 @@ var panelTemplate = `
   </div>
 `;
 
-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));
     }
   };
 });