ux: progress on new page header

pkg/api/index.go

@@ -215,10 +215,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 					Description: "Add and configure data sources",
 					Id:          "datasources",
 					Url:         setting.AppSubUrl + "/datasources",
-					Children: []*dtos.NavLink{
-						{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "gicon gicon-datasources"},
-						{Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"},
-					},
 				},
 				{
 					Text:        "Members",

public/app/features/org/org_users_ctrl.ts

@@ -23,7 +23,7 @@ export class OrgUsersCtrl {
       role: 'Viewer',
     };
 
-    this.navModel = navModelSrv.getNav('cfg', 'users');
+    this.navModel = navModelSrv.getNav('cfg', 'users', 0);
 
     this.get();
     this.editor = { index: 0 };
@@ -44,8 +44,7 @@ export class OrgUsersCtrl {
     if (this.externalUserMngLinkName) {
       return this.externalUserMngLinkName;
     }
-
-    return "Add Members";
+    return "Add Member";
   }
 
   get() {

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

@@ -1,34 +1,52 @@
-<navbar model="ctrl.navModel"></navbar>
+<!-- <navbar model="ctrl.navModel"></navbar> -->
+<!--  -->
+<!-- <div class="page&#45;container"> -->
+<!-- 	<div class="page&#45;header"> -->
+<!-- 		<page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
+<!--  -->
+<!-- 		<button class="btn btn&#45;success" ng&#45;click="ctrl.openAddUsersView()" ng&#45;hide="ctrl.externalUserMngLinkUrl"> -->
+<!-- 			<span>{{ctrl.addUsersBtnName}}</span> -->
+<!-- 		</button> -->
+<!--  -->
+<!-- 		<div class="page&#45;header&#45;tabs"> -->
+<!--  -->
+<!-- 			<a class="btn btn&#45;inverse" ng&#45;href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng&#45;if="ctrl.externalUserMngLinkUrl"> -->
+<!-- 				<i class="fa fa&#45;external&#45;link&#45;square"></i> -->
+<!-- 				{{ctrl.addUsersBtnName}} -->
+<!--       </a> -->
+<!--  -->
+<!-- 			<ul class="gf&#45;tabs"> -->
+<!-- 				<li class="gf&#45;tabs&#45;item"> -->
+<!-- 					<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.editor.index = 0" ng&#45;class="{active: ctrl.editor.index === 0}"> -->
+<!-- 						Users ({{ctrl.users.length}}) -->
+<!-- 					</a> -->
+<!-- 				</li> -->
+<!-- 				<li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.pendingInvites.length"> -->
+<!-- 					<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.editor.index = 1" ng&#45;class="{active: ctrl.editor.index === 1}"> -->
+<!-- 						Pending Invites ({{ctrl.pendingInvites.length}}) -->
+<!-- 					</a> -->
+<!-- 				</li> -->
+<!-- 			</ul> -->
+<!-- 		</div> -->
+<!-- 	</div> -->
 
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
+<page-header model="ctrl.navModel"></page-header>
 
+<div class="page-container page-body">
+  <div class="page-action-bar">
+    <div class="page-action-bar__spacer"></div>
+    <button class="btn btn-inverse" ng-show="ctrl.pendingInvites.length" ng-click="ctrl.editor.index = 1">
+      Pending Invites ({{ctrl.pendingInvites.length}})
+    </button>
 		<button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl">
+      <i class="fa fa-plus"></i>
 			<span>{{ctrl.addUsersBtnName}}</span>
 		</button>
-
-		<div class="page-header-tabs">
-
-			<a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
-				<i class="fa fa-external-link-square"></i>
-				{{ctrl.addUsersBtnName}}
-      </a>
-
-			<ul class="gf-tabs">
-				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
-						Users ({{ctrl.users.length}})
-					</a>
-				</li>
-				<li class="gf-tabs-item" ng-show="ctrl.pendingInvites.length">
-					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
-						Pending Invites ({{ctrl.pendingInvites.length}})
-					</a>
-				</li>
-			</ul>
-		</div>
-	</div>
+    <a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
+      <i class="fa fa-external-link-square"></i>
+      {{ctrl.addUsersBtnName}}
+    </a>
+  </div>
 
   <div class="grafana-info-box" ng-if="ctrl.externalUserMngInfo">
     <span ng-bind-html="ctrl.externalUserMngInfo"></span>
@@ -41,26 +59,26 @@
           <th></th>
           <th>Login</th>
           <th>Email</th>
-					<th>
-						Seen
-						<tip>Time since user was seen using Grafana</tip>
-					</th>
+          <th>
+            Seen
+            <tip>Time since user was seen using Grafana</tip>
+          </th>
           <th>Role</th>
           <th style="width: 34px;"></th>
         </tr>
       </thead>
       <tr ng-repeat="user in ctrl.users">
         <td class="width-4 text-center">
-					<img class="filter-table__avatar" ng-src="{{user.avatarUrl}}"></img>
-				</td>
+          <img class="filter-table__avatar" ng-src="{{user.avatarUrl}}"></img>
+        </td>
         <td>{{user.login}}</td>
         <td><span class="ellipsis">{{user.email}}</span></td>
-				<td>{{user.lastSeenAtAge}}</td>
+        <td>{{user.lastSeenAtAge}}</td>
         <td>
-					<div class="gf-form-select-wrapper width-9">
-						<select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
-						</select>
-					</div>
+          <div class="gf-form-select-wrapper width-9">
+            <select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
+            </select>
+          </div>
         </td>
         <td>
           <a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">

public/app/features/plugins/ds_edit_ctrl.ts

@@ -41,7 +41,7 @@ export class DataSourceEditCtrl {
     navModelSrv,
   ) {
 
-    this.navModel = navModelSrv.getNav('cfg', 'datasources');
+    this.navModel = navModelSrv.getNav('cfg', 'datasources', 0);
     this.datasources = [];
     this.tabIndex = 0;
 
@@ -58,9 +58,7 @@ export class DataSourceEditCtrl {
     this.isNew = true;
     this.current = _.cloneDeep(defaults);
 
-    // add to nav & breadcrumbs
-    this.navModel.node = {text: 'New data source', icon: 'icon-gf icon-gf-fw icon-gf-datasources'};
-    this.navModel.breadcrumbs.push(this.navModel.node);
+    this.navModel.breadcrumbs.push({text: 'New'});
 
     // We are coming from getting started
     if (this.$location.search().gettingstarted) {
@@ -87,7 +85,7 @@ export class DataSourceEditCtrl {
     this.backendSrv.get('/api/datasources/' + id).then(ds => {
       this.isNew = false;
       this.current = ds;
-      this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources'};
+      this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources', id: 'ds-new'};
       this.navModel.breadcrumbs.push(this.navModel.node);
 
       if (datasourceCreated) {

public/app/features/plugins/partials/ds_edit.html

@@ -1,34 +1,40 @@
-<div class="page-header-canvas">
-	<div class="page-container">
-		<navbar model="ctrl.navModel"></navbar>
+<!-- <div class="page&#45;header&#45;canvas"> -->
+<!-- 	<div class="page&#45;container"> -->
+<!-- 		<navbar model="ctrl.navModel"></navbar> -->
+<!--  -->
+<!-- 		<div class="page&#45;header"> -->
+<!--       <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
+<!--  -->
+<!-- 			<div class="page&#45;header&#45;tabs" ng&#45;show="ctrl.hasDashboards"> -->
+<!-- 				<ul class="gf&#45;tabs"> -->
+<!-- 					<li class="gf&#45;tabs&#45;item"> -->
+<!-- 						<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = 0" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
+<!-- 							<i class="fa fa&#45;sliders"></i> -->
+<!-- 							Config -->
+<!-- 						</a> -->
+<!-- 					</li> -->
+<!-- 					<li class="gf&#45;tabs&#45;item"> -->
+<!-- 						<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = 1" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
+<!-- 							<i class="fa fa&#45;th&#45;large"></i> -->
+<!-- 							Dashboards -->
+<!-- 						</a> -->
+<!-- 					</li> -->
+<!-- 				</ul> -->
+<!-- 			</div> -->
+<!-- 		</div> -->
+<!-- 	</div> -->
+<!-- </div> -->
+<!--  -->
 
-		<div class="page-header">
-      <page-h1 model="ctrl.navModel"></page-h1>
-
-			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
-				<ul class="gf-tabs">
-					<li class="gf-tabs-item">
-						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
-							<i class="fa fa-sliders"></i>
-							Config
-						</a>
-					</li>
-					<li class="gf-tabs-item">
-						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
-							<i class="fa fa-th-large"></i>
-							Dashboards
-						</a>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>
+<page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
 
-  <div class="page-action-bar">
-    <div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">
+  <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Data Source</h3>
+  <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Data Source</h3>
+
+  <div ng-if="ctrl.current.readOnly"  class="page-action-bar">
+    <div class="grafana-info-box span8">
       Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
     </div>
   </div>

public/app/features/plugins/partials/ds_http_settings.html

@@ -1,7 +1,7 @@
 
 
 <div class="gf-form-group">
-  <h3 class="page-heading">HTTP settings</h3>
+  <h3 class="section-heading">HTTP</h3>
   <div class="gf-form-group">
     <div class="gf-form-inline">
       <div class="gf-form max-width-30">
@@ -38,7 +38,7 @@
     </div>
   </div>
 
-  <h3 class="page-heading">HTTP Auth</h3>
+  <h3 class="section-heading">Auth</h3>
     <div class="gf-form-group">
       <div class="gf-form-inline">
         <gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch>

public/sass/layout/_page.scss

@@ -52,6 +52,10 @@
   margin-bottom: $spacer * 2;
   display: flex;
   align-items: flex-start;
+
+  > a, > button {
+    margin-left: $spacer;
+  }
 }
 
 .page-action-bar__spacer {
@@ -70,6 +74,10 @@
   }
 }
 
+.page-sub-heading {
+  margin-bottom: $spacer;
+}
+
 .page-sidebar {
   color: $text-color-weak;
   h4 {