ux: updating header design for pages

pkg/api/index.go

@@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
 		alertChildNavs := []*dtos.NavLink{
-			{Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
+			{Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
-			{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
+			{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"},
 		}
 
 		data.NavTree = append(data.NavTree, &dtos.NavLink{

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

@@ -40,9 +40,9 @@ export function pageH1() {
     restrict: 'E',
     template: `
     <h1 class="page-header__title">
-      <i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i>
+      <i class="page-header__icon {{::model.header.icon}}" ng-if="::model.header.icon"></i>
-      <img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
+      <img class="page-header__img" ng-src="{{::model.header.img}}" ng-if="::model.header.img"></i>
-      {{model.node.text}}
+      {{model.header.text}}
     </h1>
     `,
     scope: {

public/app/core/nav_model_srv.ts

@@ -5,15 +5,24 @@ import config from 'app/core/config';
 import _ from 'lodash';
 
 export interface NavModelItem {
-  title: string;
+  text: string;
   url: string;
   icon?: string;
-  iconUrl?: string;
+  img?: string;
 }
 
-export interface NavModel {
+export class NavModel {
-  section: NavModelItem;
+  breadcrumbs: NavModelItem[];
-  menu: NavModelItem[];
+  header: NavModelItem;
+  node: NavModelItem;
+
+  constructor() {
+    this.breadcrumbs = [];
+  }
+
+  setPageHeaderIndex(index: number) {
+    this.header = this.breadcrumbs[index];
+  }
 }
 
 export class NavModelSrv {
@@ -31,12 +40,13 @@ export class NavModelSrv {
 
   getNav(...args) {
     var children = this.navItems;
-    var nav = {breadcrumbs: [], node: null};
+    var nav = new NavModel();
 
     for (let id of args) {
       let node = _.find(children, {id: id});
       nav.breadcrumbs.push(node);
       nav.node = node;
+      nav.header = node;
       children = node.children;
     }
 

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

@@ -1,9 +1,14 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
-<div class="page-container">
+	<div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
+
     <div class="page-header">
       <page-h1 model="ctrl.navModel"></page-h1>
     </div>
+  </div>
+</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">

public/app/features/alerting/alert_list_ctrl.ts

@@ -23,7 +23,8 @@ export class AlertListCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, private $location, navModelSrv) {
-    this.navModel = navModelSrv.getNav('alerting');
+    this.navModel = navModelSrv.getNav('alerting', 'alert-list');
+    this.navModel.setPageHeaderIndex(0);
 
     var params = $location.search();
     this.filters.state = params.state || null;

public/app/features/alerting/notifications_list_ctrl.ts

@@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl {
   constructor(private backendSrv, navModelSrv) {
     this.loadNotifications();
     this.navModel = navModelSrv.getNav('alerting', 'channels');
+    this.navModel.setPageHeaderIndex(0);
   }
 
   loadNotifications() {

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

@@ -1,21 +1,32 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container" >
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container" >
     <div class="page-header">
-    <page-h1 model="ctrl.navModel"></page-h1>
+      <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
 
-    <a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
+      <ul class="gf-tabs">
-			<i class="fa fa-info-circle"></i>
+        <li class="gf-tabs-item">
-			How to add an alert
+          <a class="gf-tabs-link active" href="alerting">
+            <i class="fa fa-fw fa-list-ul"></i>
+            Alert Rules
           </a>
-    <a class="btn btn-inverse" href="alerting/notifications" >
+        </li>
-			<i class="fa fa-bell"></i>
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link" href="alerting/notifications">
+            <i class="gicon gicon-alert-notification-channel"></i>
             Notification channels
           </a>
+        </li>
+      </ul>
+
     </div>
+  </div>
+</div>
 
-  <div class="gf-form-group">
+<div class="page-container page-body">
-    <div class="gf-form-inline">
+
+  <div class="page-action-bar">
     <div class="gf-form">
       <label class="gf-form-label">Filter by state</label>
       <div class="gf-form-select-wrapper width-13">
@@ -23,7 +34,19 @@
         </select>
       </div>
     </div>
+
+    <div class="page-action-bar__spacer">
     </div>
+
+    <a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
+      <i class="fa fa-info-circle"></i>
+      How to add an alert
+    </a>
+
+    <!-- <a class="btn btn&#45;inverse" href="alerting/notifications" > -->
+    <!--   <i class="fa fa&#45;bell"></i> -->
+    <!--   Notification channels -->
+    <!-- </a> -->
   </div>
 
   <section class="card-section card-list-layout-list">

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

@@ -1,10 +1,35 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container" >
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container" >
     <div class="page-header">
-    <page-h1 model="ctrl.navModel"></page-h1>
+      <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
 
-    <a href="alerting/notification/new" class="btn btn-success pull-right">
+      <ul class="gf-tabs">
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link" href="alerting">
+            <i class="fa fa-fw fa-list-ul"></i>
+            Alert Rules
+          </a>
+        </li>
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link active" href="alerting/notifications">
+            <i class="gicon gicon-alert-notification-channel"></i>
+            Notification channels
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="page-container page-body">
+	<div class="page-action-bar">
+    <div class="page-action-bar__spacer">
+    </div>
+
+    <a href="alerting/notification/new" class="btn btn-success">
+      <i class="fa fa-plus"></i>
       New Channel
     </a>
   </div>

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

@@ -1,10 +1,14 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container">
     <div class="page-header">
       <page-h1 model="ctrl.navModel"></page-h1>
     </div>
+  </div>
+</div>
 
+<div class="page-container page-body">
 	<form name="ctrl.userForm" class="gf-form-group">
 		<h3 class="page-heading">Information</h3>
 

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

@@ -5,8 +5,6 @@
 		<div class="page-header">
       <page-h1 model="ctrl.navModel"></page-h1>
 
-			<div ng-if="ctrl.current.readOnly" 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 class="page-header-tabs" ng-show="ctrl.hasDashboards">
 				<ul class="gf-tabs">
 					<li class="gf-tabs-item">
@@ -28,6 +26,13 @@
 </div>
 
 <div class="page-container page-body">
+
+  <div class="page-action-bar">
+    <div ng-if="ctrl.current.readOnly" 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>
+
 	<div ng-if="ctrl.tabIndex === 0">
 		<form name="ctrl.editForm" ng-if="ctrl.current">
 			<div class="gf-form-group">

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

@@ -1,16 +1,25 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
-<div class="page-container">
+	<div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
+
     <div class="page-header">
 		  <page-h1 model="ctrl.navModel"></page-h1>
 
+    </div>
+  </div>
+</div>
+
+<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="datasources/new">
+      <i class="fa fa-plus"></i>
       Add data source
     </a>
 	</div>
 
 	<section class="card-section" layout-mode>
 		<layout-selector></layout-selector>
-
 		<ol class="card-list">
 			<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
 				<a class="card-item" href="datasources/edit/{{ds.id}}/">

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

@@ -1,6 +1,7 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container" ng-init="ctrl.init()">
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container" ng-init="ctrl.init()">
     <div class="page-header">
       <div class="plugin-header">
         <span class="plugin-header-logo">
@@ -25,10 +26,11 @@
           </a>
         </li>
       </ul>
-
     </div>
+  </div>
+</div>
 
-  <div class="page-body page-body--with-sidebar">
+<div class="page-container page-body page-body--with-sidebar">
   <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
     <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
     </div>
@@ -89,5 +91,4 @@
       </ul>
     </section>
   </aside>
-  </div>
 </div>

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

@@ -1,37 +1,42 @@
-<navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container">
+<div class="page-header-canvas">
+  <div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
+
     <div class="page-header">
-		<h1>
+		  <page-h1 model="ctrl.navModel"></page-h1>
-			<i class="icon-gf icon-gf-apps"></i>
-			Plugins <span class="muted small">(currently installed)</span>
-		</h1>
 
       <div class="page-header-tabs">
         <ul class="gf-tabs">
           <li class="gf-tabs-item">
             <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
+              <i class="icon-gf icon-gf-panel"></i>
               Panels
             </a>
           </li>
           <li class="gf-tabs-item">
             <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
+              <i class="gicon gicon-datasources"></i>
               Data sources
             </a>
           </li>
           <li class="gf-tabs-item">
             <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
+              <i class="icon-gf icon-gf-apps"></i>
               Apps
             </a>
           </li>
         </ul>
 
-			<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
+        <a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
           Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
         </a>
       </div>
     </div>
+  </div>
+</div>
 
+<div class="page-container page-body">
   <section class="card-section" layout-mode>
     <layout-selector></layout-selector>
 

public/sass/_grafana.scss

@@ -85,6 +85,7 @@
 @import "components/code_editor";
 @import "components/dashboard_grid";
 @import "components/dashboard_list";
+@import "components/page_header";
 
 
 // PAGES

public/sass/_variables.scss

@@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2;
 $panel-padding: 0px 10px 5px 10px;
 
 // tabs
-$tabs-padding: 8px 15px 11px;
+$tabs-padding: 10px 15px 10px;
 

public/sass/base/_icons.scss

@@ -43,5 +43,9 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg');
 }
 
+.gicon-alert-notification-channel {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg');
+}
+
 
 

public/sass/components/_footer.scss

@@ -5,7 +5,7 @@
 .footer {
   color: $footer-link-color;
   padding: 5rem 0 1rem 0;
-  font-size: $font-size-xs;
+  font-size: $font-size-sm;
   width: 98%;  /* was causing horiz scrollbars - need to examine */
 
   a {

public/sass/components/_page_header.scss

@@ -0,0 +1,61 @@
+
+.page-header-canvas {
+  background: linear-gradient(90deg, #292a2d, black);
+  box-shadow: inset 0px -4px 14px #2d2d2d;
+  border-bottom: 1px solid $dark-4;
+}
+
+.page-header {
+  padding: 2rem 0 0 0;
+
+  .btn {
+    float: right;
+    margin-left: 1rem;
+
+    // better align icons
+    .fa {
+      position: relative;
+      top: 1px;
+    }
+  }
+}
+
+.page-header__title {
+  font-size: $font-size-h2;
+  flex-grow: 1;
+  margin-bottom: 2.5rem;
+  line-height: 50px;
+}
+
+.page-header__img {
+  border-radius: 50%;
+  margin-right: 0.5rem;
+  position: relative;
+  top: -3px;
+  width: 50px;
+  height: 50px;
+}
+
+.page-header__icon {
+  font-size: 150%;
+  margin-right: 0.5rem;
+  width: 50px;
+  height: 50px;
+  position: relative;
+
+  &.fa {
+    top: 3px;
+  }
+
+  &.icon-gf {
+    top: 3px;
+  }
+}
+
+.page-heading {
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: $spacer * 0.7;
+}
+
+

public/sass/components/_tabs.scss

@@ -1,6 +1,8 @@
 .gf-tabs {
   @include clearfix();
   float: left;
+  position: relative;
+  top: 1px;
 }
 
 .gf-tabs-item {
@@ -18,7 +20,7 @@
   border-radius: 3px 3px 0 0;
 
   i {
-    padding-right: 5px;
+    margin-right: 5px;
   }
 
   &:hover,
@@ -32,8 +34,6 @@
     border-color: $orange $dark-4 transparent;
     background: $page-bg;
     color: $link-color;
-    position: relative;
-    top: 1px;
   }
 }
 

public/sass/layout/_page.scss

@@ -42,6 +42,17 @@
   }
 }
 
+.page-action-bar {
+  margin-bottom: $spacer * 2;
+  display: flex;
+  align-items: flex-start;
+}
+
+.page-action-bar__spacer {
+  width: $spacer * 2;
+  flex-grow: 1;
+}
+
 .page-content-with-sidebar {
   width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
 }
@@ -53,68 +64,6 @@
   }
 }
 
-.page-header-canvas {
-  background: linear-gradient(90deg, #292a2d, black);
-  box-shadow: inset 0px -4px 14px #2d2d2d;
-  bottom-border: 1px solid $dark-4;
-}
-
-.page-header {
-  padding: 2rem 0 0 0;
-
-  .btn {
-    float: right;
-    margin-left: 1rem;
-
-    // better align icons
-    .fa {
-      position: relative;
-      top: 1px;
-    }
-  }
-}
-
-.page-header__title {
-  font-size: $font-size-h2;
-  flex-grow: 1;
-  display: inline-block;
-  margin-bottom: 2.5rem;
-}
-
-.page-header__img {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin-right: 1rem;
-  position: relative;
-  top: -3px;
-}
-
-.page-header__icon {
-  font-size: 150%;
-  margin-right: 1rem;
-}
-
-.page-heading {
-  font-size: 1.25rem;
-  margin-top: 0;
-  margin-bottom: $spacer * 0.7;
-}
-
-.admin-page {
-  max-width: 800px;
-  margin-left: 10px;
-  h2 {
-    margin-left: 15px;
-    margin-bottom: 0px;
-    font-size: $font-size-lg;
-    color: $text-color;
-    i {
-      padding-right: 6px;
-    }
-  }
-}
-
 .page-sidebar {
   color: $text-color-weak;
   h4 {
@@ -208,12 +157,11 @@
     // 5px - for rounded arrows and
     // 50px - to prevent hover glitches on the border created using shadows*/
     border-radius: 0 5px 0 50px;
-}
+  }
 
-// we dont need an arrow after the last link
+  // we dont need an arrow after the last link
-&:last-child:after {
+  &:last-child:after {
     content: none;
+  }
 }
-}
-