refactor: refactoring app boot up and core structure

public/app/app.js

@@ -1,6 +1,3 @@
-/**
- * main app level module
- */
 define([
   'angular',
   'jquery',
@@ -15,25 +12,18 @@ define([
   'angular-ui',
   'extend-jquery',
   'bindonce',
+  './core/core',
 ],
 function (angular, $, _, appLevelRequire) {
-
   "use strict";
 
-  var app = angular.module('grafana', []),
-    // we will keep a reference to each module defined before boot, so that we can
-    // go back and allow it to define new features later. Once we boot, this will be false
-    pre_boot_modules = [],
-    // these are the functions that we need to call to register different
-    // features if we define them after boot time
-    register_fns = {};
+  var app = angular.module('grafana', []);
+  var register_fns = {};
+  var preBootModules = [];
 
   // This stores the grafana version number
   app.constant('grafanaVersion',"@grafanaVersion@");
 
-  // Use this for cache busting partials
-  app.constant('cacheBust',"cache-bust="+Date.now());
-
   /**
    * Tells the application to watch the module, once bootstraping has completed
    * the modules controller, service, etc. functions will be overwritten to register directly
@@ -42,8 +32,8 @@ function (angular, $, _, appLevelRequire) {
    * @return {[type]}        [description]
    */
   app.useModule = function (module) {
-    if (pre_boot_modules) {
-      pre_boot_modules.push(module);
+    if (preBootModules) {
+      preBootModules.push(module);
     } else {
       _.extend(module, register_fns);
     }
@@ -51,7 +41,6 @@ function (angular, $, _, appLevelRequire) {
   };
 
   app.config(function($locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
-    // this is how the internet told me to dynamically add modules :/
     register_fns.controller = $controllerProvider.register;
     register_fns.directive  = $compileProvider.directive;
     register_fns.factory    = $provide.factory;
@@ -60,6 +49,7 @@ function (angular, $, _, appLevelRequire) {
   });
 
   var apps_deps = [
+    'grafana.core',
     'ngRoute',
     'ngSanitize',
     '$strap.directives',
@@ -80,7 +70,6 @@ function (angular, $, _, appLevelRequire) {
   });
 
   var preBootRequires = [
-    'core/core',
     'services/all',
     'features/all',
     'controllers/all',
@@ -101,11 +90,12 @@ function (angular, $, _, appLevelRequire) {
         .ready(function() {
           angular.bootstrap(document, apps_deps)
             .invoke(['$rootScope', function ($rootScope) {
-              _.each(pre_boot_modules, function (module) {
+              _.each(preBootModules, function (module) {
                 _.extend(module, register_fns);
               });
 
-              pre_boot_modules = false;
+              preBootModules = null;
+
               $rootScope.requireContext = appLevelRequire;
               $rootScope.require = function (deps, fn) {
                 var $scope = this;

public/app/controllers/all.js

@@ -1,8 +1,6 @@
 define([
   './grafanaCtrl',
-  './pulldown',
   './search',
-  './metricKeys',
   './inspectCtrl',
   './jsonEditorCtrl',
   './loginCtrl',

public/app/controllers/errorCtrl.js

@@ -1,6 +1,5 @@
 define([
   'angular',
-  'app',
   'lodash'
 ],
 function (angular) {

public/app/controllers/pulldown.js

@@ -1,42 +0,0 @@
-define([
-  'angular',
-  'app',
-  'lodash'
-],
-function (angular, app, _) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('PulldownCtrl', function($scope, $rootScope, $timeout) {
-    var _d = {
-      collapse: false,
-      notice: false,
-      enable: true
-    };
-
-    _.defaults($scope.pulldown,_d);
-
-    $scope.init = function() {
-      // Provide a combined skeleton for panels that must interact with panel and row.
-      // This might create name spacing issues.
-      $scope.panel = $scope.pulldown;
-      $scope.row = $scope.pulldown;
-    };
-
-    $scope.toggle_pulldown = function(pulldown) {
-      pulldown.collapse = pulldown.collapse ? false : true;
-      if (!pulldown.collapse) {
-        $timeout(function() {
-          $scope.$broadcast('render');
-        });
-      } else {
-        $scope.row.notice = false;
-      }
-    };
-
-    $scope.init();
-
-  });
-
-});

public/app/core/core.ts

@@ -1,5 +1,7 @@
 
 export * from './directives/array_join'
+export * from './directives/giveFocus'
+
 export * from './routes/module_loader'
 export * from './filters/filters'
 

public/app/core/core_module.ts

@@ -0,0 +1,5 @@
+///<reference path="../headers/common.d.ts" />
+
+import angular = require('angular');
+
+export default angular.module('grafana.core', []);

public/app/core/directives/array_join.ts

@@ -2,6 +2,7 @@
 
 import angular = require('angular');
 import _ = require('lodash');
+import coreModule from '../core_module';
 
 export function arrayJoin() {
   'use strict';
@@ -29,5 +30,5 @@ export function arrayJoin() {
   };
 }
 
-angular.module('grafana.directives').directive('arrayJoin', arrayJoin);
+coreModule.directive('arrayJoin', arrayJoin);
 

public/app/core/directives/giveFocus.ts

@@ -0,0 +1,28 @@
+///<reference path="../../headers/common.d.ts" />
+
+import angular = require('angular');
+import coreModule from '../core_module';
+
+coreModule.directive('giveFocus', function() {
+  return function(scope, element, attrs) {
+    element.click(function(e) {
+      e.stopPropagation();
+    });
+
+    scope.$watch(attrs.giveFocus, function (newValue) {
+      if (!newValue) {
+        return;
+      }
+      setTimeout(function() {
+        element.focus();
+        var domEl = element[0];
+        if (domEl.setSelectionRange) {
+          var pos = element.val().length * 2;
+          domEl.setSelectionRange(pos, pos);
+        }
+      }, 200);
+    }, true);
+  };
+});
+
+export default {};

public/app/core/filters/filters.ts

@@ -1,20 +1,18 @@
 ///<reference path="../../headers/common.d.ts" />
-'use strict';
 
 import angular = require('angular');
 import jquery = require('jquery');
 import moment = require('moment');
 import _ = require('lodash');
+import coreModule from '../core_module';
 
-var module = angular.module('grafana.filters');
-
-module.filter('stringSort', function() {
+coreModule.filter('stringSort', function() {
   return function(input) {
     return input.sort();
   };
 });
 
-module.filter('slice', function() {
+coreModule.filter('slice', function() {
   return function(arr, start, end) {
     if (!_.isUndefined(arr)) {
       return arr.slice(start, end);
@@ -22,7 +20,7 @@ module.filter('slice', function() {
   };
 });
 
-module.filter('stringify', function() {
+coreModule.filter('stringify', function() {
   return function(arr) {
     if (_.isObject(arr) && !_.isArray(arr)) {
       return angular.toJson(arr);
@@ -32,7 +30,7 @@ module.filter('stringify', function() {
   };
 });
 
-module.filter('moment', function() {
+coreModule.filter('moment', function() {
   return function(date, mode) {
     switch (mode) {
       case 'ago':
@@ -42,7 +40,7 @@ module.filter('moment', function() {
   };
 });
 
-module.filter('noXml', function() {
+coreModule.filter('noXml', function() {
   var noXml = function(text) {
   return _.isString(text)
     ? text
@@ -60,7 +58,7 @@ module.filter('noXml', function() {
   };
 });
 
-module.filter('interpolateTemplateVars', function (templateSrv) {
+coreModule.filter('interpolateTemplateVars', function (templateSrv) {
   var filterFunc : any = function (text, scope) {
     if (scope.panel) {
       return templateSrv.replaceWithText(text, scope.panel.scopedVars);

public/app/directives/all.js

@@ -13,7 +13,6 @@ define([
   './grafanaVersionCheck',
   './dropdown.typeahead',
   './topnav',
-  './giveFocus',
   './annotationTooltip',
   './passwordStrenght',
 ], function () {});

public/app/directives/dropdown.typeahead.js

@@ -1,10 +1,9 @@
 define([
   'angular',
-  'app',
   'lodash',
   'jquery',
 ],
-function (angular, app, _, $) {
+function (angular, _, $) {
   'use strict';
 
   angular

public/app/directives/giveFocus.js

@@ -1,29 +0,0 @@
-define([
-  'angular'
-],
-function (angular) {
-  'use strict';
-
-  angular.module('grafana.directives').directive('giveFocus', function() {
-    return function(scope, element, attrs) {
-      element.click(function(e) {
-        e.stopPropagation();
-      });
-
-      scope.$watch(attrs.giveFocus,function (newValue) {
-        if (!newValue) {
-          return;
-        }
-        setTimeout(function() {
-          element.focus();
-          var domEl = element[0];
-          if (domEl.setSelectionRange) {
-            var pos = element.val().length * 2;
-            domEl.setSelectionRange(pos, pos);
-          }
-        }, 200);
-      },true);
-    };
-  });
-
-});

public/app/directives/metric.segment.js

@@ -1,10 +1,9 @@
 define([
   'angular',
-  'app',
   'lodash',
   'jquery',
 ],
-function (angular, app, _, $) {
+function (angular, _, $) {
   'use strict';
 
   angular

public/app/directives/valueSelectDropdown.js

@@ -1,10 +1,9 @@
 define([
   'angular',
-  'app',
   'lodash',
   'jquery',
 ],
-function (angular, app, _) {
+function (angular, _) {
   'use strict';
 
   angular

public/app/features/dashboard/partials/snapshotTopNav.html

@@ -26,9 +26,8 @@
 			</ul>
 
 			<ul class="nav pull-right">
-				<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
-					<grafana-simple-panel type="pulldown.type" ng-cloak>
-					</grafana-simple-panel>
+				<li ng-if="dashboard">
+					<gf-time-picker></gf-time-picker>
 				</li>
 			</ul>
 

public/app/features/profile/partials/profile.html

@@ -11,55 +11,51 @@
 		<h2>Profile</h2>
 
 		<form name="userForm">
-			<div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Name
-						</li>
-						<li>
-							<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Email
-						</li>
-						<li>
-							<input type="email" required ng-model="user.email" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Username
-						</li>
-						<li>
-							<input type="text" required ng-model="user.login" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							UI Theme
-						</li>
-						<li>
-							<select class="input-small tight-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						Name
+					</li>
+					<li>
+						<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						Email
+					</li>
+					<li>
+						<input type="email" required ng-model="user.email" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						Username
+					</li>
+					<li>
+						<input type="text" required ng-model="user.login" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
 
+			<div class="tight-form last">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						UI Theme
+					</li>
+					<li>
+						<select class="input-small tight-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 			<br>
 			<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
 		</form>

public/app/panels/graph/legend.js

@@ -1,13 +1,12 @@
 define([
   'angular',
-  'app',
   'lodash',
   'kbn',
   'jquery',
   'jquery.flot',
   'jquery.flot.time',
 ],
-function (angular, app, _, kbn, $) {
+function (angular, _, kbn, $) {
   'use strict';
 
   var module = angular.module('grafana.panels.graph');

public/app/panels/graph/module.js

@@ -1,6 +1,5 @@
 define([
   'angular',
-  'app',
   'jquery',
   'lodash',
   'kbn',
@@ -11,7 +10,7 @@ define([
   './graph',
   './legend',
 ],
-function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
+function (angular, $, _, kbn, moment, TimeSeries, PanelMeta) {
   'use strict';
 
   var module = angular.module('grafana.panels.graph');

public/app/plugins/datasource/graphite/addGraphiteFunc.js

@@ -1,11 +1,10 @@
 define([
   'angular',
-  'app',
   'lodash',
   'jquery',
   './gfunc',
 ],
-function (angular, app, _, $, gfunc) {
+function (angular, _, $, gfunc) {
   'use strict';
 
   angular

tasks/options/tslint.js

@@ -9,7 +9,7 @@ module.exports = function(config) {
       configuration: {
         rules: {
           curly: true,
-          align: [true, "parameters", "arguments", "statements"],
+          align: [true, "parameters", "statements"],
           indent: [true, "spaces"],
           "class-name": true,
           "interface-name": true,