feat(sidemenu): added handling of click outside to hide sidemenu, also refactored grafana_ctrl to a more general grafana component

2025-02-25 18:55:37 -06:00 · 2016-01-16 18:55:13 +01:00
parent 317b5e6d86
commit c201f4c63e
9 changed files with 198 additions and 311 deletions
--- a/public/app/core/components/grafana_app.ts
+++ b/public/app/core/components/grafana_app.ts
@@ -0,0 +1,184 @@
+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import store from 'app/core/store';
+import _ from 'lodash';
+import angular from 'angular';
+import $ from 'jquery';
+import coreModule from '../core_module';
+
+export class GrafanaCtrl {
+
+  /** @ngInject */
+  constructor($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) {
+
+    $scope.init = function() {
+      $scope.contextSrv = contextSrv;
+
+      $scope._ = _;
+
+      $rootScope.profilingEnabled = store.getBool('profilingEnabled');
+      $rootScope.performance = { loadStart: new Date().getTime() };
+      $rootScope.appSubUrl = config.appSubUrl;
+
+      if ($rootScope.profilingEnabled) { $scope.initProfiling(); }
+
+      alertSrv.init();
+      utilSrv.init();
+
+      $scope.dashAlerts = alertSrv;
+    };
+
+    $scope.initDashboard = function(dashboardData, viewScope) {
+      $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
+    };
+
+    $rootScope.onAppEvent = function(name, callback, localScope) {
+      var unbind = $rootScope.$on(name, callback);
+      var callerScope = this;
+      if (callerScope.$id === 1 && !localScope) {
+        console.log('warning rootScope onAppEvent called without localscope');
+      }
+      if (localScope) {
+        callerScope = localScope;
+      }
+      callerScope.$on('$destroy', unbind);
+    };
+
+    $rootScope.appEvent = function(name, payload) {
+      $rootScope.$emit(name, payload);
+    };
+
+    $rootScope.colors = [
+      "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0",
+      "#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477",
+      "#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0",
+      "#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93",
+      "#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7",
+      "#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B",
+      "#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7"
+    ];
+
+    $scope.getTotalWatcherCount = function() {
+      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);
+      $rootScope.performance.scopeCount = scopes;
+      return count;
+    };
+
+    $scope.initProfiling = function() {
+      var count = 0;
+
+      $scope.$watch(function digestCounter() {
+        count++;
+      }, function() {
+        // something
+      });
+
+      $rootScope.performance.panels = [];
+
+      $scope.$on('refresh', function() {
+        if ($rootScope.performance.panels.length > 0) {
+          var totalRender = 0;
+          var totalQuery = 0;
+
+          _.each($rootScope.performance.panels, function(panelTiming: any) {
+            totalRender += panelTiming.render;
+            totalQuery += panelTiming.query;
+          });
+
+          console.log('total query: ' + totalQuery);
+          console.log('total render: ' + totalRender);
+          console.log('avg render: ' + totalRender / $rootScope.performance.panels.length);
+        }
+
+        $rootScope.performance.panels = [];
+      });
+
+      $scope.onAppEvent('dashboard-loaded', function() {
+        count = 0;
+
+        setTimeout(function() {
+          console.log("Dashboard::Performance Total Digests: " + count);
+          console.log("Dashboard::Performance Total Watchers: " + $scope.getTotalWatcherCount());
+          console.log("Dashboard::Performance Total ScopeCount: " + $rootScope.performance.scopeCount);
+
+          var timeTaken = $rootScope.performance.allPanelsInitialized - $rootScope.performance.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++) {
+            $rootScope.$apply();
+          }
+          console.log("Dashboard::Performance Root Digest " + ((window.performance.now() - rootDigestStart) / 30));
+
+        }, 3000);
+
+      });
+
+    };
+
+    $scope.init();
+  }
+}
+
+export function grafanaAppDirective() {
+  return {
+    restrict: 'E',
+    controller: GrafanaCtrl,
+    link: (scope, elem) => {
+      var ignoreSideMenuHide;
+      // handle sidemenu open state
+      scope.$watch('contextSrv.sidemenu', newVal => {
+        if (newVal !== undefined) {
+          elem.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
+        }
+        if (scope.contextSrv.sidemenu) {
+          ignoreSideMenuHide = true;
+          setTimeout(() => {
+            ignoreSideMenuHide = false;
+          }, 300);
+        }
+      });
+
+      // handle document clicks that should hide things
+      elem.click(function(evt) {
+        if ($(evt.target).parents().length === 0) {
+          return;
+        }
+
+        // hide search
+        if (elem.find('.search-container').length > 0) {
+          if ($(evt.target).parents('.search-container').length === 0) {
+            scope.appEvent('hide-dash-search');
+          }
+        }
+        // hide sidemenu
+        if (!ignoreSideMenuHide &&  elem.find('.sidemenu').length > 0) {
+          if ($(evt.target).parents('.sidemenu').length === 0) {
+            scope.$apply(() => scope.contextSrv.toggleSideMenu());
+          }
+        }
+      });
+    }
+  };
+}
+
+coreModule.directive('grafanaApp', grafanaAppDirective);