Skip to content

N
nexpie-grafana-theme
Commit 53ff1714 by Torkel Ödegaard
Options

Standalone and backend mode with same code base is starting to work

parent 75c77a44
Showing with 70 additions and 158 deletions
src/app/app.js
...@@ -49,8 +49,7 @@ function (angular, $, _, appLevelRequire, config) { ...@@ -49,8 +49,7 @@ function (angular, $, _, appLevelRequire, config) {
return module; return module;
}; };
app.config(function ($locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) { app.config(function($locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
$locationProvider.html5Mode(true);
// this is how the internet told me to dynamically add modules :/ // this is how the internet told me to dynamically add modules :/
register_fns.controller = $controllerProvider.register; register_fns.controller = $controllerProvider.register;
register_fns.directive = $compileProvider.directive; register_fns.directive = $compileProvider.directive;
...@@ -68,7 +67,16 @@ function (angular, $, _, appLevelRequire, config) { ...@@ -68,7 +67,16 @@ function (angular, $, _, appLevelRequire, config) {
'pasvaz.bindonce' 'pasvaz.bindonce'
]; ];
var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes']; var module_types = ['controllers', 'directives', 'factories', 'services', 'filters'];
if (window.grafanaBackend) {
module_types.push('routes');
angular.module('grafana.routes.standalone', []);
}
else {
module_types.push('routes.standalone');
angular.module('grafana.routes', []);
}
_.each(module_types, function (type) { _.each(module_types, function (type) {
var module_name = 'grafana.'+type; var module_name = 'grafana.'+type;
...@@ -85,6 +93,7 @@ function (angular, $, _, appLevelRequire, config) { ...@@ -85,6 +93,7 @@ function (angular, $, _, appLevelRequire, config) {
'directives/all', 'directives/all',
'filters/all', 'filters/all',
'components/partials', 'components/partials',
'routes/standalone/all',
'routes/backend/all', 'routes/backend/all',
]; ];
......
src/app/components/require.config.js
/**
* Bootstrap require with the needed config, then load the app.js module.
*/
require.config({ require.config({
baseUrl: 'public/app', urlArgs: 'bust=' + (new Date().getTime()),
baseUrl: window.grafanaRequireJsBaseUrl,
paths: { paths: {
config: ['components/config'], config: window.grafanaConfigUrl,
settings: 'components/settings', settings: 'components/settings',
kbn: 'components/kbn', kbn: 'components/kbn',
store: 'components/store', store: 'components/store',
...@@ -46,7 +45,6 @@ require.config({ ...@@ -46,7 +45,6 @@ require.config({
modernizr: '../vendor/modernizr-2.6.1', modernizr: '../vendor/modernizr-2.6.1',
'bootstrap-tagsinput': '../vendor/tagsinput/bootstrap-tagsinput', 'bootstrap-tagsinput': '../vendor/tagsinput/bootstrap-tagsinput',
}, },
shim: { shim: {
......
src/app/controllers/grafanaCtrl.js
...@@ -11,31 +11,55 @@ function (angular, config, _, $, store) { ...@@ -11,31 +11,55 @@ function (angular, config, _, $, store) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller) { module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller) {
$scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion; $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
$scope._ = _; $scope.grafana = {};
$rootScope.profilingEnabled = store.getBool('profilingEnabled'); $rootScope.profilingEnabled = store.getBool('profilingEnabled');
$rootScope.performance = { loadStart: new Date().getTime() }; $rootScope.performance = { loadStart: new Date().getTime() };
$scope.init = function() { $scope.init = function() {
$scope._ = _;
if ($rootScope.profilingEnabled) { $scope.initProfiling(); } if ($rootScope.profilingEnabled) { $scope.initProfiling(); }
alertSrv.init(); alertSrv.init();
utilSrv.init(); utilSrv.init();
$scope.dashAlerts = alertSrv; $scope.dashAlerts = alertSrv;
$scope.grafana = { style: 'dark' }; $scope.grafana.style = 'dark';
if (window.grafanaBackend) {
$scope.initBackendFeatures();
}
}; };
$scope.toggleConsole = function() { $scope.initBackendFeatures = function() {
$scope.consoleEnabled = !$scope.consoleEnabled; $scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
store.set('grafanaConsole', $scope.consoleEnabled);
if (window.grafanaBootData.user.login) {
$scope.grafana.user = window.grafanaBootData.user;
}
$scope.onAppEvent('logged-out', function() {
$scope.showProSideMenu = false;
$scope.grafana.user = {};
});
$scope.onAppEvent('logged-in', function(evt, user) {
$scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
$scope.grafana.user = user;
});
}; };
$scope.initDashboard = function(dashboardData, viewScope) { $scope.initDashboard = function(dashboardData, viewScope) {
$controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData); $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
}; };
$scope.toggleProSideMenu = function() {
$scope.grafana.sidemenu = !$scope.grafana.sidemenu;
store.set('grafana.sidemenu', $scope.grafana.sidemenu);
};
$rootScope.onAppEvent = function(name, callback) { $rootScope.onAppEvent = function(name, callback) {
var unbind = $rootScope.$on(name, callback); var unbind = $rootScope.$on(name, callback);
this.$on('$destroy', unbind); this.$on('$destroy', unbind);
...@@ -81,8 +105,12 @@ function (angular, config, _, $, store) { ...@@ -81,8 +105,12 @@ function (angular, config, _, $, store) {
$scope.initProfiling = function() { $scope.initProfiling = function() {
var count = 0; var count = 0;
$scope.$watch(function digestCounter() { count++; }, function() { }); $scope.$watch(function digestCounter() {
$scope.onAppEvent('dashboard-loaded', function() { count++;
}, function() {
});
$scope.onAppEvent('setup-dashboard', function() {
count = 0; count = 0;
setTimeout(function() { setTimeout(function() {
......
src/app/controllers/pro/grafanaCtrl.js deleted 100644 → 0
define([
'angular',
'config',
'lodash',
'jquery',
'store',
],
function (angular, config, _, $, store) {
"use strict";
var module = angular.module('grafana.controllers');
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller) {
$scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
$scope.grafana = {};
$rootScope.profilingEnabled = store.getBool('profilingEnabled');
$rootScope.performance = { loadStart: new Date().getTime() };
$scope.init = function() {
$scope._ = _;
if ($rootScope.profilingEnabled) { $scope.initProfiling(); }
alertSrv.init();
utilSrv.init();
$scope.dashAlerts = alertSrv;
$scope.grafana.style = 'dark';
$scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
if (window.grafanaBootData.user.login) {
$scope.grafana.user = window.grafanaBootData.user;
}
$scope.onAppEvent('logged-out', function() {
$scope.showProSideMenu = false;
$scope.grafana.user = {};
});
$scope.onAppEvent('logged-in', function(evt, user) {
$scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
$scope.grafana.user = user;
});
};
$scope.initDashboard = function(dashboardData, viewScope) {
$controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
};
$scope.toggleProSideMenu = function() {
$scope.grafana.sidemenu = !$scope.grafana.sidemenu;
store.set('grafana.sidemenu', $scope.grafana.sidemenu);
};
$rootScope.onAppEvent = function(name, callback) {
var unbind = $rootScope.$on(name, callback);
this.$on('$destroy', unbind);
};
$rootScope.appEvent = function(name, payload) {
$rootScope.$emit(name, payload);
};
$rootScope.colors = [
"#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", //1
"#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477", //2
"#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0", //3
"#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93", //4
"#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7", //5
"#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B", //6
"#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7" //7
];
$scope.getTotalWatcherCount = function() {
var count = 0;
var scopes = 0;
var root = $(document.getElementsByTagName('body'));
var f = function (element) {
if (element.data().hasOwnProperty('$scope')) {
scopes++;
angular.forEach(element.data().$scope.$$watchers, function () {
count++;
});
}
angular.forEach(element.children(), function (childElement) {
f($(childElement));
});
};
f(root);
$rootScope.performance.scopeCount = scopes;
return count;
};
$scope.initProfiling = function() {
var count = 0;
$scope.$watch(function digestCounter() {
count++;
}, function() {
});
$scope.onAppEvent('setup-dashboard', function() {
count = 0;
setTimeout(function() {
console.log("Dashboard::Performance Total Digests: " + count);
console.log("Dashboard::Performance Total Watchers: " + $scope.getTotalWatcherCount());
console.log("Dashboard::Performance Total ScopeCount: " + $rootScope.performance.scopeCount);
var timeTaken = $rootScope.performance.allPanelsInitialized - $rootScope.performance.dashboardLoadStart;
console.log("Dashboard::Performance - All panels initialized in " + timeTaken + " ms");
// measure digest performance
var rootDigestStart = window.performance.now();
for (var i = 0; i < 30; i++) {
$rootScope.$apply();
}
console.log("Dashboard::Performance Root Digest " + ((window.performance.now() - rootDigestStart) / 30));
}, 3000);
});
};
$scope.init();
});
});
src/app/routes/backend/dashboard.js
...@@ -7,7 +7,9 @@ function (angular, store) { ...@@ -7,7 +7,9 @@ function (angular, store) {
var module = angular.module('grafana.routes'); var module = angular.module('grafana.routes');
module.config(function($routeProvider) { module.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider $routeProvider
.when('/', { .when('/', {
templateUrl: '/app/partials/dashboard.html', templateUrl: '/app/partials/dashboard.html',
......
src/app/routes/standalone/all.js
...@@ -13,6 +13,7 @@ function (angular, config, store) { ...@@ -13,6 +13,7 @@ function (angular, config, store) {
module.config(function($routeProvider) { module.config(function($routeProvider) {
$routeProvider $routeProvider
.otherwise({ redirectTo: config.default_route })
.when('/', { .when('/', {
redirectTo: function() { redirectTo: function() {
return store.get('grafanaDashboardDefault') || config.default_route; return store.get('grafanaDashboardDefault') || config.default_route;
......
src/app/routes/standalone/fromDB.js
...@@ -4,7 +4,7 @@ define([ ...@@ -4,7 +4,7 @@ define([
function (angular) { function (angular) {
"use strict"; "use strict";
var module = angular.module('grafana.routes'); var module = angular.module('grafana.routes.standalone');
module.config(function($routeProvider) { module.config(function($routeProvider) {
$routeProvider $routeProvider
......
src/app/routes/standalone/fromFile.js
...@@ -7,7 +7,7 @@ define([ ...@@ -7,7 +7,7 @@ define([
function (angular, $, config, _) { function (angular, $, config, _) {
"use strict"; "use strict";
var module = angular.module('grafana.routes'); var module = angular.module('grafana.routes.standalone');
module.config(function($routeProvider) { module.config(function($routeProvider) {
$routeProvider $routeProvider
......
src/app/routes/standalone/fromScript.js
...@@ -9,7 +9,7 @@ define([ ...@@ -9,7 +9,7 @@ define([
function (angular, $, config, _, kbn, moment) { function (angular, $, config, _, kbn, moment) {
"use strict"; "use strict";
var module = angular.module('grafana.routes'); var module = angular.module('grafana.routes.standalone');
module.config(function($routeProvider) { module.config(function($routeProvider) {
$routeProvider $routeProvider
......
src/index.html
...@@ -11,6 +11,12 @@ ...@@ -11,6 +11,12 @@
<link rel="stylesheet" href="css/grafana.dark.min.css" title="Dark"> <link rel="stylesheet" href="css/grafana.dark.min.css" title="Dark">
<link rel="icon" type="image/png" href="img/fav32.png"> <link rel="icon" type="image/png" href="img/fav32.png">
<script type="text/javascript">
window.grafanaBackend = false;
window.grafanaRequireJsBaseUrl = 'app';
window.grafanaConfigUrl = ['../config', '../config.sample'];
</script>
<!-- build:js app/app.js --> <!-- build:js app/app.js -->
<script src="vendor/require/require.js"></script> <script src="vendor/require/require.js"></script>
<script src="app/components/require.config.js"></script> <script src="app/components/require.config.js"></script>
......
src/test/specs/pro/soloPanelCtrl-specs.js
define([ define([
'../helpers', 'helpers',
'routes/pro/solo-panel', 'routes/backend/solo-panel',
'services/dashboard/dashboardSrv', 'features/dashboard/dashboardSrv',
], function(helpers) { ], function(helpers) {
'use strict'; 'use strict';
......
src/test/test-main.js
...@@ -114,6 +114,7 @@ require([ ...@@ -114,6 +114,7 @@ require([
angular.module('grafana.services', ['ngRoute', '$strap.directives']); angular.module('grafana.services', ['ngRoute', '$strap.directives']);
angular.module('grafana.panels', []); angular.module('grafana.panels', []);
angular.module('grafana.filters', []); angular.module('grafana.filters', []);
angular.module('grafana.routes', ['ngRoute']);
var specs = [ var specs = [
'specs/lexer-specs', 'specs/lexer-specs',
...@@ -136,7 +137,7 @@ require([ ...@@ -136,7 +137,7 @@ require([
'specs/templateValuesSrv-specs', 'specs/templateValuesSrv-specs',
'specs/kbn-format-specs', 'specs/kbn-format-specs',
'specs/dashboardSrv-specs', 'specs/dashboardSrv-specs',
'specs/dashboardViewStateSrv-specs' 'specs/dashboardViewStateSrv-specs',
'specs/pro/soloPanelCtrl-specs', 'specs/pro/soloPanelCtrl-specs',
]; ];
......
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