ux: new page-header design, most pages beside admin done

pkg/api/dtos/index.go

@@ -31,5 +31,6 @@ type NavLink struct {
 	Target       string     `json:"target,omitempty"`
 	Divider      bool       `json:"divider,omitempty"`
 	HideFromMenu bool       `json:"hideFromMenu,omitempty"`
+	HideFromTabs bool       `json:"hideFromTabs,omitempty"`
 	Children     []*NavLink `json:"children,omitempty"`
 }

pkg/api/index.go

@@ -101,17 +101,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 	}
 
 	dashboardChildNavs := []*dtos.NavLink{
-		{Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"},
+		{Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home", HideFromTabs: true},
+		{Divider: true},
+		{Text: "Manage", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-sitemap"},
 		{Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"},
 		{Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"},
-		{Text: "Dashboard List", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"},
 	}
 
 	data.NavTree = append(data.NavTree, &dtos.NavLink{
 		Text:     "Dashboards",
 		Id:       "dashboards",
+		SubTitle: "Manage dashboards & folders",
 		Icon:     "gicon gicon-dashboard",
-		Url:      setting.AppSubUrl + "/",
+		Url:      setting.AppSubUrl + "/dashboards",
 		Children: dashboardChildNavs,
 	})
 

public/app/core/components/PageHeader.tsx

@@ -28,6 +28,10 @@ export interface IProps {
 // }
 
 function TabItem(tab: NavModelItem) {
+  if (tab.hideFromTabs || tab.divider) {
+    return (null);
+  }
+
   let tabClasses = classNames({
     'gf-tabs-link': true,
     active: tab.active,

public/app/core/nav_model_srv.ts

@@ -9,6 +9,8 @@ export interface NavModelItem {
   img?: string;
   id: string;
   active?: boolean;
+  hideFromTabs?: boolean;
+  divider?: boolean;
   children: NavModelItem[];
 }
 

public/app/features/alerting/notification_edit_ctrl.ts

@@ -9,7 +9,7 @@ export class AlertNotificationEditCtrl {
   testSeverity = "critical";
   notifiers: any;
   notifierTemplateId: string;
-
+  isNew: boolean;
   model: any;
   defaults: any = {
     type: 'email',
@@ -23,7 +23,8 @@ export class AlertNotificationEditCtrl {
 
   /** @ngInject */
   constructor(private $routeParams, private backendSrv, private $location, private $templateCache, navModelSrv) {
-    this.navModel = navModelSrv.getNav('alerting', 'channels');
+    this.navModel = navModelSrv.getNav('alerting', 'channels', 0);
+    this.isNew = !this.$routeParams.id;
 
     this.backendSrv.get(`/api/alert-notifiers`).then(notifiers => {
       this.notifiers = notifiers;

public/app/features/alerting/partials/notification_edit.html

-<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">
+
+  <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Notification Channel</h3>
+  <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Notification Channel</h3>
 
   <form name="ctrl.theForm" ng-if="ctrl.notifiers">
     <div class="gf-form-group">

public/app/features/dashboard/dashboard_list_ctrl.ts

@@ -17,7 +17,7 @@ export class DashboardListCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) {
-    this.navModel = navModelSrv.getNav('dashboards', 'dashboards');
+    this.navModel = navModelSrv.getNav('dashboards', 'dashboards', 0);
     this.query = {query: '', mode: 'tree', tag: [], starred: false};
     this.selectedStarredFilter = this.starredFilterOptions[0];
 

public/app/features/dashboard/partials/dashboardList.html

-<navbar model="ctrl.navModel"></navbar>
-<div class="page-container" style="height: 95%">
-  <div class="page-header">
-    <h1>Dashboards</h1>
+<page-header model="ctrl.navModel"></page-header>
 
+<div class="page-container page-body">
+  <div class="page-action-bar">
+    <div class="gf-form width-15">
+      <label class="gf-form-label">Search</label>
+      <input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
+    </div>
+    <div class="page-action-bar__spacer"></div>
     <a class="btn btn-inverse" href="/dashboard/new">
       <i class="gicon gicon-dashboard-new"></i>
       Dashboard
@@ -12,14 +16,6 @@
       Folder
     </a>
   </div>
-  <div class="gf-form-group">
-    <div class="gf-form width-15">
-      <span style="position: relative;">
-        <input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true"
-          ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
-      </span>
-    </div>
-  </div>
 
   <div class="gf-form" ng-if="ctrl.query.tag.length">
     Filters:

public/app/features/org/org_api_keys_ctrl.ts

@@ -4,7 +4,7 @@ export class OrgApiKeysCtrl {
 
   /** @ngInject **/
   constructor ($scope, $http, backendSrv, navModelSrv) {
-    $scope.navModel = navModelSrv.getNav('cfg', 'apikeys');
+    $scope.navModel = navModelSrv.getNav('cfg', 'apikeys', 0);
 
     $scope.roleTypes = ['Viewer', 'Editor', 'Admin'];
     $scope.token = { role: 'Viewer' };

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

-<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">
+
+	<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">
 			<div class="gf-form max-width-21">
@@ -22,7 +20,7 @@
 		</div>
 	</form>
 
-	<h3 class="page-heading">Existing Keys</h3>
+	<h3 class="section-heading">Existing Keys</h3>
 	<table class="filter-table">
 		<thead>
 			<tr>

public/app/features/playlist/partials/playlist.html

-<navbar model="ctrl.navModel"></navbar>
+<page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container" ng-form="playlistEditForm">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
-	</div>
+<div class="page-container page-body" ng-form="playlistEditForm">
+
+  <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Playlist</h3>
+  <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Playlist</h3>
 
 	<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
 
@@ -103,7 +103,7 @@
 	<div class="clearfix"></div>
 
 	<div class="gf-form-button-row">
-		<a class="btn btn-success " ng-show="ctrl.isNew()"
+		<a class="btn btn-success " ng-show="ctrl.isNew"
 			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
 			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a>
 		<a class="btn btn-success" ng-show="!ctrl.isNew()"

public/app/features/playlist/partials/playlists.html

-<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>
-    <a class="btn btn-primary pull-right" href="playlists/create">
+<div class="page-container page-body">
+  <div class="page-action-bar">
+    <div class="page-action-bar__spacer"></div>
+    <a class="btn btn-success pull-right" href="playlists/create">
       <i class="fa fa-plus"></i>
       New Playlist
     </a>
   </div>
 
-  <table class="filter-table" style="margin-top: 20px">
+  <table class="filter-table">
     <thead>
       <th><strong>Name</strong></th>
       <th><strong>Start url</strong></th>

public/app/features/playlist/playlist_edit_ctrl.ts

-///<reference path="../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
 
@@ -11,10 +9,12 @@ export class PlaylistEditCtrl {
   playlist: any = {
     interval: '5m',
   };
+
   playlistItems: any = [];
   dashboardresult: any = [];
   tagresult: any = [];
   navModel: any;
+  isNew: boolean;
 
   /** @ngInject */
   constructor(
@@ -24,7 +24,9 @@ export class PlaylistEditCtrl {
     $route,
     navModelSrv
   ) {
-    this.navModel = navModelSrv.getNav('dashboards', 'playlists');
+
+    this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
+    this.isNew = $route.current.params.id;
 
     if ($route.current.params.id) {
       var playlistId = $route.current.params.id;
@@ -104,10 +106,6 @@ export class PlaylistEditCtrl {
       });
   }
 
-  isNew() {
-    return !this.playlist.id;
-  }
-
   isPlaylistEmpty() {
     return !this.playlistItems.length;
   }

public/app/features/playlist/playlists_ctrl.ts

@@ -9,7 +9,7 @@ export class PlaylistsCtrl {
 
   /** @ngInject */
   constructor(private $scope, private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('dashboards', 'playlists');
+    this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
 
     backendSrv.get('/api/playlists').then(result => {
       this.playlists = result;

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

-<!-- <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> -->
-<!--  -->
-
 <page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">

public/app/features/snapshot/partials/snapshots.html

-<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>
-
-   <table class="filter-table" style="margin-top: 20px">
+<div class="page-container page-body">
+   <table class="filter-table">
     <thead>
       <th><strong>Name</strong></th>
       <th><strong>Snapshot url</strong></th>

public/app/features/snapshot/snapshot_ctrl.ts

@@ -9,7 +9,7 @@ export class SnapshotsCtrl {
 
   /** @ngInject */
   constructor(private $rootScope, private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('dashboards', 'snapshots');
+    this.navModel = navModelSrv.getNav('dashboards', 'snapshots', 0);
     this.backendSrv.get('/api/dashboard/snapshots').then(result => {
       this.snapshots = result;
     });

public/sass/components/_page_header.scss

@@ -51,7 +51,7 @@
   }
 
   &.gicon {
-    top: 7px;
+    top: 9px;
   }
 
   &.icon-gf {