feat(profiler): fixed issues with frontend perf profiler

public/app/core/components/grafana_app.ts

@@ -29,6 +29,7 @@ export class GrafanaCtrl {
     };
     };
 
 
     $scope.initDashboard = function(dashboardData, viewScope) {
     $scope.initDashboard = function(dashboardData, viewScope) {
+      $scope.appEvent("dashboard-fetch-end", dashboardData);
       $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
       $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
     };
     };
 
 

public/app/core/profiler.ts

@@ -7,7 +7,6 @@ import angular from 'angular';
 export class Profiler {
 export class Profiler {
   panelsRendered: number;
   panelsRendered: number;
   enabled: boolean;
   enabled: boolean;
-  panels: any[];
   panelsInitCount: any;
   panelsInitCount: any;
   timings: any;
   timings: any;
   digestCounter: any;
   digestCounter: any;
@@ -29,28 +28,21 @@ export class Profiler {
       return false;
       return false;
     }, () => {});
     }, () => {});
 
 
-    $rootScope.$on('refresh', this.refresh.bind(this));
-    $rootScope.onAppEvent('dashboard-fetched', this.dashboardFetched.bind(this));
-    $rootScope.onAppEvent('dashboard-initialized', this.dashboardInitialized.bind(this));
-    $rootScope.onAppEvent('panel-initialized', this.panelInitialized.bind(this));
+    $rootScope.onAppEvent('refresh', this.refresh.bind(this), $rootScope);
+    $rootScope.onAppEvent('dashboard-fetch-end', this.dashboardFetched.bind(this), $rootScope);
+    $rootScope.onAppEvent('dashboard-initialized', this.dashboardInitialized.bind(this), $rootScope);
+    $rootScope.onAppEvent('panel-initialized', this.panelInitialized.bind(this), $rootScope);
   }
   }
 
 
   refresh() {
   refresh() {
-    this.panels = [];
+    this.timings.query = 0;
+    this.timings.render = 0;
 
 
     setTimeout(() => {
     setTimeout(() => {
-      var totalRender = 0;
-      var totalQuery = 0;
-
-      for (let panelTiming of this.panels) {
-        totalRender += panelTiming.render;
-        totalQuery += panelTiming.query;
-      }
-
-      console.log('panel count: ' + this.panels.length);
-      console.log('total query: ' + totalQuery);
-      console.log('total render: ' + totalRender);
-      console.log('avg render: ' + totalRender / this.panels.length);
+      console.log('panel count: ' + this.panelsInitCount);
+      console.log('total query: ' + this.timings.query);
+      console.log('total render: ' + this.timings.render);
+      console.log('avg render: ' + this.timings.render / this.panelsInitCount);
     }, 5000);
     }, 5000);
   }
   }
 
 
@@ -60,7 +52,8 @@ export class Profiler {
     this.digestCounter = 0;
     this.digestCounter = 0;
     this.panelsInitCount = 0;
     this.panelsInitCount = 0;
     this.panelsRendered = 0;
     this.panelsRendered = 0;
-    this.panels = [];
+    this.timings.query = 0;
+    this.timings.render = 0;
   }
   }
 
 
   dashboardInitialized() {
   dashboardInitialized() {
@@ -110,11 +103,8 @@ export class Profiler {
 
 
     if (this.enabled) {
     if (this.enabled) {
       panelTimings.renderEnd = new Date().getTime();
       panelTimings.renderEnd = new Date().getTime();
-      this.panels.push({
-        panelId: panelId,
-        query: panelTimings.queryEnd - panelTimings.queryStart,
-        render: panelTimings.renderEnd - panelTimings.renderStart,
-      });
+      this.timings.query += panelTimings.queryEnd - panelTimings.queryStart;
+      this.timings.render += panelTimings.renderEnd - panelTimings.renderStart;
     }
     }
   }
   }
 
 

public/app/core/routes/dashboard_loaders.js

@@ -5,6 +5,7 @@ function (coreModule) {
   "use strict";
   "use strict";
 
 
   coreModule.default.controller('LoadDashboardCtrl', function($scope, $routeParams, dashboardLoaderSrv, backendSrv, $location) {
   coreModule.default.controller('LoadDashboardCtrl', function($scope, $routeParams, dashboardLoaderSrv, backendSrv, $location) {
+    $scope.appEvent("dashboard-fetch-start");
 
 
     if (!$routeParams.slug) {
     if (!$routeParams.slug) {
       backendSrv.get('/api/dashboards/home').then(function(homeDash) {
       backendSrv.get('/api/dashboards/home').then(function(homeDash) {

public/app/features/dashboard/dashboardLoaderSrv.js

@@ -47,7 +47,6 @@ function (angular, moment, _, $, kbn, dateMath, impressionStore) {
       }
       }
 
 
       promise.then(function(result) {
       promise.then(function(result) {
-        $rootScope.appEvent("dashboard-fetched", result.dashboard);
 
 
         if (result.meta.dashboardNotFound !== true) {
         if (result.meta.dashboardNotFound !== true) {
           impressionStore.impressions.addDashboardImpression(result.dashboard.id);
           impressionStore.impressions.addDashboardImpression(result.dashboard.id);

public/app/features/dashboard/dashboard_ctrl.ts

@@ -51,7 +51,7 @@ export class DashboardCtrl {
           $scope.updateSubmenuVisibility();
           $scope.updateSubmenuVisibility();
           $scope.setWindowTitleAndTheme();
           $scope.setWindowTitleAndTheme();
 
 
-          $scope.appEvent("dashboard-loaded", $scope.dashboard);
+          $scope.appEvent("dashboard-initialized", $scope.dashboard);
         }).catch(function(err) {
         }).catch(function(err) {
           if (err.data && err.data.message) { err.message = err.data.message; }
           if (err.data && err.data.message) { err.message = err.data.message; }
           $scope.appEvent("alert-error", ['Dashboard init failed', 'Template variables could not be initialized: ' + err.message]);
           $scope.appEvent("alert-error", ['Dashboard init failed', 'Template variables could not be initialized: ' + err.message]);