Lots of work on the side menu

src/app/controllers/p_grafanaCtrl.js

@@ -3,8 +3,9 @@ define([
   'config',
   'lodash',
   'jquery',
+  'store',
 ],
-function (angular, config, _, $) {
+function (angular, config, _, $, store) {
   "use strict";
 
   var module = angular.module('grafana.controllers');
@@ -12,30 +13,37 @@ function (angular, config, _, $) {
   module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope) {
 
     $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
-    $scope.consoleEnabled = (window.localStorage && window.localStorage.grafanaConsole === 'true');
+    $scope.consoleEnabled = store.getBool('grafanaConsole');
+    $scope.showProSideMenu = store.getBool('grafanaProSideMenu');
 
-    $rootScope.profilingEnabled = (window.localStorage && window.localStorage.profilingEnabled === 'true');
+    $rootScope.profilingEnabled = store.getBool('profilingEnabled');
     $rootScope.performance = { loadStart: new Date().getTime() };
 
     $scope.init = function() {
       $scope._ = _;
-      if ($rootScope.profilingEnabled) {
-        $scope.initProfiling();
-      }
+
+      if ($rootScope.profilingEnabled) { $scope.initProfiling(); }
 
       $scope.dashAlerts = alertSrv;
-      $scope.grafana = {
-        style: 'dark'
-      };
+      $scope.grafana = { style: 'dark' };
+
+      $scope.onAppEvent('logged-out', function() {
+        $scope.showProSideMenu = false;
+      });
+
+      $scope.onAppEvent('logged-in', function() {
+        $scope.showProSideMenu = store.getBool('grafanaProSideMenu');
+      });
     };
 
     $scope.toggleProSideMenu = function() {
       $scope.showProSideMenu = !$scope.showProSideMenu;
+      store.set('grafanaProSideMenu', $scope.showProSideMenu);
     };
 
     $scope.toggleConsole = function() {
       $scope.consoleEnabled = !$scope.consoleEnabled;
-      window.localStorage.grafanaConsole = $scope.consoleEnabled ? 'true' : 'false';
+      store.set('grafanaConsole', $scope.consoleEnabled);
     };
 
     $rootScope.onAppEvent = function(name, callback) {

src/app/controllers/p_loginCtrl.js

@@ -6,27 +6,48 @@ function (angular) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('LoginCtrl', function($scope, $http, $location) {
+  module.controller('LoginCtrl', function($scope, $http, $location, $routeParams, alertSrv) {
     $scope.loginModel = {};
 
+    $scope.init = function() {
+      if ($routeParams.logout) {
+        $scope.logout();
+      }
+    };
+
+    $scope.logout = function() {
+      $http.post('/logout').then(function() {
+
+        alertSrv.set('Logged out!', '', 'success', 3000);
+        $scope.emitAppEvent('logged-out');
+
+      }, function() {
+        alertSrv.set('Logout failed:', 'Unexpected error', 'error', 3000);
+      });
+    };
+
     $scope.login = function() {
       delete $scope.loginError;
+
       if (!$scope.loginForm.$valid) {
         return;
       }
 
       $http.post('/login', $scope.loginModel).then(function() {
+        $scope.emitAppEvent('logged-in');
         $location.path('/');
       }, function(err) {
         if (err.status === 401) {
           $scope.loginError = "Username or password is incorrect";
         }
         else {
-          $scope.loginErro = "Unexpected error";
+          $scope.loginError = "Unexpected error";
         }
       });
     };
 
+    $scope.init();
+
   });
 
 });

src/app/partials/dashboard.html

@@ -1,6 +1,6 @@
 <div ng-controller="DashboardCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 
-	<div ng-include="'app/partials/p_dashboard_topnav.html'">
+	<div ng-include="'app/partials/pro/dashboard_topnav.html'">
 	</div>
 
 	<div class="submenu-controls">

src/app/partials/pro/admin_datasources.html

@@ -0,0 +1,14 @@
+<div class="navbar navbar-static-top">
+	<div class="navbar-inner">
+		<div class="container-fluid">
+			<span class="brand">
+				<a ng-click="toggleProSideMenu()">
+					<img src="img/small.png">
+				</a>
+				Admin / Data sources
+			</span>
+		</div>
+	</div>
+</div>
+
+

src/app/partials/p_dashboard_topnav.html → src/app/partials/pro/dashboard_topnav.html

@@ -3,7 +3,7 @@
 		<div class="container-fluid">
 			<span class="brand">
 				<a ng-click="toggleProSideMenu()">
-					<img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom">
+					<img src="img/small.png">
 				</a>
 				{{dashboard.title}}
 			</span>

src/app/partials/p_login.html → src/app/partials/pro/login.html

@@ -2,6 +2,7 @@
 <div class="container">
 
 	<div class="login-box">
+
 		<div class="login-box-logo">
 			<img src="/img/logo_transparent_200x75.png">
 		</div>

src/app/partials/pro/sidemenu.html

@@ -0,0 +1,45 @@
+<div class="navbar navbar-static-top">
+	<div class="navbar-inner">
+		<div class="container-fluid">
+			<span class="brand">
+				<i class="icon-gears" style=""></i>
+				<span style="color: white; padding-left: 4px;">Grafana</span>
+				<ul class="nav" ng-controller='DashboardNavCtrl' ng-init="init()">
+			</span>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<section class="pro-sidemenu-items">
+	<a class="pro-sidemenu-link pro-side-menu-user" href="/login?logout">
+		<img  src="https://secure.gravatar.com/avatar/c8656e8972626f01e1703681d5e55f92?s=90&default=blank">
+		logout
+	</a>
+	<a class="pro-sidemenu-link" href="/dashboard/db/home">
+		<i class="icon-th-large"></i>
+		Dashboards
+	</a>
+	<a class="pro-sidemenu-link" href="/charts">
+		<i class="icon-signal"></i>
+		Graphs
+	</a>
+	<a class="pro-sidemenu-link" href="/charts">
+		<i class="icon-bolt" style="padding-right: 23px"></i>
+		 Alerts
+	</a>
+	<a class="pro-sidemenu-link" href="/admin/datasources">
+		<i class="icon-sitemap"></i>
+		Data sources
+	</a>
+	<a class="pro-sidemenu-link" href="/admin">
+		<i class="icon-tasks"></i>
+		Global options
+	</a>
+	<a class="pro-sidemenu-link" href="/admin">
+		<i class="icon-user"></i>
+		User accounts
+	</a>
+</section>
+
+</div>

src/app/routes/p_admin.js

@@ -0,0 +1,21 @@
+define([
+  'angular',
+],
+function (angular) {
+  "use strict";
+
+  var module = angular.module('grafana.routes');
+
+  module.config(function($routeProvider) {
+    $routeProvider
+      .when('/admin/datasources', {
+        templateUrl: 'app/partials/pro/admin_datasources.html',
+        controller : 'AdminCtrl',
+      });
+  });
+
+  module.controller('AdminCtrl', function() {
+
+  });
+
+});

src/app/routes/p_all.js

@@ -1,5 +1,7 @@
 define([
   './p_dashboard',
   './p_solo-panel',
+  './p_admin',
+  './p_login',
 ],
 function () {});

src/app/routes/p_dashboard.js

@@ -1,6 +1,5 @@
 define([
   'angular',
-  'controllers/p_loginCtrl'
 ],
 function (angular) {
   "use strict";
@@ -23,10 +22,6 @@ function (angular) {
         templateUrl: '/app/partials/dashboard.html',
         controller : 'DashFromDBProvider',
         reloadOnSearch: false,
-      })
-      .when('/login', {
-        templateUrl: '/app/partials/p_login.html',
-        controller : 'LoginCtrl',
       });
   });
 

src/app/routes/p_login.js

@@ -0,0 +1,59 @@
+define([
+  'angular',
+],
+function (angular) {
+  "use strict";
+
+  var module = angular.module('grafana.routes');
+
+  module.config(function($routeProvider) {
+    $routeProvider
+      .when('/login', {
+        templateUrl: 'app/partials/pro/login.html',
+        controller : 'LoginCtrl',
+      });
+  });
+
+  module.controller('LoginCtrl', function($scope, $http, $location, $routeParams, alertSrv) {
+    $scope.loginModel = {};
+
+    $scope.init = function() {
+      if ($routeParams.logout) {
+        $scope.logout();
+      }
+    };
+
+    $scope.logout = function() {
+      $http.post('/logout').then(function() {
+        alertSrv.set('Logged out!', '', 'success', 3000);
+        $scope.emitAppEvent('logged-out');
+      }, function() {
+        alertSrv.set('Logout failed:', 'Unexpected error', 'error', 3000);
+      });
+    };
+
+    $scope.login = function() {
+      delete $scope.loginError;
+
+      if (!$scope.loginForm.$valid) {
+        return;
+      }
+
+      $http.post('/login', $scope.loginModel).then(function() {
+        $scope.emitAppEvent('logged-in');
+        $location.path('/');
+      }, function(err) {
+        if (err.status === 401) {
+          $scope.loginError = "Username or password is incorrect";
+        }
+        else {
+          $scope.loginError = "Unexpected error";
+        }
+      });
+    };
+
+    $scope.init();
+
+  });
+
+});

src/css/less/p_pro.less

@@ -9,12 +9,17 @@
     top: 0;
     left: 0;
     width: 200px;
-    background: @grafanaPanelBackground;
+    background: @bodyBackground;
     border-right: 2px solid black;
     min-height: 100%;
     z-index: 101;
   }
 
+  .dashboard-notice {
+    margin-left: 200px;
+    width: auto;
+  }
+
   .pro-main-view {
     padding-left: 200px;
   }
@@ -24,6 +29,33 @@
   }
 }
 
+.pro-sidemenu-items {
+}
+
+.pro-sidemenu-link {
+  font-size: 1.0rem;
+  padding: 14px 10px 14px 20px;
+  display: block;
+  background: @grafanaPanelBackground;
+  color: @grayLight;
+  i {
+    padding-right: 15px;
+  }
+  border-bottom: 1px solid black;
+}
+
+.pro-sidemenu-link:first-child {
+ // border-top: 1px solid black;
+}
+
+.pro-side-menu-user {
+  padding-left: 5px;
+  img {
+    width: 49px;
+    padding-right: 10px;
+  }
+}
+
 .login-box {
   width: 700px;
   margin: 100px auto 0 auto;