ux: more nav work

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

@@ -41,4 +41,21 @@ export function navbarDirective() {
   };
 }
 
+export function pageH1() {
+  return {
+    restrict: 'E',
+    template: `
+    <h1>
+    <i class="{{model.node.icon}}"></i>
+    {{model.node.text}}
+    </h1>
+    `,
+    scope: {
+      model: "=",
+    }
+  };
+}
+
+
+coreModule.directive('pageH1', pageH1);
 coreModule.directive('navbar', navbarDirective);

public/app/features/alerting/notification_edit_ctrl.ts

@@ -36,12 +36,14 @@ export class AlertNotificationEditCtrl {
       }
 
       if (!this.$routeParams.id) {
-        this.navModel.breadcrumbs.push({text: 'New'});
+        this.navModel.breadcrumbs.push({text: 'New channel'});
+        this.navModel.node = {text: 'New channel'};
         return _.defaults(this.model, this.defaults);
       }
 
       return this.backendSrv.get(`/api/alert-notifications/${this.$routeParams.id}`).then(result => {
         this.navModel.breadcrumbs.push({text: result.name});
+        this.navModel.node = {text: result.name};
         return result;
       });
     }).then(model => {

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

@@ -2,10 +2,8 @@
 
 <div class="page-container" >
 	<div class="page-header">
-    <h1>
-			<i class="{{ctrl.navModel.node.icon}}"></i>
-			{{ctrl.navModel.node.text}}
-		</h1>
+    <page-h1 model="ctrl.navModel"></page-h1>
+
     <a class="btn btn-inverse" ng-click="ctrl.openHowTo()">
 			<i class="fa fa-info-circle"></i>
 			How to add an alert

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

@@ -2,8 +2,7 @@
 
 <div class="page-container">
   <div class="page-header">
-    <h1 ng-show="ctrl.model.id">Edit Channel</h1>
-    <h1 ng-show="!ctrl.model.id">New Channel</h1>
+    <page-h1 model="ctrl.navModel"></page-h1>
   </div>
 
   <form name="ctrl.theForm" ng-if="ctrl.notifiers">

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

@@ -2,10 +2,7 @@
 
 <div class="page-container" >
 	<div class="page-header">
-		<h1>
-			<i class="{{ctrl.navModel.node.icon}}"></i>
-			{{ctrl.navModel.node.text}}
-		</h1>
+    <page-h1 model="ctrl.navModel"></page-h1>
 
     <a href="alerting/notification/new" class="btn btn-success pull-right">
       <i class="fa fa-plus"></i>

public/app/features/org/orgDetailsCtrl.js

@@ -10,7 +10,7 @@ function (angular) {
 
     $scope.init = function() {
       $scope.getOrgInfo();
-      $scope.navModel = navModelSrv.getOrgNav(0);
+      $scope.navModel = navModelSrv.getNav('cfg', 'org');
     };
 
     $scope.getOrgInfo = function() {

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

@@ -2,10 +2,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			<i class="{{navModel.node.icon}}"></i>
-			{{navModel.node.text}}
-		</h1>
+		<page-h1 model="navModel"></page-h1>
 	</div>
 
 	<div ng-if="ldapEnabled || authProxyEnabled">

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

@@ -2,7 +2,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>API Keys</h1>
+		<page-h1 model="navModel"></page-h1>
 	</div>
 
 	<h3 class="page-heading">Add new</h3>

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

@@ -2,10 +2,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			<i class="{{navModel.node.icon}}"></i>
-			{{navModel.node.text}}
-		</h1>
+		<page-h1 model="navModel"></page-h1>
 	</div>
 
 	<h3 class="page-heading">General</h3>

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

@@ -2,10 +2,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			<i class="{{ctrl.navModel.node.icon}}"></i>
-			{{ctrl.navModel.node.text}}
-		</h1>
+		<page-h1 model="ctrl.navModel"></page-h1>
 	</div>
 
 	<form name="ctrl.userForm" class="gf-form-group">

public/app/features/plugins/ds_edit_ctrl.ts

@@ -59,7 +59,10 @@ export class DataSourceEditCtrl {
   initNewDatasourceModel() {
     this.isNew = true;
     this.current = angular.copy(defaults);
-    this.navModel.breadcrumbs.push({text: 'New data source'});
+
+    // 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);
 
     // We are coming from getting started
     if (this.$location.search().gettingstarted) {
@@ -86,7 +89,8 @@ export class DataSourceEditCtrl {
     this.backendSrv.get('/api/datasources/' + id).then(ds => {
       this.isNew = false;
       this.current = ds;
-      this.navModel.breadcrumbs.push({text: ds.name});
+      this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources'};
+      this.navModel.breadcrumbs.push(this.navModel.node);
 
       if (datasourceCreated) {
         datasourceCreated = false;

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

@@ -3,16 +3,7 @@
 <div class="scroll-canvas">
 	<div class="page-container">
 		<div class="page-header">
-			<h1>
-				<i class="icon-gf icon-gf-datasources"></i>
-				<span ng-show="ctrl.isNew">New data source</span>
-				<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
-			</h1>
-
-			<a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
-				<i class="fa fa-plus"></i>
-				Add data source
-			</a>
+			<page-h1 model="ctrl.navModel"></page-h1>
 
 			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
 				<ul class="gf-tabs">

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

@@ -3,10 +3,7 @@
 <div class="scroll-canvas">
 	<div class="page-container">
 		<div class="page-header">
-			<h1>
-				<i class="icon-gf icon-gf-fw icon-gf-datasources"></i>
-				<span>Data Sources</span>
-			</h1>
+			<page-h1 model="ctrl.navModel"></page-h1>
 
 			<a class="page-header__cta btn btn-success" href="datasources/new">
 				<i class="fa fa-plus"></i>
@@ -15,6 +12,7 @@
 		</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">

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

@@ -3,6 +3,7 @@
 <div class="page-container">
   <div class="page-header">
     <h1>
+			<i class="icon-gf icon-gf-apps"></i>
 			Plugins <span class="muted small">(currently installed)</span>
 		</h1>
 

public/sass/layout/_page.scss

@@ -67,7 +67,6 @@
   }
 }
 
-
 .page-heading {
   font-size: 1.25rem;
   margin-top: 0;