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

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

app/portainer/rbac/views/roles/roles.html

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

app/portainer/user-activity/activity-logs-view/activity-logs-view.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User Activity">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="." ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Activity Logs</rd-header-content>
-</rd-header>
+<page-header title="'User Activity'" breadcrumbs="['Activity Logs']" reload="true"> </page-header>
 
 <div class="be-indicator-container">
   <rd-widget>

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User Activity">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.authLogs" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>User authentication activity</rd-header-content>
-</rd-header>
+<page-header title="'User Activity'" breadcrumbs="['User authentication activity']" reload="true"> </page-header>
 
 <div class="be-indicator-container">
   <rd-widget>

app/portainer/views/account/account.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User settings"></rd-header-title>
-  <rd-header-content>User settings</rd-header-content>
-</rd-header>
+<page-header title="'User settings'" breadcrumbs="['User settings']"> </page-header>
 
 <demo-feature-indicator ng-if="isDemoUser" content="'You cannot change the password of this account in the demo version of Portainer.'"> </demo-feature-indicator>
 

app/portainer/views/account/create-user-access-token/create-user-access-token.html

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

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create Custom template"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.templates.custom">Custom Templates</a> &gt; Create Custom template </rd-header-content>
-</rd-header>
+<page-header title="'Create Custom template'" breadcrumbs="[{label:'Custom Templates', link:'docker.templates.custom'}, 'Create Custom template']"> </page-header>
 
 <div class="row" ng-if="!$ctrl.state.loading">
   <div class="col-sm-12">

app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html

@@ -1,11 +1,5 @@
-<rd-header id="view-top">
-  <rd-header-title title-text="Custom Templates">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.templates.custom" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Custom Templates</rd-header-content>
-</rd-header>
+<page-header title="'Custom Templates'" breadcrumbs="['Custom Templates']" reload="true"> </page-header>
+
 <div class="row">
   <stack-from-template-form
     ng-if="$ctrl.state.selectedTemplate"

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit Custom Template">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.templates.custom.edit({id:$ctrl.formValues.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.templates.custom">Custom templates</a> &gt; {{ $ctrl.formValues.Title }} </rd-header-content>
-</rd-header>
+<page-header title="'Edit Custom Template'" breadcrumbs="[{label:'Custom templates', link:'docker.templates.custom'}, $ctrl.formValues.Title]" reload="true"> </page-header>
 
 <div class="row" ng-if="$ctrl.formValues">
   <div class="col-sm-12">

app/portainer/views/devices/import/importDevice.html

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

app/portainer/views/devices/profiles/add/addProfile.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create profile"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.settings">Settings</a> &gt; Edge Compute </rd-header-content>
-</rd-header>
+<page-header title="'Create profile'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Edge Compute']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/devices/profiles/edit/editProfile.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit profile"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.settings">Settings</a> &gt; Edge Compute </rd-header-content>
-</rd-header>
+<page-header title="'Edit profile'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Edge Compute']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/endpoint-registries/registries.html

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

app/portainer/views/endpoints/access/endpointAccess.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Environment access"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: ctrl.endpoint.Id})">{{ ctrl.endpoint.Name }}</a> &gt; Access management
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Environment access'"
+  breadcrumbs="[
+    { label:'Environments', link:'portainer.endpoints' },
+    { 
+      label:ctrl.endpoint.Name,
+      link: 'portainer.endpoints.endpoint', 
+      linkParams:{id: ctrl.endpoint.Id}
+    }, 'Access management']"
+>
+</page-header>
 
 <div class="row" ng-if="ctrl.endpoint">
   <div class="col-sm-12">

app/portainer/views/endpoints/create/createendpoint.html

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

app/portainer/views/endpoints/edit/endpoint.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Environment details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.endpoints.endpoint({id: endpoint.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="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Environment details'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, endpoint.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div ng-if="state.edgeEndpoint">

app/portainer/views/endpoints/endpoints.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Environments">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.endpoints" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Environment management</rd-header-content>
-</rd-header>
+<page-header title="'Environments'" breadcrumbs="['Environment management']" reload="true"> </page-header>
 
 <view-loading ng-if="state.loadingMessage" message="state.loadingMessage"></view-loading>
 

app/portainer/views/endpoints/kvm/endpointKVM.html

@@ -1,10 +1,16 @@
-<rd-header>
-  <rd-header-title title-text="KVM Control"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: $state.endpoint.Id})">{{ $state.endpoint.Name }}</a> &gt;
-    {{ $state.deviceName }} > KVM Control
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'KVM Control'"
+  breadcrumbs="[
+    { label:'Environments', link:'portainer.endpoints' },
+    { 
+      label:$state.endpoint.Name,
+      link: 'portainer.endpoints.endpoint', 
+      linkParams:{id: $state.endpoint.Id}
+    }, 
+    $state.deviceName,
+    'KVM Control']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/groups/access/groupAccess.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Environment group access"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.groups">Groups</a> &gt; <a ui-sref="portainer.groups.group({id: group.Id})">{{ group.Name }}</a> &gt; Access management
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Environment group access'"
+  breadcrumbs="[
+    { label:'Groups', link:'portainer.groups' },
+    { 
+      label:group.Name,
+      link: 'portainer.groups.group', 
+      linkParams:{id: group.Id}
+    }, 'Access management']"
+>
+</page-header>
 
 <div class="row" ng-if="group">
   <div class="col-sm-12">

app/portainer/views/groups/create/creategroup.html

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

app/portainer/views/groups/edit/group.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Environment group details"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.groups">Groups</a> &gt; {{ ::group.Name }} </rd-header-content>
-</rd-header>
+<page-header title="'Environment group details'" breadcrumbs="[{label:'Groups', link:'portainer.groups'}, group.Name]"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/groups/groups.html

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

app/portainer/views/registries/create/createRegistry.html

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

app/portainer/views/registries/edit/registry.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Registry details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.registries">Registries</a> &gt; <a ui-sref="portainer.registries.registry({id: $ctrl.registry.Id})">{{ $ctrl.registry.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Registry details'" breadcrumbs="[{label:'Registries', link:'portainer.registries'}, $ctrl.registry.Name]"> </page-header>
 
 <div class="row" ng-if="!$ctrl.state.loading">
   <div class="col-sm-12">

app/portainer/views/registries/registries.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Registries">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.registries" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Registry management</rd-header-content>
-</rd-header>
+<page-header title="'Registries'" breadcrumbs="['Registry management']" reload="true"> </page-header>
 
 <information-panel title-text="Information">
   <span class="small text-muted"> View registries via an environment to manage access for user(s) and/or team(s) </span>

app/portainer/views/settings/edge-compute/settingsEdgeCompute.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Settings"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.settings">Settings</a> &gt; Edge Compute </rd-header-content>
-</rd-header>
+<page-header title="'Settings'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Edge Compute']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12" ng-if="$ctrl.settings">

app/portainer/views/settings/settings.html

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

app/portainer/views/stacks/create/createstack.html

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

app/portainer/views/stacks/edit/stack.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Stack details">
-    <a data-toggle="tooltip" title-text="Refresh" ui-sref="docker.stacks.stack({id: stack.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.stacks">Stacks</a> &gt; {{ stackName }} </rd-header-content>
-</rd-header>
+<page-header title="'Stack details'" breadcrumbs="[{label:'Stacks', link:'docker.stacks'}, stackName]" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/stacks/stacks.html

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

app/portainer/views/tags/tags.html

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

app/portainer/views/teams/edit/team.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Team details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.teams">Teams</a> &gt; <a ui-sref="portainer.teams.team({id: team.Id})">{{ team.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Team details'" breadcrumbs="[{label:'Teams', link:'portainer.teams'}, team.Name]"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/portainer/views/teams/teams.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Teams">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.teams" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Teams management</rd-header-content>
-</rd-header>
+<page-header title="'Teams'" breadcrumbs="['Teams management']" reload="true"> </page-header>
 
 <create-team-form ng-if="isAdmin && users" users="users" action-in-progress="state.actionInProgress" teams="teams" on-submit="(addTeam)"></create-team-form>
 

app/portainer/views/users/edit/user.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.users">Users</a> &gt; <a ui-sref="portainer.users.user({id: user.Id})">{{ formValues.username }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'User details'" breadcrumbs="[{label:'Users', link:'portainer.users'}, formValues.username]"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/portainer/views/users/users.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Users">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.users" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>User management</rd-header-content>
-</rd-header>
+<page-header title="'Users'" breadcrumbs="['User management']" reload="true"> </page-header>
 
 <div class="row" ng-if="isAdmin">
   <div class="col-lg-12 col-md-12 col-xs-12">