From 8567f6ec3c8ba48dd2b1ee7b3671d93df8ec5eab Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 12 Jun 2020 16:50:35 -0700
Subject: [PATCH 1/3] fix title of secondary card

---
 .../templates/vault/cluster/replication-dr-promote/details.hbs  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
index 5efe8b721ff2..8ee73bd585c4 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -32,7 +32,7 @@
       {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
         @componentToRender='replication-secondary-card' as |Dashboard|>
         <Dashboard.card
-          @title="States"
+          @title="Status"
         />
         <Dashboard.card
           @title="Primary cluster"

From 81d1719b8d7d8502da3ea2d81a0149ad39e87076 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 12 Jun 2020 16:51:14 -0700
Subject: [PATCH 2/3] show connected status

---
 ui/app/models/replication-attributes.js          |  1 +
 .../addon/components/known-secondaries-table.js  | 15 +++++----------
 .../components/known-secondaries-card.hbs        |  4 ++--
 .../components/known-secondaries-table.hbs       |  8 ++++----
 .../components/known-secondaries-table-test.js   | 16 +++++++---------
 5 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/ui/app/models/replication-attributes.js b/ui/app/models/replication-attributes.js
index ba6f0f1794c2..55bba8104b78 100644
--- a/ui/app/models/replication-attributes.js
+++ b/ui/app/models/replication-attributes.js
@@ -18,6 +18,7 @@ export default Fragment.extend({
   isPrimary: match('mode', /primary/),
 
   knownSecondaries: attr('array'),
+  secondaries: attr('array'),
 
   // secondary attrs
   isSecondary: match('mode', /secondary/),
diff --git a/ui/lib/replication/addon/components/known-secondaries-table.js b/ui/lib/replication/addon/components/known-secondaries-table.js
index 3c6d67e3d434..8b975e8c9f04 100644
--- a/ui/lib/replication/addon/components/known-secondaries-table.js
+++ b/ui/lib/replication/addon/components/known-secondaries-table.js
@@ -1,23 +1,18 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 
 /**
  * @module KnownSecondariesTable
- * KnownSecondariesTable components are used on the Replication Details dashboards to display a table of known secondary clusters.
+ * KnownSecondariesTable components are used on the Replication Details dashboards
+ * to display a table of known secondary clusters.
  *
  * @example
  * ```js
  * <KnownSecondariesTable @replicationAttrs={{replicationAttrs}} />
  * ```
- * @param {object} replicationAttrs=null - The attributes passed directly from the cluster model used to access the array of known secondaries. We use this to grab the secondaries.
+ * @param {array} secondaries=null - The array of secondaries from the replication
+ * status endpoint. Contains the secondary api_address, id and connected_state.
  */
 
 export default Component.extend({
-  replicationAttrs: null,
-  secondaries: computed('replicationAttrs', function() {
-    const { replicationAttrs } = this;
-    // TODO: when the backend changes are merged we will only need replicationAttrs.secondaries instead of knownSecondaries
-    const secondaries = replicationAttrs.secondaries || replicationAttrs.knownSecondaries;
-    return secondaries;
-  }),
+  secondaries: null,
 });
diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs
index aa5f561976db..b38beed2d818 100644
--- a/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs
+++ b/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs
@@ -7,12 +7,12 @@
   </div>
   <div class="secondaries-table">
     {{!-- TODO remove this or when backend api changes are merged --}}
-    {{#unless (or replicationAttrs.knownSecondaries replicationAttrs.secondaries)}}
+    {{#unless replicationAttrs.secondaries}}
       <EmptyState
         @title="No known {{cluster.replicationMode}} secondary clusters associated with this cluster"
         @message="Associated secondary clusters will be listed here. Add your first secondary cluster to get started." />
     {{else}}
-      <KnownSecondariesTable @replicationAttrs={{replicationAttrs}} />
+      <KnownSecondariesTable @secondaries={{replicationAttrs.secondaries}} />
     {{/unless}}
   </div>
   {{#if cluster.canAddSecondary}}
diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
index bb3b5f652b26..6524fce17e56 100644
--- a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
+++ b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
@@ -22,17 +22,17 @@
       {{#each secondaries as |secondary|}}
         <tr>
           <th scope="row">
-            <code data-test-secondaries={{concat 'row-for-' (or secondary.id secondary)}}>
-              {{or secondary.id secondary}}
+            <code data-test-secondaries={{concat 'row-for-' secondary.node_id}}>
+              {{secondary.node_id}}
             </code>
           </th>
           <td>
-            <a href={{secondary.api_address}} data-test-secondaries={{concat 'api-address-for-' secondary.id}}>
+            <a href={{secondary.api_address}} data-test-secondaries={{concat 'api-address-for-' secondary.node_id}}>
               <code class="is-word-break">{{secondary.api_address}}</code>
             </a>
           </td>
           <td>
-            <code data-test-secondaries={{concat 'connection-status-for-' (or secondary.id secondary)}}>{{secondary.connection_status}}</code>
+            <code data-test-secondaries={{concat 'connection-status-for-' (or secondary.node_id secondary)}}>{{secondary.connection_status}}</code>
           </td>
         </tr>
       {{/each}}
diff --git a/ui/tests/integration/components/known-secondaries-table-test.js b/ui/tests/integration/components/known-secondaries-table-test.js
index c66881201d0e..798eb15a3fe8 100644
--- a/ui/tests/integration/components/known-secondaries-table-test.js
+++ b/ui/tests/integration/components/known-secondaries-table-test.js
@@ -5,19 +5,17 @@ import engineResolverFor from 'ember-engines/test-support/engine-resolver-for';
 import hbs from 'htmlbars-inline-precompile';
 const resolver = engineResolverFor('replication');
 
-const REPLICATION_ATTRS = {
-  secondaries: [
-    { id: 'secondary-1', api_address: 'https://stuff.com/', connection_status: 'connected' },
-    { id: '2nd', api_address: 'https://10.0.0.2:1234/', connection_status: 'disconnected' },
-    { id: '_three_', api_address: 'https://10.0.0.2:1000/', connection_status: 'connected' },
-  ],
-};
+const SECONDARIES = [
+  { node_id: 'secondary-1', api_address: 'https://127.0.0.1:52304', connection_status: 'connected' },
+  { node_id: '2nd', connection_status: 'disconnected' },
+  { node_id: '_three_', api_address: 'http://127.0.0.1:8202', connection_status: 'connected' },
+];
 
 module('Integration | Component | replication known-secondaries-table', function(hooks) {
   setupRenderingTest(hooks, { resolver });
 
   hooks.beforeEach(function() {
-    this.set('replicationAttrs', REPLICATION_ATTRS);
+    this.set('replicationAttrs', SECONDARIES);
   });
 
   test('it renders a table of known secondaries', async function(assert) {
@@ -29,7 +27,7 @@ module('Integration | Component | replication known-secondaries-table', function
   test('it shows the secondary URL and connection_status', async function(assert) {
     await render(hbs`<KnownSecondariesTable @replicationAttrs={{replicationAttrs}} />`);
 
-    REPLICATION_ATTRS.secondaries.forEach(secondary => {
+    SECONDARIES.forEach(secondary => {
       assert.equal(
         this.element.querySelector(`[data-test-secondaries=row-for-${secondary.id}]`).innerHTML.trim(),
         secondary.id,

From 69c30fb2ccad69fdc6c4a37b984f27f1a6d9f222 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 12 Jun 2020 17:58:39 -0700
Subject: [PATCH 3/3] fix tests

---
 .../components/known-secondaries-card.scss    |  5 ++++
 .../components/known-secondaries-table.hbs    | 21 +++++++++----
 .../components/known-secondaries-card-test.js | 21 ++-----------
 .../known-secondaries-table-test.js           | 30 ++++++++++++-------
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/ui/app/styles/components/known-secondaries-card.scss b/ui/app/styles/components/known-secondaries-card.scss
index 0d2105125bc0..63f1025be2f2 100644
--- a/ui/app/styles/components/known-secondaries-card.scss
+++ b/ui/app/styles/components/known-secondaries-card.scss
@@ -10,4 +10,9 @@
   .secondaries-table {
     margin-bottom: $spacing-s;
   }
+
+  .link {
+    font-size: $size-7;
+    text-decoration: none;
+  }
 }
diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
index 6524fce17e56..1637437bcf11 100644
--- a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
+++ b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
@@ -17,8 +17,6 @@
       </tr>
     </thead>
     <tbody>
-      {{! TODO: this should be compliant with the new api attributes, but we should verify this
-      when those attributes are merged. At that point we can also get rid of all the 'or's in here. --}}
       {{#each secondaries as |secondary|}}
         <tr>
           <th scope="row">
@@ -27,12 +25,23 @@
             </code>
           </th>
           <td>
-            <a href={{secondary.api_address}} data-test-secondaries={{concat 'api-address-for-' secondary.node_id}}>
-              <code class="is-word-break">{{secondary.api_address}}</code>
-            </a>
+            {{#if secondary.api_address}}
+              <a
+                class="link"
+                href={{concat secondary.api_address '/ui/'}}
+                target="_blank"
+                rel="noopener"
+                data-test-secondaries={{concat 'api-address-for-' secondary.node_id}}>
+                <p class="is-word-break">{{secondary.api_address}}</p>
+              </a>
+            {{else}}
+              <p class="is-word-break">{{secondary.api_address}}</p>
+            {{/if}}
           </td>
           <td>
-            <code data-test-secondaries={{concat 'connection-status-for-' (or secondary.node_id secondary)}}>{{secondary.connection_status}}</code>
+            <code data-test-secondaries={{concat 'connection-status-for-' (or secondary.node_id secondary)}}>
+              {{secondary.connection_status}}
+            </code>
           </td>
         </tr>
       {{/each}}
diff --git a/ui/tests/integration/components/known-secondaries-card-test.js b/ui/tests/integration/components/known-secondaries-card-test.js
index 6bfae97dc890..47e7e707bf48 100644
--- a/ui/tests/integration/components/known-secondaries-card-test.js
+++ b/ui/tests/integration/components/known-secondaries-card-test.js
@@ -12,9 +12,9 @@ const CLUSTER = {
 
 const REPLICATION_ATTRS = {
   secondaries: [
-    { id: 'secondary-1', api_address: 'https://stuff.com/', connection_status: 'connected' },
-    { id: '2nd', api_address: 'https://10.0.0.2:1234/', connection_status: 'disconnected' },
-    { id: '_three_', api_address: 'https://10.0.0.2:1000/', connection_status: 'connected' },
+    { node_id: 'secondary-1', api_address: 'https://stuff.com/', connection_status: 'connected' },
+    { node_id: '2nd', connection_status: 'disconnected' },
+    { node_id: '_three_', api_address: 'https://10.0.0.2:1000/', connection_status: 'connected' },
   ],
 };
 
@@ -35,21 +35,6 @@ module('Integration | Component | replication known-secondaries-card', function(
     assert.dom('[data-test-manage-link]').exists('shows manage link');
   });
 
-  // TODO: this test can be deleted once the 'secondaries' array replaces 'knownSecondaries'
-  // in the backend
-  test('it renders a known secondaries table even if api address and connection_status are missing', async function(assert) {
-    const missingSecondariesInfo = {
-      knownSecondaries: ['secondary-1', '2nd', '_three_'],
-    };
-    this.set('replicationAttrs', missingSecondariesInfo);
-
-    await render(hbs`<KnownSecondariesCard @cluster={{cluster}} @replicationAttrs={{replicationAttrs}} />`);
-
-    assert
-      .dom('[data-test-known-secondaries-table]')
-      .exists('shows known secondaries table when there are known secondaries');
-  });
-
   test('it renders an empty state if there are no known secondaries', async function(assert) {
     const noSecondaries = {
       secondaries: [],
diff --git a/ui/tests/integration/components/known-secondaries-table-test.js b/ui/tests/integration/components/known-secondaries-table-test.js
index 798eb15a3fe8..41af54cfb586 100644
--- a/ui/tests/integration/components/known-secondaries-table-test.js
+++ b/ui/tests/integration/components/known-secondaries-table-test.js
@@ -15,34 +15,42 @@ module('Integration | Component | replication known-secondaries-table', function
   setupRenderingTest(hooks, { resolver });
 
   hooks.beforeEach(function() {
-    this.set('replicationAttrs', SECONDARIES);
+    this.set('secondaries', SECONDARIES);
   });
 
   test('it renders a table of known secondaries', async function(assert) {
-    await render(hbs`<KnownSecondariesTable @replicationAttrs={{replicationAttrs}} />`);
+    await render(hbs`<KnownSecondariesTable @secondaries={{secondaries}} />`);
 
     assert.dom('[data-test-known-secondaries-table]').exists();
   });
 
   test('it shows the secondary URL and connection_status', async function(assert) {
-    await render(hbs`<KnownSecondariesTable @replicationAttrs={{replicationAttrs}} />`);
+    await render(hbs`<KnownSecondariesTable @secondaries={{secondaries}} />`);
 
     SECONDARIES.forEach(secondary => {
       assert.equal(
-        this.element.querySelector(`[data-test-secondaries=row-for-${secondary.id}]`).innerHTML.trim(),
-        secondary.id,
+        this.element.querySelector(`[data-test-secondaries=row-for-${secondary.node_id}]`).innerHTML.trim(),
+        secondary.node_id,
         'shows a table row and ID for each known secondary'
       );
 
-      assert.equal(
-        this.element.querySelector(`[data-test-secondaries=api-address-for-${secondary.id}]`).href,
-        secondary.api_address,
-        'renders a URL to the secondary UI'
-      );
+      if (secondary.api_address) {
+        const expectedUrl = `${secondary.api_address}/ui/`;
+
+        assert.equal(
+          this.element.querySelector(`[data-test-secondaries=api-address-for-${secondary.node_id}]`).href,
+          expectedUrl,
+          'renders a URL to the secondary UI'
+        );
+      } else {
+        assert.notOk(
+          this.element.querySelector(`[data-test-secondaries=api-address-for-${secondary.node_id}]`)
+        );
+      }
 
       assert.equal(
         this.element
-          .querySelector(`[data-test-secondaries=connection-status-for-${secondary.id}]`)
+          .querySelector(`[data-test-secondaries=connection-status-for-${secondary.node_id}]`)
           .innerHTML.trim(),
         secondary.connection_status,
         'shows the connection status'