Refactoring of grafana (root scope view model), into contextSrv, made sidemenu always hide after login

src/app/controllers/errorCtrl.js

@@ -8,13 +8,13 @@ function (angular) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('ErrorCtrl', function($scope) {
+  module.controller('ErrorCtrl', function($scope, contextSrv) {
 
-    var showSideMenu = $scope.grafana.sidemenu;
-    $scope.grafana.sidemenu = false;
+    var showSideMenu = contextSrv.sidemenu;
+    contextSrv.sidemenu = false;
 
     $scope.$on('$destroy', function() {
-      $scope.grafana.sidemenu = showSideMenu;
+      $scope.contextSrv.sidemenu = showSideMenu;
     });
 
   });

src/app/controllers/grafanaCtrl.js

@@ -10,11 +10,11 @@ function (angular, config, _, $, store) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv, $timeout) {
+  module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) {
 
     $scope.init = function() {
-      $scope.grafana = {};
-      $scope.grafana.version = grafanaVersion;
+      $scope.contextSrv = contextSrv;
+
       $scope._ = _;
 
       $rootScope.profilingEnabled = store.getBool('profilingEnabled');
@@ -27,30 +27,12 @@ function (angular, config, _, $, store) {
       utilSrv.init();
 
       $scope.dashAlerts = alertSrv;
-      $scope.grafana.lightTheme = false;
-      $scope.grafana.user = userSrv.getSignedInUser();
-      $scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
-      $scope.topnav = { title: 'Grafana' };
-
-      $scope.onAppEvent('logged-out', function() {
-        $scope.grafana.sidemenu = false;
-        $scope.grafana.user = {};
-      });
     };
 
     $scope.initDashboard = function(dashboardData, viewScope) {
       $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
     };
 
-    $scope.toggleSideMenu = function() {
-      $scope.grafana.sidemenu = !$scope.grafana.sidemenu;
-      store.set('grafana.sidemenu', $scope.grafana.sidemenu);
-
-      $timeout(function() {
-        $scope.$broadcast("render");
-      }, 50);
-    };
-
     $rootScope.onAppEvent = function(name, callback) {
       var unbind = $rootScope.$on(name, callback);
       this.$on('$destroy', unbind);

src/app/controllers/loginCtrl.js

@@ -7,14 +7,14 @@ function (angular, config) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('LoginCtrl', function($scope, backendSrv) {
+  module.controller('LoginCtrl', function($scope, backendSrv, contextSrv) {
     $scope.formModel = {
       user: '',
       email: '',
       password: '',
     };
 
-    $scope.grafana.sidemenu = false;
+    contextSrv.setSideMenuState(false);
 
     $scope.googleAuthEnabled = config.googleAuthEnabled;
     $scope.githubAuthEnabled = config.githubAuthEnabled;

src/app/controllers/search.js

@@ -74,8 +74,8 @@ function (angular, _, config, $) {
         .then(function(results) {
           if (localSearchId < $scope.currentSearchId) { return; }
 
-          if ($scope.query.query === "") {
-            results.dashboards.splice(0, 1, { title: 'Home', url: config.appSubUrl + '/', isHome: true });
+          if ($scope.query.query === "" && !$scope.query.starred) {
+            results.dashboards.unshift({ title: 'Home', url: config.appSubUrl + '/', isHome: true });
           }
 
           $scope.results.dashboards = results.dashboards;

src/app/controllers/sidemenuCtrl.js

@@ -9,7 +9,7 @@ function (angular, _, $, config) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('SideMenuCtrl', function($scope, $location) {
+  module.controller('SideMenuCtrl', function($scope, $location, contextSrv) {
 
     $scope.getUrl = function(url) {
       return config.appSubUrl + url;
@@ -22,7 +22,7 @@ function (angular, _, $, config) {
       href: $scope.getUrl("/"),
     });
 
-    if ($scope.grafana.user.accountRole === 'Admin') {
+    if (contextSrv.hasRole('Admin')) {
       $scope.menu.push({
         text: "Data Sources",
         icon: "fa fa-database",
@@ -35,7 +35,7 @@ function (angular, _, $, config) {
       });
     }
 
-    if ($scope.grafana.user.isGrafanaAdmin) {
+    if (contextSrv.user.isGrafanaAdmin) {
       $scope.menu.push({
         text: "Admin", href: $scope.getUrl("/admin/users"),
         icon: "fa fa-cube",

src/app/directives/dashEditLink.js

@@ -56,8 +56,8 @@ function (angular, $) {
 
           function showEditorPane(evt, payload, editview) {
             if (editview) {
-              scope.grafana.editview = editViewMap[editview];
-              payload.src = scope.grafana.editview.src;
+              scope.contextSrv.editview = editViewMap[editview];
+              payload.src = scope.contextSrv.editview.src;
             }
 
             if (lastEditor === payload.src) {
@@ -106,12 +106,12 @@ function (angular, $) {
             if (newValue) {
               showEditorPane(null, {}, newValue);
             } else if (oldValue) {
-              scope.grafana.editview = null;
+              scope.contextSrv.editview = null;
               hideEditorPane();
             }
           });
 
-          scope.grafana.editview = null;
+          scope.contextSrv.editview = null;
           scope.$on("$destroy", hideEditorPane);
           scope.onAppEvent('hide-dash-editor', hideEditorPane);
           scope.onAppEvent('show-dash-editor', showEditorPane);

src/app/directives/topnav.js

@@ -7,7 +7,7 @@ function (angular) {
 
   angular
     .module('grafana.directives')
-    .directive('topnav', function() {
+    .directive('topnav', function($rootScope, contextSrv) {
       return {
         restrict: 'E',
         transclude: true,
@@ -15,8 +15,6 @@ function (angular) {
           title: "@",
           section: "@",
           titleAction: "&",
-          toggle: "&",
-          showMenuBtn: "=",
           subnav: "=",
         },
         template:
@@ -43,6 +41,11 @@ function (angular) {
           '</div><div ng-transclude></div></div></div></div>',
         link: function(scope, elem, attrs) {
           scope.icon = attrs.icon;
+          scope.showMenuBtn = !contextSrv.sidemenu;
+
+          scope.toggle = function() {
+            $rootScope.appEvent('toggle-sidemenu');
+          };
         }
       };
     });

src/app/features/account/partials/account.html

@@ -1,4 +1,4 @@
-<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
+<topnav icon="fa fa-shield" title="Account" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="account">Overview</a></li>
 		<li><a href="account/users">Users</a></li>

src/app/features/account/partials/apikeys.html

@@ -1,8 +1,6 @@
-<topnav toggle="toggleSideMenu()"
-				title="API Keys"
+<topnav title="API Keys"
 				icon="fa fa-shield"
-				section="Account"
-				show-menu-btn="!grafana.sidemenu">
+				section="Account">
 </topnav>
 
 <div class="gf-box" style="min-height: 500px">

src/app/features/account/partials/datasources.html

@@ -1,7 +1,5 @@
-<topnav toggle="toggleSideMenu()"
-				title="Data sources"
-				icon="fa fa-database"
-				show-menu-btn="!grafana.sidemenu">
+<topnav title="Data sources"
+				icon="fa fa-database">
 </topnav>
 
 <div class="gf-box" style="min-height: 500px; max-width: 900px">

src/app/features/account/partials/import.html

@@ -1,4 +1,4 @@
-<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
+<topnav icon="fa fa-shield" title="Account" subnav="true">
 	<ul class="nav">
 		<li><a href="account">Overview</a></li>
 		<li><a href="account/users">Users</a></li>

src/app/features/account/partials/users.html

@@ -1,4 +1,4 @@
-<topnav toggle="toggleSideMenu()" title="Account" icon="fa fa-shield" show-menu-btn="!grafana.sidemenu" subnav="true">
+<topnav title="Account" icon="fa fa-shield" subnav="true">
 	<ul class="nav">
 		<li><a href="account">Overview</a></li>
 		<li class="active"><a href="account/users">Users</a></li>

src/app/features/admin/partials/admin.html

@@ -1,4 +1,4 @@
-<topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
+<topnav icon="fa fa-cube" title="Admin" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="admin">Settings</a></li>
 		<li><a href="admin/users">Users</a></li>

src/app/features/admin/partials/users.html

@@ -1,4 +1,4 @@
-<topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
+<topnav icon="fa fa-cube" title="Admin" subnav="true">
 	<ul class="nav">
 		<li><a href="admin">Settings</a></li>
 		<li class="active"><a href="admin/users">Users</a></li>

src/app/features/dashboard/dashboardCtrl.js

@@ -61,11 +61,11 @@ function (angular, $, config) {
 
     $scope.setWindowTitleAndTheme = function() {
       window.document.title = config.window_title_prefix + $scope.dashboard.title;
-      $scope.grafana.lightTheme = $scope.dashboard.style === 'light';
+      $scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
     };
 
     $scope.styleUpdated = function() {
-      $scope.grafana.lightTheme = $scope.dashboard.style === 'light';
+      $scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
     };
 
     $scope.add_row = function(dash, row) {

src/app/features/panel/soloPanelCtrl.js

@@ -25,10 +25,12 @@ function (angular, $) {
 
     $scope.initPanelScope = function(dashboard) {
       $scope.dashboard = dashboardSrv.create(dashboard.model);
-      $scope.grafana.style = $scope.dashboard.style;
+      $scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
+
       $scope.row = {
         height: $(window).height() + 'px',
       };
+
       $scope.test = "Hej";
       $scope.$index = 0;
       $scope.panel = $scope.getPanelById(panelId);

src/app/features/profile/partials/profile.html

@@ -1,8 +1,6 @@
-<topnav toggle="toggleSideMenu()"
-        title="{{grafana.user.name}}"
+<topnav title="{{contextSrv.user.name}}"
 				section="Profile"
-				icon="fa fa-user"
-				show-menu-btn="!grafana.sidemenu">
+				icon="fa fa-user">
 </topnav>
 
 <div class="page-container">

src/app/partials/console.html

@@ -1,19 +0,0 @@
-<div class="grafana-console" ng-controller="ConsoleCtrl">
-	<div class="grafana-console-header">
-		<span class="grafana-console-title large"><i class="fa fa-terminal"></i></span>
-	</div>
-	<div class="grafana-console-body">
-		<div class="grafana-console-item" ng-repeat="item in events" ng-class="{'grafana-console-error': item.error}">
-			<span class="grafana-console-time gfc-col" ng-bind="item.time"></span>
-			<span class="grafana-console-type gfc-col">
-				<span class="label label-info" ng-bind="item.type"></span>
-			</span>
-			<span class="gfc-col grafana-console-method" ng-bind="item.method"></span>
-			<span class="gfc-col grafana-console-title" ng-bind="item.title"></span>
-			<span class="gfc-col grafana-console-elapsed" ng-bind="item.elapsed"></span>
-			<span class="gfc-col grafana-console-field1" ng-bind="item.field1"></span>
-			<span class="gfc-col grafana-console-field2" ng-bind="item.field2"></span>
-			<span class="gfc-col grafana-console-field3" ng-bind="item.field3"></span>
-		</div>
-	</div>
-</div>

src/app/partials/dashboard_topnav.html

@@ -3,7 +3,7 @@
 		<div class="container-fluid">
 
 			<div class="top-nav">
-				<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
+				<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
 					<img class="logo-icon" src="img/fav32.png"></img>
 					<i class="fa fa-bars"></i>
 				</a>

src/app/partials/dasheditor.html

@@ -100,7 +100,7 @@
 <div class="gf-box-footer">
 	<div class="grafana-version-info" ng-show="editor.index === 0">
 		<span class="editor-option small">
-			Grafana version: {{grafana.version}} &nbsp;&nbsp;
+			Grafana version: {{contextSrv.version}} &nbsp;&nbsp;
 		</span>
 		<span grafana-version-check>
 		</span>

src/app/partials/navbar.html

@@ -1,14 +0,0 @@
-<div class="navbar navbar-static-top">
-	<div class="navbar-inner">
-		<div class="container-fluid">
-			<topnav toggle="toggleSideMenu()"
-			        title="{{pageTitle}}"
-							icon="{{pageIcon}}"
-							section="{{pageSection}}"
-							show-menu-btn="!grafana.sidemenu">
-			</topnav>
-		</div>
-	</div>
-</div>
-
-

src/app/partials/sidemenu.html

@@ -2,7 +2,7 @@
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
 		<li style="margin-bottom: 2px;">
-			<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
+			<a class="pointer sidemenu-top-btn" ng-click="contextSrv.toggleSideMenu()">
 				<img class="logo-icon" src="img/fav32.png"></img>
 				<i class="pull-right fa fa-angle-left"></i>
 			</a>
@@ -15,20 +15,20 @@
 	   	</a>
 		</li>
 
-		<li ng-if="grafana.user.isSignedIn" style="margin-top:50px">
+		<li ng-if="contextSrv.user.isSignedIn" style="margin-top:50px">
 			<a href="profile" class="sidemenu-item sidemenu-user">
-				<img ng-src="{{grafana.user.gravatarUrl}}">
-				<span class="sidemenu-item-text">{{grafana.user.name}}</a>
+				<img ng-src="{{contextSrv.user.gravatarUrl}}">
+				<span class="sidemenu-item-text">{{contextSrv.user.name}}</a>
 			</a>
 		</li>
 
-		<li ng-if="grafana.user.isSignedIn">
+		<li ng-if="contextSrv.user.isSignedIn">
 			<a href="logout" class="sidemenu-item" target="_self">
 				<span class="sidemenu-item-text no-icon">Sign out</span>
 	   	</a>
 		</li>
 
-		<li ng-if="!grafana.user.isSignedIn" style="margin-top:50px">
+		<li ng-if="!contextSrv.user.isSignedIn" style="margin-top:50px">
 			<a href="/login" class="sidemenu-item" target="_self">
 				<span class="sidemenu-icon"><i class="fa fa-sign-in"></i></span>
 				<span class="sidemenu-item-text">Sign in</span>

src/app/services/all.js

@@ -2,7 +2,7 @@ define([
   './alertSrv',
   './utilSrv',
   './datasourceSrv',
-  './userSrv',
+  './contextSrv',
   './timer',
   './keyboardManager',
   './popoverSrv',

src/app/services/contextSrv.js

@@ -0,0 +1,49 @@
+define([
+  'angular',
+  'lodash',
+  'store',
+],
+function (angular, _, store) {
+  'use strict';
+
+  var module = angular.module('grafana.services');
+
+  module.service('contextSrv', function(grafanaVersion, $rootScope, $timeout) {
+    var self = this;
+
+    function User() {
+      if (window.grafanaBootData.user) {
+        _.extend(this, window.grafanaBootData.user);
+      }
+    }
+
+    this.version = grafanaVersion;
+    this.lightTheme = false;
+    this.user = new User();
+    this.sidemenu = store.getBool('grafana.sidemenu');
+
+    // events
+    $rootScope.$on('toggle-sidemenu', function() {
+      self.toggleSideMenu();
+    });
+
+    this.hasRole = function(role) {
+      return this.user.accountRole === role;
+    };
+
+    this.setSideMenuState = function(state) {
+      this.sidemenu = state;
+      store.set('grafana.sidemenu', state);
+    };
+
+    this.toggleSideMenu = function() {
+      this.setSideMenuState(!this.sidemenu);
+
+      $timeout(function() {
+        $rootScope.$broadcast("render");
+      }, 50);
+    };
+
+  });
+
+});

src/test/specs/helpers.js

@@ -34,7 +34,7 @@ define([
       return inject(function($controller, $rootScope, $q, $location) {
         self.scope = $rootScope.$new();
         self.$location = $location;
-        self.scope.grafana = {};
+        self.scope.contextSrv = {};
         self.scope.panel = {};
         self.scope.row = { panels:[] };
         self.scope.dashboard = {};

src/views/index.html

@@ -20,16 +20,16 @@
     <script src="[[.AppSubUrl]]/public/app/components/require.backend.js"></script>
     <!-- endbuild -->
 
-    <script>require(['app'], function (app) { app.boot(); })</script>
 
   </head>
 
-	<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': grafana.sidemenu}">
+	<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': contextSrv.sidemenu}">
+
 		<link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.lightTheme">
 
 		<div class="sidemenu-canvas">
 
-			<aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
+			<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu">
 				<div ng-include="'app/partials/sidemenu.html'"></div>
 			</aside>
 
@@ -55,5 +55,9 @@
 			user:[[.User]],
 			settings: [[.Settings]],
 		};
+
+    require(['app'], function (app) {
+	    app.boot();
+    })
 	</script>
 </html>