Add real connected state and API address (#9219)

* fix title of secondary card

* show connected status

* fix tests

Author: Noelle Daley

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/),

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;
+  }
 }

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"

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,
 });

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}}

ui/lib/replication/addon/templates/components/known-secondaries-table.hbs

@@ -17,22 +17,31 @@
       </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">
-            <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}}>
-              <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.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}}

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: [],

ui/tests/integration/components/known-secondaries-table-test.js

@@ -5,46 +5,52 @@ 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('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}} />`);
 
-    REPLICATION_ATTRS.secondaries.forEach(secondary => {
+    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'