Ui/dr primary components

ui/app/styles/components/known-secondaries-card.scss

@@ -0,0 +1,9 @@
+.selectable-card.secondaries {
+  grid-column: 2/3;
+  grid-row: 1/3;
+
+  @include until($mobile) {
+    grid-column: 1/1;
+    grid-row: 1/1;
+  }
+}

ui/app/styles/components/replication-primary-card.scss

@@ -11,16 +11,5 @@
     .card-title {
       margin-bottom: 2rem;
     }
-
-    // TODO: move this when it is its own component
-    &.secondaries {
-      grid-column: 2/3;
-      grid-row: 1/3;
-
-      @include until($mobile) {
-        grid-column: 1/1;
-        grid-row: 1/1;
-      }
-    }
   }
 }

ui/app/styles/components/vlt-table.scss

@@ -1,4 +1,6 @@
 .vlt-table {
+  margin-bottom: $spacing-m;
+
   .is-collapsed {
     visibility: collapse;
     height: 0;

ui/app/styles/core.scss

@@ -63,6 +63,7 @@
 @import './components/info-table-row';
 @import './components/input-hint';
 @import './components/kmip-role-edit';
+@import './components/known-secondaries-card.scss';
 @import './components/linked-block';
 @import './components/list-item-row';
 @import './components/list-pagination';

ui/lib/replication/addon/components/known-secondaries-card.js

@@ -0,0 +1,19 @@
+import Component from '@ember/component';
+
+/**
+ * @module KnownSecondariesCard
+ * KnownSecondariesCard components are used on the Replication Details dashboards to display a table of known secondary clusters.
+ *
+ * @example
+ * ```js
+ * <KnownSecondariesCard @cluster={{clusterModel}} @replicationAttrs={{replicationAttrs}} />
+ * ```
+ * @param {object} cluster=null - The cluster model.
+ * @param {object} replicationAttrs=null - The attributes passed directly from the cluster model. These are passed down to the KnownSecondariesTable.
+ */
+
+export default Component.extend({
+  tagName: '',
+  cluster: null,
+  replicationAttrs: null,
+});

ui/lib/replication/addon/components/known-secondaries-table.js

@@ -1,5 +1,21 @@
 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.
+ *
+ * @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.
+ */
 
 export default Component.extend({
-  data: null,
+  replicationAttrs: null,
+  knownSecondaries: computed('replicationAttrs', function() {
+    const { replicationAttrs } = this;
+    return replicationAttrs.knownSecondaries;
+  }),
 });

ui/lib/replication/addon/routes/mode/index.js

@@ -1,7 +1,37 @@
+import { setProperties } from '@ember/object';
+import { hash } from 'rsvp';
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default Route.extend({
+  store: service(),
   model() {
-    return this.modelFor('mode');
+    const replicationMode = this.paramsFor('mode').replication_mode;
+
+    return hash({
+      cluster: this.modelFor('mode'),
+      canAddSecondary: this.store
+        .findRecord('capabilities', `sys/replication/${replicationMode}/primary/secondary-token`)
+        .then(c => c.get('canUpdate')),
+      canRevokeSecondary: this.store
+        .findRecord('capabilities', `sys/replication/${replicationMode}/primary/revoke-secondary`)
+        .then(c => c.get('canUpdate')),
+    }).then(({ cluster, canAddSecondary, canRevokeSecondary }) => {
+      setProperties(cluster, {
+        canRevokeSecondary,
+        canAddSecondary,
+      });
+      return cluster;
+    });
+  },
+  afterModel(model) {
+    const replicationMode = this.paramsFor('mode').replication_mode;
+    if (
+      !model.get(`${replicationMode}.isPrimary`) ||
+      model.get(`${replicationMode}.replicationDisabled`) ||
+      model.get(`${replicationMode}.replicationUnsupported`)
+    ) {
+      return this.transitionTo('mode', replicationMode);
+    }
   },
 });

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

@@ -0,0 +1,23 @@
+<div class="selectable-card is-rounded secondaries">
+  <div class="level">
+    <code class="card-title title is-5">Known Secondaries</code>
+    <ToolbarLink @params={{array "mode.manage" cluster.replicationMode}} @data-test-manage-link="true">
+      Manage
+    </ToolbarLink>
+  </div>
+  <div>
+    {{#unless replicationAttrs.knownSecondaries}}
+      <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}} />
+    {{/unless}}
+  </div>
+  {{#if cluster.canAddSecondary}}
+    {{#link-to "mode.secondaries.add" cluster.replicationMode class="link add-secondaries"}}
+      Add secondary
+    {{/link-to}}
+  {{/if}}
+</div>
+

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

@@ -9,8 +9,8 @@
       </tr>
     </thead>
     <tbody>
-      {{!-- TODO: populate rows with real data via replicationAttrs.secondaryId}} --}}
-      {{#each in data.knownSecondaries as |secondary|}}
+      {{!-- TODO: figure out what goes in URL and connected --}}
+      {{#each knownSecondaries as |secondary|}}
           <tr>
             <th scope="row">
               <code>{{secondary}}</code>

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

@@ -349,28 +349,13 @@
         <ReplicationPrimaryCard
           @title='State'
           @description='Updated every ten seconds.'
-          @metric={{replicationAttrs.state}} />
+          @metric={{replicationAttrs.state}}/>
         <ReplicationPrimaryCard
           @title='Last WAL entry'
           @description='Index of last Write Ahead Logs entry written on local storage.'
-          @metric={{replicationAttrs.lastWAL}}
-          />
-
-        {{!-- TODO: move this into its own component --}}
-        <div class="selectable-card is-rounded secondaries">
-          <div class="level">
-          <code class="card-title title is-5">Known Secondaries</code>
-            <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
-              Manage
-            </ToolbarLink>
-          </div>
-        <div>
-            {{!-- TODO: rename to KnownSecondariesTable and pass in model or model.dr to populate with real data --}}
-            <KnownSecondariesTable @data={{replicationAttrs}}/>
-          </div>
-        </div>
+          @metric={{replicationAttrs.lastWAL}}/>
+        <KnownSecondariesCard @cluster={{cluster}} @replicationAttrs={{replicationAttrs}} />
       </div>
-      {{!-- TODO: improve this API to pass in model.dr, or rename metric_1 to merkleRoot etc --}}
       <ReplicationTableRows @data={{replicationAttrs}}/>
     </div>
   {{/if}}