Added header directive and updated breadcrumb in each view (#8)

app/components/container/container.html

@@ -1,3 +1,11 @@
+<rd-header>
+  <rd-header-title title="Container details"></rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
+  </rd-header-content>
+</rd-header>
+
+
 <div class="row">
   <div class="col-lg-6 col-md-12 col-xs-12">
     <rd-widget>

app/components/containerLogs/containerlogs.html

@@ -1,3 +1,10 @@
+<rd-header>
+  <rd-header-title title="Container logs"></rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Logs
+  </rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>

app/components/containers/containers.html

@@ -1,5 +1,10 @@
 <div ng-include="template" ng-controller="StartContainerController"></div>
 
+<rd-header>
+  <rd-header-title title="Container list"></rd-header-title>
+  <rd-header-content>Containers</rd-header-content>
+</rd-header>
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Containers">

app/components/dashboard/dashboard.html

@@ -1,3 +1,8 @@
+<rd-header>
+  <rd-header-title title="Home"></rd-header-title>
+  <rd-header-content>Dashboard</rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-3 col-md-6 col-xs-12">
     <rd-widget>

app/components/image/image.html

@@ -1,3 +1,11 @@
+<rd-header>
+  <rd-header-title title="Image details"></rd-header-title>
+  <rd-header-content>
+    Images > <a ui-sref="image({id: id})">{{ id }}</a>
+  </rd-header-content>
+</rd-header>
+
+
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>

app/components/images/images.html

@@ -1,5 +1,10 @@
 <div ng-include="template" ng-controller="PullImageController"></div>
 
+<rd-header>
+  <rd-header-title title="Image list"></rd-header-title>
+  <rd-header-content>Images</rd-header-content>
+</rd-header>
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-clone" title="Images">

app/components/network/network.html

@@ -1,3 +1,10 @@
+<rd-header>
+  <rd-header-title title="Network details"></rd-header-title>
+  <rd-header-content>
+    Networks > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-9 col-md-9 col-xs-9">
     <rd-widget>

app/components/networks/networks.html

@@ -1,5 +1,11 @@
 <div ng-include="template" ng-controller="CreateNetworkController"></div>
 
+<rd-header>
+  <rd-header-title title="Network list"></rd-header-title>
+  <rd-header-content>Networks</rd-header-content>
+</rd-header>
+
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-sitemap" title="Networks">

app/components/stats/stats.html

@@ -1,3 +1,10 @@
+<rd-header>
+  <rd-header-title title="Container stats"></rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Stats
+  </rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
@@ -5,7 +12,7 @@
         <div class="widget-icon grey pull-left">
           <i class="fa fa-tasks"></i>
         </div>
-        <div class="title">{{ containerName }}</div>
+        <div class="title">{{ container.Name|trimcontainername }}</div>
         <div class="comment">
           Name
         </div>

app/components/stats/statsController.js

@@ -186,7 +186,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
   });
 
   Container.get({id: $stateParams.id}, function (d) {
-    $scope.containerName = d.Name.substring(1);
+    $scope.container = d;
   }, function (e) {
     Messages.error("Failure", e.data);
   });

app/components/swarm/swarm.html

@@ -1,3 +1,8 @@
+<rd-header>
+  <rd-header-title title="Cluster overview"></rd-header-title>
+  <rd-header-content>Swarm</rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-3 col-md-6 col-xs-12">
     <rd-widget>

app/components/volumes/volumes.html

@@ -1,5 +1,10 @@
 <div ng-include="template" ng-controller="CreateVolumeController"></div>
 
+<rd-header>
+  <rd-header-title title="Volume list"></rd-header-title>
+  <rd-header-content>Volumes</rd-header-content>
+</rd-header>
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-cubes" title="Volumes">

app/directives/header-content.js

@@ -0,0 +1,11 @@
+angular
+.module('uifordocker')
+.directive('rdHeaderContent', function rdHeaderContent() {
+  var directive = {
+    requires: '^rdHeader',
+    transclude: true,
+    template: '<div class="breadcrumb-links" ng-transclude></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/header-title.js

@@ -0,0 +1,14 @@
+angular
+.module('uifordocker')
+.directive('rdHeaderTitle', function rdHeaderTitle() {
+  var directive = {
+    requires: '^rdHeader',
+    scope: {
+      title: '@',
+    },
+    transclude: true,
+    template: '<div class="page">{{title}}</div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/header.js

@@ -0,0 +1,13 @@
+angular
+.module('uifordocker')
+.directive('rdHeader', function rdHeader() {
+  var directive = {
+    scope: {
+      "ngModel": "="
+    },
+    transclude: true,
+    template: '<div class="row header"><div class="col-xs-12"><div class="meta" ng-transclude></div></div></div>',
+    restrict: 'EA'
+  };
+  return directive;
+});

index.html

@@ -67,21 +67,6 @@
     <div id="content-wrapper">
       <div class="page-content">
 
-        <!-- Header Bar -->
-        <div class="row header">
-          <div class="col-xs-12">
-            <div class="meta">
-              <div class="page">
-                Dashboard
-              </div>
-              <div class="breadcrumb-links">
-                Home / Dashboard
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- End Header Bar -->
-
         <!-- Main Content -->
         <div id="view" ui-view></div>