Skip to content

N
nexpie-grafana-theme
Commit 9dec5083 by Torkel Ödegaard
Options

refactor: refactoring app boot up and core structure

parent 64973f1d
Showing with 102 additions and 165 deletions
public/app/app.js
/**
* 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
define([
'./grafanaCtrl',
'./pulldown',
'./search',
'./metricKeys',
'./inspectCtrl',
'./jsonEditorCtrl',
'./loginCtrl',
......
public/app/controllers/errorCtrl.js
define([
'angular',
'app',
'lodash'
],
function (angular) {
......
public/app/controllers/pulldown.js deleted 100644 → 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();
});
});
\ No newline at end of file
public/app/core/core.ts
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 → 100644
///<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/directives/giveFocus.js → public/app/core/directives/giveFocus.ts
define([
'angular'
],
function (angular) {
'use strict';
///<reference path="../../headers/common.d.ts" />
angular.module('grafana.directives').directive('giveFocus', function() {
return function(scope, element, attrs) {
element.click(function(e) {
e.stopPropagation();
});
import angular = require('angular');
import coreModule from '../core_module';
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);
};
});
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
///<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
define([
'angular',
'app',
'lodash',
'jquery',
],
function (angular, app, _, $) {
function (angular, _, $) {
'use strict';
angular
......
public/app/directives/metric.segment.js
define([
'angular',
'app',
'lodash',
'jquery',
],
function (angular, app, _, $) {
function (angular, _, $) {
'use strict';
angular
......
public/app/directives/valueSelectDropdown.js
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
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
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
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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment