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

src/app/app.js

@@ -49,8 +49,7 @@ function (angular, $, _, appLevelRequire, config) {
     return module;
   };
 
-  app.config(function ($locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
-    $locationProvider.html5Mode(true);
+  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;
@@ -68,7 +67,16 @@ function (angular, $, _, appLevelRequire, config) {
     '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) {
     var module_name = 'grafana.'+type;
@@ -85,6 +93,7 @@ function (angular, $, _, appLevelRequire, config) {
     'directives/all',
     'filters/all',
     'components/partials',
+    'routes/standalone/all',
     'routes/backend/all',
   ];
 

src/app/components/require.config.js

@@ -1,11 +1,10 @@
-/**
- * Bootstrap require with the needed config, then load the app.js module.
- */
+
 require.config({
-  baseUrl: 'public/app',
+  urlArgs: 'bust=' + (new Date().getTime()),
+  baseUrl: window.grafanaRequireJsBaseUrl,
 
   paths: {
-    config:                   ['components/config'],
+    config:                   window.grafanaConfigUrl,
     settings:                 'components/settings',
     kbn:                      'components/kbn',
     store:                    'components/store',
@@ -46,7 +45,6 @@ require.config({
     modernizr:                '../vendor/modernizr-2.6.1',
 
     'bootstrap-tagsinput':    '../vendor/tagsinput/bootstrap-tagsinput',
-
   },
   shim: {
 

src/app/controllers/grafanaCtrl.js

@@ -11,31 +11,55 @@ function (angular, config, _, $, store) {
   var module = angular.module('grafana.controllers');
 
   module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller) {
-
     $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
-    $scope._ = _;
+    $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.style = 'dark';
+
+      if (window.grafanaBackend) {
+        $scope.initBackendFeatures();
+      }
     };
 
-    $scope.toggleConsole = function() {
-      $scope.consoleEnabled = !$scope.consoleEnabled;
-      store.set('grafanaConsole', $scope.consoleEnabled);
+    $scope.initBackendFeatures = function() {
+      $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);
@@ -81,8 +105,12 @@ function (angular, config, _, $, store) {
     $scope.initProfiling = function() {
       var count = 0;
 
-      $scope.$watch(function digestCounter() { count++; }, function() { });
-      $scope.onAppEvent('dashboard-loaded', function() {
+      $scope.$watch(function digestCounter() {
+        count++;
+      }, function() {
+      });
+
+      $scope.onAppEvent('setup-dashboard', function() {
         count = 0;
 
         setTimeout(function() {

src/app/controllers/pro/grafanaCtrl.js

@@ -1,133 +0,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) {
 
   var module = angular.module('grafana.routes');
 
-  module.config(function($routeProvider) {
+  module.config(function($routeProvider, $locationProvider) {
+    $locationProvider.html5Mode(true);
+
     $routeProvider
       .when('/', {
         templateUrl: '/app/partials/dashboard.html',

src/app/routes/standalone/all.js

@@ -13,11 +13,12 @@ function (angular, config, store) {
 
   module.config(function($routeProvider) {
     $routeProvider
-    .when('/', {
-      redirectTo: function() {
-        return store.get('grafanaDashboardDefault') || config.default_route;
-      }
-    });
+      .otherwise({ redirectTo: config.default_route })
+      .when('/', {
+        redirectTo: function() {
+          return store.get('grafanaDashboardDefault') || config.default_route;
+        }
+      });
   });
 
 });

src/app/routes/standalone/fromDB.js

@@ -4,7 +4,7 @@ define([
 function (angular) {
   "use strict";
 
-  var module = angular.module('grafana.routes');
+  var module = angular.module('grafana.routes.standalone');
 
   module.config(function($routeProvider) {
     $routeProvider

src/app/routes/standalone/fromFile.js

@@ -7,7 +7,7 @@ define([
 function (angular, $, config, _) {
   "use strict";
 
-  var module = angular.module('grafana.routes');
+  var module = angular.module('grafana.routes.standalone');
 
   module.config(function($routeProvider) {
     $routeProvider

src/app/routes/standalone/fromScript.js

@@ -9,7 +9,7 @@ define([
 function (angular, $, config, _, kbn, moment) {
   "use strict";
 
-  var module = angular.module('grafana.routes');
+  var module = angular.module('grafana.routes.standalone');
 
   module.config(function($routeProvider) {
     $routeProvider

src/index.html

@@ -11,6 +11,12 @@
     <link rel="stylesheet" href="css/grafana.dark.min.css" title="Dark">
     <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 -->
     <script src="vendor/require/require.js"></script>
     <script src="app/components/require.config.js"></script>

src/test/specs/pro/soloPanelCtrl-specs.js

@@ -1,7 +1,7 @@
 define([
-  '../helpers',
-  'routes/pro/solo-panel',
-  'services/dashboard/dashboardSrv',
+  'helpers',
+  'routes/backend/solo-panel',
+  'features/dashboard/dashboardSrv',
 ], function(helpers) {
   'use strict';
 

src/test/test-main.js

@@ -5,7 +5,7 @@ require.config({
     specs:                 '../test/specs',
     mocks:                 '../test/mocks',
     helpers:               '../test/specs/helpers',
-    config:                ['../config', '../config.sample'],   
+    config:                ['../config', '../config.sample'],
     kbn:                   'components/kbn',
     store:                 'components/store',
 
@@ -114,8 +114,9 @@ require([
   angular.module('grafana.services', ['ngRoute', '$strap.directives']);
   angular.module('grafana.panels', []);
   angular.module('grafana.filters', []);
+  angular.module('grafana.routes', ['ngRoute']);
 
- var specs = [
+  var specs = [
     'specs/lexer-specs',
     'specs/parser-specs',
     'specs/gfunc-specs',
@@ -136,7 +137,7 @@ require([
     'specs/templateValuesSrv-specs',
     'specs/kbn-format-specs',
     'specs/dashboardSrv-specs',
-    'specs/dashboardViewStateSrv-specs'
+    'specs/dashboardViewStateSrv-specs',
     'specs/pro/soloPanelCtrl-specs',
   ];