grafana/public/app/core/profiler.ts

import $ from 'jquery';
import angular from 'angular';

export class Profiler {
  panelsRendered: number;
  enabled: boolean;
  panelsInitCount: any;
  timings: any;
  digestCounter: any;
  $rootScope: any;
  scopeCount: any;

  init(config, $rootScope) {
    this.enabled = config.buildInfo.env === 'development';
    this.timings = {};
    this.timings.appStart = { loadStart: new Date().getTime() };
    this.$rootScope = $rootScope;

    if (!this.enabled) {
      return;
    }

    $rootScope.$watch(
      () => {
        this.digestCounter++;
        return false;
      },
      () => {}
    );

    $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() {
    this.timings.query = 0;
    this.timings.render = 0;

    setTimeout(() => {
      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);
  }

  dashboardFetched() {
    this.timings.dashboardLoadStart = new Date().getTime();
    this.panelsInitCount = 0;
    this.digestCounter = 0;
    this.panelsInitCount = 0;
    this.panelsRendered = 0;
    this.timings.query = 0;
    this.timings.render = 0;
  }

  dashboardInitialized() {
    setTimeout(() => {
      console.log('Dashboard::Performance Total Digests: ' + this.digestCounter);
      console.log('Dashboard::Performance Total Watchers: ' + this.getTotalWatcherCount());
      console.log('Dashboard::Performance Total ScopeCount: ' + this.scopeCount);

      var timeTaken = this.timings.lastPanelInitializedAt - this.timings.dashboardLoadStart;
      console.log('Dashboard::Performance All panels initialized in ' + timeTaken + ' ms');

      // measure digest performance
      var rootDigestStart = window.performance.now();
      for (var i = 0; i < 30; i++) {
        this.$rootScope.$apply();
      }

      console.log('Dashboard::Performance Root Digest ' + (window.performance.now() - rootDigestStart) / 30);
    }, 3000);
  }

  getTotalWatcherCount() {
    var count = 0;
    var scopes = 0;
    var root = $(document.getElementsByTagName('body'));

    var f = function(element) {
      if (element.data().hasOwnProperty('$scope')) {
        scopes++;
        angular.forEach(element.data().$scope.$$watchers, function() {
          count++;
        });
      }

      angular.forEach(element.children(), function(childElement) {
        f($(childElement));
      });
    };

    f(root);
    this.scopeCount = scopes;
    return count;
  }

  renderingCompleted(panelId, panelTimings) {
    // add render counter to root scope
    // used by phantomjs render.js to know when panel has rendered
    this.panelsRendered = (this.panelsRendered || 0) + 1;
    this.$rootScope.panelsRendered = this.panelsRendered;

    if (this.enabled) {
      panelTimings.renderEnd = new Date().getTime();
      this.timings.query += panelTimings.queryEnd - panelTimings.queryStart;
      this.timings.render += panelTimings.renderEnd - panelTimings.renderStart;
    }
  }

  panelInitialized() {
    if (!this.enabled) {
      return;
    }

    this.panelsInitCount++;
    this.timings.lastPanelInitializedAt = new Date().getTime();
  }
}

var profiler = new Profiler();
export { profiler };