feat(ui): apply react pageheader to all pageview EE-3615 (#7178)

Co-authored-by: Chaim Lev-Ari <chiptus@gmail.com>

app/docker/components/host-overview/host-overview.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Host overview">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="{{ $ctrl.refreshUrl }}" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Docker</rd-header-content>
-</rd-header>
+<page-header title="'Host overview'" breadcrumbs="['Docker']" reload="true"> </page-header>
 
 <information-panel-offline ng-if="$ctrl.offlineMode"></information-panel-offline>
 

app/docker/views/configs/configs.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Configs list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.configs" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Configs</rd-header-content>
-</rd-header>
+<page-header title="'Configs list'" breadcrumbs="['Configs']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/configs/create/createconfig.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create config"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.configs">Configs</a> &gt; Add config </rd-header-content>
-</rd-header>
+<page-header title="'Create config'" breadcrumbs="[{label:'Configs', link:'docker.configs'}, 'Add config']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/configs/edit/config.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Config details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.configs.config({id: config.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.configs">Configs</a> &gt; <a ui-sref="docker.configs.config({id: config.Id})">{{ config.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Config details'" breadcrumbs="[{label:'Configs', link:'docker.configs'}, config.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/console/attach.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container console"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Console
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container console'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Console']"
+>
+</page-header>
 
 <div class="row" ng-init="autoconnectAttachView()" ng-show="loaded">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/console/exec.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container console"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Console
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container console'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Console']"
+>
+</page-header>
 
 <div class="row" ng-init="initView()" ng-show="loaded">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/containers.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Container list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.containers" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Containers</rd-header-content>
-</rd-header>
+<page-header title="'Container list'" breadcrumbs="['Containers']" reload="true"> </page-header>
+
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
 
 <div class="row">

app/docker/views/containers/create/createcontainer.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create container"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.containers">Containers</a> &gt; Add container </rd-header-content>
-</rd-header>
+<page-header title="'Create container'" breadcrumbs="[{label:'Containers', link:'docker.containers'}, 'Add container']"> </page-header>
 
 <information-panel title-text="Caution" ng-if="state.mode == 'duplicate'">
   <span class="small">

app/docker/views/containers/edit/container.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Container details"> </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Container details'" breadcrumbs="[{label:'Containers', link:'docker.containers'}, (container.Name | trimcontainername)]"> </page-header>
 
 <div
   class="row"

app/docker/views/containers/inspect/containerinspect.html

@@ -1,10 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container inspect"> </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: containerInfo.Id})">{{ containerInfo.Name | trimcontainername }}</a> &gt;
-    Inspect
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container inspect'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(containerInfo.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:containerInfo.Id
+    }, 'Inspect']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/logs/containerlogs.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container logs"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Logs
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container logs'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Logs']"
+>
+</page-header>
 
 <log-viewer
   data="logs"

app/docker/views/containers/stats/containerstats.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container statistics"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Stats
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container statistics'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Stats']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-md-12">

app/docker/views/docker-features-configuration/docker-features-configuration.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Docker features configuration"></rd-header-title>
-  <rd-header-content>Docker configuration</rd-header-content>
-</rd-header>
+<page-header title="'Docker features configuration'" breadcrumbs="['Docker configuration']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/events/events.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Event list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.events" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Events</rd-header-content>
-</rd-header>
+<page-header title="'Event list'" breadcrumbs="['Events']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/host/host-browser-view/host-browser-view.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Host Browser"></rd-header-title>
-  <rd-header-content>
-    Host &gt; <a ui-sref="docker.host">{{ $ctrl.host.Name }}</a> &gt; browse
-  </rd-header-content>
-</rd-header>
+<page-header title="'Host Browser'" breadcrumbs="['Host', {label:$ctrl.host.Name, link:'docker.host'},  'browse']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/images/build/buildimage.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Build image"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.images">Images</a> &gt; Build image </rd-header-content>
-</rd-header>
+<page-header title="'Build image'" breadcrumbs="[{label:'Images', link:'docker.images'}, 'Build image']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/images/edit/image.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Image details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.images">Images</a> &gt; <a ui-sref="docker.images.image({id: image.Id})">{{ image.Id }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Image details'" breadcrumbs="[{label:'Images', link:'docker.images'}, image.Id]"> </page-header>
 
 <div class="row" ng-if="image.RepoTags.length > 0">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/images/images.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Image list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.images" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Images</rd-header-content>
-</rd-header>
+<page-header title="'Image list'" breadcrumbs="['Images']" reload="true"> </page-header>
 
 <div class="row" ng-if="!offlineMode" authorization="DockerImageCreate">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/images/import/importimage.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Import image"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.images">Images</a> &gt; Import image </rd-header-content>
-</rd-header>
+<page-header title="'Import image'" breadcrumbs="[{label:'Images', link:'docker.images'}, 'Import image']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/networks/create/createnetwork.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create network"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.networks">Networks</a> &gt; Add network </rd-header-content>
-</rd-header>
+<page-header title="'Create network'" breadcrumbs="[{label:'Networks', link:'docker.networks'}, 'Add network']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/networks/networks.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Network list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.networks" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Networks</rd-header-content>
-</rd-header>
+<page-header title="'Network list'" breadcrumbs="['Networks']" reload="true"> </page-header>
+
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
 <div class="row">
   <div class="col-sm-12">

app/docker/views/nodes/node-browser/node-browser.html

@@ -1,9 +1,19 @@
-<rd-header>
-  <rd-header-title title-text="Node Browser"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.swarm">Swarm</a> &gt; <a ui-sref="docker.nodes.node({ id: $ctrl.nodeId })">{{ $ctrl.node.Hostname }}</a> &gt; browse
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Node Browser'"
+  breadcrumbs="[
+    {
+      label:'swarm',
+      link:'docker.swarm'
+    },
+    {
+      label: $ctrl.node.Hostname,
+      link: 'docker.nodes.node',
+      linkParams: { id: $ctrl.nodeId }
+    },
+    'browse'
+  ]"
+>
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/registries/access/registryAccess.html

@@ -1,16 +1,15 @@
-<rd-header>
-  <rd-header-title title-text="Registry access"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.registries">Registries</a> &gt; {{ $ctrl.registry.Name }} &gt; Access management </rd-header-content>
-</rd-header>
+<div ng-if="$ctrl.registry">
+  <page-header title="'Registry access'" breadcrumbs="[{label:'Registries', link:'docker.registries'}, $ctrl.registry.Name, 'Access management']"> </page-header>
 
-<registry-details registry="$ctrl.registry" ng-if="$ctrl.registry"></registry-details>
+  <registry-details registry="$ctrl.registry"></registry-details>
 
-<por-access-management
-  ng-if="$ctrl.registry && $ctrl.endpointGroup"
-  access-controlled-entity="$ctrl.registryEndpointAccesses"
-  entity-type="registry"
-  action-in-progress="$ctrl.state.actionInProgress"
-  update-access="$ctrl.updateAccess"
-  filter-users="$ctrl.filterUsers"
->
-</por-access-management>
+  <por-access-management
+    ng-if="$ctrl.endpointGroup"
+    access-controlled-entity="$ctrl.registryEndpointAccesses"
+    entity-type="registry"
+    action-in-progress="$ctrl.state.actionInProgress"
+    update-access="$ctrl.updateAccess"
+    filter-users="$ctrl.filterUsers"
+  >
+  </por-access-management>
+</div>

app/docker/views/secrets/create/createsecret.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create secret"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.secrets">Secrets</a> &gt; Add secret </rd-header-content>
-</rd-header>
+<page-header title="'Create secret'" breadcrumbs="[{label:'Secrets', link:'docker.secrets'}, 'Add secret']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/secrets/edit/secret.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Secret details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.secrets.secret({id: secret.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.secrets">Secrets</a> &gt; <a ui-sref="docker.secrets.secret({id: secret.Id})">{{ secret.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Secret details'" breadcrumbs="[{label:'Secrets', link:'docker.secrets', linkParams:{ id: secret.Id }}, secret.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/secrets/secrets.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Secrets list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.secrets" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Secrets</rd-header-content>
-</rd-header>
+<page-header title="'Secrets list'" breadcrumbs="['Secrets']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/services/create/createservice.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create service"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.services">Services</a> &gt; Add service </rd-header-content>
-</rd-header>
+<page-header title="'Create service'" breadcrumbs="[{label:'Services', link:'docker.services'}, 'Add service']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/services/edit/service.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Service details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.services.service({id: service.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id})">{{ service.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Service details'" breadcrumbs="[{label:'Services', link:'docker.services'}, service.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div ng-if="isUpdating" class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/services/logs/servicelogs.html

@@ -1,9 +1,19 @@
-<rd-header>
-  <rd-header-title title-text="Service logs"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.services">Services</a> > <a ui-sref="docker.services.service({id: service.Id})">{{ service.Name }}</a> &gt; Logs
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Service logs'"
+  breadcrumbs="[
+    {
+      label: 'Services',
+      link: 'docker.services'
+    },
+    {
+      label: service.Name,
+      link: 'docker.services.service',
+      linkParams: { id: service.Id }
+    },
+    'Logs'
+  ]"
+>
+</page-header>
 
 <log-viewer
   data="logs"

app/docker/views/services/services.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Service list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.services" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Services</rd-header-content>
-</rd-header>
+<page-header title="'Service list'" breadcrumbs="['Services']" reload="true"> </page-header>
 
 <div class="row" ng-if="services">
   <div class="col-sm-12">

app/docker/views/swarm/swarm.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Cluster overview">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.swarm" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Swarm</rd-header-content>
-</rd-header>
+<page-header title="'Cluster overview'" breadcrumbs="['Swarm']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/swarm/visualizer/swarmvisualizer.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Swarm visualizer">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.swarm.visualizer" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content> <a ui-sref="docker.swarm">Swarm</a> &gt; <a ui-sref="docker.swarm.visualizer">Cluster visualizer</a> </rd-header-content>
-</rd-header>
+<page-header title="'Swarm visualizer'" breadcrumbs="[{label:'Swarm', link:'docker.swarm'}, {label:'Cluster visualizer', link:'docker.swarm.visualizer'}]" reload="true">
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/tasks/edit/task.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Task details"></rd-header-title>
-  <rd-header-content ng-if="task && service">
-    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id })">{{ service.Name }}</a> &gt; {{ task.Id }}
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Task details'"
+  breadcrumbs="[
+    { label:'Services', link:'docker.services' },
+    { 
+      label: service.Name,
+      link: 'docker.services.service', 
+      linkParams:{ id: service.Id }
+    }, task.Id]"
+>
+</page-header>
 
 <div class="row" ng-if="task && service">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/tasks/logs/tasklogs.html

@@ -1,10 +1,20 @@
-<rd-header>
-  <rd-header-title title-text="Task details"></rd-header-title>
-  <rd-header-content ng-if="task && service">
-    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id })">{{ service.Name }}</a> &gt;
-    <a ui-sref="docker.tasks.task({id: task.Id })">{{ task.Id }}</a> &gt; Logs
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Task details'"
+  breadcrumbs="[
+    { label:'Services', link:'docker.services' },
+    { 
+      label:service.Name,
+      link:'docker.services.service', 
+      linkParams:{ id: service.Id }
+    }, 
+    { 
+      label:task.Id,
+      link:'docker.tasks.task', 
+      linkParams:{ id: task.Id }
+    },
+    'Logs']"
+>
+</page-header>
 
 <log-viewer
   data="logs"

app/docker/views/volumes/browse/browsevolume.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Volume browser"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.volumes">Volumes</a> &gt; <a ui-sref="docker.volumes.volume({ id: volumeId })">{{ volumeId }}</a> &gt; browse
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Volume browser'"
+  breadcrumbs="[
+    { label:'Volumes', link:'docker.volumes' },
+    { 
+      label:volumeId,
+      link: 'docker.volumes.volume', 
+      linkParams:{ id: volumeId }
+    }, 'browse']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/volumes/create/createvolume.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create volume"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.volumes">Volumes</a> &gt; Add volume </rd-header-content>
-</rd-header>
+<page-header title="'Create volume'" breadcrumbs="[{label:'Volumes', link:'docker.volumes'}, 'Add volume']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/volumes/edit/volume.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Volume details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.volumes">Volumes</a> &gt; <a ui-sref="docker.volumes.volume({id: volume.Id})">{{ volume.Id }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Volume details'" breadcrumbs="[{label:'Volumes', link:'docker.volumes'}, volume.Id]"> </page-header>
 
 <div class="row" ng-if="volume">
   <div class="col-sm-12">

app/docker/views/volumes/volumes.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Volume list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.volumes" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Volumes</rd-header-content>
-</rd-header>
+<page-header title="'Volume list'" breadcrumbs="['Volumes']" reload="true"> </page-header>
+
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
 <div class="row">
   <div class="col-sm-12">