hashicorp · Monkeychip · May 13, 2020 · May 8, 2020 · May 11, 2020 · May 11, 2020
diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
@@ -17,9 +17,20 @@
 
   .selectable-card-container {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    grid-template-rows: 1fr;
-    grid-gap: 2rem;
+
+    &.primary {
+      margin: 2rem 0 2rem 0;
+      grid-template-columns: 1fr 2fr;
+
+      @include until($mobile) {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    &.secondary {
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+      grid-gap: 2rem;
+    }
 
     .card-container {
       display: grid;

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
@@ -1,13 +1,4 @@
 .replication {
-  .selectable-card-container {
-    margin: 2rem 0 2rem 0;
-    grid-template-columns: 1fr 2fr;
-
-    @include until($mobile) {
-      grid-template-columns: 1fr;
-    }
-  }
-
   .toolbar {
     border-top: 0px;
   }

diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -28,7 +28,6 @@
             </nav>
           </EmptyState>
         {{else}}
-        <Page.toggle />
         <Page.dashboard
         {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
           @componentToRender='replication-secondary-card' as |Dashboard|>

diff --git a/ui/lib/core/addon/components/replication-page.js b/ui/lib/core/addon/components/replication-page.js
@@ -30,7 +30,6 @@ export default Component.extend({
     }
     this.set('reindexingDetails', resp);
   }),
-
   replicationMode: computed('model.{replicationMode}', function() {
     // dr or performance 🤯
     let mode = this.model.replicationMode;

diff --git a/ui/app/helpers/format-number.js → ui/lib/core/addon/helpers/format-number.js b/ui/app/helpers/format-number.js → ui/lib/core/addon/helpers/format-number.js
diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -5,10 +5,12 @@
       @type="info"
       @secondIconType="loading"
       @message="This can cause a delay depending on the size of the data store. You can use Vault during this time."
-      data-test-isReindexing/>
+      data-test-isReindexing
+      @class="has-top-margin-xl"/>
   {{/if}}
-
-  <div class="selectable-card-container has-top-margin-xl">
+  <div
+    class="selectable-card-container {{if isSecondary 'secondary' 'primary'}} has-top-margin-xl"
+    data-test-selectable-card-container={{if isSecondary 'secondary' 'primary'}}>
     {{yield (hash
       card=(component componentToRender replicationDetails=replicationDetails)
     )}}

diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -37,7 +37,7 @@
         {{if isSecondary 'Secondary' 'Primary'}}
       </span>
       <span class="tag" data-test-clusterId>
-        {{data.dr.clusterIdDisplay}}
+        {{secondaryId}}
       </span>
     </h1>
   </p.levelLeft>

diff --git a/ui/lib/core/addon/templates/components/replication-page.hbs b/ui/lib/core/addon/templates/components/replication-page.hbs
@@ -1,7 +1,12 @@
 <div class="replication-page" data-test-replication-page>
   {{yield
     (hash
-      header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
+      header=(component 'replication-header'
+        data=model
+        title=replicationMode
+        isSecondary=isSecondary
+        secondaryId=replicationDetails.secondaryId
+      )
       dashboard=(component
         'replication-dashboard'
         data=model

diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -59,6 +59,7 @@
             class="link"
             target="_blank"
             rel="noreferrer noopener" 
+            data-test-primaryClusterAddr
           >
             {{primaryClusterAddr}}
           </a>
@@ -67,7 +68,7 @@
         <p class="has-text-grey is-size-8">unknown</p>
       {{/if}}
     </div>
-    <h2 class="title is-3 grid-item-left-bottom">{{format-number lastRemoteWAL}}</h2>
+    <h2 class="title is-3 grid-item-left-bottom" data-test-lastRemoteWAL>{{format-number lastRemoteWAL}}</h2>
     <div class="grid-item-right-bottom">
         {{!-- Empty --}}
     </div>

diff --git a/ui/lib/core/app/helpers/format-number.js b/ui/lib/core/app/helpers/format-number.js
@@ -0,0 +1 @@
+export { default, formatNumber } from 'core/helpers/format-number';
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -332,19 +332,31 @@
     <p>{{cluster.replicationModeStatus.cluster_id}}</p>
     <div class="replication">
       <ReplicationPage @model={{cluster}} as |Page|>
-        <Page.dashboard @data={{cluster}} @componentToRender='replication-primary-card' as |Dashboard|>
-          <Dashboard.card
-            @title='State'
-            @description='Updated every ten seconds.'
-            @glyph={{get (cluster-states replicationAttrs.state) "glyph"}}
-            @metric={{replicationAttrs.state}} />
-          <Dashboard.card
-            @title='Last WAL entry'
-            @description='Index of last Write Ahead Logs entry written on local storage.'
-            @metric={{replicationAttrs.lastWAL}} />
-          <Dashboard.secondaryCard
-            @cluster={{cluster}}
-            @replicationAttrs={{replicationAttrs}} />
+        <Page.dashboard 
+          @data={{cluster}}
+          @componentToRender={{if (eq replicationAttrs.mode 'secondary') 'replication-secondary-card' 'replication-primary-card' }}
+          as |Dashboard|>
+          {{#if (eq replicationAttrs.mode 'secondary')}}
+            <Dashboard.card
+              @title="States"
+            />
+            <Dashboard.card
+              @title="Primary cluster"
+            />
+          {{else}}
+            <Dashboard.card
+              @title='State'
+              @description='Updated every ten seconds.'
+              @glyph={{get (cluster-states replicationAttrs.state) "glyph"}}
+              @metric={{replicationAttrs.state}} />
+            <Dashboard.card
+              @title='Last WAL entry'
+              @description='Index of last Write Ahead Logs entry written on local storage.'
+              @metric={{replicationAttrs.lastWAL}} />
+            <Dashboard.secondaryCard
+              @cluster={{cluster}}
+              @replicationAttrs={{replicationAttrs}} />
+          {{/if}}
         </Page.dashboard>
       </ReplicationPage>
     </div>

diff --git a/ui/lib/replication/addon/templates/mode.hbs b/ui/lib/replication/addon/templates/mode.hbs
@@ -10,18 +10,19 @@
         <span class="tag is-light has-text-grey-dark" data-test-replication-mode-display=true>
             {{model.replicationAttrs.modeForUrl}}
         </span>
-        {{#if secondaryId}}
+        {{#if model.replicationAttrs.secondaryId}}
           <span class="tag is-light has-text-grey-dark">
             <code>
               {{model.replicationAttrs.secondaryId}}
             </code>
           </span>
+        {{else}}
+          <span class="tag is-light">
+            <code class="has-text-grey-dark">
+              {{model.replicationAttrs.clusterIdDisplay}}
+            </code>
+          </span>
         {{/if}}
-        <span class="tag is-light">
-          <code class="has-text-grey-dark">
-            {{model.replicationAttrs.clusterIdDisplay}}
-          </code>
-        </span>
       </h1>
     </p.levelLeft>
   </PageHeader>

diff --git a/ui/tests/acceptance/enterprise-replication-test.js b/ui/tests/acceptance/enterprise-replication-test.js
@@ -182,7 +182,6 @@ module('Acceptance | Enterprise | replication', function(hooks) {
     await visit('vault/replication/performance');
     // enable perf replication
     await fillIn('[data-test-replication-cluster-mode-select]', 'primary');
-
     await click('[data-test-replication-enable]');
     await pollCluster(this.owner);
 
@@ -192,22 +191,46 @@ module('Acceptance | Enterprise | replication', function(hooks) {
     await click('[data-test-replication-enable]');
     await pollCluster(this.owner);
     await visit('/vault/replication/dr/manage');
+
     assert.ok(findAll('[data-test-demote-warning]').length, 'displays the demotion warning');
   });
 
-  test('navigating to dr secondary details page', async function(assert) {
+  test('navigating to dr secondary details page when dr secondary is not enabled', async function(assert) {
     // enable dr replication
+
     await visit('/vault/replication/dr');
     await fillIn('[data-test-replication-cluster-mode-select]', 'primary');
     await click('[data-test-replication-enable]');
     await pollCluster(this.owner);
-
     await visit('/vault/replication-dr-promote/details');
+
     assert.dom('[data-test-component="empty-state"]').exists();
     assert.equal(
       find('[data-test-empty-state-message]').textContent.trim(),
       'This Disaster Recovery secondary has not been enabled.  You can do so from the Disaster Recovery Primary.',
-      'renders default message specific to when no replication is enabled'
+      'renders message when replication is enabled'
     );
   });
+
+  test('render performance secondary and navigate to the details page', async function(assert) {
+    // const secondaryName = 'firstSecondary';
+
+    // enable perf replication
+    await visit('/vault/replication');
+    await click('[data-test-replication-type-select="performance"]');
+    await fillIn('[data-test-replication-cluster-mode-select]', 'primary');
+    await click('[data-test-replication-enable]');
+    await pollCluster(this.owner);
+    await settled();
+    await click('[data-test-replication-link="manage"]');
+
+    let demote = document.querySelectorAll('[data-test-confirm-action-trigger="true"]')[1];
+    await click(demote);
+    await click('[data-test-confirm-button="true"]');
+    await click('[data-test-replication-link="details"]');
+    assert.dom('[data-test-replication-dashboard]').exists();
+
+    assert.dom('[data-test-selectable-card-container="secondary"]').exists();
+    // ARG TODO: when designs updated to show where cluster name goes, add as something you search for e.g. "secondaryName"
+  });
 });
diff --git a/ui/tests/acceptance/replication/dr/secondary-test.js b/ui/tests/acceptance/replication/dr/secondary-test.js
diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js
@@ -6,6 +6,8 @@ import hbs from 'htmlbars-inline-precompile';
 const REPLICATION_DETAILS = {
   state: 'stream-wals',
   primaryClusterAddr: 'https://127.0.0.1:8201',
+  merkleRoot: '352f6e58ba2e8ec3935e05da1d142653dc76fe17',
+  clusterId: '68999e13-a09d-b5e4-d66c-b35da566a177',
 };
 
 const REPLICATION_DETAILS_SYNCING = {
@@ -29,15 +31,9 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
     @clusterMode={{clusterMode}}
     @isSecondary={{isSecondary}}
     />`);
-
     assert.dom('[data-test-replication-dashboard]').exists();
     assert.dom('[data-test-table-rows').exists();
-    assert
-      .dom('[data-test-primary-cluster-address]')
-      .includesText(
-        REPLICATION_DETAILS.primaryClusterAddr,
-        `shows the correct primary cluster address value`
-      );
+    assert.dom('[data-test-selectable-card-container="secondary"]').exists();
     assert.dom('[data-test-replication-doc-link]').exists();
     assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render');
   });

diff --git a/ui/tests/integration/components/replication-secondary-card-test.js b/ui/tests/integration/components/replication-secondary-card-test.js
@@ -8,25 +8,20 @@ const TITLE = 'States';
 const REPLICATION_DETAILS = {
   state: 'stream-wals',
   connection_state: 'ready',
-  lastWAL: 0,
   lastRemoteWAL: 10,
-  delta: 10,
+  primaryClusterAddr: 'https://127.0.0.1:8201',
 };
 
 const STATE_ERROR = {
   state: 'idle',
   connection_state: 'ready',
-  lastWAL: 0,
   lastRemoteWAL: 10,
-  delta: 10,
 };
 
 const CONNECTION_ERROR = {
   state: 'stream-wals',
   connection_state: 'transient_failure',
-  lastWAL: 0,
   lastRemoteWAL: 10,
-  delta: 10,
 };
 
 module('Integration | Enterprise | Component | replication-secondary-card', function(hooks) {
@@ -48,15 +43,14 @@ module('Integration | Enterprise | Component | replication-secondary-card', func
       .includesText(REPLICATION_DETAILS.connection_state, `shows the correct connection value`);
   });
 
-  test('it renders with lastWAL, lastRemoteWAL and delta set when title is not States', async function(assert) {
+  test('it renders with lastRemoteWAL and primaryAddress set when title is not States', async function(assert) {
     await render(hbs`<ReplicationSecondaryCard @replicationDetails={{replicationDetails}} />`);
-    assert
-      .dom('[data-test-lastWAL]')
-      .includesText(REPLICATION_DETAILS.lastWAL, `shows the correct lastWAL value`);
     assert
       .dom('[data-test-lastRemoteWAL]')
       .includesText(REPLICATION_DETAILS.lastRemoteWAL, `shows the correct lastRemoteWAL value`);
-    assert.dom('[data-test-delta]').includesText(REPLICATION_DETAILS.delta, `shows the correct delta value`);
+    assert
+      .dom('[data-test-primaryClusterAddr]')
+      .includesText(REPLICATION_DETAILS.primaryClusterAddr, `shows the correct primaryClusterAddr value`);
   });
 
   test('it renders tooltip with check-circle-outline when state is stream-wals', async function(assert) {