mirror of
https://github.com/grafana/grafana.git
synced 2025-02-11 08:05:43 -06:00
refactor: refactoring app boot up and core structure
This commit is contained in:
parent
64973f1d57
commit
9dec50832d
@ -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;
|
||||
|
@ -1,8 +1,6 @@
|
||||
define([
|
||||
'./grafanaCtrl',
|
||||
'./pulldown',
|
||||
'./search',
|
||||
'./metricKeys',
|
||||
'./inspectCtrl',
|
||||
'./jsonEditorCtrl',
|
||||
'./loginCtrl',
|
||||
|
@ -1,6 +1,5 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash'
|
||||
],
|
||||
function (angular) {
|
||||
|
@ -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();
|
||||
|
||||
});
|
||||
|
||||
});
|
@ -1,5 +1,7 @@
|
||||
|
||||
export * from './directives/array_join'
|
||||
export * from './directives/giveFocus'
|
||||
|
||||
export * from './routes/module_loader'
|
||||
export * from './filters/filters'
|
||||
|
||||
|
5
public/app/core/core_module.ts
Normal file
5
public/app/core/core_module.ts
Normal file
@ -0,0 +1,5 @@
|
||||
///<reference path="../headers/common.d.ts" />
|
||||
|
||||
import angular = require('angular');
|
||||
|
||||
export default angular.module('grafana.core', []);
|
@ -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);
|
||||
|
||||
|
28
public/app/core/directives/giveFocus.ts
Normal file
28
public/app/core/directives/giveFocus.ts
Normal 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 {};
|
@ -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);
|
||||
|
@ -13,7 +13,6 @@ define([
|
||||
'./grafanaVersionCheck',
|
||||
'./dropdown.typeahead',
|
||||
'./topnav',
|
||||
'./giveFocus',
|
||||
'./annotationTooltip',
|
||||
'./passwordStrenght',
|
||||
], function () {});
|
||||
|
@ -1,10 +1,9 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'jquery',
|
||||
],
|
||||
function (angular, app, _, $) {
|
||||
function (angular, _, $) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
|
@ -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);
|
||||
};
|
||||
});
|
||||
|
||||
});
|
@ -1,10 +1,9 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'jquery',
|
||||
],
|
||||
function (angular, app, _, $) {
|
||||
function (angular, _, $) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
|
@ -1,10 +1,9 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'jquery',
|
||||
],
|
||||
function (angular, app, _) {
|
||||
function (angular, _) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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');
|
||||
|
@ -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');
|
||||
|
@ -1,11 +1,10 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'jquery',
|
||||
'./gfunc',
|
||||
],
|
||||
function (angular, app, _, $, gfunc) {
|
||||
function (angular, _, $, gfunc) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user