From 83592913262f4496ccc8ea9948ed3d951e5e8637 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Apr 2020 18:57:47 -0600
Subject: [PATCH 01/16] setup styling for delta

---
 .../replication-page/replication-dashboard.js |  3 --
 .../components/replication-dashboard.scss     | 13 +++++---
 .../templates/components/replication-page.hbs |  2 +-
 .../replication-dashboard/dashboard.hbs       |  4 +--
 .../replication-card.hbs                      | 33 +++++++++++++++++--
 .../replication-dr-promote/details.hbs        | 10 +++---
 6 files changed, 48 insertions(+), 17 deletions(-)
 delete mode 100644 ui/app/components/replication-page/replication-dashboard.js

diff --git a/ui/app/components/replication-page/replication-dashboard.js b/ui/app/components/replication-page/replication-dashboard.js
deleted file mode 100644
index 55706477346c4..0000000000000
--- a/ui/app/components/replication-page/replication-dashboard.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({});
diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index dd750f610519d..a4f136f1f9ea4 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -31,6 +31,7 @@
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr 0.8fr;
       padding: $spacing-l 0 18px $spacing-l;
+      line-height: 1.5;
 
       // If descriptions are smaller then height is affected, this keeps the cards consistent
       min-height: 200px;
@@ -46,22 +47,22 @@
         grid-column-end: 1;
         grid-row-start: 2;
         grid-row-end: 2;
-
-        line-height: 1.5;
       }
       .grid-item-wal {
         grid-column-start: 2;
         grid-column-end: 2;
         grid-row-start: 2;
         grid-row-end: 2;
-
-        line-height: 1.5;
       }
       .grid-item-stream {
         grid-column-start: 1;
         grid-column-end: 1;
         grid-row-start: 3;
         grid-row-end: 3;
+
+        .hs-icon {
+          margin-bottom: 5px;
+        }
       }
       .grid-item-status {
         grid-column-start: 2;
@@ -71,4 +72,8 @@
       }
     }
   }
+
+  .has-text-highlight {
+    color: $yellow-500;
+  }
 }
diff --git a/ui/app/templates/components/replication-page.hbs b/ui/app/templates/components/replication-page.hbs
index 9f35a281ce4b4..a81627b8c59e5 100644
--- a/ui/app/templates/components/replication-page.hbs
+++ b/ui/app/templates/components/replication-page.hbs
@@ -1,6 +1,6 @@
 {{yield (hash 
   header=(component 'replication-page/replication-header' model=model)
-  toggle=(component 'replication-page/replication-toggle' model=model)
+  toggle=(component 'replication-page/replication-toggle')
   dashboard=(component 'replication-page/replication-dashboard/dashboard' model=model)
 )}}
 {{!-- ARG TODO, not all of these need model or everything on it.  Clean up --}}
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/dashboard.hbs b/ui/app/templates/components/replication-page/replication-dashboard/dashboard.hbs
index 9d69ecc093d33..4d66b0ddd6fb1 100644
--- a/ui/app/templates/components/replication-page/replication-dashboard/dashboard.hbs
+++ b/ui/app/templates/components/replication-page/replication-dashboard/dashboard.hbs
@@ -1,8 +1,8 @@
 <div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
   <h2 class="has-text-weight-semibold is-size-4 has-margin-bottom">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>
+  <p class="has-text-grey is-size-8 has-margin-bottom">If you set a primary_cluster_addr when enabling replication, it will appear here.</p>
   {{#if model.dr.primaryClusterAddr}}
-    <code>{{model.dr.primaryClusterAddr}}</code>
+    <code class="has-text-black">{{model.dr.primaryClusterAddr}}</code>
   {{else}}
     <code>no known primary cluster address</code>
   {{/if}}
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs
index 0f1f8e3c4a5fb..286b090d52297 100644
--- a/ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs
+++ b/ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs
@@ -5,9 +5,36 @@
     <p class="has-text-grey is-size-8">{{description_1}}</p>
   </div>
   <div class="grid-item-wal">
+    {{!-- Check if card is for showing Delta information --}}
+    {{#if @property_3}}
+      <code class="has-text-black">{{property_1}}</code>
+      <p class="has-text-grey is-size-8">{{metric_1}}</p>
+    {{else}}
+      <code class="has-text-black">{{property_2}}</code>
+      <p class="has-text-grey is-size-8">{{description_2}}</p>
+    {{/if}}
+  </div>
+
+  {{#if @property_3}}
+    <h2 class="title-number grid-item-stream">{{metric_3}}
+      <Icon 
+        @glyph={{if false "check-circle-outline" "alert-triangle"}} 
+        class={{if false "has-text-success" "has-text-highlight"}} 
+        @aria-label="success"
+        @size="l"
+      />
+    </h2>
+  {{else}}
+    <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
+  {{/if}}
+
+  {{#if @property_3}}
+  <div class="grid-item-status">
     <code class="has-text-black">{{property_2}}</code>
-    <p class="has-text-grey is-size-8">{{description_2}}</p>
+    <p class="has-text-grey is-size-8">{{metric_2}}</p>
   </div>
-  <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
-  <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+  {{else}}
+    <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+  {{/if}}
+
 </div>
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 3bf4132aaa67e..68a9d6363670c 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -23,10 +23,12 @@
           @title="Write-Ahead Logs (WALs)"
           @property_1="Last Remote WAL"
           @property_2="Last WAL entry from primary"
-          @description_1="Index of the last Write-Ahead Logs (WAL) entry written on the local storage."
-          @description_2="Index of the last WAL entry from  the primary."
-          @metric_1={{if model.dr.lastRemoteWAL model.dr.lastRemoteWAL 'unknown' }}
-          @metric_2={{if model.dr.lastWAL model.dr.lastWAL 'unknown'}}
+          @property_3="Delta"
+          @description_1="The difference between the last remote WAL and the last WAL entry from the primary."
+          @metric_1={{if model.dr.lastRemoteWAL model.dr.lastRemoteWAL '0' }}
+          @metric_2={{if model.dr.lastWAL model.dr.lastWAL '0'}}
+          {{!-- angel calc using computed in controller --}}
+          @metric_3=0
         />
         <Dashboard.rows
           @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown' }}

From 530039180175937ba7e78eb20d64503e597e971c Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 8 Apr 2020 12:33:48 -0600
Subject: [PATCH 02/16] clean up

---
 .../components/replication-dashboard.scss     |  7 +++++-
 .../templates/components/replication-page.hbs |  2 +-
 ...ard.hbs => replication-card-secondary.hbs} |  9 +++++--
 ...ashboard.hbs => replication-dashboard.hbs} |  0
 .../replication-page/replication-header.hbs   |  3 ---
 .../replication-dr-promote/details.hbs        | 25 +++++++++++--------
 .../cluster/replication-dr-promote/index.hbs  |  4 ---
 7 files changed, 28 insertions(+), 22 deletions(-)
 rename ui/app/templates/components/replication-page/replication-dashboard/{replication-card.hbs => replication-card-secondary.hbs} (80%)
 rename ui/app/templates/components/replication-page/replication-dashboard/{dashboard.hbs => replication-dashboard.hbs} (100%)

diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index a4f136f1f9ea4..388a58ff28f3d 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -34,7 +34,12 @@
       line-height: 1.5;
 
       // If descriptions are smaller then height is affected, this keeps the cards consistent
-      min-height: 200px;
+      min-height: 220px;
+
+      @include until(1320px) {
+        // prevent an issue with the card descriptions wrapping and expanding height
+        min-height: 250px;
+      }
 
       .grid-item-title {
         grid-column-start: 1;
diff --git a/ui/app/templates/components/replication-page.hbs b/ui/app/templates/components/replication-page.hbs
index a81627b8c59e5..f9509d228cb26 100644
--- a/ui/app/templates/components/replication-page.hbs
+++ b/ui/app/templates/components/replication-page.hbs
@@ -1,6 +1,6 @@
 {{yield (hash 
   header=(component 'replication-page/replication-header' model=model)
   toggle=(component 'replication-page/replication-toggle')
-  dashboard=(component 'replication-page/replication-dashboard/dashboard' model=model)
+  dashboard=(component 'replication-page/replication-dashboard/replication-dashboard' model=model)
 )}}
 {{!-- ARG TODO, not all of these need model or everything on it.  Clean up --}}
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-card-secondary.hbs
similarity index 80%
rename from ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs
rename to ui/app/templates/components/replication-page/replication-dashboard/replication-card-secondary.hbs
index 286b090d52297..3f5ccf56e7e96 100644
--- a/ui/app/templates/components/replication-page/replication-dashboard/replication-card.hbs
+++ b/ui/app/templates/components/replication-page/replication-dashboard/replication-card-secondary.hbs
@@ -1,8 +1,13 @@
 <div class="selectable-card is-rounded card-container">
   <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
   <div class="grid-item-state">
-    <code class="has-text-black">{{property_1}}</code>
-    <p class="has-text-grey is-size-8">{{description_1}}</p>
+    {{#if property_3}}
+      <code class="has-text-black">{{property_3}}</code>
+      <p class="has-text-grey is-size-8">{{description_3}}</p>
+    {{else}}
+      <code class="has-text-black">{{property_1}}</code>
+      <p class="has-text-grey is-size-8">{{description_1}}</p>
+    {{/if}}
   </div>
   <div class="grid-item-wal">
     {{!-- Check if card is for showing Delta information --}}
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/dashboard.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
similarity index 100%
rename from ui/app/templates/components/replication-page/replication-dashboard/dashboard.hbs
rename to ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
diff --git a/ui/app/templates/components/replication-page/replication-header.hbs b/ui/app/templates/components/replication-page/replication-header.hbs
index b115f07163e97..6bbb3794b1c7d 100644
--- a/ui/app/templates/components/replication-page/replication-header.hbs
+++ b/ui/app/templates/components/replication-page/replication-header.hbs
@@ -1,5 +1,4 @@
 {{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
-{{!-- ARG TODO all links are hard coded as well as titles right now, they will need to by dynamic --}}
 {{#if (and (eq model.rm.mode 'dr') (eq model.dr.mode 'secondary') )}}
   <NavHeader as |Nav|>
     <Nav.home>
@@ -14,7 +13,6 @@
     </Nav.items>
   </NavHeader>
 {{/if}}
-
 <PageHeader as |p|>
   <p.top>
     {{#key-value-header
@@ -49,7 +47,6 @@
   <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
     <nav class="tabs">
       <ul>
-        {{!-- TODO should map over array of options with link and title --}}
         {{#link-to
           "vault.cluster.replication-dr-promote"
           tagName="li"
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 68a9d6363670c..089a8311e3a52 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -4,12 +4,12 @@
     <ReplicationPage @model={{model}} as |Page|>
       <Page.header 
         @showTabs={{false}} 
-        @model={{data}}
+        @model={{model}}
       />
       <Page.toggle />
       <Page.dashboard 
       {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
-        @componentToRender='replication-page/replication-dashboard/replication-card' as |Dashboard|>
+        @componentToRender='replication-page/replication-dashboard/replication-card-secondary' as |Dashboard|>
         <Dashboard.card
           @title="States"
           @property_1="state"
@@ -17,24 +17,27 @@
           @description_1="How this cluster is communicating with others at this moment."
           @description_2="coming"
           @metric_1={{if model.dr.state model.dr.state 'unknown'}}
+          {{!-- ARG TODO this might be wrong, could be connection_state --}}
           @metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
         />
         <Dashboard.card 
           @title="Write-Ahead Logs (WALs)"
-          @property_1="Last Remote WAL"
-          @property_2="Last WAL entry from primary"
+          @property_1="last_wal"
+          @property_2="last_remote_wal"
           @property_3="Delta"
-          @description_1="The difference between the last remote WAL and the last WAL entry from the primary."
-          @metric_1={{if model.dr.lastRemoteWAL model.dr.lastRemoteWAL '0' }}
-          @metric_2={{if model.dr.lastWAL model.dr.lastWAL '0'}}
+          @description_3="The difference between the last remote WAL and the last WAL entry from the primary."
+          {{!-- last_wal which comes from the primary --}}
+          @metric_1={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
+          {{!-- last_remote_wal which comes from the secondary --}}
+          @metric_2={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}} 
           {{!-- angel calc using computed in controller --}}
           @metric_3=0
         />
         <Dashboard.rows
-          @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown' }}
-          @metric_2={{if model.dr.mode model.dr.mode 'unknown' }}
-          @metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown' }}
-          @syncProgress={{if model.dr.syncProgress syncProgress false }}
+          @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown'}}
+          @metric_2={{if model.dr.mode model.dr.mode 'unknown'}}
+          @metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown'}}
+          @syncProgress={{if model.dr.syncProgress syncProgress false}}
         />
       </Page.dashboard>
     </ReplicationPage>
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
index 53d37f2faf848..2c4ef45f4a3f0 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
@@ -3,10 +3,6 @@
     <h1 class="title is-4">
      Disaster Recovery secondary is&nbsp;enabled
     </h1>
-    <LinkTo
-      @params={{array "vault.cluster.replication-dr-promote.details"}}
-      class="is-block">MEEP
-    </LinkTo>
   </Page.header>
   <Page.content>
     <nav class="tabs sub-nav is-marginless">

From 08426cc9ffb63e027a406cfc4f96e262a3a8dbf9 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 8 Apr 2020 12:57:30 -0600
Subject: [PATCH 03/16] replication table remove and rename model to data

---
 ui/app/templates/components/replication-page.hbs     |  5 ++---
 .../replication-dashboard/replication-dashboard.hbs  |  6 +++---
 ...-secondary.hbs => replication-secondary-card.hbs} |  0
 .../replication-dashboard/replication-table-rows.hbs | 12 ------------
 .../replication-page/replication-header.hbs          |  8 ++++----
 .../vault/cluster/replication-dr-promote/details.hbs |  2 +-
 ...ation-card.hbs => replication-secondary-card.hbs} |  0
 7 files changed, 10 insertions(+), 23 deletions(-)
 rename ui/app/templates/components/replication-page/replication-dashboard/{replication-card-secondary.hbs => replication-secondary-card.hbs} (100%)
 delete mode 100644 ui/app/templates/components/replication-page/replication-dashboard/replication-table-rows.hbs
 rename ui/lib/core/addon/templates/components/{replication-card.hbs => replication-secondary-card.hbs} (100%)

diff --git a/ui/app/templates/components/replication-page.hbs b/ui/app/templates/components/replication-page.hbs
index f9509d228cb26..01fc734c643fe 100644
--- a/ui/app/templates/components/replication-page.hbs
+++ b/ui/app/templates/components/replication-page.hbs
@@ -1,6 +1,5 @@
 {{yield (hash 
-  header=(component 'replication-page/replication-header' model=model)
+  header=(component 'replication-page/replication-header' data=model)
   toggle=(component 'replication-page/replication-toggle')
-  dashboard=(component 'replication-page/replication-dashboard/replication-dashboard' model=model)
+  dashboard=(component 'replication-page/replication-dashboard/replication-dashboard' data=model)
 )}}
-{{!-- ARG TODO, not all of these need model or everything on it.  Clean up --}}
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
index 4d66b0ddd6fb1..944606c32cf7d 100644
--- a/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
+++ b/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
@@ -1,8 +1,8 @@
 <div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
   <h2 class="has-text-weight-semibold is-size-4 has-margin-bottom">Primary Cluster</h2>
   <p class="has-text-grey is-size-8 has-margin-bottom">If you set a primary_cluster_addr when enabling replication, it will appear here.</p>
-  {{#if model.dr.primaryClusterAddr}}
-    <code class="has-text-black">{{model.dr.primaryClusterAddr}}</code>
+  {{#if data.dr.primaryClusterAddr}}
+    <code class="has-text-black">{{data.dr.primaryClusterAddr}}</code>
   {{else}}
     <code>no known primary cluster address</code>
   {{/if}}
@@ -17,7 +17,7 @@
 
   {{yield (hash 
     rows=(
-      component 'replication-page/replication-dashboard/replication-table-rows'
+      component 'replication-table-rows' data=data
     )
   )}}
 
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-card-secondary.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs
similarity index 100%
rename from ui/app/templates/components/replication-page/replication-dashboard/replication-card-secondary.hbs
rename to ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-table-rows.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-table-rows.hbs
deleted file mode 100644
index 935d424e4d967..0000000000000
--- a/ui/app/templates/components/replication-page/replication-dashboard/replication-table-rows.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="has-large-margin-top">
-    {{!-- ARG TODO the replicationAttrs might be model for me --}}
-    {{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=metric_1}}
-    {{info-table-row label="Mode" value=metric_2}}
-    {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=metric_3}}
-</div>
-
-{{#if syncProgress}}
-{{!-- ARG TODO: need to test this --}}
-  {{info-table-row label="Sync progress" value=(concat syncProgress.progress '/' syncProgress.total)}}
-{{/if}}
diff --git a/ui/app/templates/components/replication-page/replication-header.hbs b/ui/app/templates/components/replication-page/replication-header.hbs
index 6bbb3794b1c7d..91440e995fa24 100644
--- a/ui/app/templates/components/replication-page/replication-header.hbs
+++ b/ui/app/templates/components/replication-page/replication-header.hbs
@@ -1,5 +1,5 @@
 {{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
-{{#if (and (eq model.rm.mode 'dr') (eq model.dr.mode 'secondary') )}}
+{{#if (and (eq data.rm.mode 'dr') (eq data.dr.mode 'secondary') )}}
   <NavHeader as |Nav|>
     <Nav.home>
       <HomeLink @class="navbar-item splash-page-logo has-text-white">
@@ -7,7 +7,7 @@
       </HomeLink>
     </Nav.home>
     <Nav.items>
-      <div class="navbar-item status-indicator-button" data-status="{{if model.unsealed "good" "bad"}}">
+      <div class="navbar-item status-indicator-button" data-status="{{if data.unsealed "good" "bad"}}">
         <StatusMenu @label="Status" @onLinkClick={{action Nav.closeDrawer}} />
       </div>
     </Nav.items>
@@ -34,10 +34,10 @@
     <h1 class="title is-3">
       Details
       <span class="tag">
-        {{model.dr.mode}}
+        {{data.dr.mode}}
       </span>
       <span class="tag">
-        {{model.dr.clusterIdDisplay}}
+        {{data.dr.clusterIdDisplay}}
       </span>
     </h1>
   </p.levelLeft>
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 089a8311e3a52..312b16dd4dcc4 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -9,7 +9,7 @@
       <Page.toggle />
       <Page.dashboard 
       {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
-        @componentToRender='replication-page/replication-dashboard/replication-card-secondary' as |Dashboard|>
+        @componentToRender='replication-page/replication-dashboard/replication-secondary-card' as |Dashboard|>
         <Dashboard.card
           @title="States"
           @property_1="state"
diff --git a/ui/lib/core/addon/templates/components/replication-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
similarity index 100%
rename from ui/lib/core/addon/templates/components/replication-card.hbs
rename to ui/lib/core/addon/templates/components/replication-secondary-card.hbs

From 67182fb5e321d4c2a62b5da874963c9d04f9d577 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 8 Apr 2020 13:17:46 -0600
Subject: [PATCH 04/16] remove old replication header component now that it is
 in addons

---
 .../templates/components/replication-page.hbs |  2 +-
 .../replication-page/replication-header.hbs   | 63 -------------------
 .../addon/components/replication-header.js    | 16 +++++
 .../components/replication-header.hbs         | 13 ++--
 .../core/app/components/replication-header.js |  1 +
 5 files changed, 23 insertions(+), 72 deletions(-)
 delete mode 100644 ui/app/templates/components/replication-page/replication-header.hbs
 create mode 100644 ui/lib/core/addon/components/replication-header.js
 create mode 100644 ui/lib/core/app/components/replication-header.js

diff --git a/ui/app/templates/components/replication-page.hbs b/ui/app/templates/components/replication-page.hbs
index 01fc734c643fe..d8b5f396643d0 100644
--- a/ui/app/templates/components/replication-page.hbs
+++ b/ui/app/templates/components/replication-page.hbs
@@ -1,5 +1,5 @@
 {{yield (hash 
-  header=(component 'replication-page/replication-header' data=model)
+  header=(component 'replication-header' data=model)
   toggle=(component 'replication-page/replication-toggle')
   dashboard=(component 'replication-page/replication-dashboard/replication-dashboard' data=model)
 )}}
diff --git a/ui/app/templates/components/replication-page/replication-header.hbs b/ui/app/templates/components/replication-page/replication-header.hbs
deleted file mode 100644
index 91440e995fa24..0000000000000
--- a/ui/app/templates/components/replication-page/replication-header.hbs
+++ /dev/null
@@ -1,63 +0,0 @@
-{{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
-{{#if (and (eq data.rm.mode 'dr') (eq data.dr.mode 'secondary') )}}
-  <NavHeader as |Nav|>
-    <Nav.home>
-      <HomeLink @class="navbar-item splash-page-logo has-text-white">
-        <LogoEdition />
-      </HomeLink>
-    </Nav.home>
-    <Nav.items>
-      <div class="navbar-item status-indicator-button" data-status="{{if data.unsealed "good" "bad"}}">
-        <StatusMenu @label="Status" @onLinkClick={{action Nav.closeDrawer}} />
-      </div>
-    </Nav.items>
-  </NavHeader>
-{{/if}}
-<PageHeader as |p|>
-  <p.top>
-    {{#key-value-header
-      baseKey=baseKey
-      path="vault.cluster.replication-dr-promote"
-      root=backendCrumb
-    }}
-      <li>
-        <span class="sep">
-          /
-        </span>
-        {{#link-to "vault.cluster.replication-dr-promote"}}
-          Disaster Recovery
-        {{/link-to}}
-      </li>
-    {{/key-value-header}}
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Details
-      <span class="tag">
-        {{data.dr.mode}}
-      </span>
-      <span class="tag">
-        {{data.dr.clusterIdDisplay}}
-      </span>
-    </h1>
-  </p.levelLeft>
-</PageHeader>
-
-{{#if showTabs}}
-  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
-    <nav class="tabs">
-      <ul>
-        {{#link-to
-          "vault.cluster.replication-dr-promote"
-          tagName="li"
-          activeClass="is-active"
-          current-when=""
-        }}
-          {{#link-to "vault.cluster.replication-dr-promote"}}
-            Details
-          {{/link-to}}
-        {{/link-to}}
-      </ul>
-    </nav>
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/replication-header.js b/ui/lib/core/addon/components/replication-header.js
new file mode 100644
index 0000000000000..7839e082de74e
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-header.js
@@ -0,0 +1,16 @@
+/**
+ * @module ReplicationHeader
+ * ARG TODO: finish
+ *
+ * @example
+ * ```js
+ * <ReplicationHeader finish/>
+ * ```
+ */
+
+import Component from '@ember/component';
+import layout from '../templates/components/replication-header';
+
+export default Component.extend({
+  layout,
+});
diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
index b115f07163e97..05898e615d394 100644
--- a/ui/lib/core/addon/templates/components/replication-header.hbs
+++ b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -1,6 +1,5 @@
 {{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
-{{!-- ARG TODO all links are hard coded as well as titles right now, they will need to by dynamic --}}
-{{#if (and (eq model.rm.mode 'dr') (eq model.dr.mode 'secondary') )}}
+{{#if (and (eq data.rm.mode 'dr') (eq data.dr.mode 'secondary') )}}
   <NavHeader as |Nav|>
     <Nav.home>
       <HomeLink @class="navbar-item splash-page-logo has-text-white">
@@ -8,13 +7,12 @@
       </HomeLink>
     </Nav.home>
     <Nav.items>
-      <div class="navbar-item status-indicator-button" data-status="{{if model.unsealed "good" "bad"}}">
+      <div class="navbar-item status-indicator-button" data-status="{{if data.unsealed "good" "bad"}}">
         <StatusMenu @label="Status" @onLinkClick={{action Nav.closeDrawer}} />
       </div>
     </Nav.items>
   </NavHeader>
 {{/if}}
-
 <PageHeader as |p|>
   <p.top>
     {{#key-value-header
@@ -36,10 +34,10 @@
     <h1 class="title is-3">
       Details
       <span class="tag">
-        {{model.dr.mode}}
+        {{data.dr.mode}}
       </span>
       <span class="tag">
-        {{model.dr.clusterIdDisplay}}
+        {{data.dr.clusterIdDisplay}}
       </span>
     </h1>
   </p.levelLeft>
@@ -49,7 +47,6 @@
   <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
     <nav class="tabs">
       <ul>
-        {{!-- TODO should map over array of options with link and title --}}
         {{#link-to
           "vault.cluster.replication-dr-promote"
           tagName="li"
@@ -63,4 +60,4 @@
       </ul>
     </nav>
   </div>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/ui/lib/core/app/components/replication-header.js b/ui/lib/core/app/components/replication-header.js
new file mode 100644
index 0000000000000..1d351dd02c40d
--- /dev/null
+++ b/ui/lib/core/app/components/replication-header.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-header';

From 9ce336bf5e7851c5a77aeb039262a765e345510e Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 8 Apr 2020 13:28:15 -0600
Subject: [PATCH 05/16] move replication secondary card component

---
 .../templates/components/replication-page.hbs |  4 +-
 .../replication-dashboard.hbs                 | 24 -----------
 .../replication-page/replication-toggle.hbs   |  5 ---
 .../replication-dr-promote/details.hbs        |  2 +-
 .../components/replication-secondary-card.js  | 12 ++++++
 .../components/replication-dashboard.hbs      |  2 +-
 .../components/replication-secondary-card.hbs | 42 ++++++++++++++++---
 .../components/replication-secondary-card.js  |  1 +
 8 files changed, 54 insertions(+), 38 deletions(-)
 delete mode 100644 ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
 delete mode 100644 ui/app/templates/components/replication-page/replication-toggle.hbs
 create mode 100644 ui/lib/core/addon/components/replication-secondary-card.js
 create mode 100644 ui/lib/core/app/components/replication-secondary-card.js

diff --git a/ui/app/templates/components/replication-page.hbs b/ui/app/templates/components/replication-page.hbs
index d8b5f396643d0..11d324487d91f 100644
--- a/ui/app/templates/components/replication-page.hbs
+++ b/ui/app/templates/components/replication-page.hbs
@@ -1,5 +1,5 @@
 {{yield (hash 
   header=(component 'replication-header' data=model)
-  toggle=(component 'replication-page/replication-toggle')
-  dashboard=(component 'replication-page/replication-dashboard/replication-dashboard' data=model)
+  toggle=(component 'replication-toggle')
+  dashboard=(component 'replication-dashboard' data=model)
 )}}
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
deleted file mode 100644
index 944606c32cf7d..0000000000000
--- a/ui/app/templates/components/replication-page/replication-dashboard/replication-dashboard.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
-  <h2 class="has-text-weight-semibold is-size-4 has-margin-bottom">Primary Cluster</h2>
-  <p class="has-text-grey is-size-8 has-margin-bottom">If you set a primary_cluster_addr when enabling replication, it will appear here.</p>
-  {{#if data.dr.primaryClusterAddr}}
-    <code class="has-text-black">{{data.dr.primaryClusterAddr}}</code>
-  {{else}}
-    <code>no known primary cluster address</code>
-  {{/if}}
-
-  <div class="selectable-card-container has-large-margin-top">
-    {{yield (hash 
-      card=(
-        component componentToRender
-      )
-    )}}
-  </div>
-
-  {{yield (hash 
-    rows=(
-      component 'replication-table-rows' data=data
-    )
-  )}}
-
-</div>
diff --git a/ui/app/templates/components/replication-page/replication-toggle.hbs b/ui/app/templates/components/replication-page/replication-toggle.hbs
deleted file mode 100644
index c80c901388e45..0000000000000
--- a/ui/app/templates/components/replication-page/replication-toggle.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<Toolbar>
-  <ToolbarActions>
-    <Toggle @tagName="name" @checked={{checkedValue}} @onChange={{action (mut checkedValue)}}> Auto-refresh {{if checkedValue 'on' 'off'}}</Toggle>
-  </ToolbarActions>
-</Toolbar>
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 312b16dd4dcc4..2d1d57f3338d3 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -9,7 +9,7 @@
       <Page.toggle />
       <Page.dashboard 
       {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
-        @componentToRender='replication-page/replication-dashboard/replication-secondary-card' as |Dashboard|>
+        @componentToRender='replication-secondary-card' as |Dashboard|>
         <Dashboard.card
           @title="States"
           @property_1="state"
diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
new file mode 100644
index 0000000000000..3a63e6589e7c8
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -0,0 +1,12 @@
+/**
+ * @module ReplicationSecondaryCard
+ * ARG TODO finish
+ *
+ */
+
+import Component from '@ember/component';
+import layout from '../templates/components/replication-secondary-card';
+
+export default Component.extend({
+  layout,
+});
diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
index 9d69ecc093d33..b69eeae819853 100644
--- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs
+++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -17,7 +17,7 @@
 
   {{yield (hash 
     rows=(
-      component 'replication-page/replication-dashboard/replication-table-rows'
+      component 'replication-table-rows' data=data
     )
   )}}
 
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 0f1f8e3c4a5fb..3f5ccf56e7e96 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -1,13 +1,45 @@
 <div class="selectable-card is-rounded card-container">
   <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
   <div class="grid-item-state">
-    <code class="has-text-black">{{property_1}}</code>
-    <p class="has-text-grey is-size-8">{{description_1}}</p>
+    {{#if property_3}}
+      <code class="has-text-black">{{property_3}}</code>
+      <p class="has-text-grey is-size-8">{{description_3}}</p>
+    {{else}}
+      <code class="has-text-black">{{property_1}}</code>
+      <p class="has-text-grey is-size-8">{{description_1}}</p>
+    {{/if}}
   </div>
   <div class="grid-item-wal">
+    {{!-- Check if card is for showing Delta information --}}
+    {{#if @property_3}}
+      <code class="has-text-black">{{property_1}}</code>
+      <p class="has-text-grey is-size-8">{{metric_1}}</p>
+    {{else}}
+      <code class="has-text-black">{{property_2}}</code>
+      <p class="has-text-grey is-size-8">{{description_2}}</p>
+    {{/if}}
+  </div>
+
+  {{#if @property_3}}
+    <h2 class="title-number grid-item-stream">{{metric_3}}
+      <Icon 
+        @glyph={{if false "check-circle-outline" "alert-triangle"}} 
+        class={{if false "has-text-success" "has-text-highlight"}} 
+        @aria-label="success"
+        @size="l"
+      />
+    </h2>
+  {{else}}
+    <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
+  {{/if}}
+
+  {{#if @property_3}}
+  <div class="grid-item-status">
     <code class="has-text-black">{{property_2}}</code>
-    <p class="has-text-grey is-size-8">{{description_2}}</p>
+    <p class="has-text-grey is-size-8">{{metric_2}}</p>
   </div>
-  <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
-  <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+  {{else}}
+    <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+  {{/if}}
+
 </div>
diff --git a/ui/lib/core/app/components/replication-secondary-card.js b/ui/lib/core/app/components/replication-secondary-card.js
new file mode 100644
index 0000000000000..c59635a6ec353
--- /dev/null
+++ b/ui/lib/core/app/components/replication-secondary-card.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-secondary-card';

From 0df690363168185bc734838bed0c605fe790355a Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 8 Apr 2020 15:25:34 -0600
Subject: [PATCH 06/16] calc delta

---
 .../components/replication-dashboard.scss     |  5 ++-
 .../components/replication-secondary-card.js  |  4 +++
 .../components/replication-secondary-card.hbs | 34 +++++++++++++++----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index 45a0d84421424..a5d4f6f41550a 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -69,9 +69,8 @@
         grid-row-start: 3;
         grid-row-end: 3;
 
-        .hs-icon {
-          margin-bottom: 5px;
-        }
+        display: flex;
+        align-items: center;
       }
       .grid-item-status {
         grid-column-start: 2;
diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 3a63e6589e7c8..5529553bb1530 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -5,8 +5,12 @@
  */
 
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import layout from '../templates/components/replication-secondary-card';
 
 export default Component.extend({
   layout,
+  delta: computed(function() {
+    return Math.abs(this.metric_1 - this.metric_2);
+  }),
 });
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 3f5ccf56e7e96..b9a1889796709 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -21,13 +21,33 @@
   </div>
 
   {{#if @property_3}}
-    <h2 class="title-number grid-item-stream">{{metric_3}}
-      <Icon 
-        @glyph={{if false "check-circle-outline" "alert-triangle"}} 
-        class={{if false "has-text-success" "has-text-highlight"}} 
-        @aria-label="success"
-        @size="l"
-      />
+    <h2 class="title-number grid-item-stream">{{delta}}
+      <ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
+        <T.trigger>
+          <Icon 
+          {{!-- ARG TODO replace false and true with correct variable --}}
+            @glyph={{if (gt delta 0) "alert-triangle" "check-circle-outline" }} 
+            @size="l" 
+            class={{if (gt delta 0) "has-text-highlight" "has-text-success"}}
+          />
+        </T.trigger>
+        <T.content @class="tool-tip">
+          <div class="box">
+            {{#if (gt delta 0)}}
+              There is a difference between last remote WAL and last WAL entry from primary.
+              This maybe a syncing issue.
+              <LearnLink 
+                @path="/vault/operations/monitor-replication#are-my-dr-clusters-in-sync"
+                @class="has-text-white"
+              >
+                Learn more
+              </LearnLink>
+            {{else}}
+              Everything is up to date!
+            {{/if}}
+          </div>
+        </T.content>
+      </ToolTip>
     </h2>
   {{else}}
     <h2 class="title-number grid-item-stream">{{metric_1}}</h2>

From ee653754ccaec754167429056250d838d89abc63 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 8 Apr 2020 15:29:11 -0600
Subject: [PATCH 07/16] clean up

---
 .../templates/vault/cluster/replication-dr-promote/details.hbs  | 2 --
 .../addon/templates/components/replication-secondary-card.hbs   | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

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 2d1d57f3338d3..51872c9013b05 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -30,8 +30,6 @@
           @metric_1={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
           {{!-- last_remote_wal which comes from the secondary --}}
           @metric_2={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}} 
-          {{!-- angel calc using computed in controller --}}
-          @metric_3=0
         />
         <Dashboard.rows
           @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown'}}
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index b9a1889796709..35d4bea052588 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -21,7 +21,7 @@
   </div>
 
   {{#if @property_3}}
-    <h2 class="title-number grid-item-stream">{{delta}}
+    <h2 class="title-number grid-item-stream">{{format-number delta}}
       <ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
         <T.trigger>
           <Icon 

From 338365c0a88cb28366d7af23a6dfa167fada17be Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 10:54:51 -0600
Subject: [PATCH 08/16] remove unused components that are now in addon

---
 ui/app/components/replication-page.js         |  3 --
 .../replication-page/replication-toggle.js    |  5 ---
 .../replication-secondary-card.hbs            | 45 -------------------
 .../components/wizard/replication-details.hbs | 19 --------
 .../templates/components/replication-page.hbs |  1 +
 5 files changed, 1 insertion(+), 72 deletions(-)
 delete mode 100644 ui/app/components/replication-page.js
 delete mode 100644 ui/app/components/replication-page/replication-toggle.js
 delete mode 100644 ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs
 delete mode 100644 ui/app/templates/components/wizard/replication-details.hbs
 rename ui/{app => lib/core/addon}/templates/components/replication-page.hbs (93%)

diff --git a/ui/app/components/replication-page.js b/ui/app/components/replication-page.js
deleted file mode 100644
index 55706477346c4..0000000000000
--- a/ui/app/components/replication-page.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({});
diff --git a/ui/app/components/replication-page/replication-toggle.js b/ui/app/components/replication-page/replication-toggle.js
deleted file mode 100644
index 23b79cbec1072..0000000000000
--- a/ui/app/components/replication-page/replication-toggle.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  checkedValue: false,
-});
diff --git a/ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs b/ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs
deleted file mode 100644
index 3f5ccf56e7e96..0000000000000
--- a/ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="selectable-card is-rounded card-container">
-  <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
-  <div class="grid-item-state">
-    {{#if property_3}}
-      <code class="has-text-black">{{property_3}}</code>
-      <p class="has-text-grey is-size-8">{{description_3}}</p>
-    {{else}}
-      <code class="has-text-black">{{property_1}}</code>
-      <p class="has-text-grey is-size-8">{{description_1}}</p>
-    {{/if}}
-  </div>
-  <div class="grid-item-wal">
-    {{!-- Check if card is for showing Delta information --}}
-    {{#if @property_3}}
-      <code class="has-text-black">{{property_1}}</code>
-      <p class="has-text-grey is-size-8">{{metric_1}}</p>
-    {{else}}
-      <code class="has-text-black">{{property_2}}</code>
-      <p class="has-text-grey is-size-8">{{description_2}}</p>
-    {{/if}}
-  </div>
-
-  {{#if @property_3}}
-    <h2 class="title-number grid-item-stream">{{metric_3}}
-      <Icon 
-        @glyph={{if false "check-circle-outline" "alert-triangle"}} 
-        class={{if false "has-text-success" "has-text-highlight"}} 
-        @aria-label="success"
-        @size="l"
-      />
-    </h2>
-  {{else}}
-    <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
-  {{/if}}
-
-  {{#if @property_3}}
-  <div class="grid-item-status">
-    <code class="has-text-black">{{property_2}}</code>
-    <p class="has-text-grey is-size-8">{{metric_2}}</p>
-  </div>
-  {{else}}
-    <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
-  {{/if}}
-
-</div>
diff --git a/ui/app/templates/components/wizard/replication-details.hbs b/ui/app/templates/components/wizard/replication-details.hbs
deleted file mode 100644
index e04d4da686c70..0000000000000
--- a/ui/app/templates/components/wizard/replication-details.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-<WizardContent @headerText="Replication" @glyph="tour">
-  <WizardSection
-    @headerText="Your cluster information"
-    @docText="Docs: Replication"
-    @docPath="/docs/internals/replication.html"
-  >
-    <p>
-      Here you can see the details about your new replication cluster, manage or disable replication, and handle secondary clusters. You can also get a quick status by hovering over the "Replication" link at the top.
-    </p>
-  </WizardSection>
-  <div class="wizard-details">
-    <h3 class="title is-6">
-      Ready to move on?
-    </h3>
-    <button type="button" class="button next-feature-step" {{action onAdvance}}>
-      {{nextFeature}} <Chevron @isButton={{true}} />
-    </button>
-  </div>
-</WizardContent>
diff --git a/ui/app/templates/components/replication-page.hbs b/ui/lib/core/addon/templates/components/replication-page.hbs
similarity index 93%
rename from ui/app/templates/components/replication-page.hbs
rename to ui/lib/core/addon/templates/components/replication-page.hbs
index 11d324487d91f..6d4b29a98200f 100644
--- a/ui/app/templates/components/replication-page.hbs
+++ b/ui/lib/core/addon/templates/components/replication-page.hbs
@@ -1,3 +1,4 @@
+<p>meep</p>
 {{yield (hash 
   header=(component 'replication-header' data=model)
   toggle=(component 'replication-toggle')

From 7268a5eb8b2c4375131da0a97543bb055d6e9c27 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 10:55:23 -0600
Subject: [PATCH 09/16] address pr comments

---
 .../components/replication-dashboard.scss     | 39 +++-----
 .../replication-dr-promote/details.hbs        | 26 +-----
 .../components/replication-secondary-card.js  |  8 +-
 .../components/replication-secondary-card.hbs | 92 ++++++++-----------
 4 files changed, 65 insertions(+), 100 deletions(-)

diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index a5d4f6f41550a..5c43a6f156723 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -46,37 +46,28 @@
       }
 
       .grid-item-title {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 1;
-        grid-row-end: 1;
+        grid-column: 1 / span 2;
+
+        display: flex;
       }
-      .grid-item-state {
-        grid-column-start: 1;
-        grid-column-end: 1;
-        grid-row-start: 2;
-        grid-row-end: 2;
+      .grid-item-left {
+        grid-column: 1/1;
+        grid-row: 2/2;
       }
-      .grid-item-wal {
-        grid-column-start: 2;
-        grid-column-end: 2;
-        grid-row-start: 2;
-        grid-row-end: 2;
+      .grid-item-right {
+        grid-column: 2/2;
+        grid-row: 2/2;
       }
-      .grid-item-stream {
-        grid-column-start: 1;
-        grid-column-end: 1;
-        grid-row-start: 3;
-        grid-row-end: 3;
+      .grid-item-left-bottom {
+        grid-column: 1/1;
+        grid-row: 3/3;
 
         display: flex;
         align-items: center;
       }
-      .grid-item-status {
-        grid-column-start: 2;
-        grid-column-end: 2;
-        grid-row-start: 3;
-        grid-row-end: 3;
+      .grid-item-right-bottom {
+        grid-column: 2/2;
+        grid-row: 3/3;
       }
     }
   }
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 51872c9013b05..988c3db0174d6 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -12,31 +12,13 @@
         @componentToRender='replication-secondary-card' as |Dashboard|>
         <Dashboard.card
           @title="States"
-          @property_1="state"
-          @property_2="connection_state"
-          @description_1="How this cluster is communicating with others at this moment."
-          @description_2="coming"
-          @metric_1={{if model.dr.state model.dr.state 'unknown'}}
-          {{!-- ARG TODO this might be wrong, could be connection_state --}}
-          @metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
+          @data={{model}}
         />
-        <Dashboard.card 
+        <Dashboard.card
           @title="Write-Ahead Logs (WALs)"
-          @property_1="last_wal"
-          @property_2="last_remote_wal"
-          @property_3="Delta"
-          @description_3="The difference between the last remote WAL and the last WAL entry from the primary."
-          {{!-- last_wal which comes from the primary --}}
-          @metric_1={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
-          {{!-- last_remote_wal which comes from the secondary --}}
-          @metric_2={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}} 
-        />
-        <Dashboard.rows
-          @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown'}}
-          @metric_2={{if model.dr.mode model.dr.mode 'unknown'}}
-          @metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown'}}
-          @syncProgress={{if model.dr.syncProgress syncProgress false}}
+          @data={{model}}
         />
+        <Dashboard.rows @data={{model.dr}}/>
       </Page.dashboard>
     </ReplicationPage>
   </div>
diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 5529553bb1530..558ee67d993ad 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -10,7 +10,11 @@ import layout from '../templates/components/replication-secondary-card';
 
 export default Component.extend({
   layout,
-  delta: computed(function() {
-    return Math.abs(this.metric_1 - this.metric_2);
+  delta: computed('data', function() {
+    // last_wal
+    let lastWAL = this.data.dr.lastWAL || 0;
+    // last_remote_wal
+    let lastRemoteWAL = this.data.dr.lastRemoteWAL || 0;
+    return Math.abs(lastWAL - lastRemoteWAL);
   }),
 });
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 35d4bea052588..b7600c8a316fe 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -1,65 +1,53 @@
 <div class="selectable-card is-rounded card-container">
-  <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
-  <div class="grid-item-state">
-    {{#if property_3}}
-      <code class="has-text-black">{{property_3}}</code>
-      <p class="has-text-grey is-size-8">{{description_3}}</p>
-    {{else}}
-      <code class="has-text-black">{{property_1}}</code>
-      <p class="has-text-grey is-size-8">{{description_1}}</p>
-    {{/if}}
-  </div>
-  <div class="grid-item-wal">
-    {{!-- Check if card is for showing Delta information --}}
-    {{#if @property_3}}
-      <code class="has-text-black">{{property_1}}</code>
-      <p class="has-text-grey is-size-8">{{metric_1}}</p>
-    {{else}}
-      <code class="has-text-black">{{property_2}}</code>
-      <p class="has-text-grey is-size-8">{{description_2}}</p>
-    {{/if}}
-  </div>
-
-  {{#if @property_3}}
-    <h2 class="title-number grid-item-stream">{{format-number delta}}
+  {{!-- Check if State or WAL Card --}}
+  {{#if (eq title "States")}}
+    <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
+    <div class="grid-item-left">
+      <code class="has-text-black">state</code>
+      <p class="has-text-grey is-size-8">How this cluster is communicating with others at this moment.</p>
+    </div>
+    <div class="grid-item-right">
+      <code class="has-text-black">connection_state</code>
+      <p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
+    </div>
+    {{!-- ARG TODO connection state is likely wrong here, waiting for reply from RFC --}}
+      <h2 class="title-number grid-item-left-bottom">{{if data.dr.state data.dr.state 'unknown'}}</h2>
+      <h2 class="title-number is-5 grid-item-right-bottom">{{if data.drStateDisplay data.drStateDisplay 'unknown'}}</h2>
+  {{else}}
+    <h3 class="title is-4 grid-item-title card-title">{{title}}
       <ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
         <T.trigger>
           <Icon 
-          {{!-- ARG TODO replace false and true with correct variable --}}
-            @glyph={{if (gt delta 0) "alert-triangle" "check-circle-outline" }} 
-            @size="l" 
-            class={{if (gt delta 0) "has-text-highlight" "has-text-success"}}
+            @glyph={{"check-circle-outline" }} 
+            @size="m" 
+            class={{"has-text-grey"}}
           />
         </T.trigger>
         <T.content @class="tool-tip">
           <div class="box">
-            {{#if (gt delta 0)}}
-              There is a difference between last remote WAL and last WAL entry from primary.
-              This maybe a syncing issue.
-              <LearnLink 
-                @path="/vault/operations/monitor-replication#are-my-dr-clusters-in-sync"
-                @class="has-text-white"
-              >
-                Learn more
-              </LearnLink>
-            {{else}}
-              Everything is up to date!
-            {{/if}}
+            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>
-    </h2>
-  {{else}}
-    <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
-  {{/if}}
-
-  {{#if @property_3}}
-  <div class="grid-item-status">
-    <code class="has-text-black">{{property_2}}</code>
-    <p class="has-text-grey is-size-8">{{metric_2}}</p>
-  </div>
-  {{else}}
-    <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+    </h3>
+    <div class="grid-item-left">
+      <code class="has-text-black">Delta</code>
+      <p class="has-text-grey is-size-8">The difference between the last remote WAL and the last WAL entry from the primary.</p>
+    </div>
+    <div class="grid-item-right">
+      <code class="has-text-black">last_wal</code>
+      <p class="has-text-grey is-size-8">{{if data.dr.lastWAL (format-number data.dr.lastWAL) '0'}}</p>
+    </div>
+    <h2 class="title-number grid-item-left-bottom">{{format-number delta}}</h2>
+    <div class="grid-item-right-bottom">
+      <code class="has-text-black">last_remote_wal</code>
+      <p class="has-text-grey is-size-8">{{if data.dr.lastRemoteWAL (format-number data.dr.lastRemoteWAL) '0'}}</p>
+    </div>
   {{/if}}
-
 </div>

From c26fc8f3b5e545a2d09cb3970ef70c3755940de8 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 10:59:52 -0600
Subject: [PATCH 10/16] remove test

---
 ui/lib/core/addon/templates/components/replication-page.hbs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/lib/core/addon/templates/components/replication-page.hbs b/ui/lib/core/addon/templates/components/replication-page.hbs
index 6d4b29a98200f..11d324487d91f 100644
--- a/ui/lib/core/addon/templates/components/replication-page.hbs
+++ b/ui/lib/core/addon/templates/components/replication-page.hbs
@@ -1,4 +1,3 @@
-<p>meep</p>
 {{yield (hash 
   header=(component 'replication-header' data=model)
   toggle=(component 'replication-toggle')

From e0dc18996468bb1ca1e4f587e6a243c400239988 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 13:01:56 -0600
Subject: [PATCH 11/16] fix failing test

---
 ui/lib/core/addon/components/replication-secondary-card.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 558ee67d993ad..3b5bca32d23d4 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -12,9 +12,9 @@ export default Component.extend({
   layout,
   delta: computed('data', function() {
     // last_wal
-    let lastWAL = this.data.dr.lastWAL || 0;
+    let lastWAL = this.data.dr.lastWAL ? this.data.dr.lastWAL : 0;
     // last_remote_wal
-    let lastRemoteWAL = this.data.dr.lastRemoteWAL || 0;
+    let lastRemoteWAL = this.data.dr.lastRemoteWAL ? this.data.dr.lastRemoteWAL : 0;
     return Math.abs(lastWAL - lastRemoteWAL);
   }),
 });

From bfde73f68855a5b77358dbb9537eff0fed0937f3 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 14:22:41 -0600
Subject: [PATCH 12/16] address pr comments

---
 .../vault/cluster/replication-dr-promote/details.hbs      | 4 ++++
 .../core/addon/components/replication-secondary-card.js   | 8 ++++----
 .../templates/components/replication-secondary-card.hbs   | 8 ++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

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 988c3db0174d6..4adc2edb21619 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -13,10 +13,14 @@
         <Dashboard.card
           @title="States"
           @data={{model}}
+          @state={{if model.dr.state model.dr.state "unknown"}}
+          @connection={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
         />
         <Dashboard.card
           @title="Write-Ahead Logs (WALs)"
           @data={{model}}
+          @lastWAL={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
+          @lastRemoteWAL={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}}
         />
         <Dashboard.rows @data={{model.dr}}/>
       </Page.dashboard>
diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 3b5bca32d23d4..89b691096deb5 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -11,10 +11,10 @@ import layout from '../templates/components/replication-secondary-card';
 export default Component.extend({
   layout,
   delta: computed('data', function() {
-    // last_wal
-    let lastWAL = this.data.dr.lastWAL ? this.data.dr.lastWAL : 0;
-    // last_remote_wal
-    let lastRemoteWAL = this.data.dr.lastRemoteWAL ? this.data.dr.lastRemoteWAL : 0;
+    let dr = this.data.dr;
+    let lastWAL = dr && dr.lastWAL ? dr.lastWAL : 0;
+    let lastRemoteWAL = dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
+
     return Math.abs(lastWAL - lastRemoteWAL);
   }),
 });
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index b7600c8a316fe..c47814c5260ad 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -11,8 +11,8 @@
       <p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
     </div>
     {{!-- ARG TODO connection state is likely wrong here, waiting for reply from RFC --}}
-      <h2 class="title-number grid-item-left-bottom">{{if data.dr.state data.dr.state 'unknown'}}</h2>
-      <h2 class="title-number is-5 grid-item-right-bottom">{{if data.drStateDisplay data.drStateDisplay 'unknown'}}</h2>
+      <h2 class="title-number grid-item-left-bottom">{{state}}</h2>
+      <h2 class="title-number is-5 grid-item-right-bottom">{{connection}}</h2>
   {{else}}
     <h3 class="title is-4 grid-item-title card-title">{{title}}
       <ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
@@ -42,12 +42,12 @@
     </div>
     <div class="grid-item-right">
       <code class="has-text-black">last_wal</code>
-      <p class="has-text-grey is-size-8">{{if data.dr.lastWAL (format-number data.dr.lastWAL) '0'}}</p>
+      <p class="has-text-grey is-size-8">{{lastWAL}}</p>
     </div>
     <h2 class="title-number grid-item-left-bottom">{{format-number delta}}</h2>
     <div class="grid-item-right-bottom">
       <code class="has-text-black">last_remote_wal</code>
-      <p class="has-text-grey is-size-8">{{if data.dr.lastRemoteWAL (format-number data.dr.lastRemoteWAL) '0'}}</p>
+      <p class="has-text-grey is-size-8">{{lastRemoteWAL}}</p>
     </div>
   {{/if}}
 </div>

From 2412f012494a57d995cd869a7b155435fc605c79 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 14:42:11 -0600
Subject: [PATCH 13/16] attempting to fix test

---
 ui/lib/core/addon/components/replication-secondary-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 89b691096deb5..6e9d607b1a49c 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -13,7 +13,7 @@ export default Component.extend({
   delta: computed('data', function() {
     let dr = this.data.dr;
     let lastWAL = dr && dr.lastWAL ? dr.lastWAL : 0;
-    let lastRemoteWAL = dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
+    let lastRemoteWAL = dr && dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
 
     return Math.abs(lastWAL - lastRemoteWAL);
   }),

From 4811cfb5130b3b2f20f578d6bcccfcd7a1adcc5b Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 15:53:16 -0600
Subject: [PATCH 14/16] move to computed components

---
 .../cluster/replication-dr-promote/details.hbs    |  4 ----
 .../components/replication-secondary-card.js      | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

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 4adc2edb21619..988c3db0174d6 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -13,14 +13,10 @@
         <Dashboard.card
           @title="States"
           @data={{model}}
-          @state={{if model.dr.state model.dr.state "unknown"}}
-          @connection={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
         />
         <Dashboard.card
           @title="Write-Ahead Logs (WALs)"
           @data={{model}}
-          @lastWAL={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
-          @lastRemoteWAL={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}}
         />
         <Dashboard.rows @data={{model.dr}}/>
       </Page.dashboard>
diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 6e9d607b1a49c..6baeca9073151 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -10,6 +10,21 @@ import layout from '../templates/components/replication-secondary-card';
 
 export default Component.extend({
   layout,
+  state: computed('data', function() {
+    let dr = this.data.dr;
+    return dr.state ? dr.state : 'unknown';
+  }),
+  connection: computed('data', function() {
+    return this.data.drStateDisplay ? this.data.drStateDisplay : 'unknown';
+  }),
+  lastWAL: computed('data', function() {
+    let dr = this.data.dr;
+    return dr.lastWAL ? dr.lastWAL : '0';
+  }),
+  lastRemoteWAL: computed('data', function() {
+    let dr = this.data.dr;
+    return dr.lastRemoteWAL ? dr.lastRemoteWAL : '0';
+  }),
   delta: computed('data', function() {
     let dr = this.data.dr;
     let lastWAL = dr && dr.lastWAL ? dr.lastWAL : 0;

From 731b5b7167505d8ada645be88e8fd069f6fd8671 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 16:17:26 -0600
Subject: [PATCH 15/16] fix test error

---
 .../addon/components/replication-secondary-card.js     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 6baeca9073151..3a91b2c8fd3ef 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -19,17 +19,13 @@ export default Component.extend({
   }),
   lastWAL: computed('data', function() {
     let dr = this.data.dr;
-    return dr.lastWAL ? dr.lastWAL : '0';
+    return dr && dr.lastWAL ? dr.lastWAL : 0;
   }),
   lastRemoteWAL: computed('data', function() {
     let dr = this.data.dr;
-    return dr.lastRemoteWAL ? dr.lastRemoteWAL : '0';
+    return dr && dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
   }),
   delta: computed('data', function() {
-    let dr = this.data.dr;
-    let lastWAL = dr && dr.lastWAL ? dr.lastWAL : 0;
-    let lastRemoteWAL = dr && dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
-
-    return Math.abs(lastWAL - lastRemoteWAL);
+    return Math.abs(this.get('lastWAL') - this.get('lastRemoteWAL'));
   }),
 });

From 8b981fd5bd7e2113080e894740f2e50a68378575 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Apr 2020 17:11:37 -0600
Subject: [PATCH 16/16] fix state of null error

---
 ui/lib/core/addon/components/replication-secondary-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index 3a91b2c8fd3ef..99579db697717 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -12,7 +12,7 @@ export default Component.extend({
   layout,
   state: computed('data', function() {
     let dr = this.data.dr;
-    return dr.state ? dr.state : 'unknown';
+    return dr && dr.state ? dr.state : 'unknown';
   }),
   connection: computed('data', function() {
     return this.data.drStateDisplay ? this.data.drStateDisplay : 'unknown';