page header now on 99% of pages

pkg/api/index.go

@@ -263,16 +263,18 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 				Divider: true, HideFromTabs: true,
 			})
 			cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{
-				Text: "Server Admin",
-				Id:   "admin",
-				Icon: "fa fa-fw fa-shield",
-				Url:  setting.AppSubUrl + "/admin",
+				Text:         "Server Admin",
+				HideFromTabs: true,
+				SubTitle:     "Manage all users & orgs",
+				Id:           "admin",
+				Icon:         "fa fa-fw fa-shield",
+				Url:          setting.AppSubUrl + "/admin/users",
 				Children: []*dtos.NavLink{
-					{Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"},
-					{Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"},
-					{Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"},
-					{Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"},
-					{Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"},
+					{Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users", Icon: "icon-gf icon-gf-fw icon-gf-users"},
+					{Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs", Icon: "gicon gicon-org"},
+					{Text: "Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings", Icon: "fa fa-fw fa-sliders"},
+					{Text: "Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats", Icon: "fa fa-fw fa-bar-chart"},
+					{Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide", Icon: "fa fa-fw fa-eyedropper"},
 				},
 			})
 		}

public/app/core/routes/routes.ts

@@ -48,12 +48,6 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     reloadOnSearch: false,
     pageClass: 'page-dashboard',
   })
-  .when('/configuration', {
-    templateUrl: 'public/app/features/admin/partials/configuration_home.html',
-    controller : 'ConfigurationHomeCtrl',
-    controllerAs: 'ctrl',
-    resolve: loadAdminBundle,
-  })
   .when('/datasources', {
     templateUrl: 'public/app/features/plugins/partials/ds_list.html',
     controller : 'DataSourcesCtrl',

public/app/features/admin/admin.ts

@@ -10,7 +10,7 @@ class AdminSettingsCtrl {
 
   /** @ngInject **/
   constructor($scope, backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings');
+    this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings', 1);
 
     backendSrv.get('/api/admin/settings').then(function(settings) {
       $scope.settings = settings;
@@ -24,7 +24,7 @@ class AdminHomeCtrl {
 
   /** @ngInject **/
   constructor(navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'admin');
+    this.navModel = navModelSrv.getNav('cfg', 'admin', 1);
   }
 }
 
@@ -34,7 +34,7 @@ export class AdminStatsCtrl {
 
   /** @ngInject */
   constructor(backendSrv: any, navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats');
+    this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats', 1);
 
     backendSrv.get('/api/admin/stats').then(stats => {
       this.stats = stats;
@@ -42,16 +42,6 @@ export class AdminStatsCtrl {
   }
 }
 
-export class ConfigurationHomeCtrl {
-  navModel: any;
-
-  /** @ngInject */
-  constructor(navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg');
-  }
-}
-
-coreModule.controller('ConfigurationHomeCtrl', ConfigurationHomeCtrl);
 coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl);
 coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
 coreModule.controller('AdminStatsCtrl', AdminStatsCtrl);

public/app/features/admin/admin_edit_org_ctrl.ts

@@ -5,7 +5,7 @@ export class AdminEditOrgCtrl {
   /** @ngInject */
   constructor($scope, $routeParams, backendSrv, $location, navModelSrv) {
     $scope.init = function() {
-      $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
+      $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
 
       if ($routeParams.id) {
         $scope.getOrg($routeParams.id);

public/app/features/admin/admin_edit_user_ctrl.ts

@@ -8,7 +8,7 @@ export class AdminEditUserCtrl {
     $scope.user = {};
     $scope.newOrg = { name: '', role: 'Editor' };
     $scope.permissions = {};
-    $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
+    $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users', 1);
 
     $scope.init = function() {
       if ($routeParams.id) {

public/app/features/admin/admin_list_orgs_ctrl.ts

@@ -5,7 +5,7 @@ export class AdminListOrgsCtrl {
   /** @ngInject */
   constructor($scope, backendSrv, navModelSrv) {
     $scope.init = function() {
-      $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
+      $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
       $scope.getOrgs();
     };
 

public/app/features/admin/admin_list_users_ctrl.ts

@@ -10,7 +10,7 @@ export default class AdminListUsersCtrl {
 
   /** @ngInject */
   constructor(private $scope, private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
+    this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users', 1);
     this.query = '';
     this.getUsers();
   }

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

@@ -1,35 +1,11 @@
-<navbar model="ctrl.navModel"></navbar>
+<page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
-	</div>
+<div class="page-container page-body">
 
-	<section class="card-section card-list-layout-grid">
-		<ol class="card-list" >
-			<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
-				<a class="card-item" ng-href="{{::navItem.url}}">
-					<div class="card-item-header">
-						<div class="card-item-type">
-						</div>
-					</div>
-					<div class="card-item-body">
-						<figure class="card-item-figure">
-							<i class="{{navItem.icon}}"></i>
-						</figure>
-						<div class="card-item-details">
-							<div class="card-item-name">
-								{{navItem.text}}
-							</div>
-							<div class="card-item-sub-name">
-								{{navItem.description}}
-							</div>
-						</div>
-					</div>
-				</a>
-			</li>
-		</ol>
-	</section>
+  <div class="grafana-info-box span8">
+    Grafana is a multi-tenant system where most can be configured per organization. These
+    admin pages are for server admins where you can manage orgs, & all users across all orgs.
+  </div>
 
 </div>
 

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

@@ -1,29 +0,0 @@
-<page-header model="ctrl.navModel" no-tabs="true"></page-header>
-
-<div class="page-container page-body">
-	<section class="card-section card-list-layout-grid">
-		<ol class="card-list">
-			<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
-				<a class="card-item" ng-href="{{::navItem.url}}">
-					<div class="card-item-header">
-						<div class="card-item-type">
-						</div>
-					</div>
-					<div class="card-item-body">
-						<figure class="card-item-figure">
-							<i class="{{navItem.icon}}"></i>
-						</figure>
-						<div class="card-item-details">
-							<div class="card-item-name">
-								{{navItem.text}}
-							</div>
-							<div class="card-item-sub-name">
-								{{navItem.description}}
-							</div>
-						</div>
-					</div>
-				</a>
-			</li>
-		</ol>
-	</section>
-</div>

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

@@ -1,9 +1,7 @@
-<navbar model="navModel"></navbar>
+<page-header model="navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<h1>Edit Organization</h1>
-	</div>
+<div class="page-container page-body">
+	<h2 class="page-sub-heading">Edit Organization</h2>
 
 	<form name="orgDetailsForm" class="gf-form-group">
 		<div class="gf-form">

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

@@ -1,8 +1,9 @@
-<navbar model="navModel"></navbar>
+<page-header model="navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<h1>Edit User</h1>
+<div class="page-container page-body">
+
+	<div class="page-sub-heading">
+		<h2>Edit User</h2>
 	</div>
 
 	<form name="userForm" class="gf-form-group">
@@ -54,7 +55,7 @@
 	<form name="addOrgForm" class="gf-form-group">
 		<div class="gf-form-inline">
 			<div class="gf-form">
-				<span class="gf-form-label width-12">Add organization</span>
+				<span class="gf-form-label">Add</span>
 				<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"	required class="gf-form-input max-width-20" placeholder="organization name">
 			</div>
 			<div class="gf-form">
@@ -67,12 +68,14 @@
 		</div>
 	</form>
 
-	<table class="grafana-options-table">
-		<tr>
-			<th>Name</th>
-			<th>Role</th>
-			<th></th>
-		</tr>
+	<table class="filter-table">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Role</th>
+				<th></th>
+			</tr>
+		</thead>
 		<tr ng-repeat="org in orgs">
 			<td>
 				{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>

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

@@ -1,7 +1,7 @@
-<navbar model="navModel"></navbar>
+<page-header model="navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
+<div class="page-container page-body">
+	<div class="page-sub-heading">
 		<h1>Add new user</h1>
 	</div>
 

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

@@ -1,8 +1,12 @@
-<navbar model="navModel"></navbar>
+<page-header model="navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<h1>Organizations</h1>
+<div class="page-container page-body">
+	<div class="page-action-bar">
+    <div class="page-action-bar__spacer"></div>
+    <a class="page-header__cta btn btn-success" href="org/new">
+      <i class="fa fa-plus"></i>
+      New Org
+    </a>
 	</div>
 
 	<table class="filter-table form-inline">

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

@@ -1,25 +1,22 @@
-<navbar model="ctrl.navModel"></navbar>
+<page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<h1>Server settings</h1>
-	</div>
+<div class="page-container page-body">
 
-		<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">
-			These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables).
-			To change these you currently need to restart grafana.
-		</div>
+	<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">
+		These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables).
+		To change these you currently need to restart grafana.
+	</div>
 
-		<table class="grafana-options-table">
-			<tr ng-repeat-start="(secName, secValue) in settings">
-				<td class="admin-settings-section">{{secName}}</td>
-				<td></td>
-			</tr>
-			<tr ng-repeat="(keyName, keyValue) in secValue" ng-repeat-end>
-				<td style="padding-left: 25px;">{{keyName}}</td>
-				<td>{{keyValue}}</td>
-			</tr>
-		</table>
+	<table class="filter-table">
+		<tr ng-repeat-start="(secName, secValue) in settings">
+			<td class="admin-settings-section">{{secName}}</td>
+			<td></td>
+		</tr>
+		<tr ng-repeat="(keyName, keyValue) in secValue" ng-repeat-end>
+			<td style="padding-left: 25px;">{{keyName}}</td>
+			<td>{{keyValue}}</td>
+		</tr>
+	</table>
 </div>
 
 

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

@@ -1,10 +1,6 @@
-<navbar model="ctrl.navModel"></navbar>
-
-<div class="page-container">
-	<div class="page-header">
-		<h1>Stats</h1>
-	</div>
+<page-header model="ctrl.navModel"></page-header>
 
+<div class="page-container page-body">
 	<table class="filter-table form-inline">
 		<thead>
 			<tr>

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

@@ -1,22 +1,18 @@
-<navbar model="ctrl.navModel"></navbar>
-
-<div class="page-container">
-  <div class="page-header">
-    <h1>Users</h1>
+<page-header model="ctrl.navModel"></page-header>
 
+<div class="page-container page-body">
+	<div class="page-action-bar">
+		<div class="gf-form">
+			<label class="gf-form-label">Search</label>
+			<input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
+		</div>
+		<div class="page-action-bar__spacer"></div>
     <a class="btn btn-success" href="admin/users/create">
       <i class="fa fa-plus"></i>
       Add new user
     </a>
   </div>
 
-  <div class="gf-form pull-right gf-form-group">
-		<label class="gf-form-label">Search</label>
-    <span style="position: relative;">
-      <input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
-    </span>
-  </div>
-
   <div class="admin-list-table">
     <table class="filter-table form-inline">
       <thead>

public/app/features/org/change_password_ctrl.ts

@@ -8,7 +8,7 @@ export class ChangePasswordCtrl {
     $scope.command = {};
     $scope.authProxyEnabled = config.authProxyEnabled;
     $scope.ldapEnabled = config.ldapEnabled;
-    $scope.navModel = navModelSrv.getNav('profile', 'change-password');
+    $scope.navModel = navModelSrv.getNav('profile', 'change-password', 0);
 
     $scope.changePassword = function() {
       if (!$scope.userForm.$valid) { return; }

public/app/features/org/new_org_ctrl.ts

@@ -5,7 +5,7 @@ export class NewOrgCtrl {
 
   /** @ngInject **/
   constructor($scope, $http, backendSrv, navModelSrv) {
-    $scope.navModel = navModelSrv.getOrgNav(0);
+    $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
     $scope.newOrg = {name: ''};
 
     $scope.createOrg = function() {

public/app/features/org/partials/change_password.html

@@ -1,9 +1,9 @@
-<navbar model="navModel"></navbar>
+<page-header model="navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="navModel"></page-h1>
-	</div>
+<div class="page-container page-body">
+	<h2 class="page-sub-heading">
+		Change your password
+	</h2>
 
 	<div ng-if="ldapEnabled || authProxyEnabled">
 		You cannot change password when ldap or auth proxy authentication is enabled.

public/app/features/org/partials/newOrg.html

@@ -1,9 +1,9 @@
-<navbar model="navModel"></navbar>
+<page-header model="navModel"></page-header>
 
-<div class="page-container" ng-form="playlistEditForm">
-	<div class="page-header">
-		<h1>New Organization</h1>
-	</div>
+<div class="page-container page-body" ng-form="playlistEditForm">
+	<h2 class="page-sub-heading">
+		New Organization
+	</h2>
 
 	<p class="playlist-description">Each organization contains their own dashboards, data sources and configuration, and cannot be shared between orgs. While users may belong to more than one, mutiple organization are most frequently used in multi-tenant deployments. </p>
 

public/app/features/org/partials/orgApiKeys.html

@@ -2,7 +2,7 @@
 
 <div class="page-container page-body">
 
-	<h3 class="section-heading">Add new</h3>
+	<h3 class="page-heading">Add new</h3>
 
 	<form name="addTokenForm" class="gf-form-group">
 		<div class="gf-form-inline">
@@ -20,7 +20,7 @@
 		</div>
 	</form>
 
-	<h3 class="section-heading">Existing Keys</h3>
+	<h3 class="page-heading">Existing Keys</h3>
 	<table class="filter-table">
 		<thead>
 			<tr>

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

@@ -1,34 +1,3 @@
-<!-- <div class="page&#45;header&#45;canvas"> -->
-<!--   <div class="page&#45;container" > -->
-<!--     <navbar model="navModel"></navbar> -->
-<!--  -->
-<!--     <div class="page&#45;header"> -->
-<!--       <page&#45;h1 model="navModel"></page&#45;h1> -->
-<!--  -->
-<!--       <ul class="gf&#45;tabs"> -->
-<!--         <li class="gf&#45;tabs&#45;item"> -->
-<!--           <a class="gf&#45;tabs&#45;link active" href="org"> -->
-<!--             <i class="fa fa&#45;fw fa&#45;sliders"></i> -->
-<!--             Preferences -->
-<!--           </a> -->
-<!--         </li> -->
-<!--         <li class="gf&#45;tabs&#45;item"> -->
-<!--           <a class="gf&#45;tabs&#45;link" href="org/users"> -->
-<!--             <i class="icon&#45;gf icon&#45;gf&#45;fw icon&#45;gf&#45;users"></i> -->
-<!--             Members -->
-<!--           </a> -->
-<!--         </li> -->
-<!--         <li class="gf&#45;tabs&#45;item"> -->
-<!--           <a class="gf&#45;tabs&#45;link" href="org/user&#45;groups"> -->
-<!--             <i class="gicon gicon&#45;user&#45;group"></i> -->
-<!--             Teams -->
-<!--           </a> -->
-<!--         </li> -->
-<!--       </ul> -->
-<!--     </div> -->
-<!--   </div> -->
-<!-- </div> -->
-
 <page-header model="navModel"></page-header>
 
 <div class="page-container page-body">

public/app/features/org/prefs_control.ts

@@ -49,7 +49,7 @@ export class PrefsControlCtrl {
 
 var template = `
 <form name="ctrl.prefsForm" class="section gf-form-group">
-  <h3 class="section-heading">Preferences</h3>
+  <h3 class="page-heading">Preferences</h3>
 
   <div class="gf-form">
     <span class="gf-form-label width-11">UI Theme</span>

public/app/features/styleguide/styleguide.html

@@ -1,34 +1,10 @@
-<navbar model="ctrl.navModel"></navbar>
-
-<div class="page-container">
-	<div class="page-header">
-    <page-h1 model="ctrl.navModel"></page-h1>
-
-		<a class="btn btn-success" ng-click="ctrl.switchTheme()">
-			<i class="fa fa-random"></i>
-			Switch theme
-		</a>
-
-		<div class="page-header-tabs">
-			<ul class="gf-tabs">
-				<li class="gf-tabs-item" ng-repeat="page in ctrl.pages">
-					<a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a>
-				</li>
-			</ul>
-		</div>
+<page-header model="ctrl.navModel"></page-header>
 
-	</div>
+<div class="page-container page-body">
 
-	<div class="tab-pane" ng-if="ctrl.page.colors">
-		<ul>
-			<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
-				<strong>${{color.name}}</strong>
-				<em>{{color.value}}</em>
-			</li>
-		</ul>
-	</div>
+	<h3 class="page-heading">Buttons</h3>
 
-	<div class="tab-pane" ng-if="ctrl.page.buttons">
+	<div class="tab-pane">
 		<div ng-repeat="variant in ctrl.buttonVariants" class="row">
 			<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
 				<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
@@ -38,7 +14,7 @@
 		</div>
 	</div>
 
-	<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
+	<div class="tab-pane style-guide-icon-list">
 		<div class="row">
 			<div ng-repeat="icon in ctrl.icons" class="col-md-2 col-sm-3 col-xs-4">
 				<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
@@ -46,13 +22,13 @@
 		</div>
 	</div>
 
-	<div class="tab-pane style-guide-plugin-authoring" ng-if="ctrl.page.plugins">
-		<p>From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.</p>
-		<p>More information about plugin development can be found at <a href="http://docs.grafana.org/plugins/developing/development/" target="_blank">docs.grafana.org</a></p>
-	</div>
+	<h3 class="page-heading">Forms</h3>
 
-	<div class="tab-pane" ng-if="ctrl.page.forms">
-		forms
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<label class="gf-form-label">Label</label>
+			<input type="text" class="gf-form-input" />
+		</div>
 	</div>
 
 </div>

public/app/features/styleguide/styleguide.ts

@@ -8,7 +8,7 @@ class StyleGuideCtrl {
   theme: string;
   buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
   buttonSizes = ['btn-small', '', 'btn-large'];
-  buttonVariants = ['-', '-outline-'];
+  buttonVariants = ['-'];
   icons: any = [];
   page: any;
   pages = ['colors', 'buttons', 'icons', 'plugins'];
@@ -16,7 +16,7 @@ class StyleGuideCtrl {
 
   /** @ngInject **/
   constructor(private $http, private $routeParams, private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide');
+    this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide', 1);
     this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
     this.page = {};
 

public/sass/base/_icons.scss

@@ -51,5 +51,6 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg');
 }
 
-
-
+.gicon-org {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg');
+}

public/sass/components/_page_header.scss

@@ -47,7 +47,7 @@
   position: relative;
 
   &.fa {
-    top: 8px;
+    top: 10px;
   }
 
   &.gicon {