ux(admin): admin pages overhaul

pkg/api/index.go

@@ -100,6 +100,14 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		}
 	}
 
+	if c.IsGrafanaAdmin {
+		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
+			Text: "Admin",
+			Icon: "fa fa-fw fa-cogs",
+			Url:  setting.AppSubUrl + "/admin",
+		})
+	}
+
 	return &data, nil
 }
 

public/app/core/components/navbar/navbar.html

@@ -1,5 +1,6 @@
 <div class="navbar">
 	<div class="navbar-inner"><div class="container-fluid">
+
 			<div class="top-nav-btn top-nav-menu-btn">
 				<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
 					<span class="top-nav-logo-background">
@@ -10,12 +11,10 @@
 				</a>
 			</div>
 
-			<div class="top-nav-btn dashnav-dashboards-btn" ng-if="ctrl.title">
-				<a class="pointer" href="{{ctrl.titleUrl}}">
-					<i ng-class="ctrl.icon"></i>
-					<span class="dashboard-title">{{ctrl.title}}</span>
-					<!-- <i class="fa fa&#45;caret&#45;down"></i> -->
-				</a>
+
+			<div ng-if="ctrl.title">
+				<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
+				</nav-button>
 			</div>
 
 			<div ng-transclude></div>

public/app/core/components/navbar/navbar.ts

@@ -29,4 +29,28 @@ export function navbarDirective() {
   };
 }
 
+var navButtonTemplate = `
+<div class="top-nav-btn dashnav-dashboards-btn">
+  <a href="{{::titleUrl}}">
+    <i class="{{::icon}}"></i>
+    <span class="dashboard-title">{{::title}}</span>
+  </a>
+</div>
+`;
+
+function navButton() {
+  return {
+    restrict: 'E',
+    template: navButtonTemplate,
+    scope: {
+      title: "@",
+      titleUrl: "@",
+    },
+    link: function(scope, elem, attrs, ctrl) {
+      scope.icon = attrs.icon;
+    }
+  };
+}
+
 coreModule.directive('navbar', navbarDirective);
+coreModule.directive('navButton', navButton);

public/app/core/components/sidemenu/sidemenu.html

@@ -26,16 +26,6 @@
 		</ul>
 	</li>
 
-	<li class="sidemenu-system-section" ng-if="ctrl.systemSection">
-		<div class="sidemenu-system-section-inner">
-			<i class="icon-gf icon-gf-apps"></i>
-			<div class="sidemenu-section-text-wrapper">
-				<div class="sidemenu-section-heading">Grafana Admin</div>
-				<div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div>
-			</div>
-		</div>
-	</li>
-
 	<li ng-repeat="item in ctrl.mainLinks" class="dropdown">
 		<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
 			<span class="icon-circle sidemenu-icon">
@@ -54,15 +44,6 @@
 		</ul>
 	</li>
 
-	<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="ctrl.systemSection">
-		<li>
-			<a href="{{ctrl.appSubUrl}}/" class="sidemenu-item">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
-				<span class="sidemenu-item-text">Exit admin</span>
-			</a>
-		</li>
-	</ul>
-
 	<li ng-if="!ctrl.isSignedIn">
 		<a href="login" class="sidemenu-item" target="_self">
 			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>

public/app/core/components/sidemenu/sidemenu.ts

@@ -11,8 +11,6 @@ export class SideMenuCtrl {
   user: any;
   mainLinks: any;
   orgMenu: any;
-  systemSection: any;
-  grafanaVersion: any;
   appSubUrl: string;
 
   /** @ngInject */
@@ -21,11 +19,11 @@ export class SideMenuCtrl {
     this.user = contextSrv.user;
     this.appSubUrl = config.appSubUrl;
     this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled'];
-    this.updateMenu();
+
+    this.mainLinks = config.bootData.mainNavLinks;
     this.openUserDropdown();
 
     this.$scope.$on('$routeChangeSuccess', () => {
-      this.updateMenu();
       if (!this.contextSrv.pinned) {
         this.contextSrv.sidemenu = false;
       }
@@ -37,10 +35,6 @@ export class SideMenuCtrl {
    return config.appSubUrl + url;
  }
 
- setupMainNav() {
-   this.mainLinks = config.bootData.mainNavLinks;
- }
-
  openUserDropdown() {
    this.orgMenu = [
      {section: 'You', cssClass: 'dropdown-menu-title'},
@@ -70,10 +64,6 @@ export class SideMenuCtrl {
 
    this.orgMenu.push({cssClass: "divider"});
 
-   if (this.contextSrv.isGrafanaAdmin) {
-     this.orgMenu.push({text: "Grafana adminstration", icon: "fa fa-fw fa-cogs", url: this.getUrl("/admin/settings")});
-   }
-
    this.backendSrv.get('/api/user/orgs').then(orgs => {
      orgs.forEach(org => {
        if (org.orgId === this.contextSrv.user.orgId) {
@@ -100,48 +90,6 @@ export class SideMenuCtrl {
      window.location.href = window.location.href;
    });
  };
-
- setupAdminNav() {
-   this.systemSection = true;
-   this.grafanaVersion = config.buildInfo.version;
-
-   this.mainLinks.push({
-     text: "System info",
-     icon: "fa fa-fw fa-info",
-     url: this.getUrl("/admin/settings"),
-   });
-
-   this.mainLinks.push({
-     text: "Stats",
-     icon: "fa fa-fw fa-bar-chart",
-     url: this.getUrl("/admin/stats"),
-   });
-
-   this.mainLinks.push({
-     text: "Users",
-     icon: "fa fa-fw fa-user",
-     url: this.getUrl("/admin/users"),
-   });
-
-   this.mainLinks.push({
-     text: "Organizations",
-     icon: "fa fa-fw fa-users",
-     url: this.getUrl("/admin/orgs"),
-   });
-
- }
-
- updateMenu() {
-   this.systemSection = false;
-   this.mainLinks = [];
-
-   var currentPath = this.$location.path();
-   if (currentPath.indexOf('/admin') === 0) {
-     this.setupAdminNav();
-   } else {
-     this.setupMainNav();
-   }
- };
 }
 
 export function sideMenuDirective() {

public/app/core/routes/routes.ts

@@ -12,6 +12,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
 
   var loadOrgBundle = new BundleLoader('app/features/org/all');
   var loadAppsBundle = new BundleLoader('app/features/apps/all');
+  var loadAdminBundle = new BundleLoader('app/features/admin/admin');
 
   $routeProvider
   .when('/', {
@@ -95,35 +96,49 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     templateUrl: 'public/app/features/profile/partials/select_org.html',
     controller : 'SelectOrgCtrl',
   })
+  // ADMIN
+  .when('/admin', {
+    templateUrl: 'public/app/features/admin/partials/admin_home.html',
+    controller : 'AdminHomeCtrl',
+    resolve: loadAdminBundle,
+  })
   .when('/admin/settings', {
     templateUrl: 'public/app/features/admin/partials/settings.html',
     controller : 'AdminSettingsCtrl',
+    resolve: loadAdminBundle,
   })
   .when('/admin/users', {
     templateUrl: 'public/app/features/admin/partials/users.html',
     controller : 'AdminListUsersCtrl',
+    resolve: loadAdminBundle,
   })
   .when('/admin/users/create', {
     templateUrl: 'public/app/features/admin/partials/new_user.html',
     controller : 'AdminEditUserCtrl',
+    resolve: loadAdminBundle,
   })
   .when('/admin/users/edit/:id', {
     templateUrl: 'public/app/features/admin/partials/edit_user.html',
     controller : 'AdminEditUserCtrl',
+    resolve: loadAdminBundle,
   })
   .when('/admin/orgs', {
     templateUrl: 'public/app/features/admin/partials/orgs.html',
     controller : 'AdminListOrgsCtrl',
+    resolve: loadAdminBundle,
   })
   .when('/admin/orgs/edit/:id', {
     templateUrl: 'public/app/features/admin/partials/edit_org.html',
     controller : 'AdminEditOrgCtrl',
+    resolve: loadAdminBundle,
   })
   .when('/admin/stats', {
     templateUrl: 'public/app/features/admin/partials/stats.html',
     controller : 'AdminStatsCtrl',
     controllerAs: 'ctrl',
+    resolve: loadAdminBundle,
   })
+  // LOGIN / SIGNUP
   .when('/login', {
     templateUrl: 'public/app/partials/login.html',
     controller : 'LoginCtrl',

public/app/features/admin/admin.ts

@@ -0,0 +1,38 @@
+import  './adminListUsersCtrl';
+import  './adminListOrgsCtrl';
+import  './adminEditOrgCtrl';
+import  './adminEditUserCtrl';
+
+import coreModule from 'app/core/core_module';
+
+class AdminSettingsCtrl {
+
+  /** @ngInject **/
+  constructor($scope, backendSrv) {
+
+    backendSrv.get('/api/admin/settings').then(function(settings) {
+      $scope.settings = settings;
+    });
+
+  }
+}
+
+class AdminHomeCtrl {
+  /** @ngInject **/
+  constructor() {}
+}
+
+export class AdminStatsCtrl {
+  stats: any;
+
+  /** @ngInject */
+  constructor(backendSrv: any) {
+    backendSrv.get('/api/admin/stats').then(stats => {
+      this.stats = stats;
+    });
+  }
+}
+
+coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl);
+coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
+coreModule.controller('AdminStatsCtrl', AdminStatsCtrl);

public/app/features/admin/adminStatsCtrl.ts

@@ -1,18 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import angular from 'angular';
-
-export class AdminStatsCtrl {
-  stats: any;
-
-  /** @ngInject */
-  constructor(private backendSrv: any) {}
-
-  init() {
-    this.backendSrv.get('/api/admin/stats').then(stats => {
-      this.stats = stats;
-    });
-  }
-}
-
-angular.module('grafana.controllers').controller('AdminStatsCtrl', AdminStatsCtrl);

public/app/features/admin/all.js

@@ -1,8 +0,0 @@
-define([
-  './adminListUsersCtrl',
-  './adminListOrgsCtrl',
-  './adminEditOrgCtrl',
-  './adminEditUserCtrl',
-  './adminSettingsCtrl',
-  './adminStatsCtrl',
-], function () {});

public/app/features/admin/partials/admin_home.html

@@ -0,0 +1,28 @@
+<navbar icon="fa fa-fw fa-cogs" title="Admin">
+</navbar>
+
+<div class="page-container">
+	<div class="page-header">
+		<h1>
+			Server Administration
+		</h1>
+	</div>
+
+	<a class="btn btn-inverse" href="admin/users">
+		Manage Users
+	</a>
+
+	<a class="btn btn-inverse" href="admin/orgs">
+		Manage Organizations
+	</a>
+
+	<a class="btn btn-inverse" href="admin/settings">
+		View Server Settings
+	</a>
+
+	<a class="btn btn-inverse" href="admin/stats">
+		View Server Stats
+	</a>
+
+</div>
+

public/app/features/admin/partials/edit_org.html

@@ -1,14 +1,13 @@
-<navbar icon="fa fa-fw fa-user" title="Organizations" title-url="admin/orgs" subnav="true">
-	<ul class="nav">
-		<li class="active"><a href="admin/orgs/edit/{{org.id}}">{{org.name}}</a></li>
-	</ul>
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
+	<nav-button title="Orgs" title-url="admin/orgs" icon="icon-gf icon-gf-users"></nav-button>
 </navbar>
 
 <div class="page-container">
-	<div class="page">
-		<h2>
-			Organization Details
-		</h2>
+	<div class="page-header">
+		<h1>
+			Edit Organization
+		</h1>
+	</div>
 
 		<form name="orgDetailsForm">
 			<div>

public/app/features/admin/partials/edit_user.html

@@ -1,150 +1,148 @@
-<navbar icon="fa fa-fw fa-user" title="Users" title-url="admin/users" subnav="true">
-	<ul class="nav">
-		<li class="active"><a href="admin/users/edit/{{user_id}}">Edit user</a></li>
-	</ul>
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
+	<nav-button title="Users" title-url="admin/users" icon="icon-gf icon-gf-users"></nav-button>
 </navbar>
 
 <div class="page-container">
-	<div class="page">
-		<h2>
+	<div class="page-header">
+		<h1>
 			Edit User
-		</h2>
-
-		<form name="userForm">
-			<div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Name
-						</li>
-						<li>
-							<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Email
-						</li>
-						<li>
-							<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Username
-						</li>
-						<li>
-							<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</div>
-
-			<br>
-			<button type="submit" class="pull-right btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
-		</form>
-
-		<h3>
-			Change password
-		</h3>
-
-		<form name="passwordForm">
-			<div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							New password
-						</li>
-						<li>
-							<input type="password" required ng-minlength="4" ng-model="password" class="input-xxlarge tight-form-input last">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</div>
-
-			<br>
-			<button type="submit" class="pull-right btn btn-success" ng-click="setPassword()">Update</button>
-		</form>
-
-		<h3>
-			Permissions
-		</h3>
+		</h1>
+	</div>
 
+	<form name="userForm">
 		<div>
-			<div class="tight-form last">
+			<div class="tight-form">
 				<ul class="tight-form-list">
-					<li class="tight-form-item last">
-						Grafana Admin&nbsp;
-						<input class="cr1" id="permissions.isGrafanaAdmin" type="checkbox"
-						ng-model="permissions.isGrafanaAdmin" ng-checked="permissions.isGrafanaAdmin">
-						<label for="permissions.isGrafanaAdmin" class="cr1"></label>
+					<li class="tight-form-item" style="width: 100px">
+						Name
+					</li>
+					<li>
+						<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<br>
-			<button type="submit" class="pull-right btn btn-success" ng-click="updatePermissions()">Update</button>
-			<br>
-		</div>
-
-		<h3>
-			Organizations
-		</h3>
-
-		<form name="addOrgForm">
 			<div class="tight-form">
 				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 160px">
-						Add organization
+					<li class="tight-form-item" style="width: 100px">
+						Email
 					</li>
 					<li>
-						<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
-									required class="input-xlarge tight-form-input" placeholder="organization name">
+						<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
 					</li>
-					<li class="tight-form-item">
-						Role
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						Username
 					</li>
 					<li>
-						<select type="text" ng-model="newOrg.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-						</select>
+						<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+
+		<br>
+		<button type="submit" class="pull-right btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
+	</form>
+
+	<h3>
+		Change password
+	</h3>
+
+	<form name="passwordForm">
+		<div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						New password
 					</li>
 					<li>
-						<button class="btn btn-success tight-form-btn" ng-click="addOrgUser()">Add</button>
+						<input type="password" required ng-minlength="4" ng-model="password" class="input-xxlarge tight-form-input last">
 					</li>
-					<div class="clearfix"></div>
 				</ul>
+				<div class="clearfix"></div>
 			</div>
-		</form>
+		</div>
 
-		<table class="grafana-options-table form-inline">
-			<tr>
-				<th>Name</th>
-				<th>Role</th>
-				<th></th>
-			</tr>
-			<tr ng-repeat="org in orgs">
-				<td>
-					{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
-				</td>
-				<td>
-					<select type="text" ng-model="org.role" class="input-small" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
-					</select>
-				</td>
-				<td style="width: 1%">
-					<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
-		</table>
+		<br>
+		<button type="submit" class="pull-right btn btn-success" ng-click="setPassword()">Update</button>
+	</form>
+
+	<h3>
+		Permissions
+	</h3>
 
+	<div>
+		<div class="tight-form last">
+			<ul class="tight-form-list">
+				<li class="tight-form-item last">
+					Grafana Admin&nbsp;
+					<input class="cr1" id="permissions.isGrafanaAdmin" type="checkbox"
+					ng-model="permissions.isGrafanaAdmin" ng-checked="permissions.isGrafanaAdmin">
+					<label for="permissions.isGrafanaAdmin" class="cr1"></label>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<br>
+		<button type="submit" class="pull-right btn btn-success" ng-click="updatePermissions()">Update</button>
+		<br>
 	</div>
+
+	<h3>
+		Organizations
+	</h3>
+
+	<form name="addOrgForm">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 160px">
+					Add organization
+				</li>
+				<li>
+					<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
+					required class="input-xlarge tight-form-input" placeholder="organization name">
+				</li>
+				<li class="tight-form-item">
+					Role
+				</li>
+				<li>
+					<select type="text" ng-model="newOrg.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
+					</select>
+				</li>
+				<li>
+					<button class="btn btn-success tight-form-btn" ng-click="addOrgUser()">Add</button>
+				</li>
+				<div class="clearfix"></div>
+			</ul>
+		</div>
+	</form>
+
+	<table class="grafana-options-table form-inline">
+		<tr>
+			<th>Name</th>
+			<th>Role</th>
+			<th></th>
+		</tr>
+		<tr ng-repeat="org in orgs">
+			<td>
+				{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
+			</td>
+			<td>
+				<select type="text" ng-model="org.role" class="input-small" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
+				</select>
+			</td>
+			<td style="width: 1%">
+				<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
+					<i class="fa fa-remove"></i>
+				</a>
+			</td>
+		</tr>
+	</table>
+
 </div>

public/app/features/admin/partials/new_user.html

@@ -1,65 +1,63 @@
-<navbar icon="fa fa-fw fa-user" title="Users" title-url="admin/users" subnav="true">
-	<ul class="nav">
-		<li class="active"><a href="admin/users/create">Add user</a></li>
-	</ul>
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
+	<nav-button title="Users" title-url="admin/users" icon="icon-gf icon-gf-users"></nav-button>
 </navbar>
 
 <div class="page-container">
-	<div class="page">
-		<h2>
+	<div class="page-header">
+		<h1>
 			Add new user
-		</h2>
+		</h1>
+	</div>
 
-		<form name="userForm">
-			<div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							<strong>Name</strong>
-						</li>
-						<li>
-							<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							<strong>Email</strong>
-						</li>
-						<li>
-							<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							<strong>Username</strong>
-						</li>
-						<li>
-							<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							<strong>Password</strong>
-						</li>
-						<li>
-							<input type="password" required ng-model="user.password" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
+	<form name="userForm">
+		<div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						<strong>Name</strong>
+					</li>
+					<li>
+						<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						<strong>Email</strong>
+					</li>
+					<li>
+						<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						<strong>Username</strong>
+					</li>
+					<li>
+						<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						<strong>Password</strong>
+					</li>
+					<li>
+						<input type="password" required ng-model="user.password" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+		</div>
 
-			<br>
-			<button type="submit" class="pull-right btn btn-success" ng-click="create()">Create</button>
-		</form>
-	</div>
+		<br>
+		<button type="submit" class="pull-right btn btn-success" ng-click="create()">Create</button>
+	</form>
 </div>

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

@@ -1,35 +1,37 @@
-<navbar icon="fa fa-fw fa-users" title="Organizations">
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
+	<nav-button title="Orgs" title-url="admin/orgs" icon="icon-gf icon-gf-users"></nav-button>
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide">
-		<h2>
+	<div class="page-header">
+		<h1>
 			Organizations
-		</h2>
-    <table class="filter-table form-inline">
-			<thead>
-				<tr>
-					<th>Id</th>
-					<th>Name</th>
-          <th></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr ng-repeat="org in orgs">
-          <td>{{org.id}}</td>
-					<td>{{org.name}}</td>
-					<td class="text-right">
-						<a href="admin/orgs/edit/{{org.id}}" class="btn btn-inverse btn-small">
-							<i class="fa fa-edit"></i>
-							Edit
-						</a>
-						&nbsp;&nbsp;
-						<a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
-							<i class="fa fa-remove"></i>
-						</a>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+		</h1>
 	</div>
+
+	<table class="filter-table form-inline">
+		<thead>
+			<tr>
+				<th>Id</th>
+				<th>Name</th>
+				<th></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat="org in orgs">
+				<td>{{org.id}}</td>
+				<td>{{org.name}}</td>
+				<td class="text-right">
+					<a href="admin/orgs/edit/{{org.id}}" class="btn btn-inverse btn-small">
+						<i class="fa fa-edit"></i>
+						Edit
+					</a>
+					&nbsp;&nbsp;
+					<a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
 </div>

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

@@ -1,11 +1,12 @@
-<navbar icon="fa fa-fw fa-info" title="System info">
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
 </navbar>
 
 <div class="page-container">
-	<div class="page">
-		<h2>
-			System information
-		</h2>
+	<div class="page-header">
+		<h1>
+			Server settings
+		</h1>
+	</div>
 
 		<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">
 			These system settings are defined in grafana.ini or grafana.custom.ini (or overriden in ENV variables).
@@ -22,7 +23,6 @@
 				<td>{{keyValue}}</td>
 			</tr>
 		</table>
-	</div>
 </div>
 
 

public/app/features/admin/partials/stats.html

@@ -1,57 +1,57 @@
-<navbar icon="fa fa-fw fa-bar-chart" title="Stats">
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide" ng-init="ctrl.init()">
+	<div class="page-header">
 		<h1>
-			Overview
+			Stats
 		</h1>
-
-    <table class="filter-table form-inline">
-			<thead>
-				<tr>
-					<th>Name</th>
-					<th>Value</th>
-				</tr>
-			</thead>
-			<tbody>
-        <tr>
-					<td>Total dashboards</td>
-					<td>{{ctrl.stats.dashboard_count}}</td>
-				</tr>
-        <tr>
-          <td>Total users</td>
-          <td>{{ctrl.stats.user_count}}</td>
-        </tr>
-        <tr>
-          <td>Total grafana admins</td>
-          <td>{{ctrl.stats.grafana_admin_count}}</td>
-        </tr>
-        <tr>
-          <td>Total organizations</td>
-          <td>{{ctrl.stats.org_count}}</td>
-        </tr>
-        <tr>
-          <td>Total datasources</td>
-          <td>{{ctrl.stats.data_source_count}}</td>
-        </tr>
-        <tr>
-          <td>Total playlists</td>
-          <td>{{ctrl.stats.playlist_count}}</td>
-        </tr>
-        <tr>
-          <td>Total snapshots</td>
-          <td>{{ctrl.stats.db_snapshot_count}}</td>
-        </tr>
-        <tr>
-          <td>Total dashboard tags</td>
-          <td>{{ctrl.stats.db_tag_count}}</td>
-        </tr>
-        <tr>
-          <td>Total starred dashboards</td>
-          <td>{{ctrl.stats.starred_db_count}}</td>
-        </tr>
-			</tbody>
-		</table>
 	</div>
+
+	<table class="filter-table form-inline">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Value</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>Total dashboards</td>
+				<td>{{ctrl.stats.dashboard_count}}</td>
+			</tr>
+			<tr>
+				<td>Total users</td>
+				<td>{{ctrl.stats.user_count}}</td>
+			</tr>
+			<tr>
+				<td>Total grafana admins</td>
+				<td>{{ctrl.stats.grafana_admin_count}}</td>
+			</tr>
+			<tr>
+				<td>Total organizations</td>
+				<td>{{ctrl.stats.org_count}}</td>
+			</tr>
+			<tr>
+				<td>Total datasources</td>
+				<td>{{ctrl.stats.data_source_count}}</td>
+			</tr>
+			<tr>
+				<td>Total playlists</td>
+				<td>{{ctrl.stats.playlist_count}}</td>
+			</tr>
+			<tr>
+				<td>Total snapshots</td>
+				<td>{{ctrl.stats.db_snapshot_count}}</td>
+			</tr>
+			<tr>
+				<td>Total dashboard tags</td>
+				<td>{{ctrl.stats.db_tag_count}}</td>
+			</tr>
+			<tr>
+				<td>Total starred dashboards</td>
+				<td>{{ctrl.stats.starred_db_count}}</td>
+			</tr>
+		</tbody>
+	</table>
 </div>

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

@@ -1,45 +1,46 @@
-<navbar icon="fa fa-fw fa-user" title="Users" title-url="admin/users">
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
+	<nav-button title="Users" title-url="admin/users" icon="icon-gf icon-gf-users"></nav-button>
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide">
-		<a class="btn btn-inverse pull-right" href="admin/users/create">
+	<div class="page-header">
+		<h1>Users</h1>
+
+		<a class="btn btn-success" href="admin/users/create">
 			<i class="fa fa-plus"></i>
 			Add new user
 		</a>
-
-		<h1>Users</h1>
-
-    <table class="filter-table form-inline">
-			<thead>
-				<tr>
-					<th>Id</th>
-					<th>Name</th>
-					<th>Login</th>
-					<th>Email</th>
-					<th style="white-space: nowrap">Grafana Admin</th>
-					<th></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr ng-repeat="user in users">
-					<td>{{user.id}}</td>
-					<td>{{user.name}}</td>
-					<td>{{user.login}}</td>
-					<td>{{user.email}}</td>
-					<td>{{user.isAdmin}}</td>
-					<td class="text-right">
-						<a href="admin/users/edit/{{user.id}}" class="btn btn-inverse btn-small">
-							<i class="fa fa-edit"></i>
-							Edit
-						</a>
-						&nbsp;&nbsp;
-						<a ng-click="deleteUser(user)" class="btn btn-danger btn-small">
-							<i class="fa fa-remove"></i>
-						</a>
-					</td>
-				</tr>
-			</tbody>
-		</table>
 	</div>
+
+	<table class="filter-table form-inline">
+		<thead>
+			<tr>
+				<th>Id</th>
+				<th>Name</th>
+				<th>Login</th>
+				<th>Email</th>
+				<th style="white-space: nowrap">Grafana Admin</th>
+				<th></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat="user in users">
+				<td>{{user.id}}</td>
+				<td>{{user.name}}</td>
+				<td>{{user.login}}</td>
+				<td>{{user.email}}</td>
+				<td>{{user.isAdmin}}</td>
+				<td class="text-right">
+					<a href="admin/users/edit/{{user.id}}" class="btn btn-inverse btn-small">
+						<i class="fa fa-edit"></i>
+						Edit
+					</a>
+					&nbsp;&nbsp;
+					<a ng-click="deleteUser(user)" class="btn btn-danger btn-small">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
 </div>

public/app/features/all.js

@@ -10,5 +10,4 @@ define([
   './profile/profileCtrl',
   './profile/changePasswordCtrl',
   './profile/selectOrgCtrl',
-  './admin/all',
 ], function () {});