refactor: refactoring app boot up and core structure

This commit is contained in:
Torkel Ödegaard 2015-09-14 22:54:00 +02:00
parent 64973f1d57
commit 9dec50832d
20 changed files with 106 additions and 168 deletions

View File

@ -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;

View File

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

View File

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

View File

@ -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();
});
});

View File

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

View File

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

View File

@ -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);

View File

@ -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 {};

View File

@ -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);

View File

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

View File

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

View File

@ -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);
};
});
});

View File

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

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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');

View File

@ -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');

View File

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

View File

@ -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,