Created seperate admin sidenav #1506

src/app/controllers/sidemenuCtrl.js

@@ -15,7 +15,7 @@ function (angular, _, $, config) {
       return config.appSubUrl + url;
     };
 
-    $scope.mainLinks = [];
+    $scope.setupMainNav = function() {
       $scope.mainLinks.push({
         text: "Dashboards",
         icon: "fa fa-fw fa-th-large",
@@ -30,7 +30,6 @@ function (angular, _, $, config) {
         });
       }
 
-    $scope.bottomLinks = [];
       if (contextSrv.user.isSignedIn) {
         $scope.bottomLinks.push({
           text: contextSrv.user.name,
@@ -46,7 +45,7 @@ function (angular, _, $, config) {
 
         if (contextSrv.hasRole('Admin')) {
           $scope.bottomLinks.push({
-          text: "System admin",
+            text: "Grafana admin",
             icon: "fa fa-fw fa-cog",
             href: $scope.getUrl("/admin/settings"),
           });
@@ -58,12 +57,59 @@ function (angular, _, $, config) {
           href: $scope.getUrl("/logout"),
         });
       }
+    };
+
+    $scope.setupAdminNav = function() {
+      $scope.systemSection = true;
+      $scope.grafanaVersion = config.buildInfo.version;
+
+      $scope.mainLinks.push({
+        text: "System info",
+        icon: "fa fa-fw fa-info",
+        href: $scope.getUrl("/admin/settings"),
+      });
+
+      $scope.mainLinks.push({
+        text: "Global Users",
+        icon: "fa fa-fw fa-user",
+        href: $scope.getUrl("/admin/users"),
+      });
+
+      $scope.mainLinks.push({
+        text: "Global Orgs",
+        icon: "fa fa-fw fa-users",
+        href: $scope.getUrl("/admin/orgs"),
+      });
 
-    $scope.updateState = function() {
+      $scope.bottomLinks.push({
+        text: "Exit admin",
+        icon: "fa fa-fw fa-backward",
+        href: $scope.getUrl("/"),
+      });
+
+      $scope.bottomLinks.push({
+        text: "Sign out",
+        icon: "fa fa-fw fa-sign-out",
+        href: $scope.getUrl("/logout"),
+      });
+    };
+
+    $scope.updateMenu = function() {
+      $scope.systemSection = false;
+      $scope.mainLinks = [];
+      $scope.bottomLinks = [];
+
+      var currentPath = $location.path();
+      if (currentPath.indexOf('/admin') === 0) {
+        $scope.setupAdminNav();
+      } else {
+        $scope.setupMainNav();
+      }
     };
 
     $scope.init = function() {
-      $scope.updateState();
+      $scope.updateMenu();
+      $scope.$on('$routeChangeSuccess', $scope.updateMenu);
     };
   });
 

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

+<topnav icon="fa fa-fw fa-users" title="Global Orgs" subnav="true">
+	<ul class="nav">
+		<li class="active"><a href="admin/users">Overview</a></li>
+	</ul>
+</topnav>
+
+<div class="page-container">
+	<div class="page">
+		<h2>
+			Organizations
+		</h2>
+
+		View not implemented yet...
+	</div>
+</div>

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

-<topnav icon="fa fa-fw fa-cogs" title="System Admin" subnav="true">
-	<ul class="nav">
-		<li class="active"><a href="admin/settings">Settings</a></li>
-		<li><a href="admin/users">Users</a></li>
-		<li><a href="admin/users/create">Create user</a></li>
-	</ul>
+<topnav icon="fa fa-fw fa-info" title="System info">
 </topnav>
 
 <div class="page-container">
 	<div class="page">
 		<h2>
-			System settings
+			System information
 		</h2>
 
 		<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">

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

-<topnav icon="fa fa-fw fa-cogs" title="System Admin" subnav="true">
+<topnav icon="fa fa-fw fa-user" title="Global users" subnav="true">
 	<ul class="nav">
-		<li><a href="admin/settings">Settings</a></li>
-		<li class="active"><a href="admin/users">Users</a></li>
+		<li class="active"><a href="admin/users">Overview</a></li>
 		<li><a href="admin/users/create">Create user</a></li>
 	</ul>
 </topnav>

src/app/features/org/partials/orgDetails.html

@@ -10,7 +10,7 @@
 
 		<h2>Organization Details</h2>
 
-		<form name="accountForm">
+		<form name="orgForm">
 			<div>
 				<div class="tight-form">
 					<ul class="tight-form-list">
@@ -32,7 +32,7 @@
 			API Keys
 		</h2>
 
-		<div ng-controller="ApiKeysCtrl">
+		<div ng-controller="OrgApiKeysCtrl">
 			<form name="addTokenrForm" class="form-inline tight-form last">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 100px">

src/app/partials/sidemenu.html

@@ -9,6 +9,16 @@
 			</a>
 		</li>
 
+		<li class="sidemenu-system-section" ng-if="systemSection">
+			<div class="sidemenu-system-section-inner">
+				<i class="fa fa-fw fa-cubes"></i>
+				<div class="sidemenu-section-text-wrapper">
+					<div class="sidemenu-section-heading">Grafana Admin</div>
+					<div class="sidemenu-section-tagline">v {{grafanaVersion}}</div>
+				</div>
+			</div>
+		</li>
+
 		<li ng-repeat="item in mainLinks">
 			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
 				<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
@@ -18,13 +28,7 @@
 	</ul>
 
 	<ul class="sidemenu sidemenu-small"  style="margin-top:50px">
-		<!-- <li> -->
-		<!-- 	<a href="profile" class="sidemenu&#45;item sidemenu&#45;user"> -->
-		<!-- 		<img ng&#45;src="{{contextSrv.user.gravatarUrl}}"> -->
-		<!-- 		<span class="sidemenu&#45;item&#45;text">{{contextSrv.user.name}}</a> -->
-		<!-- 	</a> -->
-		<!-- </li> -->
-    <!--  -->
+
 		<li ng-repeat="item in bottomLinks">
 			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
 				<img ng-if="item.imgSrc" ng-src="{{item.imgSrc}}">
@@ -33,25 +37,5 @@
 	   	</a>
 		</li>
 
-		<!-- <li ng&#45;if="contextSrv.user.isGrafanaAdmin"> -->
-		<!-- 	<a href="admin/settings" class="sidemenu&#45;item"> -->
-		<!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fw&#45;fw fa&#45;cogs"></i></span> -->
-		<!-- 		<span class="sidemenu&#45;item&#45;text">System Admin</span> -->
-		<!-- 	</a> -->
-		<!-- </li> -->
-    <!--  -->
-		<!-- <li> -->
-		<!-- 	<a href="logout" class="sidemenu&#45;item" target="_self"> -->
-		<!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;out"></i></span> -->
-		<!-- 		<span class="sidemenu&#45;item&#45;text">Sign out</span> -->
-		<!-- 	</a> -->
-		<!-- </li> -->
-    <!--  -->
-		<!-- <li ng&#45;if="!contextSrv.user.isSignedIn" style="margin&#45;top:50px"> -->
-		<!-- 	<a href="/login" class="sidemenu&#45;item" target="_self"> -->
-		<!-- 		<span class="sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;in"></i></span> -->
-		<!-- 		<span class="sidemenu&#45;item&#45;text">Sign in</span> -->
-		<!-- 	</a> -->
-		<!-- </li> -->
 	</ul>
 </div>

src/app/routes/backend/all.js

@@ -82,6 +82,9 @@ define([
         templateUrl: 'app/features/admin/partials/edit_user.html',
         controller : 'AdminEditUserCtrl',
       })
+      .when('/admin/orgs', {
+        templateUrl: 'app/features/admin/partials/orgs.html',
+      })
       .when('/login', {
         templateUrl: 'app/partials/login.html',
         controller : 'LoginCtrl',

src/css/less/sidemenu.less

@@ -138,4 +138,35 @@
   }
 }
 
+.sidemenu-system-section {
+  background-color: @blueDark;
+  color: @white;
+  padding: 3px 0;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 2px;
+
+  .sidemenu-system-section-inner {
+    border: 2px solid black;
+    border-left: none;
+    border-right: none;
+    padding: 4px;
+    overflow: hidden;
+  }
+
+  .fa {
+    float: left;
+    font-size: 120%;
+    line-height: 41px;
+    padding: 0 15px;
+  }
+}
+.sidemenu-section-tagline {
+  font-style: italic;
+  font-size: 75%;
+  line-height: 10px;
+}
 
+.sidemenu-section-text-wrapper {
+  padding-top: 4px;
+}