From a48257beaa3fca110417ea4ed20d0fc5e6e3f44c Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Tue, 14 Apr 2020 14:38:55 -0700
Subject: [PATCH 1/5] show dynamic state glyph

---
 .../replication/addon/components/replication-primary-card.js | 2 ++
 .../addon/templates/components/replication-primary-card.hbs  | 5 +++--
 .../addon/templates/components/replication-summary.hbs       | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/lib/replication/addon/components/replication-primary-card.js b/ui/lib/replication/addon/components/replication-primary-card.js
index 04bb1f9a92f..15be77c7a71 100644
--- a/ui/lib/replication/addon/components/replication-primary-card.js
+++ b/ui/lib/replication/addon/components/replication-primary-card.js
@@ -14,6 +14,7 @@ import Component from '@ember/component';
  * ```
  * @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 {object} [glyph=null] - The glyph to display beside the metric.
  * @param {string} metric=null - The main metric to highlight on the card.
  */
 
@@ -22,4 +23,5 @@ export default Component.extend({
   title: null,
   description: null,
   metric: null,
+  glyph: 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
index ca31913d103..74f4f15f980 100644
--- a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
@@ -5,8 +5,9 @@
       {{description}}
     </span>
     <h3 class="title is-3">
-      {{!-- TODO make this dynamic --}}
-      <Icon @glyph="check-circle-outline" class="has-text-success" />
+      {{#if glyph}}
+        <Icon @glyph={{glyph}} class="has-text-success" />
+      {{/if}}
       {{metric}}
     </h3>
   </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index f06e379d98e..315d474cefb 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -349,6 +349,7 @@
         <ReplicationPrimaryCard
           @title='State'
           @description='Updated every ten seconds.'
+          @glyph={{get cluster (concat replicationMode 'StateGlyph')}}
           @metric={{replicationAttrs.state}}/>
         <ReplicationPrimaryCard
           @title='Last WAL entry'

From 2e4ed12c1d4e574920512a7f80818ca89140f254 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 20 Apr 2020 12:31:53 -0700
Subject: [PATCH 2/5] show state glyph after state

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

diff --git a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
index 74f4f15f980..26a180cfd36 100644
--- a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
@@ -5,10 +5,10 @@
       {{description}}
     </span>
     <h3 class="title is-3">
+      {{metric}}
       {{#if glyph}}
         <Icon @glyph={{glyph}} class="has-text-success" />
       {{/if}}
-      {{metric}}
     </h3>
   </div>
 </div>

From 6e5fddfaf6393ca981b16eccdd153b4aa9fbab03 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 20 Apr 2020 13:02:10 -0700
Subject: [PATCH 3/5] move LearnLink into core addon

---
 ui/{app => lib/core/addon}/components/learn-link.js | 0
 ui/lib/core/app/components/learn-link.js            | 1 +
 2 files changed, 1 insertion(+)
 rename ui/{app => lib/core/addon}/components/learn-link.js (100%)
 create mode 100644 ui/lib/core/app/components/learn-link.js

diff --git a/ui/app/components/learn-link.js b/ui/lib/core/addon/components/learn-link.js
similarity index 100%
rename from ui/app/components/learn-link.js
rename to ui/lib/core/addon/components/learn-link.js
diff --git a/ui/lib/core/app/components/learn-link.js b/ui/lib/core/app/components/learn-link.js
new file mode 100644
index 00000000000..7beac1aca0b
--- /dev/null
+++ b/ui/lib/core/app/components/learn-link.js
@@ -0,0 +1 @@
+export { default } from 'core/components/learn-link';

From 48d20445b5e0d67acceb16e653fe4d691284a1b5 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 20 Apr 2020 13:08:57 -0700
Subject: [PATCH 4/5] make ReplicationDocLink component

---
 .../styles/components/replication-dashboard.scss |  4 ----
 .../styles/components/replication-doc-link.scss  |  8 ++++++++
 ui/app/styles/core.scss                          |  1 +
 .../addon/components/replication-doc-link.js     |  6 ++++++
 .../components/replication-dashboard.hbs         | 16 ++++------------
 .../components/replication-doc-link.hbs          |  6 ++++++
 .../core/app/components/replication-doc-link.js  |  1 +
 .../templates/components/replication-summary.hbs |  1 +
 8 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 ui/app/styles/components/replication-doc-link.scss
 create mode 100644 ui/lib/core/addon/components/replication-doc-link.js
 create mode 100644 ui/lib/core/addon/templates/components/replication-doc-link.hbs
 create mode 100644 ui/lib/core/app/components/replication-doc-link.js

diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index 9f33e3f4959..2ea37e4c509 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -1,8 +1,4 @@
 .replication-dashboard {
-  .documentation-link {
-    float: right;
-  }
-
   .selectable-card {
     line-height: normal;
 
diff --git a/ui/app/styles/components/replication-doc-link.scss b/ui/app/styles/components/replication-doc-link.scss
new file mode 100644
index 00000000000..6bf2d02dfc6
--- /dev/null
+++ b/ui/app/styles/components/replication-doc-link.scss
@@ -0,0 +1,8 @@
+.documentation-link {
+  margin: $spacing-s 0 $spacing-l 0;
+  float: right;
+
+  .doc-link {
+    font-weight: normal;
+  }
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 0f00aa7c789..4a08d9596bf 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -80,6 +80,7 @@
 @import './components/radial-progress';
 @import './components/raft-join';
 @import './components/replication-dashboard';
+@import './components/replication-doc-link';
 @import './components/replication-primary-card';
 @import './components/replication-summary';
 @import './components/role-item';
diff --git a/ui/lib/core/addon/components/replication-doc-link.js b/ui/lib/core/addon/components/replication-doc-link.js
new file mode 100644
index 00000000000..0f70e1332a8
--- /dev/null
+++ b/ui/lib/core/addon/components/replication-doc-link.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-doc-link';
+
+export default Component.extend({
+  layout,
+});
diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
index 652f0e47d2a..2dcfedcaffd 100644
--- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs
+++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -9,23 +9,15 @@
   {{/if}}
 
   <div class="selectable-card-container has-top-margin-xl">
-    {{yield (hash 
+    {{yield (hash
       card=(component componentToRender data=data)
     )}}
   </div>
-  
-  {{yield (hash 
+
+  {{yield (hash
     isSyncing=isSyncing
     rows=(component 'replication-table-rows' data=data)
   )}}
 
-  <div class="documentation-link">
-    <p class="has-text-grey">We have additional timeseries telemetry that can be found 
-      <LearnLink 
-        @path="/vault/operations/monitor-replication#key-monitoring-metrics"
-      > in our documentation</LearnLink>
-      .
-    </p>
-  </div>
-
+  <ReplicationDocLink />
 </div>
diff --git a/ui/lib/core/addon/templates/components/replication-doc-link.hbs b/ui/lib/core/addon/templates/components/replication-doc-link.hbs
new file mode 100644
index 00000000000..55a298d6ca9
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/replication-doc-link.hbs
@@ -0,0 +1,6 @@
+<div class="documentation-link">
+  <p class="has-text-grey">We have additional timeseries telemetry that can be found
+    <LearnLink @path="/vault/operations/monitor-replication#key-monitoring-metrics"> in our documentation</LearnLink>
+    .
+  </p>
+</div>
diff --git a/ui/lib/core/app/components/replication-doc-link.js b/ui/lib/core/app/components/replication-doc-link.js
new file mode 100644
index 00000000000..b473bd21719
--- /dev/null
+++ b/ui/lib/core/app/components/replication-doc-link.js
@@ -0,0 +1 @@
+export { default } from 'core/components/replication-doc-link';
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 315d474cefb..d04d708422d 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -358,6 +358,7 @@
         <KnownSecondariesCard @cluster={{cluster}} @replicationAttrs={{replicationAttrs}} />
       </div>
       <ReplicationTableRows @data={{replicationAttrs}}/>
+      <ReplicationDocLink />
     </div>
   {{/if}}
 {{/if}}

From f057be77ce4c5d5032579b599c3aeb9f6c9449b1 Mon Sep 17 00:00:00 2001
From: Noelle Daley <adriannenoelle@gmail.com>
Date: Mon, 20 Apr 2020 13:11:41 -0700
Subject: [PATCH 5/5] prevent double lines at the bottom of the dashboard

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

diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index 2ea37e4c509..35751ca0348 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -62,4 +62,9 @@
       }
     }
   }
+
+  // prevent double lines at the bottom of the dashboard
+  &.box {
+    padding-bottom: 0;
+  }
 }