UI: Update replication nav

changelog/24283.txt

@@ -0,0 +1,3 @@
+```release-note:change
+ui: add subnav for replication items
+```

ui/app/app.js

@@ -20,9 +20,19 @@ export default class App extends Application {
     },
     replication: {
       dependencies: {
-        services: ['auth', 'flash-messages', 'namespace', 'replication-mode', 'router', 'store', 'version'],
+        services: [
+          'auth',
+          'flash-messages',
+          'namespace',
+          'replication-mode',
+          'router',
+          'store',
+          'version',
+          '-portal',
+        ],
         externalRoutes: {
           replication: 'vault.cluster.replication.index',
+          vault: 'vault.cluster',
         },
       },
     },

ui/app/components/sidebar/nav/cluster.hbs

@@ -42,32 +42,6 @@
     />
   {{/if}}
 
-  {{#if
-    (and
-      this.version.isEnterprise
-      this.namespace.inRootNamespace
-      this.cluster.anyReplicationEnabled
-      (has-permission "status" routeParams="replication")
-    )
-  }}
-    <Nav.Title data-test-sidebar-nav-heading="Replication">Replication</Nav.Title>
-    <Nav.Link
-      @route="vault.cluster.replication.mode.index"
-      @model="dr"
-      @text="Disaster Recovery"
-      data-test-sidebar-nav-link="Disaster Recovery"
-    />
-
-    {{#if (has-feature "Performance Replication")}}
-      <Nav.Link
-        @route="vault.cluster.replication.mode.index"
-        @model="performance"
-        @text="Performance"
-        data-test-sidebar-nav-link="Performance"
-      />
-    {{/if}}
-  {{/if}}
-
   {{#if
     (or
       (and
@@ -79,7 +53,12 @@
     <Nav.Title data-test-sidebar-nav-heading="Monitoring">Monitoring</Nav.Title>
   {{/if}}
   {{#if (and this.version.isEnterprise this.namespace.inRootNamespace (has-permission "status" routeParams="replication"))}}
-    <Nav.Link @route="vault.cluster.replication.index" @text="Replication" data-test-sidebar-nav-link="Replication" />
+    <Nav.Link
+      @route="vault.cluster.replication.index"
+      @text="Replication"
+      data-test-sidebar-nav-link="Replication"
+      @hasSubItems={{true}}
+    />
   {{/if}}
   {{#if (and this.cluster.usingRaft this.namespace.inRootNamespace (has-permission "status" routeParams="raft"))}}
     <Nav.Link

ui/app/models/cluster.js

@@ -76,7 +76,9 @@ export default class ClusterModel extends Model {
 
   //replication mode - will only ever be 'unsupported'
   //otherwise the particular mode will have the relevant mode attr through replication-attributes
-  @attr('string') mode;
+  // eg dr.mode or performance.mode
+  @attr('string')
+  mode;
   get allReplicationDisabled() {
     return this.dr?.replicationDisabled && this.performance?.replicationDisabled;
   }

ui/app/styles/components/action-block.scss

@@ -11,8 +11,11 @@
   margin-bottom: $spacing-24;
 }
 
+.action-block-width {
+  width: 100%;
+}
+
 .action-block {
-  box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
   grid-template-columns: 2fr 1fr;
   display: grid;
   padding: $spacing-16 $spacing-24;

ui/lib/core/addon/components/replication-summary-card.hbs

@@ -0,0 +1,40 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<Hds::Card::Container
+  @hasBorder={{true}}
+  class="replication-summary-card card-container summary"
+  data-test-replication-summary-card
+>
+  <h3 class="title is-5 grid-item-top-left card-title">{{@title}}</h3>
+  <div class="grid-item-top-right">
+    <Hds::Button
+      @route="mode.index"
+      @model={{this.key}}
+      @text="Details"
+      @color="tertiary"
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      data-test-manage-link={{@title}}
+    />
+  </div>
+  <div class="grid-item-left">
+    <p class="title is-6">last_dr_wal</p>
+    <p class="helper-text is-label has-text-grey">
+      Index of last WAL entry written on local storage. Updates every ten seconds.
+    </p>
+  </div>
+  <div class="grid-item-right">
+    <p class="title is-6">known_secondaries</p>
+    <p class="helper-text is-label has-text-grey">Number of secondaries connected to this primary.</p>
+  </div>
+  <p class="title is-3 grid-item-bottom-left" data-test-lastWAL>{{format-number this.lastWAL}}</p>
+  <p class="title is-3 grid-item-bottom-right" data-test-known-secondaries>{{format-number this.knownSecondariesCount}}</p>
+  <div class="grid-item-bottom-row">
+    <p class="title is-6">merkle_root</p>
+    <p class="helper-text is-label has-text-grey">A snapshot of the merkle tree's root hash.</p>
+    <div><code class="is-word-break has-text-black" data-test-merkle-root>{{this.merkleRoot}}</code></div>
+  </div>
+</Hds::Card::Container>

ui/lib/core/addon/components/replication-summary-card.js

@@ -3,9 +3,8 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import layout from '../templates/components/replication-summary-card';
+import { get } from '@ember/object';
+import Component from '@glimmer/component';
 
 /**
  * @module ReplicationSummaryCard
@@ -22,28 +21,17 @@ import layout from '../templates/components/replication-summary-card';
  * @param {Object} replicationDetails=null - An Ember data object computed off the Ember Model.  It combines the Model.dr and Model.performance objects into one and contains details specific to the mode replication.
  */
 
-export default Component.extend({
-  layout,
-  title: null,
-  replicationDetails: null,
-  lastDrWAL: computed('replicationDetails.dr.lastWAL', function () {
-    return this.replicationDetails.dr.lastWAL || 0;
-  }),
-  lastPerformanceWAL: computed('replicationDetails.performance.lastWAL', function () {
-    return this.replicationDetails.performance.lastWAL || 0;
-  }),
-  merkleRootDr: computed('replicationDetails.dr.merkleRoot', function () {
-    return this.replicationDetails.dr.merkleRoot || '';
-  }),
-  merkleRootPerformance: computed('replicationDetails.performance.merkleRoot', function () {
-    return this.replicationDetails.performance.merkleRoot || '';
-  }),
-  knownSecondariesDr: computed('replicationDetails.dr.knownSecondaries', function () {
-    const knownSecondaries = this.replicationDetails.dr.knownSecondaries;
-    return knownSecondaries.length;
-  }),
-  knownSecondariesPerformance: computed('replicationDetails.performance.knownSecondaries', function () {
-    const knownSecondaries = this.replicationDetails.performance.knownSecondaries;
-    return knownSecondaries.length;
-  }),
-});
+export default class ReplicationSummaryCard extends Component {
+  get key() {
+    return this.args.title === 'Performance' ? 'performance' : 'dr';
+  }
+  get lastWAL() {
+    return get(this.args.replicationDetails, `${this.key}.lastWAL`) ?? 0;
+  }
+  get merkleRoot() {
+    return get(this.args.replicationDetails, `${this.key}.merkleRoot`) ?? '';
+  }
+  get knownSecondariesCount() {
+    return get(this.args.replicationDetails, `${this.key}.knownSecondaries.length`) ?? 0;
+  }
+}

ui/lib/core/addon/templates/components/replication-actions.hbs

@@ -13,12 +13,14 @@
       as |replicationAction|
     }}
       <div class="replication-actions-grid-item">
-        {{component
-          (concat "replication-action-" replicationAction)
-          onSubmit=(action "onSubmit")
-          replicationMode=this.replicationMode
-          model=this.model
-        }}
+        <Hds::Card::Container class="action-block-width" @hasBorder={{true}}>
+          {{component
+            (concat "replication-action-" replicationAction)
+            onSubmit=(action "onSubmit")
+            replicationMode=this.replicationMode
+            model=this.model
+          }}
+        </Hds::Card::Container>
       </div>
     {{/each}}
   </div>

ui/lib/core/addon/templates/components/replication-header.hbs

@@ -20,7 +20,7 @@
     {{/unless}}
   </p.top>
   <p.levelLeft>
-    <h1 class="title is-3">
+    <h1 class="title is-3" data-test-replication-title>
       {{this.title}}
       {{#if this.data.anyReplicationEnabled}}
         <span class="tag is-light has-text-grey-dark" data-test-mode>

ui/lib/core/addon/templates/components/replication-mode-summary.hbs

@@ -102,20 +102,13 @@
       </div>
     </div>
     <div class="level-right">
-      {{#if this.replicationDisabled}}
-        <LinkTo
-          @route="mode.index"
-          @models={{array this.cluster.name this.mode}}
-          class="button is-primary"
-          data-test-replication-promote-secondary
-        >
-          Enable
-        </LinkTo>
-      {{else}}
-        <LinkTo @route="mode.index" @models={{array this.cluster.name this.mode}} class="button is-secondary">
-          Details
-        </LinkTo>
-      {{/if}}
+      <Hds::Button
+        @route="mode.index"
+        @models={{array this.cluster.name this.mode}}
+        @color={{if this.replicationDisabled "primary" "secondary"}}
+        @text={{if this.replicationDisabled "Enable" "Details"}}
+        data-test-replication-details-link={{this.mode}}
+      />
     </div>
   </div>
 {{/if}}

ui/lib/replication/addon/engine.js

@@ -14,8 +14,17 @@ const Eng = Engine.extend({
   modulePrefix,
   Resolver,
   dependencies: {
-    services: ['auth', 'flash-messages', 'namespace', 'replication-mode', 'router', 'store', 'version'],
-    externalRoutes: ['replication'],
+    services: [
+      'auth',
+      'flash-messages',
+      'namespace',
+      'replication-mode',
+      'router',
+      'store',
+      'version',
+      '-portal',
+    ],
+    externalRoutes: ['replication', 'vault'],
   },
 });
 

ui/lib/replication/addon/templates/application.hbs

@@ -3,4 +3,32 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
+<Hds::SideNav::Portal @ariaLabel="Replication Navigation Links" data-test-sidebar-nav-panel="Replication" as |Nav|>
+  <Nav.BackLink
+    @route="vault"
+    @current-when={{false}}
+    @isRouteExternal={{true}}
+    @icon="arrow-left"
+    @text="Back to main navigation"
+    data-test-sidebar-nav-link="Back to main navigation"
+  />
+
+  <Nav.Title data-test-sidebar-nav-heading="Replication">Replication</Nav.Title>
+  <Nav.Link
+    @route="replication"
+    @current-when="replication"
+    @isRouteExternal={{true}}
+    @text="Overview"
+    data-test-sidebar-nav-link="Overview"
+  />
+  {{#if (not-eq this.model.mode "unsupported")}}
+    {{#if (has-feature "DR Replication")}}
+      <Nav.Link @route="mode" @model="dr" @text="Disaster Recovery" data-test-sidebar-nav-link="Disaster Recovery" />
+    {{/if}}
+    {{#if (has-feature "Performance Replication")}}
+      <Nav.Link @route="mode" @model="performance" @text="Performance" data-test-sidebar-nav-link="Performance" />
+    {{/if}}
+  {{/if}}
+</Hds::SideNav::Portal>
+
 {{outlet}}

ui/lib/replication/addon/templates/components/replication-summary.hbs

@@ -8,7 +8,7 @@
 {{else if (or this.cluster.allReplicationDisabled this.cluster.replicationAttrs.replicationDisabled)}}
   <PageHeader as |p|>
     <p.levelLeft>
-      <h1 class="title is-3">
+      <h1 class="title is-3" data-test-replication-title>
         {{#if this.initialReplicationMode}}
           {{#if (eq this.initialReplicationMode "dr")}}
             Enable Disaster Recovery Replication
@@ -291,7 +291,7 @@
   {{#if (not (and this.cluster.dr.replicationEnabled this.cluster.performance.replicationEnabled))}}
     <PageHeader as |p|>
       <p.levelLeft>
-        <h1 class="title is-3">
+        <h1 class="title is-3" data-test-replication-title>
           Replication
         </h1>
       </p.levelLeft>