From 5889b6617e31d0662083a770fa54ac9d56e2f402 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Wed, 1 Apr 2020 15:59:27 -0700
Subject: [PATCH 01/31] add helperText param to InfoTableRow

---
 ui/app/styles/components/info-table-row.scss              | 4 ++++
 ui/lib/core/addon/components/info-table-row.js            | 4 +++-
 ui/lib/core/addon/templates/components/info-table-row.hbs | 5 +++++
 ui/lib/core/stories/info-table-row.md                     | 6 ++++--
 ui/lib/core/stories/info-table-row.stories.js             | 6 ++++--
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss
index bca18fd24b7c..074cfb8bec25 100644
--- a/ui/app/styles/components/info-table-row.scss
+++ b/ui/app/styles/components/info-table-row.scss
@@ -25,6 +25,10 @@
     textarea {
       min-height: 35px;
     }
+
+    .helper-text {
+      font-weight: initial;
+    }
   }
 
   .hs-icon {
diff --git a/ui/lib/core/addon/components/info-table-row.js b/ui/lib/core/addon/components/info-table-row.js
index ef6895c25ab4..2fadd1fa4c15 100644
--- a/ui/lib/core/addon/components/info-table-row.js
+++ b/ui/lib/core/addon/components/info-table-row.js
@@ -11,11 +11,12 @@ import layout from '../templates/components/info-table-row';
  *
  * @example
  * ```js
- * <InfoTableRow @value={{5}} @label="TTL" />
+ * <InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>
  * ```
  *
  * @param value=null {any} - The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false.
  * @param label=null {string} - The display name for the value.
+ * @param helperText=null {string} - Text to describe the value displayed beneath the label.
  * @param alwaysRender=false {Boolean} - Indicates if the component content should be always be rendered.  When false, the value of `value` will be used to determine if the component should render.
  *
  */
@@ -27,6 +28,7 @@ export default Component.extend({
 
   alwaysRender: false,
   label: null,
+  helperText: null,
   value: null,
 
   valueIsBoolean: computed('value', function() {
diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs
index fecdfe419c1f..ca428aba0636 100644
--- a/ui/lib/core/addon/templates/components/info-table-row.hbs
+++ b/ui/lib/core/addon/templates/components/info-table-row.hbs
@@ -1,6 +1,11 @@
 {{#if (or alwaysRender value)}}
   <div class="column is-one-quarter">
     <span class="is-label has-text-grey-dark" data-test-row-label="{{label}}">{{label}}</span>
+    {{#if helperText}}
+      <div>
+        <span class="is-label helper-text has-text-grey">{{helperText}}</span>
+      </div>
+    {{/if}}
   </div>
   <div class="column is-flex">
     {{#if (has-block)}}
diff --git a/ui/lib/core/stories/info-table-row.md b/ui/lib/core/stories/info-table-row.md
index a3d7f28ab3d4..d5c0a5407457 100644
--- a/ui/lib/core/stories/info-table-row.md
+++ b/ui/lib/core/stories/info-table-row.md
@@ -4,22 +4,24 @@
 `InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so
 that the value breaks under the label on smaller viewports.
 
+**Params**
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | value | <code>any</code> | <code></code> | The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. |
 | label | <code>string</code> | <code>null</code> | The display name for the value. |
+| helperText | <code>string</code> | <code>null</code> | Text to describe the value displayed beneath the label. |
 | alwaysRender | <code>Boolean</code> | <code>false</code> | Indicates if the component content should be always be rendered.  When false, the value of `value` will be used to determine if the component should render. |
 
 **Example**
   
 ```js
-<InfoTableRow @value={{5}} @label="TTL" />
+<InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>
 ```
 
 **See**
 
 - [Uses of InfoTableRow](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTableRow+OR+info-table-row)
-- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/info-table-row.js)
+- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/info-table-row.js)
 
 ---
diff --git a/ui/lib/core/stories/info-table-row.stories.js b/ui/lib/core/stories/info-table-row.stories.js
index 425855a1774a..5c0cc213227c 100644
--- a/ui/lib/core/stories/info-table-row.stories.js
+++ b/ui/lib/core/stories/info-table-row.stories.js
@@ -11,11 +11,12 @@ storiesOf('InfoTableRow/', module)
     () => ({
       template: hbs`
       <h5 class="title is-5">Info Table Row</h5>
-      <InfoTableRow @value={{value}} @label={{label}} @alwaysRender={{alwaysRender}} />
+      <InfoTableRow @value={{value}} @label={{label}} @helperText={{helperText}} @alwaysRender={{alwaysRender}} />
     `,
       context: {
         label: text('Label', 'TTL'),
         value: text('Value', '30m'),
+        helperText: text('helperText', 'A short description'),
         alwaysRender: boolean('Always render?', false),
       },
     }),
@@ -26,11 +27,12 @@ storiesOf('InfoTableRow/', module)
     () => ({
       template: hbs`
       <h5 class="title is-5">Info Table Row</h5>
-      <InfoTableRow @value={{value}} @label={{label}} @alwaysRender={{alwaysRender}} />
+      <InfoTableRow @value={{value}} @label={{label}} @helperText={{helperText}} @alwaysRender={{alwaysRender}} />
     `,
       context: {
         label: 'Local mount?',
         value: boolean('Value', true),
+        helperText: text('helperText', 'A short description'),
         alwaysRender: boolean('Always render?', true),
       },
     }),

From 31763ba0bff3e463afdd1aa50a9bb21f3bc7a85f Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Thu, 2 Apr 2020 13:26:29 -0700
Subject: [PATCH 02/31] initial page setup

---
 ui/app/styles/components/info-table-row.scss  |  2 +-
 ui/app/styles/core.scss                       |  3 ++
 .../components/replication-summary.scss       | 12 +++++
 .../components/replication-summary.hbs        | 49 +++++++++++++++----
 4 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 ui/lib/replication/addon/styles/components/replication-summary.scss

diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss
index 074cfb8bec25..55b8d5848fa1 100644
--- a/ui/app/styles/components/info-table-row.scss
+++ b/ui/app/styles/components/info-table-row.scss
@@ -27,7 +27,7 @@
     }
 
     .helper-text {
-      font-weight: initial;
+      font-weight: normal;
     }
   }
 
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 03ffa0f88caf..abcdd0341b6d 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -97,5 +97,8 @@
 @import './components/vlt-radio';
 @import './components/vlt-table';
 
+// import styles from ember engines
+@import './lib/replication/addon/styles/components/replication-summary';
+
 // bulma-free-zone
 @import './components/hs-icon';
diff --git a/ui/lib/replication/addon/styles/components/replication-summary.scss b/ui/lib/replication/addon/styles/components/replication-summary.scss
new file mode 100644
index 000000000000..c8d86bd50178
--- /dev/null
+++ b/ui/lib/replication/addon/styles/components/replication-summary.scss
@@ -0,0 +1,12 @@
+.selectable-card-container.has-grid {
+  grid-template-columns: 1fr 2fr;
+}
+
+.replication.selectable-card {
+  display: initial;
+  line-height: normal;
+}
+
+.helper-text {
+  font-weight: normal;
+}
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index ab7fd8b76138..10c10ddbb351 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -342,15 +342,46 @@
   {{#if (eq replicationAttrs.mode 'initializing')}}
     The cluster is initializing replication. This may take some time.
   {{else}}
-    {{info-table-row label="Mode" value=replicationAttrs.mode}}
-    {{info-table-row label="Replication set" value=replicationAttrs.clusterId}}
-    {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
-    {{info-table-row label="State" value=replicationAttrs.state}}
-    {{info-table-row label="Primary cluster address" value=replicationAttrs.primaryClusterAddr}}
-    {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
-    {{info-table-row label="Last WAL entry" value=replicationAttrs.lastWAL}}
-    {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}}
-    {{info-table-row label="Merkle root index" value=replicationAttrs.merkleRoot}}
+    <div class="selectable-card-container has-grid">
+      <div class="replication selectable-card is-rounded">
+        <h2 class="title is-5">state</h2>
+        <div>
+          <span class="helper-text is-label has-text-grey">
+            Updated every ten seconds
+          </span>
+          <h3>{{replicationAttrs.state}}</h3>
+          {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
+        </div>
+      </div>
+
+      <div class="replication selectable-card is-rounded">
+        <div class="level-left">
+        <h2 class="title is-5">Known Secondaries</h2>
+          <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
+            Manage
+          </ToolbarLink>
+        </div>
+        <div>
+          {{info-table-row label="Secondary ID" value="URL"}}
+          {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
+        </div>
+      </div>
+
+      <div class="replication selectable-card is-rounded">
+        <h2 class="title is-5">Last WAL entry</h2>
+        <div>
+          {{info-table-row label="Last WAL entry" helperText="Index of last Write Ahead Logs entry written on local storage." value=replicationAttrs.lastWAL}}
+          {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}}
+        </div>
+      </div>
+    </div>
+    <div>
+      <h1>Other stuff</h1>
+      {{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=replicationAttrs.merkleRoot}}
+      {{info-table-row label="Mode" value=replicationAttrs.mode}}
+      {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=replicationAttrs.clusterId}}
+    </div>
     {{#if replicationAttrs.syncProgress}}
       {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
     {{/if}}

From 401cf427af45e4cd4ee437bb15ee5aa6743b5a33 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Thu, 2 Apr 2020 15:43:28 -0700
Subject: [PATCH 03/31] format card with padding and correct number of rows

---
 ui/app/styles/components/selectable-card.scss |  2 +-
 .../components/replication-summary.scss       |  9 +++-
 .../components/replication-summary.hbs        | 42 +++++++++++--------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/ui/app/styles/components/selectable-card.scss b/ui/app/styles/components/selectable-card.scss
index a2939ceccd94..26ca3ffcbdb4 100644
--- a/ui/app/styles/components/selectable-card.scss
+++ b/ui/app/styles/components/selectable-card.scss
@@ -2,7 +2,7 @@
   box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
   display: flex;
   justify-content: space-between;
-  padding: $spacing-l 0 $spacing-l $spacing-l;
+  padding: $spacing-l;
   line-height: 0;
 
   &:hover {
diff --git a/ui/lib/replication/addon/styles/components/replication-summary.scss b/ui/lib/replication/addon/styles/components/replication-summary.scss
index c8d86bd50178..d30c2527bd20 100644
--- a/ui/lib/replication/addon/styles/components/replication-summary.scss
+++ b/ui/lib/replication/addon/styles/components/replication-summary.scss
@@ -1,5 +1,12 @@
-.selectable-card-container.has-grid {
+.replication.selectable-card-container {
   grid-template-columns: 1fr 2fr;
+  grid-template-rows: initial;
+  margin: 2rem 0 2rem 0;
+}
+
+.card-container {
+  display: grid;
+  grid-gap: 2rem;
 }
 
 .replication.selectable-card {
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 10c10ddbb351..6a64f9127e72 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -342,21 +342,34 @@
   {{#if (eq replicationAttrs.mode 'initializing')}}
     The cluster is initializing replication. This may take some time.
   {{else}}
-    <div class="selectable-card-container has-grid">
-      <div class="replication selectable-card is-rounded">
-        <h2 class="title is-5">state</h2>
-        <div>
-          <span class="helper-text is-label has-text-grey">
-            Updated every ten seconds
-          </span>
-          <h3>{{replicationAttrs.state}}</h3>
-          {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
+    <div class="replication selectable-card-container">
+      <div class="card-container">
+        <div class="replication selectable-card is-rounded">
+          <code class="title is-5">state</code>
+          <div>
+            <span class="helper-text is-label has-text-grey">
+              Updated every ten seconds
+            </span>
+            <h3 class="title is-3">{{replicationAttrs.state}}</h3>
+            {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
+          </div>
+        </div>
+        <div class="replication selectable-card is-rounded">
+          <code class="title is-5">Last WAL entry</code>
+          <div>
+            <span class="helper-text is-label has-text-grey">
+              Index of last Write Ahead Logs entry written on local storage.
+            </span>
+            <h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
+            {{!-- TODO: do I need this? How is this different from lastWAL above? --}}
+            {{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
+          </div>
         </div>
       </div>
 
       <div class="replication selectable-card is-rounded">
         <div class="level-left">
-        <h2 class="title is-5">Known Secondaries</h2>
+        <code class="title is-5">Known Secondaries</code>
           <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
             Manage
           </ToolbarLink>
@@ -367,16 +380,9 @@
         </div>
       </div>
 
-      <div class="replication selectable-card is-rounded">
-        <h2 class="title is-5">Last WAL entry</h2>
-        <div>
-          {{info-table-row label="Last WAL entry" helperText="Index of last Write Ahead Logs entry written on local storage." value=replicationAttrs.lastWAL}}
-          {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}}
-        </div>
-      </div>
+
     </div>
     <div>
-      <h1>Other stuff</h1>
       {{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=replicationAttrs.merkleRoot}}
       {{info-table-row label="Mode" value=replicationAttrs.mode}}

From 0bdd119f6a634828a813d39fefce7e9994597ec2 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Thu, 2 Apr 2020 16:01:34 -0700
Subject: [PATCH 04/31] style card titles with margin

---
 .../styles/components/replication-summary.scss     |  4 ++++
 .../templates/components/replication-summary.hbs   | 14 +++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/lib/replication/addon/styles/components/replication-summary.scss b/ui/lib/replication/addon/styles/components/replication-summary.scss
index d30c2527bd20..ff0ce5fcc4e1 100644
--- a/ui/lib/replication/addon/styles/components/replication-summary.scss
+++ b/ui/lib/replication/addon/styles/components/replication-summary.scss
@@ -12,6 +12,10 @@
 .replication.selectable-card {
   display: initial;
   line-height: normal;
+
+  .card-title {
+    margin-bottom: 2rem;
+  }
 }
 
 .helper-text {
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 6a64f9127e72..e1d88a7d0fef 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -345,17 +345,21 @@
     <div class="replication selectable-card-container">
       <div class="card-container">
         <div class="replication selectable-card is-rounded">
-          <code class="title is-5">state</code>
+          <code class="card-title title is-5">state</code>
           <div>
             <span class="helper-text is-label has-text-grey">
               Updated every ten seconds
             </span>
-            <h3 class="title is-3">{{replicationAttrs.state}}</h3>
+           <h3 class="title is-3">
+              {{!-- TODO make this dynamic --}}
+              <Icon @glyph="check-circle-outline" class="has-text-success" />
+             {{replicationAttrs.state}}
+            </h3>
             {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
           </div>
         </div>
         <div class="replication selectable-card is-rounded">
-          <code class="title is-5">Last WAL entry</code>
+          <code class="card-title title is-5">Last WAL entry</code>
           <div>
             <span class="helper-text is-label has-text-grey">
               Index of last Write Ahead Logs entry written on local storage.
@@ -368,8 +372,8 @@
       </div>
 
       <div class="replication selectable-card is-rounded">
-        <div class="level-left">
-        <code class="title is-5">Known Secondaries</code>
+        <div class="level">
+        <code class="card-title title is-5">Known Secondaries</code>
           <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
             Manage
           </ToolbarLink>

From 2fb3ce25eed9be3255bbbbc12066ba5d4e11a8c6 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Thu, 2 Apr 2020 16:09:31 -0700
Subject: [PATCH 05/31] move styles inside replication class; add todos

---
 .../components/replication-summary.scss       | 36 +++----
 .../components/replication-summary.hbs        | 94 ++++++++++---------
 2 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/ui/lib/replication/addon/styles/components/replication-summary.scss b/ui/lib/replication/addon/styles/components/replication-summary.scss
index ff0ce5fcc4e1..4f68bd3342ac 100644
--- a/ui/lib/replication/addon/styles/components/replication-summary.scss
+++ b/ui/lib/replication/addon/styles/components/replication-summary.scss
@@ -1,23 +1,25 @@
-.replication.selectable-card-container {
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: initial;
-  margin: 2rem 0 2rem 0;
-}
+.replication {
+  .selectable-card-container {
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: initial;
+    margin: 2rem 0 2rem 0;
+  }
 
-.card-container {
-  display: grid;
-  grid-gap: 2rem;
-}
+  .card-container {
+    display: grid;
+    grid-gap: 2rem;
+  }
 
-.replication.selectable-card {
-  display: initial;
-  line-height: normal;
+  .selectable-card {
+    display: initial;
+    line-height: normal;
 
-  .card-title {
-    margin-bottom: 2rem;
+    .card-title {
+      margin-bottom: 2rem;
+    }
   }
-}
 
-.helper-text {
-  font-weight: normal;
+  .helper-text {
+    font-weight: normal;
+  }
 }
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index e1d88a7d0fef..dbc1d8e62fe3 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -342,58 +342,62 @@
   {{#if (eq replicationAttrs.mode 'initializing')}}
     The cluster is initializing replication. This may take some time.
   {{else}}
-    <div class="replication selectable-card-container">
-      <div class="card-container">
-        <div class="replication selectable-card is-rounded">
-          <code class="card-title title is-5">state</code>
-          <div>
-            <span class="helper-text is-label has-text-grey">
-              Updated every ten seconds
-            </span>
-           <h3 class="title is-3">
-              {{!-- TODO make this dynamic --}}
-              <Icon @glyph="check-circle-outline" class="has-text-success" />
-             {{replicationAttrs.state}}
-            </h3>
-            {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
+    <div class="replication">
+      <div class="selectable-card-container">
+        <div class="card-container">
+          <div class="selectable-card is-rounded">
+            <code class="card-title title is-5">state</code>
+            <div>
+              <span class="helper-text is-label has-text-grey">
+                Updated every ten seconds
+              </span>
+            <h3 class="title is-3">
+                {{!-- TODO make this dynamic --}}
+                <Icon @glyph="check-circle-outline" class="has-text-success" />
+              {{replicationAttrs.state}}
+              </h3>
+              {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
+            </div>
           </div>
-        </div>
-        <div class="replication selectable-card is-rounded">
-          <code class="card-title title is-5">Last WAL entry</code>
-          <div>
-            <span class="helper-text is-label has-text-grey">
-              Index of last Write Ahead Logs entry written on local storage.
-            </span>
-            <h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
-            {{!-- TODO: do I need this? How is this different from lastWAL above? --}}
-            {{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
+          <div class="selectable-card is-rounded">
+            <code class="card-title title is-5">Last WAL entry</code>
+            <div>
+              <span class="helper-text is-label has-text-grey">
+                Index of last Write Ahead Logs entry written on local storage.
+              </span>
+              <h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
+              {{!-- TODO: do I need this? How is this different from lastWAL above? --}}
+              {{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="replication selectable-card is-rounded">
-        <div class="level">
-        <code class="card-title title is-5">Known Secondaries</code>
-          <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
-            Manage
-          </ToolbarLink>
-        </div>
-        <div>
-          {{info-table-row label="Secondary ID" value="URL"}}
-          {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
+        <div class="selectable-card is-rounded">
+          <div class="level">
+          <code class="card-title title is-5">Known Secondaries</code>
+            <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
+              Manage
+            </ToolbarLink>
+          </div>
+          <div>
+            {{info-table-row label="Secondary ID" value="URL"}}
+            {{!-- TODO: make sure this works --}}
+            {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
+          </div>
         </div>
-      </div>
 
 
+      </div>
+      <div>
+        {{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=replicationAttrs.merkleRoot}}
+        {{info-table-row label="Mode" value=replicationAttrs.mode}}
+        {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=replicationAttrs.clusterId}}
+      </div>
+      {{!-- TODO: move this to the right spot --}}
+      {{#if replicationAttrs.syncProgress}}
+        {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
+      {{/if}}
     </div>
-    <div>
-      {{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=replicationAttrs.merkleRoot}}
-      {{info-table-row label="Mode" value=replicationAttrs.mode}}
-      {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=replicationAttrs.clusterId}}
-    </div>
-    {{#if replicationAttrs.syncProgress}}
-      {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
-    {{/if}}
   {{/if}}
 {{/if}}

From bc88fcd37be7d08082ebd3d29189d0493db09386 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 3 Apr 2020 14:54:38 -0700
Subject: [PATCH 06/31] move replication-summary styles into core app so hot
 reloading works

---
 .../addon => app}/styles/components/replication-summary.scss  | 2 +-
 ui/app/styles/core.scss                                       | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)
 rename ui/{lib/replication/addon => app}/styles/components/replication-summary.scss (87%)

diff --git a/ui/lib/replication/addon/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
similarity index 87%
rename from ui/lib/replication/addon/styles/components/replication-summary.scss
rename to ui/app/styles/components/replication-summary.scss
index 4f68bd3342ac..aa1802909cb6 100644
--- a/ui/lib/replication/addon/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -1,6 +1,6 @@
 .replication {
   .selectable-card-container {
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 1fr, minmax(400px, 2fr);
     grid-template-rows: initial;
     margin: 2rem 0 2rem 0;
   }
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index abcdd0341b6d..189f074dc5d1 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -78,6 +78,7 @@
 @import './components/radio-card';
 @import './components/radial-progress';
 @import './components/raft-join';
+@import './components/replication-summary';
 @import './components/role-item';
 @import './components/search-select';
 @import './components/selectable-card';
@@ -97,8 +98,5 @@
 @import './components/vlt-radio';
 @import './components/vlt-table';
 
-// import styles from ember engines
-@import './lib/replication/addon/styles/components/replication-summary';
-
 // bulma-free-zone
 @import './components/hs-icon';

From dae8214a6797b9d6e5176b250ee769616db77f35 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 3 Apr 2020 15:29:33 -0700
Subject: [PATCH 07/31] prevent known secondaries card from being cut off on
 the right hand side

---
 ui/app/styles/components/replication-summary.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index aa1802909cb6..7abf174bfbf6 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -1,6 +1,6 @@
 .replication {
   .selectable-card-container {
-    grid-template-columns: 1fr, minmax(400px, 2fr);
+    grid-template-columns: 1fr minmax(240px, 2fr);
     grid-template-rows: initial;
     margin: 2rem 0 2rem 0;
   }

From a2d9205a34c70e9748162c265588d181a14baa66 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 3 Apr 2020 16:45:04 -0700
Subject: [PATCH 08/31] make cards have the correct column span

---
 ui/app/styles/components/replication-summary.scss          | 7 +++++--
 .../addon/templates/components/replication-summary.hbs     | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index 7abf174bfbf6..23a0ddffd104 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -1,7 +1,5 @@
 .replication {
   .selectable-card-container {
-    grid-template-columns: 1fr minmax(240px, 2fr);
-    grid-template-rows: initial;
     margin: 2rem 0 2rem 0;
   }
 
@@ -17,6 +15,11 @@
     .card-title {
       margin-bottom: 2rem;
     }
+
+    &.secondaries {
+      grid-column-start: 3;
+      grid-column-end: 6;
+    }
   }
 
   .helper-text {
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index dbc1d8e62fe3..c225b30be737 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -372,7 +372,7 @@
           </div>
         </div>
 
-        <div class="selectable-card is-rounded">
+        <div class="selectable-card is-rounded secondaries">
           <div class="level">
           <code class="card-title title is-5">Known Secondaries</code>
             <ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">

From 711e7d833a76ab1c1b110360fed2907fc0af2afa Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 3 Apr 2020 16:59:57 -0700
Subject: [PATCH 09/31] make code elements inside tables black

---
 ui/app/styles/components/vlt-table.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/app/styles/components/vlt-table.scss b/ui/app/styles/components/vlt-table.scss
index 2b61b079fec5..ae10bcc2338c 100644
--- a/ui/app/styles/components/vlt-table.scss
+++ b/ui/app/styles/components/vlt-table.scss
@@ -34,4 +34,9 @@
   td.no-padding {
     padding: 0;
   }
+
+  code {
+    font-size: $size-7;
+    color: $black;
+  }
 }

From f8add4a8217fc5360692326e65e0dfd21e451dc9 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Fri, 3 Apr 2020 17:01:07 -0700
Subject: [PATCH 10/31] WIP - start VltTable component

---
 ui/lib/core/addon/components/vlt-table.js     | 20 ++++++++++++++
 .../addon/templates/components/vlt-table.hbs  | 25 ++++++++++++++++++
 ui/lib/core/app/components/vlt-table.js       |  1 +
 .../components/replication-summary.hbs        |  5 ++--
 .../integration/components/vlt-table-test.js  | 26 +++++++++++++++++++
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 ui/lib/core/addon/components/vlt-table.js
 create mode 100644 ui/lib/core/addon/templates/components/vlt-table.hbs
 create mode 100644 ui/lib/core/app/components/vlt-table.js
 create mode 100644 ui/tests/integration/components/vlt-table-test.js

diff --git a/ui/lib/core/addon/components/vlt-table.js b/ui/lib/core/addon/components/vlt-table.js
new file mode 100644
index 000000000000..1d8f74050164
--- /dev/null
+++ b/ui/lib/core/addon/components/vlt-table.js
@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import layout from '../templates/components/vlt-table';
+
+/**
+ * @module VltTable
+ * VltTable components are used to...
+ *
+ * @example
+ * ```js
+ * <VltTable @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * ```
+ * @param {object} requiredParam - requiredParam is...
+ * @param {string} [optionalParam] - optionalParam is...
+ * @param {string} [param1=defaultValue] - param1 is...
+ */
+
+export default Component.extend({
+  layout,
+  data: null,
+});
diff --git a/ui/lib/core/addon/templates/components/vlt-table.hbs b/ui/lib/core/addon/templates/components/vlt-table.hbs
new file mode 100644
index 000000000000..e4d64d48f0f5
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/vlt-table.hbs
@@ -0,0 +1,25 @@
+<div class="vlt-table">
+  <table class="is-fullwidth">
+    <caption class="is-collapsed">Known Secondaries</caption>
+    <thead class="has-text-weight-semibold">
+      <tr>
+        <th scope="col">Secondary ID</th>
+        <th scope="col">URL</th>
+        <th scope="col">Connected?</th>
+      </tr>
+    </thead>
+    <tbody>
+        <tr>
+          <th scope="row">
+            <code>secondary_id_1</code>
+          </th>
+          <td>
+            <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
+          </td>
+          <td>
+            <code>Yes</code>
+          </td>
+        </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/ui/lib/core/app/components/vlt-table.js b/ui/lib/core/app/components/vlt-table.js
new file mode 100644
index 000000000000..b1ab1cae7451
--- /dev/null
+++ b/ui/lib/core/app/components/vlt-table.js
@@ -0,0 +1 @@
+export { default } from 'core/components/vlt-table';
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index c225b30be737..ecbfa94b8727 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -380,9 +380,10 @@
             </ToolbarLink>
           </div>
           <div>
-            {{info-table-row label="Secondary ID" value="URL"}}
+            <VltTable />
+            {{!-- {{info-table-row label="Secondary ID" value="URL"}} --}}
             {{!-- TODO: make sure this works --}}
-            {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
+            {{!-- {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}} --}}
           </div>
         </div>
 
diff --git a/ui/tests/integration/components/vlt-table-test.js b/ui/tests/integration/components/vlt-table-test.js
new file mode 100644
index 000000000000..d16a8038b4dd
--- /dev/null
+++ b/ui/tests/integration/components/vlt-table-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | vlt-table', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{vlt-table}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#vlt-table}}
+        template block text
+      {{/vlt-table}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

From e6f391e9cb1cbee9e5fd237c8d4d68ac94d507e2 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 11:44:07 -0700
Subject: [PATCH 11/31] simplify css

---
 ui/app/styles/components/replication-summary.scss | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index 23a0ddffd104..d50164e334b4 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -3,11 +3,6 @@
     margin: 2rem 0 2rem 0;
   }
 
-  .card-container {
-    display: grid;
-    grid-gap: 2rem;
-  }
-
   .selectable-card {
     display: initial;
     line-height: normal;
@@ -17,8 +12,8 @@
     }
 
     &.secondaries {
-      grid-column-start: 3;
-      grid-column-end: 6;
+      grid-column: 2/4;
+      grid-row: 1/3;
     }
   }
 

From 493e9f3dff61fc46efcee951f422d6c0e93f63f2 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 11:44:43 -0700
Subject: [PATCH 12/31] renamed VltTable to ReplicationTable and use divs
 instead of table elements

---
 .../addon/templates/components/vlt-table.hbs  | 25 ---------
 ui/lib/core/app/components/vlt-table.js       |  1 -
 .../addon/components/replication-table.js}    |  8 +--
 .../components/replication-summary.hbs        | 51 +++++++++----------
 .../components/replication-table.hbs          | 12 +++++
 .../integration/components/vlt-table-test.js  | 26 ----------
 6 files changed, 39 insertions(+), 84 deletions(-)
 delete mode 100644 ui/lib/core/addon/templates/components/vlt-table.hbs
 delete mode 100644 ui/lib/core/app/components/vlt-table.js
 rename ui/lib/{core/addon/components/vlt-table.js => replication/addon/components/replication-table.js} (56%)
 create mode 100644 ui/lib/replication/addon/templates/components/replication-table.hbs
 delete mode 100644 ui/tests/integration/components/vlt-table-test.js

diff --git a/ui/lib/core/addon/templates/components/vlt-table.hbs b/ui/lib/core/addon/templates/components/vlt-table.hbs
deleted file mode 100644
index e4d64d48f0f5..000000000000
--- a/ui/lib/core/addon/templates/components/vlt-table.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="vlt-table">
-  <table class="is-fullwidth">
-    <caption class="is-collapsed">Known Secondaries</caption>
-    <thead class="has-text-weight-semibold">
-      <tr>
-        <th scope="col">Secondary ID</th>
-        <th scope="col">URL</th>
-        <th scope="col">Connected?</th>
-      </tr>
-    </thead>
-    <tbody>
-        <tr>
-          <th scope="row">
-            <code>secondary_id_1</code>
-          </th>
-          <td>
-            <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
-          </td>
-          <td>
-            <code>Yes</code>
-          </td>
-        </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/ui/lib/core/app/components/vlt-table.js b/ui/lib/core/app/components/vlt-table.js
deleted file mode 100644
index b1ab1cae7451..000000000000
--- a/ui/lib/core/app/components/vlt-table.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'core/components/vlt-table';
diff --git a/ui/lib/core/addon/components/vlt-table.js b/ui/lib/replication/addon/components/replication-table.js
similarity index 56%
rename from ui/lib/core/addon/components/vlt-table.js
rename to ui/lib/replication/addon/components/replication-table.js
index 1d8f74050164..98b878ca31b8 100644
--- a/ui/lib/core/addon/components/vlt-table.js
+++ b/ui/lib/replication/addon/components/replication-table.js
@@ -1,13 +1,13 @@
 import Component from '@ember/component';
-import layout from '../templates/components/vlt-table';
+import layout from '../templates/components/replication-table';
 
 /**
- * @module VltTable
- * VltTable components are used to...
+ * @module ReplicationTable
+ * ReplicationTable components are used to...
  *
  * @example
  * ```js
- * <VltTable @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * <ReplicationTable @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
  * ```
  * @param {object} requiredParam - requiredParam is...
  * @param {string} [optionalParam] - optionalParam is...
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index ecbfa94b8727..b575d336c72f 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -344,34 +344,31 @@
   {{else}}
     <div class="replication">
       <div class="selectable-card-container">
-        <div class="card-container">
-          <div class="selectable-card is-rounded">
-            <code class="card-title title is-5">state</code>
-            <div>
-              <span class="helper-text is-label has-text-grey">
-                Updated every ten seconds
-              </span>
-            <h3 class="title is-3">
-                {{!-- TODO make this dynamic --}}
-                <Icon @glyph="check-circle-outline" class="has-text-success" />
-              {{replicationAttrs.state}}
-              </h3>
-              {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
-            </div>
+        <div class="selectable-card is-rounded state">
+          <code class="card-title title is-5">state</code>
+          <div>
+            <span class="helper-text is-label has-text-grey">
+              Updated every ten seconds
+            </span>
+          <h3 class="title is-3">
+              {{!-- TODO make this dynamic --}}
+              <Icon @glyph="check-circle-outline" class="has-text-success" />
+            {{replicationAttrs.state}}
+            </h3>
+            {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
           </div>
-          <div class="selectable-card is-rounded">
-            <code class="card-title title is-5">Last WAL entry</code>
-            <div>
-              <span class="helper-text is-label has-text-grey">
-                Index of last Write Ahead Logs entry written on local storage.
-              </span>
-              <h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
-              {{!-- TODO: do I need this? How is this different from lastWAL above? --}}
-              {{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
-            </div>
+        </div>
+        <div class="selectable-card is-rounded last_wal">
+          <code class="card-title title is-5">Last WAL entry</code>
+          <div>
+            <span class="helper-text is-label has-text-grey">
+              Index of last Write Ahead Logs entry written on local storage.
+            </span>
+            <h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
+            {{!-- TODO: do I need this? How is this different from lastWAL above? --}}
+            {{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
           </div>
         </div>
-
         <div class="selectable-card is-rounded secondaries">
           <div class="level">
           <code class="card-title title is-5">Known Secondaries</code>
@@ -380,14 +377,12 @@
             </ToolbarLink>
           </div>
           <div>
-            <VltTable />
+            <ReplicationTable />
             {{!-- {{info-table-row label="Secondary ID" value="URL"}} --}}
             {{!-- TODO: make sure this works --}}
             {{!-- {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}} --}}
           </div>
         </div>
-
-
       </div>
       <div>
         {{info-table-row label="Merkle root index" helperText="A snapshot in time of the merkle tree's root hash. Changes on every update
diff --git a/ui/lib/replication/addon/templates/components/replication-table.hbs b/ui/lib/replication/addon/templates/components/replication-table.hbs
new file mode 100644
index 000000000000..d8aa727fceb8
--- /dev/null
+++ b/ui/lib/replication/addon/templates/components/replication-table.hbs
@@ -0,0 +1,12 @@
+<div class="vlt-table">
+  <div class="grid-header has-text-weight-semibold">
+    <label class="is-label has-text-grey">Secondary ID</label>
+    <label class="is-label has-text-grey">URL</label>
+    <label class="is-label has-text-grey">Connected?</label>
+  </div>
+  <div class="grid">
+    <code>secondary_id_1</code>
+    <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
+    <code>Yes</code>
+  </div>
+</div>
diff --git a/ui/tests/integration/components/vlt-table-test.js b/ui/tests/integration/components/vlt-table-test.js
deleted file mode 100644
index d16a8038b4dd..000000000000
--- a/ui/tests/integration/components/vlt-table-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | vlt-table', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`{{vlt-table}}`);
-
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      {{#vlt-table}}
-        template block text
-      {{/vlt-table}}
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
-  });
-});

From 8802824e8d4829c4218cb20ee7edd8f437b49151 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 13:46:41 -0700
Subject: [PATCH 13/31] fix position of known secondaries

---
 ui/app/styles/components/replication-summary.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index d50164e334b4..1901dee3014a 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -1,6 +1,11 @@
 .replication {
   .selectable-card-container {
     margin: 2rem 0 2rem 0;
+    grid-template-columns: 1fr 2fr;
+
+    @include until($mobile) {
+      grid-template-columns: 1fr;
+    }
   }
 
   .selectable-card {
@@ -12,8 +17,13 @@
     }
 
     &.secondaries {
-      grid-column: 2/4;
+      grid-column: 2/3;
       grid-row: 1/3;
+
+      @include until($mobile) {
+        grid-column: 1/1;
+        grid-row: 1/1;
+      }
     }
   }
 

From 13f93de47a908faf135f535334cbaed0c7564085 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 13:55:55 -0700
Subject: [PATCH 14/31] use table element for secondaries card

---
 .../addon/components/replication-table.js     | 15 ---------
 .../components/replication-table.hbs          | 33 +++++++++++++------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/ui/lib/replication/addon/components/replication-table.js b/ui/lib/replication/addon/components/replication-table.js
index 98b878ca31b8..f68f611b454e 100644
--- a/ui/lib/replication/addon/components/replication-table.js
+++ b/ui/lib/replication/addon/components/replication-table.js
@@ -1,20 +1,5 @@
 import Component from '@ember/component';
-import layout from '../templates/components/replication-table';
-
-/**
- * @module ReplicationTable
- * ReplicationTable components are used to...
- *
- * @example
- * ```js
- * <ReplicationTable @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
- * ```
- * @param {object} requiredParam - requiredParam is...
- * @param {string} [optionalParam] - optionalParam is...
- * @param {string} [param1=defaultValue] - param1 is...
- */
 
 export default Component.extend({
-  layout,
   data: null,
 });
diff --git a/ui/lib/replication/addon/templates/components/replication-table.hbs b/ui/lib/replication/addon/templates/components/replication-table.hbs
index d8aa727fceb8..1a1ce066a0dd 100644
--- a/ui/lib/replication/addon/templates/components/replication-table.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-table.hbs
@@ -1,12 +1,25 @@
 <div class="vlt-table">
-  <div class="grid-header has-text-weight-semibold">
-    <label class="is-label has-text-grey">Secondary ID</label>
-    <label class="is-label has-text-grey">URL</label>
-    <label class="is-label has-text-grey">Connected?</label>
-  </div>
-  <div class="grid">
-    <code>secondary_id_1</code>
-    <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
-    <code>Yes</code>
-  </div>
+  <table class="is-fullwidth">
+    <caption class="is-collapsed">Known Secondaries</caption>
+    <thead class="has-text-weight-semibold">
+      <tr>
+        <th scope="col">Secondary ID</th>
+        <th scope="col">URL</th>
+        <th scope="col">Connected?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">
+          <code>secondary_id_1</code>
+        </th>
+        <td>
+          <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
+        </td>
+        <td>
+          <code>Yes</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>

From 2c68ccf71c0b1020baa7af1965344276ae5ef434 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 16:22:34 -0700
Subject: [PATCH 15/31] add todo

---
 .../replication/addon/templates/components/replication-table.hbs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/lib/replication/addon/templates/components/replication-table.hbs b/ui/lib/replication/addon/templates/components/replication-table.hbs
index 1a1ce066a0dd..ee901ff52ec3 100644
--- a/ui/lib/replication/addon/templates/components/replication-table.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-table.hbs
@@ -9,6 +9,7 @@
       </tr>
     </thead>
     <tbody>
+      {{!-- TODO: populate rows with real data --}}
       <tr>
         <th scope="row">
           <code>secondary_id_1</code>

From 2228b8392199a1376815dc8b7642de438aad68b5 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 16:38:15 -0700
Subject: [PATCH 16/31] move replication components to replication engine

---
 .../vault/cluster/replication-dr-promote/details.hbs      | 8 ++++----
 .../replication/addon}/components/replication-page.js     | 0
 .../components/replication-page/replication-dashboard.js  | 0
 .../components/replication-page/replication-toggle.js     | 0
 .../addon}/templates/components/replication-page.hbs      | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename ui/{app => lib/replication/addon}/components/replication-page.js (100%)
 rename ui/{app => lib/replication/addon}/components/replication-page/replication-dashboard.js (100%)
 rename ui/{app => lib/replication/addon}/components/replication-page/replication-toggle.js (100%)
 rename ui/{app => lib/replication/addon}/templates/components/replication-page.hbs (100%)

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 3bf4132aaa67..114acf9a4556 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -2,12 +2,12 @@
   <div class="container is-widescreen">
     {{!-- ARG TODO setup error state and return --}}
     <ReplicationPage @model={{model}} as |Page|>
-      <Page.header 
-        @showTabs={{false}} 
+      <Page.header
+        @showTabs={{false}}
         @model={{data}}
       />
       <Page.toggle />
-      <Page.dashboard 
+      <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|>
         <Dashboard.card
@@ -19,7 +19,7 @@
           @metric_1={{if model.dr.state model.dr.state 'unknown'}}
           @metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
         />
-        <Dashboard.card 
+        <Dashboard.card
           @title="Write-Ahead Logs (WALs)"
           @property_1="Last Remote WAL"
           @property_2="Last WAL entry from primary"
diff --git a/ui/app/components/replication-page.js b/ui/lib/replication/addon/components/replication-page.js
similarity index 100%
rename from ui/app/components/replication-page.js
rename to ui/lib/replication/addon/components/replication-page.js
diff --git a/ui/app/components/replication-page/replication-dashboard.js b/ui/lib/replication/addon/components/replication-page/replication-dashboard.js
similarity index 100%
rename from ui/app/components/replication-page/replication-dashboard.js
rename to ui/lib/replication/addon/components/replication-page/replication-dashboard.js
diff --git a/ui/app/components/replication-page/replication-toggle.js b/ui/lib/replication/addon/components/replication-page/replication-toggle.js
similarity index 100%
rename from ui/app/components/replication-page/replication-toggle.js
rename to ui/lib/replication/addon/components/replication-page/replication-toggle.js
diff --git a/ui/app/templates/components/replication-page.hbs b/ui/lib/replication/addon/templates/components/replication-page.hbs
similarity index 100%
rename from ui/app/templates/components/replication-page.hbs
rename to ui/lib/replication/addon/templates/components/replication-page.hbs

From 0de049468bcd2784377f06f56fd287f6bc0c6a91 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 6 Apr 2020 17:02:03 -0700
Subject: [PATCH 17/31] Revert "move replication components to replication
 engine"

This reverts commit 2228b8392199a1376815dc8b7642de438aad68b5.
---
 .../addon => app}/components/replication-page.js          | 0
 .../components/replication-page/replication-dashboard.js  | 0
 .../components/replication-page/replication-toggle.js     | 0
 .../templates/components/replication-page.hbs             | 0
 .../vault/cluster/replication-dr-promote/details.hbs      | 8 ++++----
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename ui/{lib/replication/addon => app}/components/replication-page.js (100%)
 rename ui/{lib/replication/addon => app}/components/replication-page/replication-dashboard.js (100%)
 rename ui/{lib/replication/addon => app}/components/replication-page/replication-toggle.js (100%)
 rename ui/{lib/replication/addon => app}/templates/components/replication-page.hbs (100%)

diff --git a/ui/lib/replication/addon/components/replication-page.js b/ui/app/components/replication-page.js
similarity index 100%
rename from ui/lib/replication/addon/components/replication-page.js
rename to ui/app/components/replication-page.js
diff --git a/ui/lib/replication/addon/components/replication-page/replication-dashboard.js b/ui/app/components/replication-page/replication-dashboard.js
similarity index 100%
rename from ui/lib/replication/addon/components/replication-page/replication-dashboard.js
rename to ui/app/components/replication-page/replication-dashboard.js
diff --git a/ui/lib/replication/addon/components/replication-page/replication-toggle.js b/ui/app/components/replication-page/replication-toggle.js
similarity index 100%
rename from ui/lib/replication/addon/components/replication-page/replication-toggle.js
rename to ui/app/components/replication-page/replication-toggle.js
diff --git a/ui/lib/replication/addon/templates/components/replication-page.hbs b/ui/app/templates/components/replication-page.hbs
similarity index 100%
rename from ui/lib/replication/addon/templates/components/replication-page.hbs
rename to ui/app/templates/components/replication-page.hbs
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 114acf9a4556..3bf4132aaa67 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -2,12 +2,12 @@
   <div class="container is-widescreen">
     {{!-- ARG TODO setup error state and return --}}
     <ReplicationPage @model={{model}} as |Page|>
-      <Page.header
-        @showTabs={{false}}
+      <Page.header 
+        @showTabs={{false}} 
         @model={{data}}
       />
       <Page.toggle />
-      <Page.dashboard
+      <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|>
         <Dashboard.card
@@ -19,7 +19,7 @@
           @metric_1={{if model.dr.state model.dr.state 'unknown'}}
           @metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
         />
-        <Dashboard.card
+        <Dashboard.card 
           @title="Write-Ahead Logs (WALs)"
           @property_1="Last Remote WAL"
           @property_2="Last WAL entry from primary"

From 2b20452d445c55cfd8616a4fca7941e32769b93b Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 11:09:13 -0700
Subject: [PATCH 18/31] move ReplicationPrimaryCards to components

---
 .../components/replication-primary-card.scss  | 33 +++++++++++++++++
 ui/app/styles/core.scss                       |  1 +
 .../components/replication-primary-card.js    |  8 ++++
 .../components/replication-primary-card.hbs   | 13 +++++++
 .../components/replication-summary.hbs        | 37 ++++++-------------
 5 files changed, 66 insertions(+), 26 deletions(-)
 create mode 100644 ui/app/styles/components/replication-primary-card.scss
 create mode 100644 ui/lib/replication/addon/components/replication-primary-card.js
 create mode 100644 ui/lib/replication/addon/templates/components/replication-primary-card.hbs

diff --git a/ui/app/styles/components/replication-primary-card.scss b/ui/app/styles/components/replication-primary-card.scss
new file mode 100644
index 000000000000..1901dee3014a
--- /dev/null
+++ b/ui/app/styles/components/replication-primary-card.scss
@@ -0,0 +1,33 @@
+.replication {
+  .selectable-card-container {
+    margin: 2rem 0 2rem 0;
+    grid-template-columns: 1fr 2fr;
+
+    @include until($mobile) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .selectable-card {
+    display: initial;
+    line-height: normal;
+
+    .card-title {
+      margin-bottom: 2rem;
+    }
+
+    &.secondaries {
+      grid-column: 2/3;
+      grid-row: 1/3;
+
+      @include until($mobile) {
+        grid-column: 1/1;
+        grid-row: 1/1;
+      }
+    }
+  }
+
+  .helper-text {
+    font-weight: normal;
+  }
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 2d1b3ce9ff71..c1e75c6581e8 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -79,6 +79,7 @@
 @import './components/radial-progress';
 @import './components/raft-join';
 @import './components/replication-dashboard';
+@import './components/replication-primary-card';
 @import './components/replication-summary';
 @import './components/role-item';
 @import './components/search-select';
diff --git a/ui/lib/replication/addon/components/replication-primary-card.js b/ui/lib/replication/addon/components/replication-primary-card.js
new file mode 100644
index 000000000000..a9f813c875a1
--- /dev/null
+++ b/ui/lib/replication/addon/components/replication-primary-card.js
@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+  title: null,
+  description: null,
+  metric: null,
+});
diff --git a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
new file mode 100644
index 000000000000..ca31913d103b
--- /dev/null
+++ b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
@@ -0,0 +1,13 @@
+<div class="selectable-card is-rounded {{dasherize title}}">
+  <code class="card-title title is-5">{{title}}</code>
+  <div>
+    <span class="helper-text is-label has-text-grey">
+      {{description}}
+    </span>
+    <h3 class="title is-3">
+      {{!-- TODO make this dynamic --}}
+      <Icon @glyph="check-circle-outline" class="has-text-success" />
+      {{metric}}
+    </h3>
+  </div>
+</div>
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index b575d336c72f..4872df5ee576 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -344,31 +344,17 @@
   {{else}}
     <div class="replication">
       <div class="selectable-card-container">
-        <div class="selectable-card is-rounded state">
-          <code class="card-title title is-5">state</code>
-          <div>
-            <span class="helper-text is-label has-text-grey">
-              Updated every ten seconds
-            </span>
-          <h3 class="title is-3">
-              {{!-- TODO make this dynamic --}}
-              <Icon @glyph="check-circle-outline" class="has-text-success" />
-            {{replicationAttrs.state}}
-            </h3>
-            {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
-          </div>
-        </div>
-        <div class="selectable-card is-rounded last_wal">
-          <code class="card-title title is-5">Last WAL entry</code>
-          <div>
-            <span class="helper-text is-label has-text-grey">
-              Index of last Write Ahead Logs entry written on local storage.
-            </span>
-            <h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
-            {{!-- TODO: do I need this? How is this different from lastWAL above? --}}
-            {{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
-          </div>
-        </div>
+        {{!-- TODO: there are 2 attributes for both state and lastWAL. which one do i use? --}}
+        <ReplicationPrimaryCard
+          @title='State'
+          @description='Updated every ten seconds.'
+          @metric={{replicationAttrs.state}} />
+        <ReplicationPrimaryCard
+          @title='Last WAL entry'
+          @description='Index of last Write Ahead Logs entry written on local storage.'
+          @metric={{replicationAttrs.lastWAL}}
+          />
+
         <div class="selectable-card is-rounded secondaries">
           <div class="level">
           <code class="card-title title is-5">Known Secondaries</code>
@@ -378,7 +364,6 @@
           </div>
           <div>
             <ReplicationTable />
-            {{!-- {{info-table-row label="Secondary ID" value="URL"}} --}}
             {{!-- TODO: make sure this works --}}
             {{!-- {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}} --}}
           </div>

From 3d40297af752ee677f37c7544deb6ab83a2a0011 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 11:19:32 -0700
Subject: [PATCH 19/31] remove hover box shadow since cards are not selectable
 yet

---
 ui/app/styles/components/replication-dashboard.scss    | 4 ++++
 ui/app/styles/components/replication-primary-card.scss | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index dd750f610519..3f2506fa93f1 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -10,6 +10,10 @@
   .selectable-card {
     line-height: normal;
 
+    &:hover {
+      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+    }
+
     .title-number {
       font-size: $size-3;
       align-self: end;
diff --git a/ui/app/styles/components/replication-primary-card.scss b/ui/app/styles/components/replication-primary-card.scss
index 1901dee3014a..381809f4803c 100644
--- a/ui/app/styles/components/replication-primary-card.scss
+++ b/ui/app/styles/components/replication-primary-card.scss
@@ -12,6 +12,10 @@
     display: initial;
     line-height: normal;
 
+    &:hover {
+      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+    }
+
     .card-title {
       margin-bottom: 2rem;
     }

From 5cb3fb7f4f2ccee5b4a69f51b2d2719c26152dcd Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 12:31:56 -0700
Subject: [PATCH 20/31] only apply padding to replication selectable-cards

---
 ui/app/styles/components/replication-primary-card.scss | 1 +
 ui/app/styles/components/selectable-card.scss          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/app/styles/components/replication-primary-card.scss b/ui/app/styles/components/replication-primary-card.scss
index 381809f4803c..8adf752d9297 100644
--- a/ui/app/styles/components/replication-primary-card.scss
+++ b/ui/app/styles/components/replication-primary-card.scss
@@ -11,6 +11,7 @@
   .selectable-card {
     display: initial;
     line-height: normal;
+    padding: $spacing-l;
 
     &:hover {
       box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
diff --git a/ui/app/styles/components/selectable-card.scss b/ui/app/styles/components/selectable-card.scss
index 26ca3ffcbdb4..a2939ceccd94 100644
--- a/ui/app/styles/components/selectable-card.scss
+++ b/ui/app/styles/components/selectable-card.scss
@@ -2,7 +2,7 @@
   box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
   display: flex;
   justify-content: space-between;
-  padding: $spacing-l;
+  padding: $spacing-l 0 $spacing-l $spacing-l;
   line-height: 0;
 
   &:hover {

From a379a3e9b25ffb1072e81029f8d8e63842760b14 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 12:34:51 -0700
Subject: [PATCH 21/31] specify replication vlt-table in classname

---
 .../addon/templates/components/replication-table.hbs            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/lib/replication/addon/templates/components/replication-table.hbs b/ui/lib/replication/addon/templates/components/replication-table.hbs
index ee901ff52ec3..54fd706b4d8e 100644
--- a/ui/lib/replication/addon/templates/components/replication-table.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-table.hbs
@@ -1,4 +1,4 @@
-<div class="vlt-table">
+<div class="replication vlt-table">
   <table class="is-fullwidth">
     <caption class="is-collapsed">Known Secondaries</caption>
     <thead class="has-text-weight-semibold">

From d7c51e8a7aaca79085e60f3950344c5e26d02dfe Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 13:20:56 -0700
Subject: [PATCH 22/31] move replication toggle and toggle into core addon

---
 ui/lib/core/addon/components/replication-toggle.js         | 7 +++++++
 ui/{app => lib/core/addon}/components/toggle.js            | 2 ++
 .../core/addon/templates/components/replication-toggle.hbs | 5 +++++
 ui/{app => lib/core/addon}/templates/components/toggle.hbs | 2 +-
 ui/lib/core/app/components/replication-toggle.js           | 1 +
 ui/lib/core/app/components/toggle.js                       | 1 +
 .../addon/templates/components/replication-summary.hbs     | 1 +
 7 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 ui/lib/core/addon/components/replication-toggle.js
 rename ui/{app => lib/core/addon}/components/toggle.js (96%)
 create mode 100644 ui/lib/core/addon/templates/components/replication-toggle.hbs
 rename ui/{app => lib/core/addon}/templates/components/toggle.hbs (97%)
 create mode 100644 ui/lib/core/app/components/replication-toggle.js
 create mode 100644 ui/lib/core/app/components/toggle.js

diff --git a/ui/lib/core/addon/components/replication-toggle.js b/ui/lib/core/addon/components/replication-toggle.js
new file mode 100644
index 000000000000..4f302bbbf55a
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-toggle.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-toggle';
+
+export default Component.extend({
+  layout,
+  checkedValue: false,
+});
diff --git a/ui/app/components/toggle.js b/ui/lib/core/addon/components/toggle.js
similarity index 96%
rename from ui/app/components/toggle.js
rename to ui/lib/core/addon/components/toggle.js
index 2732798dd2d5..e593c74d6c48 100644
--- a/ui/app/components/toggle.js
+++ b/ui/lib/core/addon/components/toggle.js
@@ -17,8 +17,10 @@
 
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import layout from '../templates/components/toggle';
 
 export default Component.extend({
+  layout,
   tagName: '',
   checked: false,
   disabled: false,
diff --git a/ui/lib/core/addon/templates/components/replication-toggle.hbs b/ui/lib/core/addon/templates/components/replication-toggle.hbs
new file mode 100644
index 000000000000..c80c901388e4
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/replication-toggle.hbs
@@ -0,0 +1,5 @@
+<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/components/toggle.hbs b/ui/lib/core/addon/templates/components/toggle.hbs
similarity index 97%
rename from ui/app/templates/components/toggle.hbs
rename to ui/lib/core/addon/templates/components/toggle.hbs
index 16cf4700be3c..6e6cbec31c6d 100644
--- a/ui/app/templates/components/toggle.hbs
+++ b/ui/lib/core/addon/templates/components/toggle.hbs
@@ -8,4 +8,4 @@
   disabled=disabled
   data-test-toggle-input=name
 }}
-<label data-test-toggle-label={{name}} for={{safeId}}>{{yield}}</label>
\ No newline at end of file
+<label data-test-toggle-label={{name}} for={{safeId}}>{{yield}}</label>
diff --git a/ui/lib/core/app/components/replication-toggle.js b/ui/lib/core/app/components/replication-toggle.js
new file mode 100644
index 000000000000..c8ba069ccf1c
--- /dev/null
+++ b/ui/lib/core/app/components/replication-toggle.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-toggle';
diff --git a/ui/lib/core/app/components/toggle.js b/ui/lib/core/app/components/toggle.js
new file mode 100644
index 000000000000..36e3784c9110
--- /dev/null
+++ b/ui/lib/core/app/components/toggle.js
@@ -0,0 +1 @@
+export { default } from 'core/components/toggle';
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 4872df5ee576..5bccab03230d 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -343,6 +343,7 @@
     The cluster is initializing replication. This may take some time.
   {{else}}
     <div class="replication">
+      <ReplicationToggle />
       <div class="selectable-card-container">
         {{!-- TODO: there are 2 attributes for both state and lastWAL. which one do i use? --}}
         <ReplicationPrimaryCard

From 8aa04422bbfc418087760e277018a189f7ffb726 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 13:26:56 -0700
Subject: [PATCH 23/31] remove extra toolbar border

---
 ui/app/styles/components/replication-summary.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index 1901dee3014a..50ac00eec8c6 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -8,6 +8,10 @@
     }
   }
 
+  .toolbar {
+    border-top: 0px;
+  }
+
   .selectable-card {
     display: initial;
     line-height: normal;

From 403ad11215d62ceb7595b5ecbb2fe83fd947f346 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 13:29:28 -0700
Subject: [PATCH 24/31] remove duplicate css

---
 .../components/replication-primary-card.scss  | 14 +-------------
 .../components/replication-summary.scss       | 19 -------------------
 2 files changed, 1 insertion(+), 32 deletions(-)

diff --git a/ui/app/styles/components/replication-primary-card.scss b/ui/app/styles/components/replication-primary-card.scss
index 8adf752d9297..3a260d326cc1 100644
--- a/ui/app/styles/components/replication-primary-card.scss
+++ b/ui/app/styles/components/replication-primary-card.scss
@@ -1,13 +1,4 @@
 .replication {
-  .selectable-card-container {
-    margin: 2rem 0 2rem 0;
-    grid-template-columns: 1fr 2fr;
-
-    @include until($mobile) {
-      grid-template-columns: 1fr;
-    }
-  }
-
   .selectable-card {
     display: initial;
     line-height: normal;
@@ -21,6 +12,7 @@
       margin-bottom: 2rem;
     }
 
+    // TODO: move this when it is its own component
     &.secondaries {
       grid-column: 2/3;
       grid-row: 1/3;
@@ -31,8 +23,4 @@
       }
     }
   }
-
-  .helper-text {
-    font-weight: normal;
-  }
 }
diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index 50ac00eec8c6..b0bdc22f3e73 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -12,25 +12,6 @@
     border-top: 0px;
   }
 
-  .selectable-card {
-    display: initial;
-    line-height: normal;
-
-    .card-title {
-      margin-bottom: 2rem;
-    }
-
-    &.secondaries {
-      grid-column: 2/3;
-      grid-row: 1/3;
-
-      @include until($mobile) {
-        grid-column: 1/1;
-        grid-row: 1/1;
-      }
-    }
-  }
-
   .helper-text {
     font-weight: normal;
   }

From 228d100c7f3e64df3fbaf83067c191166e482449 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 13:56:33 -0700
Subject: [PATCH 25/31] move ReplicationTableRows to core addon and use them on
 DR primary page

---
 .../replication-dashboard/replication-table-rows.hbs |  2 +-
 .../core/addon/components/replication-table-rows.js  |  6 ++++++
 .../templates/components/replication-table-rows.hbs  | 12 ++++++++++++
 ui/lib/core/app/components/replication-table-rows.js |  1 +
 .../templates/components/replication-summary.hbs     |  9 ++++++++-
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 ui/lib/core/addon/components/replication-table-rows.js
 create mode 100644 ui/lib/core/addon/templates/components/replication-table-rows.hbs
 create mode 100644 ui/lib/core/app/components/replication-table-rows.js

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
index 6584fd7ecb16..935d424e4d96 100644
--- 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
@@ -9,4 +9,4 @@
 {{#if syncProgress}}
 {{!-- ARG TODO: need to test this --}}
   {{info-table-row label="Sync progress" value=(concat syncProgress.progress '/' syncProgress.total)}}
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/ui/lib/core/addon/components/replication-table-rows.js b/ui/lib/core/addon/components/replication-table-rows.js
new file mode 100644
index 000000000000..ca0e587c12b8
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-table-rows.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-table-rows';
+
+export default Component.extend({
+  layout,
+});
diff --git a/ui/lib/core/addon/templates/components/replication-table-rows.hbs b/ui/lib/core/addon/templates/components/replication-table-rows.hbs
new file mode 100644
index 000000000000..6584fd7ecb16
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/replication-table-rows.hbs
@@ -0,0 +1,12 @@
+<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}}
\ No newline at end of file
diff --git a/ui/lib/core/app/components/replication-table-rows.js b/ui/lib/core/app/components/replication-table-rows.js
new file mode 100644
index 000000000000..3835a992b1a9
--- /dev/null
+++ b/ui/lib/core/app/components/replication-table-rows.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-table-rows';
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 5bccab03230d..d71dea8445d0 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -370,7 +370,13 @@
           </div>
         </div>
       </div>
-      <div>
+      <ReplicationTableRows
+          @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 }}/>
+      {{!--
+        <div>
         {{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=replicationAttrs.merkleRoot}}
         {{info-table-row label="Mode" value=replicationAttrs.mode}}
@@ -380,6 +386,7 @@
       {{#if replicationAttrs.syncProgress}}
         {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
       {{/if}}
+      --}}
     </div>
   {{/if}}
 {{/if}}

From 376e9893a58d0f2b51dbcc51368f058efa1ae031 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 14:03:50 -0700
Subject: [PATCH 26/31] clean up todos

---
 .../components/replication-summary.hbs        | 22 +++++--------------
 .../components/replication-table.hbs          |  2 +-
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index d71dea8445d0..8bec373b2f10 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -345,7 +345,7 @@
     <div class="replication">
       <ReplicationToggle />
       <div class="selectable-card-container">
-        {{!-- TODO: there are 2 attributes for both state and lastWAL. which one do i use? --}}
+        {{!-- TODO: there are 2 attributes for both state and lastWAL. which one do I use? --}}
         <ReplicationPrimaryCard
           @title='State'
           @description='Updated every ten seconds.'
@@ -356,6 +356,7 @@
           @metric={{replicationAttrs.lastWAL}}
           />
 
+        {{!-- TODO: move this into its own component --}}
         <div class="selectable-card is-rounded secondaries">
           <div class="level">
           <code class="card-title title is-5">Known Secondaries</code>
@@ -363,30 +364,19 @@
               Manage
             </ToolbarLink>
           </div>
-          <div>
+        <div>
+
+            {{!-- TODO: pass in model or model.dr to populate with real data --}}
             <ReplicationTable />
-            {{!-- TODO: make sure this works --}}
-            {{!-- {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}} --}}
           </div>
         </div>
       </div>
+      {{!-- TODO: improve this API to pass in model.dr, or rename metric_1 to merkleRoot etc --}}
       <ReplicationTableRows
           @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 }}/>
-      {{!--
-        <div>
-        {{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=replicationAttrs.merkleRoot}}
-        {{info-table-row label="Mode" value=replicationAttrs.mode}}
-        {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=replicationAttrs.clusterId}}
-      </div>
-      {{!-- TODO: move this to the right spot --}}
-      {{#if replicationAttrs.syncProgress}}
-        {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
-      {{/if}}
-      --}}
     </div>
   {{/if}}
 {{/if}}
diff --git a/ui/lib/replication/addon/templates/components/replication-table.hbs b/ui/lib/replication/addon/templates/components/replication-table.hbs
index 54fd706b4d8e..13745ac04aed 100644
--- a/ui/lib/replication/addon/templates/components/replication-table.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-table.hbs
@@ -9,7 +9,7 @@
       </tr>
     </thead>
     <tbody>
-      {{!-- TODO: populate rows with real data --}}
+      {{!-- TODO: populate rows with real data via replicationAttrs.secondaryId}} --}}
       <tr>
         <th scope="row">
           <code>secondary_id_1</code>

From 7806198a7f3a2eccab06a28d9d90879595b0a2ec Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 7 Apr 2020 16:20:49 -0700
Subject: [PATCH 27/31] add jsdoc comments

---
 .../components/replication-primary-card.js      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/ui/lib/replication/addon/components/replication-primary-card.js b/ui/lib/replication/addon/components/replication-primary-card.js
index a9f813c875a1..04bb1f9a92fd 100644
--- a/ui/lib/replication/addon/components/replication-primary-card.js
+++ b/ui/lib/replication/addon/components/replication-primary-card.js
@@ -1,5 +1,22 @@
 import Component from '@ember/component';
 
+/**
+ * @module ReplicationPrimaryCard
+ * ReplicationPrimaryCard components
+ *
+ * @example
+ * ```js
+ * <ReplicationPrimaryCard
+    @title='Last WAL entry'
+    @description='Index of last Write Ahead Logs entry written on local storage.'
+    @metric={{replicationAttrs.lastWAL}}
+    />
+ * ```
+ * @param {string} [title=null] - The title to be displayed on the top left corner of the card.
+ * @param {string} [description=null] - Helper text to describe the metric on the card.
+ * @param {string} metric=null - The main metric to highlight on the card.
+ */
+
 export default Component.extend({
   tagName: '',
   title: null,

From 4e4c8489ae3f8507ce31a2f9a40d20a3cb502e5a Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Wed, 8 Apr 2020 10:37:18 -0700
Subject: [PATCH 28/31] rename ReplicationTable to KnownSecondaries

---
 ...on-table.js => known-secondaries-table.js} |  2 +-
 ...-table.hbs => known-secondaries-table.hbs} | 24 ++++++++++---------
 .../components/replication-summary.hbs        | 13 +++++-----
 3 files changed, 20 insertions(+), 19 deletions(-)
 rename ui/lib/replication/addon/components/{replication-table.js => known-secondaries-table.js} (75%)
 rename ui/lib/replication/addon/templates/components/{replication-table.hbs => known-secondaries-table.hbs} (53%)

diff --git a/ui/lib/replication/addon/components/replication-table.js b/ui/lib/replication/addon/components/known-secondaries-table.js
similarity index 75%
rename from ui/lib/replication/addon/components/replication-table.js
rename to ui/lib/replication/addon/components/known-secondaries-table.js
index f68f611b454e..e6f7b2a32a27 100644
--- a/ui/lib/replication/addon/components/replication-table.js
+++ b/ui/lib/replication/addon/components/known-secondaries-table.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  data: null,
+  replicationAttrs: null,
 });
diff --git a/ui/lib/replication/addon/templates/components/replication-table.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
similarity index 53%
rename from ui/lib/replication/addon/templates/components/replication-table.hbs
rename to ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
index 13745ac04aed..a4d911779a89 100644
--- a/ui/lib/replication/addon/templates/components/replication-table.hbs
+++ b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
@@ -10,17 +10,19 @@
     </thead>
     <tbody>
       {{!-- TODO: populate rows with real data via replicationAttrs.secondaryId}} --}}
-      <tr>
-        <th scope="row">
-          <code>secondary_id_1</code>
-        </th>
-        <td>
-          <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
-        </td>
-        <td>
-          <code>Yes</code>
-        </td>
-      </tr>
+      {{#each in replicationAttrs.knownSecondaries as |secondary|}}
+          <tr>
+            <th scope="row">
+              <code>{{secondary}}</code>
+            </th>
+            <td>
+              <code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
+            </td>
+            <td>
+              <code>Yes</code>
+            </td>
+          </tr>
+      {{/each}}
     </tbody>
   </table>
 </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 8bec373b2f10..cbc24c2e4e8e 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -365,18 +365,17 @@
             </ToolbarLink>
           </div>
         <div>
-
-            {{!-- TODO: pass in model or model.dr to populate with real data --}}
-            <ReplicationTable />
+            {{!-- TODO: rename to KnownSecondariesTable and pass in model or model.dr to populate with real data --}}
+            <KnownSecondariesTable @replicationAttrs={{replicationAttrs}}/>
           </div>
         </div>
       </div>
       {{!-- TODO: improve this API to pass in model.dr, or rename metric_1 to merkleRoot etc --}}
       <ReplicationTableRows
-          @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 }}/>
+        @merkleRoot={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown' }}
+        @mode={{if model.dr.mode model.dr.mode 'unknown' }}
+        @clusterId={{if model.dr.clusterId model.dr.clusterId 'unknown' }}
+        @syncProgress={{if model.dr.syncProgress syncProgress false }}/>
     </div>
   {{/if}}
 {{/if}}

From 161bf47cb06075267e4d4fcc5f2235b36d2bd9ae Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Wed, 8 Apr 2020 11:10:26 -0700
Subject: [PATCH 29/31] update replicaiton table api to accept flexible data

---
 .../components/replication-table-rows.js      | 22 +++++++++++++++++
 .../components/replication-table-rows.hbs     | 24 ++++++++++---------
 .../components/replication-summary.hbs        |  8 ++-----
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/ui/lib/core/addon/components/replication-table-rows.js b/ui/lib/core/addon/components/replication-table-rows.js
index ca0e587c12b8..e3febd48d26d 100644
--- a/ui/lib/core/addon/components/replication-table-rows.js
+++ b/ui/lib/core/addon/components/replication-table-rows.js
@@ -1,6 +1,28 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import layout from '../templates/components/replication-table-rows';
 
 export default Component.extend({
   layout,
+  data: null,
+  clusterDetails: computed('data', function() {
+    const { data } = this.data;
+    return data.dr || data;
+  }),
+  mode: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.mode || 'unknown';
+  }),
+  merkleRoot: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.merkleRoot || 'unknown';
+  }),
+  clusterId: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.clusterId || 'unknown';
+  }),
+  syncProgress: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.syncProgress || false;
+  }),
 });
diff --git a/ui/lib/core/addon/templates/components/replication-table-rows.hbs b/ui/lib/core/addon/templates/components/replication-table-rows.hbs
index 6584fd7ecb16..0b64e1b5e80f 100644
--- a/ui/lib/core/addon/templates/components/replication-table-rows.hbs
+++ b/ui/lib/core/addon/templates/components/replication-table-rows.hbs
@@ -1,12 +1,14 @@
-<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>
+{{#unless data}}
+  <EmptyState />
+{{else}}
+  <div class="has-large-margin-top">
+    {{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>
 
-{{#if syncProgress}}
-{{!-- ARG TODO: need to test this --}}
-  {{info-table-row label="Sync progress" value=(concat syncProgress.progress '/' syncProgress.total)}}
-{{/if}}
\ No newline at end of file
+  {{#if syncProgress}}
+  {{!-- ARG TODO: need to test this --}}
+    {{info-table-row label="Sync progress" value=(concat syncProgress.progress '/' syncProgress.total)}}
+  {{/if}}
+{{/unless}}
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index cbc24c2e4e8e..95af2848c8c1 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -366,16 +366,12 @@
           </div>
         <div>
             {{!-- TODO: rename to KnownSecondariesTable and pass in model or model.dr to populate with real data --}}
-            <KnownSecondariesTable @replicationAttrs={{replicationAttrs}}/>
+            <KnownSecondariesTable @data={{replicationAttrs}}/>
           </div>
         </div>
       </div>
       {{!-- TODO: improve this API to pass in model.dr, or rename metric_1 to merkleRoot etc --}}
-      <ReplicationTableRows
-        @merkleRoot={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown' }}
-        @mode={{if model.dr.mode model.dr.mode 'unknown' }}
-        @clusterId={{if model.dr.clusterId model.dr.clusterId 'unknown' }}
-        @syncProgress={{if model.dr.syncProgress syncProgress false }}/>
+      <ReplicationTableRows @data={{replicationAttrs}}/>
     </div>
   {{/if}}
 {{/if}}

From 677ece98f3da834d54dc5f90c284010d9d77498d Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Wed, 8 Apr 2020 11:11:01 -0700
Subject: [PATCH 30/31] rename replicationAttrs to data

---
 ui/lib/replication/addon/components/known-secondaries-table.js  | 2 +-
 .../addon/templates/components/known-secondaries-table.hbs      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/lib/replication/addon/components/known-secondaries-table.js b/ui/lib/replication/addon/components/known-secondaries-table.js
index e6f7b2a32a27..f68f611b454e 100644
--- a/ui/lib/replication/addon/components/known-secondaries-table.js
+++ b/ui/lib/replication/addon/components/known-secondaries-table.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  replicationAttrs: null,
+  data: null,
 });
diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
index a4d911779a89..b8455c01e6ba 100644
--- a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
+++ b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
@@ -10,7 +10,7 @@
     </thead>
     <tbody>
       {{!-- TODO: populate rows with real data via replicationAttrs.secondaryId}} --}}
-      {{#each in replicationAttrs.knownSecondaries as |secondary|}}
+      {{#each in data.knownSecondaries as |secondary|}}
           <tr>
             <th scope="row">
               <code>{{secondary}}</code>

From 9cb8f3ff64fa13b57573823f34b7fe1d43f1a74c Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Wed, 8 Apr 2020 11:12:58 -0700
Subject: [PATCH 31/31] move replication components to core addon

---
 .../addon/components/replication-dashboard.js |  6 ++
 .../core/addon/components/replication-page.js |  6 ++
 .../templates/components/replication-card.hbs | 13 ++++
 .../components/replication-dashboard.hbs      | 24 +++++++
 .../components/replication-header.hbs         | 66 +++++++++++++++++++
 .../app/components/replication-dashboard.js   |  1 +
 .../core/app/components/replication-page.js   |  1 +
 7 files changed, 117 insertions(+)
 create mode 100644 ui/lib/core/addon/components/replication-dashboard.js
 create mode 100644 ui/lib/core/addon/components/replication-page.js
 create mode 100644 ui/lib/core/addon/templates/components/replication-card.hbs
 create mode 100644 ui/lib/core/addon/templates/components/replication-dashboard.hbs
 create mode 100644 ui/lib/core/addon/templates/components/replication-header.hbs
 create mode 100644 ui/lib/core/app/components/replication-dashboard.js
 create mode 100644 ui/lib/core/app/components/replication-page.js

diff --git a/ui/lib/core/addon/components/replication-dashboard.js b/ui/lib/core/addon/components/replication-dashboard.js
new file mode 100644
index 000000000000..cce873452c33
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-dashboard.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-dashboard';
+
+export default Component.extend({
+  layout,
+});
diff --git a/ui/lib/core/addon/components/replication-page.js b/ui/lib/core/addon/components/replication-page.js
new file mode 100644
index 000000000000..e0470124610f
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-page.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-page';
+
+export default Component.extend({
+  layout,
+});
diff --git a/ui/lib/core/addon/templates/components/replication-card.hbs b/ui/lib/core/addon/templates/components/replication-card.hbs
new file mode 100644
index 000000000000..0f1f8e3c4a5f
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/replication-card.hbs
@@ -0,0 +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>
+  </div>
+  <div class="grid-item-wal">
+    <code class="has-text-black">{{property_2}}</code>
+    <p class="has-text-grey is-size-8">{{description_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>
+</div>
diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
new file mode 100644
index 000000000000..9d69ecc093d3
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -0,0 +1,24 @@
+<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>
+  {{#if model.dr.primaryClusterAddr}}
+    <code>{{model.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-page/replication-dashboard/replication-table-rows'
+    )
+  )}}
+
+</div>
diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
new file mode 100644
index 000000000000..b115f07163e9
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -0,0 +1,66 @@
+{{!-- 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>
+      <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 model.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">
+        {{model.dr.mode}}
+      </span>
+      <span class="tag">
+        {{model.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>
+        {{!-- TODO should map over array of options with link and title --}}
+        {{#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/app/components/replication-dashboard.js b/ui/lib/core/app/components/replication-dashboard.js
new file mode 100644
index 000000000000..4eb3a05dbd25
--- /dev/null
+++ b/ui/lib/core/app/components/replication-dashboard.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-dashboard';
diff --git a/ui/lib/core/app/components/replication-page.js b/ui/lib/core/app/components/replication-page.js
new file mode 100644
index 000000000000..7d3472e19291
--- /dev/null
+++ b/ui/lib/core/app/components/replication-page.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-page';