wip: major change for refresh and render events flow

public/app/features/dashboard/dashboard_model.ts

@@ -200,6 +200,34 @@ export class DashboardModel {
     this.events.emit('view-mode-changed', panel);
   }
 
+  startRefresh() {
+    this.events.emit('refresh');
+
+    for (const panel of this.panels) {
+      if (!this.otherPanelInFullscreen(panel)) {
+        panel.refresh();
+      }
+    }
+  }
+
+  render() {
+    this.events.emit('render');
+
+    for (const panel of this.panels) {
+      panel.render();
+    }
+  }
+
+  panelInitialized(panel: PanelModel) {
+    if (!this.otherPanelInFullscreen(panel)) {
+      panel.refresh();
+    }
+  }
+
+  otherPanelInFullscreen(panel: PanelModel) {
+    return this.meta.fullscreen && !panel.fullscreen;
+  }
+
   private ensureListExist(data) {
     if (!data) {
       data = {};

public/app/features/dashboard/panel_model.ts

@@ -13,6 +13,7 @@ const notPersistedProperties: { [str: string]: boolean } = {
   events: true,
   fullscreen: true,
   isEditing: true,
+  hasRefreshed: true,
 };
 
 export class PanelModel {
@@ -37,6 +38,7 @@ export class PanelModel {
   // non persisted
   fullscreen: boolean;
   isEditing: boolean;
+  hasRefreshed: boolean;
   events: Emitter;
 
   constructor(model) {
@@ -93,6 +95,23 @@ export class PanelModel {
     this.events.emit('panel-size-changed');
   }
 
+  refresh() {
+    this.hasRefreshed = true;
+    this.events.emit('refresh');
+  }
+
+  render() {
+    if (!this.hasRefreshed) {
+      this.refresh();
+    } else {
+      this.events.emit('render');
+    }
+  }
+
+  panelInitialized() {
+    this.events.emit('panel-initialized');
+  }
+
   initEditMode() {
     this.events.emit('panel-init-edit-mode');
   }

public/app/features/dashboard/time_srv.ts

@@ -24,7 +24,6 @@ export class TimeSrv {
     document.addEventListener('visibilitychange', () => {
       if (this.autoRefreshBlocked && document.visibilityState === 'visible') {
         this.autoRefreshBlocked = false;
-
         this.refreshDashboard();
       }
     });
@@ -136,7 +135,7 @@ export class TimeSrv {
   }
 
   refreshDashboard() {
-    this.$rootScope.$broadcast('refresh');
+    this.dashboard.startRefresh();
   }
 
   private startNextRefreshTimer(afterMs) {

public/app/features/dashboard/timepicker/timepicker.ts

@@ -30,9 +30,10 @@ export class TimePickerCtrl {
 
     $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
     $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope);
-    $rootScope.onAppEvent('refresh', this.onRefresh.bind(this), $scope);
     $rootScope.onAppEvent('closeTimepicker', this.openDropdown.bind(this), $scope);
 
+    this.dashboard.on('refresh', this.onRefresh.bind(this), $scope);
+
     // init options
     this.panel = this.dashboard.timepicker;
     _.defaults(this.panel, TimePickerCtrl.defaults);

public/app/features/dashboard/view_state_srv.ts

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 import config from 'app/core/config';
+import appEvents from 'app/core/app_events';
 import { DashboardModel } from './dashboard_model';
 
 // represents the transient view state
@@ -132,7 +133,7 @@ export class DashboardViewState {
         if (this.fullscreenPanel === panel && this.editStateChanged === false) {
           return;
         } else {
-          this.leaveFullscreen(false);
+          this.leaveFullscreen();
         }
       }
 
@@ -140,30 +141,26 @@ export class DashboardViewState {
         this.enterFullscreen(panel);
       }
     } else if (this.fullscreenPanel) {
-      this.leaveFullscreen(true);
+      this.leaveFullscreen();
     }
   }
 
-  leaveFullscreen(render) {
+  leaveFullscreen() {
-    var panel = this.fullscreenPanel;
+    const panel = this.fullscreenPanel;
 
     this.dashboard.setViewMode(panel, false, false);
-    this.$scope.appEvent('dash-scroll', { restore: true });
 
-    if (!render) {
+    delete this.fullscreenPanel;
-      return false;
-    }
 
     this.$timeout(() => {
+      appEvents.emit('dash-scroll', { restore: true });
+
       if (this.oldTimeRange !== this.dashboard.time) {
-        this.$rootScope.$broadcast('refresh');
+        this.dashboard.startRefresh();
       } else {
-        this.$rootScope.$broadcast('render');
+        this.dashboard.render();
       }
-      delete this.fullscreenPanel;
     });
-
-    return true;
   }
 
   enterFullscreen(panel) {

public/app/features/panel/panel_ctrl.ts

@@ -47,7 +47,6 @@ export class PanelCtrl {
       this.pluginName = plugin.name;
     }
 
-    $scope.$on('refresh', () => this.refresh());
     $scope.$on('component-did-mount', () => this.panelDidMount());
 
     $scope.$on('$destroy', () => {
@@ -57,8 +56,7 @@ export class PanelCtrl {
   }
 
   init() {
-    this.events.emit('panel-initialized');
+    this.dashboard.panelInitialized(this.panel);
-    this.publishAppEvent('panel-initialized', { scope: this.$scope });
   }
 
   panelDidMount() {
@@ -70,7 +68,7 @@ export class PanelCtrl {
   }
 
   refresh() {
-    this.events.emit('refresh', null);
+    this.panel.refresh();
   }
 
   publishAppEvent(evtName, evt) {

public/app/features/panel/panel_directive.ts

@@ -151,6 +151,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
       panelHeightUpdated();
 
       ctrl.events.on('render', () => {
+        console.log('panel_directive: render', ctrl.panel.id);
         if (transparentLastState !== ctrl.panel.transparent) {
           panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);
           transparentLastState = ctrl.panel.transparent;