show dynamic state glyph (#8747)

* show dynamic state glyph

* show state glyph after state

* move LearnLink into core addon

* make ReplicationDocLink component

* prevent double lines at the bottom of the dashboard

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

 .replication-dashboard {
-  .documentation-link {
-    float: right;
-  }
-
   .selectable-card {
     line-height: normal;
 
@@ -66,4 +62,9 @@
       }
     }
   }
+
+  // prevent double lines at the bottom of the dashboard
+  &.box {
+    padding-bottom: 0;
+  }
 }

ui/app/styles/components/replication-doc-link.scss

+.documentation-link {
+  margin: $spacing-s 0 $spacing-l 0;
+  float: right;
+
+  .doc-link {
+    font-weight: normal;
+  }
+}

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';

ui/lib/core/addon/components/replication-doc-link.js

+import Component from '@ember/component';
+import layout from '../templates/components/replication-doc-link';
+
+export default Component.extend({
+  layout,
+});

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>

ui/lib/core/addon/templates/components/replication-doc-link.hbs

+<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>

ui/lib/core/app/components/learn-link.js

+export { default } from 'core/components/learn-link';

ui/lib/core/app/components/replication-doc-link.js

+export { default } from 'core/components/replication-doc-link';

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,
 });

ui/lib/replication/addon/templates/components/replication-primary-card.hbs

@@ -5,9 +5,10 @@
       {{description}}
     </span>
     <h3 class="title is-3">
-      {{!-- TODO make this dynamic --}}
-      <Icon @glyph="check-circle-outline" class="has-text-success" />
       {{metric}}
+      {{#if glyph}}
+        <Icon @glyph={{glyph}} class="has-text-success" />
+      {{/if}}
     </h3>
   </div>
 </div>

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'
@@ -357,6 +358,7 @@
         <KnownSecondariesCard @cluster={{cluster}} @replicationAttrs={{replicationAttrs}} />
       </div>
       <ReplicationTableRows @data={{replicationAttrs}}/>
+      <ReplicationDocLink />
     </div>
   {{/if}}
 {{/if}}