Sidebranch: remove delta, toggle, and make auto-refresh (#8945)

* change styling

* remove replication toggle

* modifications for auto refresh and final removal of delta and last wal

* fix refresh issue by removing replicationMode on this.reset which conflicts with the same property being set on the cluster model

* remove comments

* add unknown placeholder

* add auto refresh to other components and remove mention of toggle

* remove meep and primary cluster heading area

ui/app/styles/components/replication-dashboard.scss

@@ -63,5 +63,6 @@
   // prevent double lines at the bottom of the dashboard
   &.box {
     padding-bottom: 0;
+    padding-top: 1px; // at least 1px so border still shows
   }
 }

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

@@ -36,7 +36,7 @@
             @title="States"
           />
           <Dashboard.card
-            @title="Write-Ahead Logs (WALs)"
+            @title="Primary cluster"
           />
           <Dashboard.rows/>
         </Page.dashboard>

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

@@ -10,7 +10,6 @@ const DEFAULTS = {
   primary_cluster_addr: null,
   errors: [],
   id: null,
-  replicationMode: null,
   force: false,
 };
 
@@ -19,7 +18,6 @@ export default Component.extend(ReplicationActions, DEFAULTS, {
   replicationMode: null,
   model: null,
   cluster: alias('model'),
-
   reset() {
     if (!this || this.isDestroyed || this.isDestroying) {
       return;

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

@@ -14,11 +14,11 @@ export default Component.extend({
     const isSecondary = this.isSecondary;
     return isSecondary && state && clusterStates([state]).isSyncing;
   }),
-  isReindexing: computed('replicationDetails', function() {
+  isReindexing: computed('replicationDetails.{reindex_in_progress}', function() {
     const { replicationDetails } = this;
     return !!replicationDetails.reindex_in_progress;
   }),
-  reindexingStage: computed('replicationDetails', function() {
+  reindexingStage: computed('replicationDetails.{reindex_stage}', function() {
     const { replicationDetails } = this;
     const stage = replicationDetails.reindex_stage;
     // specify the stage if we have one
@@ -27,16 +27,19 @@ export default Component.extend({
     }
     return '';
   }),
-  reindexingProgress: computed('replicationDetails', function() {
-    // TODO: use this value to display a progress bar
-    const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
-    let progress = 0;
+  reindexingProgress: computed(
+    'replicationDetails.{reindex_building_progress,reindex_building_total}',
+    function() {
+      // TODO: use this value to display a progress bar
+      const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
+      let progress = 0;
 
-    if (reindex_building_progress && reindex_building_total) {
-      // convert progress to a percentage
-      progress = (reindex_building_progress / reindex_building_total) * 100;
-    }
+      if (reindex_building_progress && reindex_building_total) {
+        // convert progress to a percentage
+        progress = (reindex_building_progress / reindex_building_total) * 100;
+      }
 
-    return progress;
-  }),
+      return progress;
+    }
+  ),
 });

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

@@ -50,7 +50,7 @@ export default Component.extend({
     const replicationMode = model.replicationMode;
     return model[replicationMode];
   }),
-  isDisabled: computed('replicationDetails', function() {
+  isDisabled: computed('replicationDetails.{mode}', function() {
     if (this.replicationDetails.mode === 'disabled' || this.replicationDetails.mode === 'primary') {
       return true;
     }

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

@@ -22,25 +22,19 @@ export default Component.extend({
   layout,
   title: null,
   replicationDetails: null,
-  state: computed('replicationDetails', function() {
+  state: computed('replicationDetails.{state}', function() {
     return this.replicationDetails && this.replicationDetails.state
       ? this.replicationDetails.state
       : 'unknown';
   }),
-  connection: computed('replicationDetails', function() {
+  connection: computed('replicationDetails.{connection_state}', function() {
     return this.replicationDetails.connection_state ? this.replicationDetails.connection_state : 'unknown';
   }),
-  lastWAL: computed('replicationDetails', function() {
-    return this.replicationDetails && this.replicationDetails.lastWAL ? this.replicationDetails.lastWAL : 0;
-  }),
-  lastRemoteWAL: computed('replicationDetails', function() {
+  lastRemoteWAL: computed('replicationDetails.{lastRemoteWAL}', function() {
     return this.replicationDetails && this.replicationDetails.lastRemoteWAL
       ? this.replicationDetails.lastRemoteWAL
       : 0;
   }),
-  delta: computed('replicationDetails', function() {
-    return Math.abs(this.get('lastWAL') - this.get('lastRemoteWAL'));
-  }),
   inSyncState: computed('state', function() {
     // if our definition of what is considered 'synced' changes,
     // we should use the clusterStates helper instead
@@ -57,4 +51,7 @@ export default Component.extend({
     }
     return false;
   }),
+  primaryClusterAddr: computed('replicationDetails.{primaryClusterAddr}', function() {
+    return this.replicationDetails.primaryClusterAddr;
+  }),
 });

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

@@ -7,10 +7,10 @@ export default Component.extend({
   classNames: ['replication-table-rows'],
   replicationDetails: null,
   clusterMode: null,
-  merkleRoot: computed('replicationDetails', function() {
+  merkleRoot: computed('replicationDetails.{merkleRoot}', function() {
     return this.replicationDetails.merkleRoot || 'unknown';
   }),
-  clusterId: computed('replicationDetails', function() {
+  clusterId: computed('replicationDetails.{clusterId}', function() {
     return this.replicationDetails.clusterId || 'unknown';
   }),
 });

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

@@ -1,18 +1,4 @@
 <div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
-  {{#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 data-test-primary-cluster-address>{{replicationDetails.primaryClusterAddr}}</code>
-    {{else}}
-      <code>no known primary cluster address</code>
-    {{/if}}
-  {{/if}}
-
   {{#if isReindexing}}
     <AlertBanner
       @title={{concat "Re-indexing in progress" reindexingStage}}

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

@@ -2,7 +2,6 @@
   {{yield
     (hash
       header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
-      toggle=(component 'replication-toggle')
       dashboard=(component
         'replication-dashboard'
         data=model

ui/lib/core/addon/templates/components/replication-secondary-card.hbs

@@ -1,7 +1,7 @@
 <div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}" data-test-replication-secondary-card>
   {{!-- Check if State or WAL Card --}}
   {{#if (eq title "States")}}
-    <h3 class="title is-5 grid-item-title card-title">{{title}}</h3>
+    <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
     <div class="grid-item-left">
       {{#if (get (cluster-states state) "isOk")}}
         <h6 class="title is-6">state</h6>
@@ -45,34 +45,31 @@
     </h2>
     <h2 class="title is-3 grid-item-right-bottom" data-test-connection>{{connection}}</h2>
   {{else}}
-    <h3 class="title is-5 grid-item-title card-title">{{title}}
-      <ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
-        <T.trigger>
-          <Icon @glyph={{"check-circle-outline" }} @size="m" class={{"has-text-grey"}} />
-        </T.trigger>
-        <T.content @class="tool-tip">
-          <div class="box">
-            There may be a difference between last remote WAL and last WAL entry from primary. If it persists over time,
-            investigate.
-            <LearnLink @path="/vault/operations/monitor-replication#are-my-dr-clusters-in-sync" @class="has-text-white">
-              Learn more
-            </LearnLink>
-          </div>
-        </T.content>
-      </ToolTip>
-    </h3>
+    <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
     <div class="grid-item-left">
-      <h6 class="title is-6">Delta</h6>
-      <p class="has-text-grey is-size-8">The difference between the last remote WAL and the last WAL entry from the primary.</p>
+      <h6 class="title is-6">last_remote_wal</h6>
+      <p class="has-text-grey is-size-8">The last WAL index that the secondary received from the primary. Updates every 10 seconds.</p>
     </div>
     <div class="grid-item-right">
-      <h6 class="title is-6">last_wal</h6>
-      <p class="has-text-grey is-size-8" data-test-lastWAL>{{lastWAL}}</p>
+      <h6 class="title is-6">primary_cluster_addr</h6>
+      {{#if primaryClusterAddr}}
+        <span>
+          <a
+            href={{primaryClusterAddr}}
+            class="link"
+            target="_blank"
+            rel="noreferrer noopener" 
+          >
+            {{primaryClusterAddr}}
+          </a>
+        </span>
+      {{else}}
+        <p class="has-text-grey is-size-8">unknown</p>
+      {{/if}}
     </div>
-    <code class="title is-3 grid-item-left-bottom" data-test-delta>{{format-number delta}}</code>
+    <h2 class="title is-3 grid-item-left-bottom">{{format-number lastRemoteWAL}}</h2>
     <div class="grid-item-right-bottom">
-      <h6 class="title is-6">last_remote_wal</h6>
-      <p class="has-text-grey is-size-8" data-test-lastRemoteWAL>{{lastRemoteWAL}}</p>
+        {{!-- Empty --}}
     </div>
   {{/if}}
 </div>