refactoring progress

src/app/app.js

@@ -49,23 +49,6 @@ function (angular, $, _, appLevelRequire, config) {
     return module;
   };
 
-  app.safeApply = function ($scope, fn) {
-    switch($scope.$$phase) {
-    case '$apply':
-      // $digest hasn't started, we should be good
-      $scope.$eval(fn);
-      break;
-    case '$digest':
-      // waiting to $apply the changes
-      setTimeout(function () { app.safeApply($scope, fn); }, 10);
-      break;
-    default:
-      // clear to begin an $apply $$phase
-      $scope.$apply(fn);
-      break;
-    }
-  };
-
   app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
 
     $routeProvider.otherwise({ redirectTo: config.default_route });
@@ -97,12 +80,6 @@ function (angular, $, _, appLevelRequire, config) {
     apps_deps.push(module_name);
   });
 
-  app.panel_helpers = {
-    partial: function (name) {
-      return 'app/partials/'+name+'.html';
-    }
-  };
-
   // load the core components
   require([
     'controllers/all',
@@ -116,7 +93,6 @@ function (angular, $, _, appLevelRequire, config) {
     angular
       .element(document)
       .ready(function() {
-        $('body').attr('ng-controller', 'DashCtrl');
         angular.bootstrap(document, apps_deps)
           .invoke(['$rootScope', function ($rootScope) {
             _.each(pre_boot_modules, function (module) {

src/app/controllers/all.js

@@ -1,4 +1,5 @@
 define([
+  './grafanaCtrl',
   './dash',
   './dashLoader',
   './row',

src/app/controllers/dash.js

@@ -30,35 +30,15 @@ function (angular, $, config, _) {
 
   var module = angular.module('kibana.controllers');
 
-  module.controller('DashCtrl', function(
-    $scope, $rootScope, $timeout, ejsResource, filterSrv, dashboardKeybindings,
-    alertSrv, keyboardManager, grafanaVersion) {
+  module.controller('DashCtrl', function($scope, $rootScope, dashboardKeybindings) {
 
-    $scope.editor = {
-      index: 0
-    };
-
-    $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
+    $scope.editor = { index: 0 };
 
     $scope.init = function() {
-      $scope.config = config;
-
-      // Make stuff, including underscore.js available to views
-      $scope._ = _;
-      $scope.dashAlerts = alertSrv;
-
-      // Clear existing alerts
-      alertSrv.clearAll();
-
       $scope.reset_row();
-
-      $scope.ejs = ejsResource(config.elasticsearch, config.elasticsearchBasicAuth);
-
-      $scope.bindKeyboardShortcuts();
+      dashboardKeybindings.shortcuts();
     };
 
-    $scope.bindKeyboardShortcuts = dashboardKeybindings.shortcuts;
-
     $scope.isPanel = function(obj) {
       if(!_.isNull(obj) && !_.isUndefined(obj) && !_.isUndefined(obj.type)) {
         return true;

src/app/controllers/graphiteImport.js

@@ -96,7 +96,7 @@ function (angular, app, _) {
         currentRow.panels.push(panel);
       });
 
-      dashboard.dash_load(newDashboard);
+      $scope.dashboard.dash_load(newDashboard);
     }
 
   });

src/app/controllers/search.js

@@ -9,14 +9,15 @@ function (angular, _, config, $) {
 
   var module = angular.module('kibana.controllers');
 
-  module.controller('SearchCtrl', function($scope, $rootScope, dashboard, $element, $location) {
+  module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, ejsResource) {
 
     $scope.init = function() {
+      $scope.ejs = ejsResource(config.elasticsearch, config.elasticsearchBasicAuth);
       $scope.giveSearchFocus = 0;
       $scope.selectedIndex = -1;
       $scope.results = {dashboards: [], tags: [], metrics: []};
       $scope.query = { query: 'title:' };
-      $rootScope.$on('open-search', $scope.openSearch);
+      $scope.$onRootScope('open-search', $scope.openSearch, $scope);
     };
 
     $scope.keyDown = function (evt) {
@@ -153,7 +154,7 @@ function (angular, _, config, $) {
     };
 
     $scope.addMetricToCurrentDashboard = function (metricId) {
-      dashboard.rows.push({
+      $scope.dashboard.rows.push({
         title: '',
         height: '250px',
         editable: true,

src/app/partials/dashboard.html

@@ -1,111 +1,114 @@
-<div class="navbar navbar-static-top">
-  <div class="navbar-inner">
-    <div class="container-fluid">
-      <span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span>
-      <ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">
-      </ul>
+<div ng-controller="DashCtrl">
+
+  <div class="navbar navbar-static-top">
+    <div class="navbar-inner">
+      <div class="container-fluid">
+        <span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span>
+        <ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">
+        </ul>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="submenu-controls">
-  <div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
-    <div class="submenu-panel-title">
-      <span class="small"><strong>{{pulldown.type}}:</strong></span>
-    </div>
-    <div class="submenu-panel-wrapper">
-      <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
+  <div class="submenu-controls">
+    <div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
+      <div class="submenu-panel-title">
+        <span class="small"><strong>{{pulldown.type}}:</strong></span>
+      </div>
+      <div class="submenu-panel-wrapper">
+        <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
+      </div>
     </div>
+    <div class="clearfix"></div>
   </div>
-  <div class="clearfix"></div>
-</div>
 
-<div class="clearfix"></div>
-<div class="container-fluid main">
-  <div>
-    <div class="grafana-container container">
-      <!-- Rows -->
-      <div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" ng-style="row_style(row)">
-        <div class="row-control">
-          <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
-            <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
-              <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
-                <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
-              </span>
-              <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
-                <i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
-              </span>
-              <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
-            </div>
-            <div class="row-open" ng-show="!row.collapse">
-              <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
-                <span class="row-tab-button">
-                  <i class="icon-caret-right" ></i>
+  <div class="clearfix"></div>
+  <div class="container-fluid main">
+    <div>
+      <div class="grafana-container container">
+        <!-- Rows -->
+        <div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" ng-style="row_style(row)">
+          <div class="row-control">
+            <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
+              <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
+                <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
+                  <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
                 </span>
-              </div>
-              <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
-                <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
-                  <i class="icon-th-list"></i>
+                <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
+                  <i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
                 </span>
-                <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
-                  <li class="dropdown-submenu">
-                    <a href="javascript:void();">Add Panel</a>
-                    <ul class="dropdown-menu">
-                      <li><a ng-click="add_panel_default('graph')">Graph</li></a>
-                      <li><a ng-click="add_panel_default('text')">Text</li></a>
-                    </ul>
-                  </li>
-                  <li class="dropdown-submenu">
-                    <a href="javascript:void();">Set height</a>
-                    <ul class="dropdown-menu">
-                      <li><a ng-click="set_height('100px')">100 px</li></a>
-                      <li><a ng-click="set_height('150px')">150 px</li></a>
-                      <li><a ng-click="set_height('200px')">200 px</li></a>
-                      <li><a ng-click="set_height('250px')">250 px</li></a>
-                      <li><a ng-click="set_height('300px')">300 px</li></a>
-                      <li><a ng-click="set_height('350px')">350 px</li></a>
-                      <li><a ng-click="set_height('450px')">450 px</li></a>
-                      <li><a ng-click="set_height('500px')">500 px</li></a>
-                      <li><a ng-click="set_height('600px')">600 px</li></a>
-                      <li><a ng-click="set_height('700px')">700 px</li></a>
-                    </ul>
-                  </li>
-                  <li class="dropdown-submenu">
-                    <a href="javascript:void();">Move</a>
-                    <ul class="dropdown-menu">
-                      <li><a ng-click="move_row(-1)">Up</li></a>
-                      <li><a ng-click="move_row(1)">Down</li></a>
-                    </ul>
-                  </li>
-                  <li>
-                    <a config-modal="app/partials/roweditor.html">Row editor</a>
-                  </li>
-                  <li>
-                    <a ng-click="delete_row()">Delete row</a>
-                  </li>
-                </ul>
+                <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
+              </div>
+              <div class="row-open" ng-show="!row.collapse">
+                <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
+                  <span class="row-tab-button">
+                    <i class="icon-caret-right" ></i>
+                  </span>
+                </div>
+                <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
+                  <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
+                    <i class="icon-th-list"></i>
+                  </span>
+                  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
+                    <li class="dropdown-submenu">
+                      <a href="javascript:void();">Add Panel</a>
+                      <ul class="dropdown-menu">
+                        <li><a ng-click="add_panel_default('graph')">Graph</li></a>
+                        <li><a ng-click="add_panel_default('text')">Text</li></a>
+                      </ul>
+                    </li>
+                    <li class="dropdown-submenu">
+                      <a href="javascript:void();">Set height</a>
+                      <ul class="dropdown-menu">
+                        <li><a ng-click="set_height('100px')">100 px</li></a>
+                        <li><a ng-click="set_height('150px')">150 px</li></a>
+                        <li><a ng-click="set_height('200px')">200 px</li></a>
+                        <li><a ng-click="set_height('250px')">250 px</li></a>
+                        <li><a ng-click="set_height('300px')">300 px</li></a>
+                        <li><a ng-click="set_height('350px')">350 px</li></a>
+                        <li><a ng-click="set_height('450px')">450 px</li></a>
+                        <li><a ng-click="set_height('500px')">500 px</li></a>
+                        <li><a ng-click="set_height('600px')">600 px</li></a>
+                        <li><a ng-click="set_height('700px')">700 px</li></a>
+                      </ul>
+                    </li>
+                    <li class="dropdown-submenu">
+                      <a href="javascript:void();">Move</a>
+                      <ul class="dropdown-menu">
+                        <li><a ng-click="move_row(-1)">Up</li></a>
+                        <li><a ng-click="move_row(1)">Down</li></a>
+                      </ul>
+                    </li>
+                    <li>
+                      <a config-modal="app/partials/roweditor.html">Row editor</a>
+                    </li>
+                    <li>
+                      <a ng-click="delete_row()">Delete row</a>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div style="padding-top:0px" ng-if="!row.collapse">
+            <div style="padding-top:0px" ng-if="!row.collapse">
 
-            <!-- Panels -->
-            <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
-              <!-- Content Panel -->
-              <div style="position:relative">
-                <kibana-panel type="panel.type" ng-cloak></kibana-panel>
+              <!-- Panels -->
+              <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
+                <!-- Content Panel -->
+                <div style="position:relative">
+                  <kibana-panel type="panel.type" ng-cloak></kibana-panel>
+                </div>
               </div>
-            </div>
 
-            <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
-            </div>
+              <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
+              </div>
 
-            <div class="clearfix"></div>
+              <div class="clearfix"></div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+
 
       <div ng-show='dashboard.editable && dashboard.panel_hints' class="row-fluid add-row-panel-hint">
         <div class="span12" style="text-align:right;">
@@ -114,7 +117,7 @@
           </span>
         </div>
       </div>
-
     </div>
   </div>
+
 </div>

src/app/routes/dashboard-loader.js

@@ -21,24 +21,22 @@ function (angular, $, config, _) {
     $scope, $rootScope, $http, $routeParams, alertSrv, dashboard, filterSrv, panelMoveSrv) {
 
     $scope.init = function() {
-      console.log('DashFromFileProvider->init()')
 
-      file_load($routeParams.jsonFile)
-        .then(function(data) {
-          $scope.dashboard = dashboard.create(data);
-          $scope.filter = filterSrv;
-          $scope.filter.init($scope.dashboard);
+      file_load($routeParams.jsonFile).then(function(data) {
+        $scope.dashboard = dashboard.create(data);
+        $scope.filter = filterSrv;
+        $scope.filter.init($scope.dashboard);
 
-          var panelMove = panelMoveSrv.create($scope.dashboard);
-          // For moving stuff around the dashboard.
-          $scope.panelMoveDrop = panelMove.onDrop;
-          $scope.panelMoveStart = panelMove.onStart;
-          $scope.panelMoveStop = panelMove.onStop;
-          $scope.panelMoveOver = panelMove.onOver;
-          $scope.panelMoveOut = panelMove.onOut;
+        var panelMove = panelMoveSrv.create($scope.dashboard);
+        // For moving stuff around the dashboard.
+        $scope.panelMoveDrop = panelMove.onDrop;
+        $scope.panelMoveStart = panelMove.onStart;
+        $scope.panelMoveStop = panelMove.onStop;
+        $scope.panelMoveOver = panelMove.onOver;
+        $scope.panelMoveOut = panelMove.onOut;
 
-          $rootScope.$emit("dashboard-loaded", $scope.dashboard);
-        });
+        $rootScope.$emit("dashboard-loaded", $scope.dashboard);
+      });
     };
 
     var renderTemplate = function(json,params) {

src/app/services/dashboard.js

@@ -13,7 +13,7 @@ function (angular, $, kbn, _) {
 
   var module = angular.module('kibana.services');
 
-  module.service('dashboard', function(timer, $rootScope) {
+  module.service('dashboard', function(timer, $rootScope, $timeout) {
 
     function DashboardModel (data) {
       this.title = data.title;

src/app/services/dashboard/dashboardKeyBindings.js

@@ -9,7 +9,15 @@ function(angular, $) {
   var module = angular.module('kibana.services');
 
   module.service('dashboardKeybindings', function($rootScope, keyboardManager, dashboard) {
+    this.hasRegistered = false;
+
     this.shortcuts = function() {
+      if (this.hasRegistered) {
+        return;
+      }
+
+      this.hasRegistered = true;
+
       $rootScope.$on('panel-fullscreen-enter', function() {
         $rootScope.fullscreen = true;
       });

src/app/services/panelMove.js

@@ -72,7 +72,7 @@ function (angular, _) {
       create: function(dashboard) {
         return new PanelMoveSrv(dashboard);
       }
-    }
+    };
 
   });
 

src/app/services/unsavedChangesSrv.js

@@ -12,16 +12,19 @@ function(angular, _, config) {
 
   var module = angular.module('kibana.services');
 
-  module.service('unsavedChangesSrv', function($rootScope, $modal, dashboard, $q, $location, $timeout) {
+  module.service('unsavedChangesSrv', function($rootScope, $modal, $q, $location, $timeout) {
+
     var self = this;
     var modalScope = $rootScope.$new();
 
     $rootScope.$on("dashboard-loaded", function(event, newDashboard) {
       self.original = angular.copy(newDashboard);
+      self.current = newDashboard;
     });
 
     $rootScope.$on("dashboard-saved", function(event, savedDashboard) {
       self.original = angular.copy(savedDashboard);
+      self.current = savedDashboard;
     });
 
     $rootScope.$on("$routeChangeSuccess", function() {
@@ -63,7 +66,7 @@ function(angular, _, config) {
         return false;
       }
 
-      var current = angular.copy(dashboard.current);
+      var current = angular.copy(self.current);
       var original = self.original;
 
       // ignore timespan changes

src/index.html

@@ -18,7 +18,7 @@
 
   </head>
 
-  <body ng-cloak body-class>
+  <body ng-cloak body-class ng-controller="GrafanaCtrl">
 
     <link rel="stylesheet" href="css/bootstrap.light.min.css" ng-if="dashboard.style === 'light'">
     <link rel="stylesheet" href="css/bootstrap-responsive.min.css">