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
@@ -23,9 +23,20 @@
   .selectable-card-container {
     margin-top: $spacing-xl;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    grid-template-rows: 1fr;
-    grid-gap: $spacing-xl;
+
+    &.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: $spacing-xl; //ARG TODO double check ok
+    }
 
     .card-container {
       display: grid;

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
@@ -1,12 +1,4 @@
 .replication {
-  .selectable-card-container {
-    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-header.js b/ui/lib/core/addon/components/replication-header.js
@@ -4,5 +4,6 @@ import layout from '../templates/components/replication-header';
 export default Component.extend({
   layout,
   isSecondary: null,
+  secondaryId: null,
   'data-test-replication-header': true,
 });
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
@@ -9,15 +9,15 @@
         data-test-isReindexing />
     </div>
   {{/if}}
-
-  <div class="selectable-card-container">
+  <div
+    class="selectable-card-container {{if isSecondary 'secondary' 'primary'}}"
+    data-test-selectable-card-container={{if isSecondary 'secondary' 'primary'}}>
     {{yield (hash
       card=(component componentToRender replicationDetails=replicationDetails)
     )}}
     {{#if (not isSecondary)}}
       {{yield (hash secondaryCard=(component 'known-secondaries-card'))}}
     {{/if}}
-
   </div>
   {{#if isSyncing}}
     <div class="syncing-alert">

diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -33,11 +33,11 @@
   <p.levelLeft>
     <h1 class="title is-3">
       {{title}}
-      <span class="tag" data-test-mode>
-        {{if isSecondary 'Secondary' 'Primary'}}
+      <span class="tag is-light has-text-grey-dark" data-test-mode>
+        {{if isSecondary 'secondary' 'primary'}}
       </span>
-      <span class="tag" data-test-clusterId>
-        {{data.dr.clusterIdDisplay}}
+      <span class="tag is-light has-text-grey-dark" data-test-secondaryId>
+        {{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
@@ -58,7 +58,8 @@
             href={{primaryClusterAddr}}
             class="link"
             target="_blank"
-            rel="noreferrer noopener"
+            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 has-text-grey-dark">
+            <code>
+              {{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,47 @@ 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) {
+    // 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();
+    assert.ok(
+      find('[data-test-replication-mode-display]').textContent.includes('secondary'),
+      'it displays the cluster mode correctly'
     );
   });
 });
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 IS_SYNCING = {
@@ -40,10 +42,24 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
 
     assert.dom('[data-test-replication-dashboard]').exists();
     assert.dom('[data-test-table-rows').exists();
+    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');
   });
 
+  test('it renders the primary selectable-card-container when the cluster is a primary', async function(assert) {
+    this.set('replicationDetails', REPLICATION_DETAILS);
+    this.set('isSecondary', false);
+
+    await render(hbs`<ReplicationDashboard
+      @replicationDetails={{replicationDetails}}
+      @clusterMode={{clusterMode}}
+      @isSecondary={{isSecondary}}
+    />`);
+
+    assert.dom('[data-test-selectable-card-container="primary"]').exists();
+  });
+
   test('it renders an alert banner if the dashboard is syncing', async function(assert) {
     this.set('replicationDetails', IS_SYNCING);
 

diff --git a/ui/tests/integration/components/replication-header-test.js b/ui/tests/integration/components/replication-header-test.js
@@ -9,12 +9,12 @@ const DATA = {
     rm: {
       mode: 'dr',
     },
-    clusterIdDisplay: 12345,
   },
   unsealed: 'good',
 };
 
 const TITLE = 'Disaster Recovery';
+const SECONDARY_ID = '123abc';
 
 module('Integration | Enterprise | Component | replication-header', function(hooks) {
   setupRenderingTest(hooks);
@@ -23,6 +23,7 @@ module('Integration | Enterprise | Component | replication-header', function(hoo
     this.set('data', DATA);
     this.set('title', TITLE);
     this.set('isSecondary', true);
+    this.set('secondaryId', SECONDARY_ID);
   });
 
   test('it renders', async function(assert) {
@@ -31,14 +32,13 @@ module('Integration | Enterprise | Component | replication-header', function(hoo
     assert.dom('[data-test-replication-header]').exists();
   });
 
-  test('it renders with clusterId and mode when set', async function(assert) {
-    await render(hbs`<ReplicationHeader @data={{data}} @isSecondary={{isSecondary}} @title={{title}}/>`);
-
-    assert
-      .dom('[data-test-clusterId]')
-      .includesText(DATA.dr.clusterIdDisplay, `shows the correct clusterId value`);
+  test('it renders with mode and secondaryId when set', async function(assert) {
+    await render(
+      hbs`<ReplicationHeader @data={{data}} @isSecondary={{isSecondary}} @title={{title}} @secondaryId={{secondaryId}}/>`
+    );
 
-    assert.dom('[data-test-mode]').includesText('Secondary', `shows the correct mode value`);
+    assert.dom('[data-test-secondaryId]').includesText(SECONDARY_ID, `shows the correct secondaryId value`);
+    assert.dom('[data-test-mode]').includesText('secondary', `shows the correct mode value`);
   });
 
   test('it does not show tabs when showTabs is not set', async function(assert) {