Ui/replication/refactor dashboard components

ui/app/templates/vault/cluster/replication-dr-promote/details.hbs

@@ -38,15 +38,6 @@
           <Dashboard.card
             @title="Write-Ahead Logs (WALs)"
           />
-          {{#if Dashboard.isSyncing }}
-            <AlertBanner
-              @title="Syncing in progress"
-              @type="info"
-              @secondIconType="loading"
-              @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
-              @class="has-top-margin-xl"
-            />
-          {{/if}}
           <Dashboard.rows/>
         </Page.dashboard>
       {{/if}}

ui/lib/core/addon/components/replication-dashboard.js

@@ -6,15 +6,16 @@ import layout from '../templates/components/replication-dashboard';
 export default Component.extend({
   layout,
   data: null,
-  dr: computed('data', function() {
-    let dr = this.data.dr;
-    if (!dr) {
-      return false;
-    }
-    return dr;
+  replicationDetails: null,
+  isSecondary: null,
+  dr: null,
+  isSyncing: computed('replicationDetails', 'isSecondary', function() {
+    const { state } = this.replicationDetails;
+    const isSecondary = this.isSecondary;
+    return isSecondary && state && clusterStates([state]).isSyncing;
   }),
-  isSyncing: computed('dr', function() {
-    const { state } = this.dr;
-    return state && clusterStates([state]).isSyncing;
+  isReindexing: computed('data', function() {
+    // TODO: make this a real value
+    return true;
   }),
 });

ui/lib/core/addon/components/replication-header.js

@@ -9,20 +9,10 @@
  */
 
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import layout from '../templates/components/replication-header';
 
 export default Component.extend({
   layout,
   data: null,
-  isSecondary: computed('data', function() {
-    let data = this.data;
-    let dr = this.data.dr;
-    if (!dr) {
-      return false;
-    }
-    if (dr.mode === 'secondary' && data.rm.mode == 'dr') {
-      return true;
-    }
-  }),
+  isSecondary: null,
 });

ui/lib/core/addon/components/replication-page.js

@@ -9,28 +9,35 @@ const MODE = {
 
 export default Component.extend({
   layout,
-  mode: computed('model', function() {
-    let mode = this.model.rm.mode;
+  replicationMode: computed('model.{replicationMode}', function() {
+    // dr or performance 🤯
+    let mode = this.model.replicationMode;
     return MODE[mode];
   }),
-  dr: computed('model', function() {
-    let dr = this.model.dr;
-    if (!dr) {
-      return false;
-    }
-    return dr;
+  clusterMode: computed('model.{replicationAttrs}', function() {
+    // primary or secondary
+    const { model } = this;
+    return model.replicationAttrs.mode;
+  }),
+  isSecondary: computed('clusterMode', function() {
+    const { clusterMode } = this;
+    return clusterMode === 'secondary';
+  }),
+  replicationDetails: computed('model.{replicationMode}', function() {
+    const { model } = this;
+    const replicationMode = model.replicationMode;
+    return model[replicationMode];
   }),
-  isDisabled: computed('dr', function() {
-    // this conditional only applies to DR secondaries.
-    if (this.dr.mode === 'disabled' || this.dr.mode === 'primary') {
+  isDisabled: computed('replicationDetails', function() {
+    if (this.replicationDetails.mode === 'disabled' || this.replicationDetails.mode === 'primary') {
       return true;
     }
     return false;
   }),
-  message: computed('model', function() {
+  message: computed('model.{anyReplicationEnabled}', 'replicationMode', function() {
     if (this.model.anyReplicationEnabled) {
-      return `This ${this.mode} secondary has not been enabled.  You can do so from the Disaster Recovery Primary.`;
+      return `This ${this.replicationMode} secondary has not been enabled.  You can do so from the ${this.replicationMode} Primary.`;
     }
-    return `This cluster has not been enabled as a ${this.mode} Secondary. You can do so by enabling replication and adding a secondary from the ${this.mode} Primary.`;
+    return `This cluster has not been enabled as a ${this.replicationMode} Secondary. You can do so by enabling replication and adding a secondary from the ${this.replicationMode} Primary.`;
   }),
 });

ui/lib/core/addon/components/replication-secondary-card.js

@@ -5,20 +5,25 @@ import { clusterStates } from 'core/helpers/cluster-states';
 
 export default Component.extend({
   layout,
-  data: null,
-  state: computed('dr', function() {
-    return this.dr && this.dr.state ? this.dr.state : 'unknown';
+  title: null,
+  replicationDetails: null,
+  state: computed('replicationDetails', function() {
+    return this.replicationDetails && this.replicationDetails.state
+      ? this.replicationDetails.state
+      : 'unknown';
   }),
-  connection: computed('data', function() {
-    return this.dr.connection_state ? this.dr.connection_state : 'unknown';
+  connection: computed('replicationDetails', function() {
+    return this.replicationDetails.connection_state ? this.replicationDetails.connection_state : 'unknown';
   }),
-  lastWAL: computed('dr', function() {
-    return this.dr && this.dr.lastWAL ? this.dr.lastWAL : 0;
+  lastWAL: computed('replicationDetails', function() {
+    return this.replicationDetails && this.replicationDetails.lastWAL ? this.replicationDetails.lastWAL : 0;
   }),
-  lastRemoteWAL: computed('dr', function() {
-    return this.dr && this.dr.lastRemoteWAL ? this.dr.lastRemoteWAL : 0;
+  lastRemoteWAL: computed('replicationDetails', function() {
+    return this.replicationDetails && this.replicationDetails.lastRemoteWAL
+      ? this.replicationDetails.lastRemoteWAL
+      : 0;
   }),
-  delta: computed('data', function() {
+  delta: computed('replicationDetails', function() {
     return Math.abs(this.get('lastWAL') - this.get('lastRemoteWAL'));
   }),
   inSyncState: computed('state', function() {
@@ -27,7 +32,7 @@ export default Component.extend({
     return this.state === 'stream-wals';
   }),
 
-  hasErrorClass: computed('data', 'title', 'state', 'connection', function() {
+  hasErrorClass: computed('replicationDetails', 'title', 'state', 'connection', function() {
     const { title, state, connection } = this;
 
     // only show errors on the state card

ui/lib/core/addon/components/replication-table-rows.js

@@ -5,21 +5,15 @@ import layout from '../templates/components/replication-table-rows';
 export default Component.extend({
   layout,
   classNames: ['replication-table-rows'],
-  data: null,
-  clusterDetails: computed('data', function() {
-    const { data } = this;
-    return data.dr || data;
+  replicationDetails: null,
+  clusterMode: null,
+  merkleRoot: computed('replicationDetails', function() {
+    return this.replicationDetails.merkleRoot || 'unknown';
   }),
-  mode: computed('clusterDetails', function() {
-    return this.clusterDetails.mode || 'unknown';
+  clusterId: computed('replicationDetails', function() {
+    return this.replicationDetails.clusterId || 'unknown';
   }),
-  merkleRoot: computed('clusterDetails', function() {
-    return this.clusterDetails.merkleRoot || 'unknown';
-  }),
-  clusterId: computed('clusterDetails', function() {
-    return this.clusterDetails.clusterId || 'unknown';
-  }),
-  syncProgress: computed('clusterDetails', function() {
-    return this.clusterDetails.syncProgress || false;
+  syncProgress: computed('replicationDetails', function() {
+    return this.replicationDetails.syncProgress || false;
   }),
 });

ui/lib/core/addon/templates/components/replication-dashboard.hbs

@@ -1,23 +1,46 @@
 <div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
-  <h2 class="has-text-weight-semibold is-size-4 has-bottom-margin-xs">Primary Cluster</h2>
-  <p class="has-text-grey is-size-8">If you set a primary_cluster_addr when enabling replication, it will appear here.</p>
+  {{#if isSecondary}}
+    <h2 class="has-text-weight-semibold is-size-4 has-bottom-margin-xs">
+        Primary Cluster
+    </h2>
+    <p class="has-text-grey is-size-8">
+      If you set a primary_cluster_addr when enabling replication, it will appear here.
+    </p>
+    {{#if replicationDetails.primaryClusterAddr}}
+      <code>{{replicationDetails.primaryClusterAddr}}</code>
+    {{else}}
+      <code>no known primary cluster address</code>
+    {{/if}}
+  {{/if}}
 
-  {{#if data.dr.primaryClusterAddr}}
-    <code>{{data.dr.primaryClusterAddr}}</code>
-  {{else}}
-    <code>no known primary cluster address</code>
+  {{!-- TODO check for actual reindexing status --}}
+  {{#if isReindexing}}
+    <AlertBanner
+      @title="Re-indexing in progress: Scanning"
+      @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."/>
   {{/if}}
 
   <div class="selectable-card-container has-top-margin-xl">
-    {{yield (hash 
-      card=(component componentToRender data=data dr=dr)
+    {{yield (hash
+      card=(component componentToRender replicationDetails=replicationDetails)
     )}}
-  </div>
-
-  {{yield (hash
-    isSyncing=isSyncing
-    rows=(component 'replication-table-rows' data=data)
-  )}}
+    {{#if (not isSecondary)}}
+      {{yield (hash secondaryCard=(component 'known-secondaries-card'))}}
+    {{/if}}
 
+  </div>
+  {{#if isSyncing}}
+    <AlertBanner
+      @title="Syncing in progress"
+      @type="info"
+      @secondIconType="loading"
+      @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
+      @class="has-top-margin-xl" />
+  {{/if}}
+  <ReplicationTableRows
+    @replicationDetails={{replicationDetails}}
+    @clusterMode={{clusterMode}} />
   <ReplicationDocLink />
 </div>

ui/lib/core/addon/templates/components/replication-header.hbs

@@ -34,7 +34,7 @@
     <h1 class="title is-3">
       {{title}}
       <span class="tag">
-        {{data.dr.mode}}
+        {{if isSecondary 'Secondary' 'Primary'}}
       </span>
       <span class="tag">
         {{data.dr.clusterIdDisplay}}

ui/lib/core/addon/templates/components/replication-page.hbs

@@ -1,9 +1,9 @@
 <div class="replication-page">
-{{yield (hash 
-  header=(component 'replication-header' data=model title=mode)
+{{yield (hash
+  header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
   toggle=(component 'replication-toggle')
-  dashboard=(component 'replication-dashboard' data=model dr=dr)
+  dashboard=(component 'replication-dashboard' data=model isSecondary=isSecondary replicationDetails=replicationDetails clusterMode=clusterMode)
   isDisabled=isDisabled
   message=message
 )}}
-</div>
+</div>

ui/lib/core/addon/templates/components/replication-table-rows.hbs

@@ -1,27 +1,21 @@
-{{#unless data}}
-  <EmptyState
-    @title="Data not available"
-  />
-{{else}}
-  <div class="has-top-margin-xl has-bottom-margin-s"
-    data-test-table-rows>
-    {{info-table-row
-      label="Merkle root index"
-      helperText="A snapshot in time of the merkle tree's root hash. Changes on every update to storage."
-      value=merkleRoot}}
-    {{info-table-row
-      label="Mode"
-      value=mode}}
-    {{info-table-row
-      label="Replication set"
-      helperText="The ID for the group of clusters communicating for this replication mode"
-      value=clusterId}}
-  </div>
+<div class="has-top-margin-xl has-bottom-margin-s"
+  data-test-table-rows>
+  {{info-table-row
+    label="Merkle root index"
+    helperText="A snapshot in time of the merkle tree's root hash. Changes on every update to storage."
+    value=merkleRoot}}
+  {{info-table-row
+    label="Mode"
+    value=clusterMode}}
+  {{info-table-row
+    label="Replication set"
+    helperText="The ID for the group of clusters communicating for this replication mode"
+    value=clusterId}}
+</div>
 
-  {{#if syncProgress}}
-  {{!-- ARG TODO: need to test this --}}
-    {{info-table-row
-      label="Sync progress"
-      value=(concat syncProgress.progress '/' syncProgress.total)}}
-  {{/if}}
-{{/unless}}
+{{#if syncProgress}}
+{{!-- ARG TODO: need to test this --}}
+  {{info-table-row
+    label="Sync progress"
+    value=(concat syncProgress.progress '/' syncProgress.total)}}
+{{/if}}

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

@@ -276,7 +276,7 @@
     </h3>
     {{#if cluster.dr.replicationEnabled}}
       {{#if submit.isRunning }}
-          <LayoutLoading />
+        <LayoutLoading />
       {{else}}
         {{#link-to
           "mode.index"
@@ -301,11 +301,7 @@
   {{#unless (and submit.isRunning (eq cluster.dr.mode "bootstrapping"))}}
     <div class="box is-bottomless is-fullwidth is-marginless">
       <h3 class="title is-flex-center is-5 is-marginless">
-        <Icon
-          @size="xl"
-          aria-hidden="true"
-          @glyph="perf-replication"
-        />
+        <Icon @size="xl" aria-hidden="true" @glyph="perf-replication" />
         Performance
       </h3>
       {{#if cluster.dr.replicationEnabled}}
@@ -334,23 +330,23 @@
     The cluster is initializing replication. This may take some time.
   {{else}}
     <div class="replication">
-      <ReplicationToggle />
-      <div class="selectable-card-container">
-        <ReplicationPrimaryCard
-          @title='State'
-          @description='Updated every ten seconds.'
-          @glyph={{get (cluster-states replicationAttrs.state) "glyph"}}
-          @metric={{replicationAttrs.state}} />
-        <ReplicationPrimaryCard
-          @title='Last WAL entry'
-          @description='Index of last Write Ahead Logs entry written on local storage.'
-          @metric={{replicationAttrs.lastWAL}} />
-        <KnownSecondariesCard
-          @cluster={{cluster}}
-          @replicationAttrs={{replicationAttrs}} />
-      </div>
-      <ReplicationTableRows @data={{replicationAttrs}} />
-      <ReplicationDocLink />
+      <ReplicationPage @model={{cluster}} as |Page|>
+        <Page.toggle />
+        <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>
+      </ReplicationPage>
     </div>
   {{/if}}
 {{/if}}