Sidebranch: DR Secondary Dashboard - pr4

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

@@ -35,9 +35,15 @@
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr 0.8fr;
       padding: $spacing-l 0 18px $spacing-l;
+      line-height: 1.5;
 
       // If descriptions are smaller then height is affected, this keeps the cards consistent
-      min-height: 200px;
+      min-height: 220px;
+
+      @include until(1320px) {
+        // prevent an issue with the card descriptions wrapping and expanding height
+        min-height: 250px;
+      }
 
       .grid-item-title {
         grid-column-start: 1;
@@ -50,22 +56,21 @@
         grid-column-end: 1;
         grid-row-start: 2;
         grid-row-end: 2;
-
-        line-height: 1.5;
       }
       .grid-item-wal {
         grid-column-start: 2;
         grid-column-end: 2;
         grid-row-start: 2;
         grid-row-end: 2;
-
-        line-height: 1.5;
       }
       .grid-item-stream {
         grid-column-start: 1;
         grid-column-end: 1;
         grid-row-start: 3;
         grid-row-end: 3;
+
+        display: flex;
+        align-items: center;
       }
       .grid-item-status {
         grid-column-start: 2;
@@ -75,4 +80,8 @@
       }
     }
   }
+
+  .has-text-highlight {
+    color: $yellow-500;
+  }
 }

ui/app/templates/components/replication-page.hbs

@@ -1,6 +1,5 @@
 {{yield (hash 
-  header=(component 'replication-page/replication-header' model=model)
-  toggle=(component 'replication-page/replication-toggle' model=model)
-  dashboard=(component 'replication-page/replication-dashboard/dashboard' model=model)
+  header=(component 'replication-header' data=model)
+  toggle=(component 'replication-toggle')
+  dashboard=(component 'replication-dashboard' data=model)
 )}}
-{{!-- ARG TODO, not all of these need model or everything on it.  Clean up --}}

ui/app/templates/components/replication-page/replication-dashboard/replication-secondary-card.hbs

@@ -0,0 +1,45 @@
+<div class="selectable-card is-rounded card-container">
+  <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
+  <div class="grid-item-state">
+    {{#if property_3}}
+      <code class="has-text-black">{{property_3}}</code>
+      <p class="has-text-grey is-size-8">{{description_3}}</p>
+    {{else}}
+      <code class="has-text-black">{{property_1}}</code>
+      <p class="has-text-grey is-size-8">{{description_1}}</p>
+    {{/if}}
+  </div>
+  <div class="grid-item-wal">
+    {{!-- Check if card is for showing Delta information --}}
+    {{#if @property_3}}
+      <code class="has-text-black">{{property_1}}</code>
+      <p class="has-text-grey is-size-8">{{metric_1}}</p>
+    {{else}}
+      <code class="has-text-black">{{property_2}}</code>
+      <p class="has-text-grey is-size-8">{{description_2}}</p>
+    {{/if}}
+  </div>
+
+  {{#if @property_3}}
+    <h2 class="title-number grid-item-stream">{{metric_3}}
+      <Icon 
+        @glyph={{if false "check-circle-outline" "alert-triangle"}} 
+        class={{if false "has-text-success" "has-text-highlight"}} 
+        @aria-label="success"
+        @size="l"
+      />
+    </h2>
+  {{else}}
+    <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
+  {{/if}}
+
+  {{#if @property_3}}
+  <div class="grid-item-status">
+    <code class="has-text-black">{{property_2}}</code>
+    <p class="has-text-grey is-size-8">{{metric_2}}</p>
+  </div>
+  {{else}}
+    <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+  {{/if}}
+
+</div>

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

@@ -4,35 +4,38 @@
     <ReplicationPage @model={{model}} as |Page|>
       <Page.header 
         @showTabs={{false}} 
-        @model={{data}}
+        @model={{model}}
       />
       <Page.toggle />
       <Page.dashboard 
       {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
-        @componentToRender='replication-page/replication-dashboard/replication-card' as |Dashboard|>
+        @componentToRender='replication-secondary-card' as |Dashboard|>
         <Dashboard.card
           @title="States"
           @property_1="state"
           @property_2="connection_state"
           @description_1="How this cluster is communicating with others at this moment."
           @description_2="coming"
           @metric_1={{if model.dr.state model.dr.state 'unknown'}}
+          {{!-- ARG TODO this might be wrong, could be connection_state --}}
           @metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
         />
         <Dashboard.card 
           @title="Write-Ahead Logs (WALs)"
-          @property_1="Last Remote WAL"
-          @property_2="Last WAL entry from primary"
-          @description_1="Index of the last Write-Ahead Logs (WAL) entry written on the local storage."
-          @description_2="Index of the last WAL entry from  the primary."
-          @metric_1={{if model.dr.lastRemoteWAL model.dr.lastRemoteWAL 'unknown' }}
-          @metric_2={{if model.dr.lastWAL model.dr.lastWAL 'unknown'}}
+          @property_1="last_wal"
+          @property_2="last_remote_wal"
+          @property_3="Delta"
+          @description_3="The difference between the last remote WAL and the last WAL entry from the primary."
+          {{!-- last_wal which comes from the primary --}}
+          @metric_1={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
+          {{!-- last_remote_wal which comes from the secondary --}}
+          @metric_2={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}} 
         />
         <Dashboard.rows
-          @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown' }}
-          @metric_2={{if model.dr.mode model.dr.mode 'unknown' }}
-          @metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown' }}
-          @syncProgress={{if model.dr.syncProgress syncProgress false }}
+          @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown'}}
+          @metric_2={{if model.dr.mode model.dr.mode 'unknown'}}
+          @metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown'}}
+          @syncProgress={{if model.dr.syncProgress syncProgress false}}
         />
       </Page.dashboard>
     </ReplicationPage>

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

@@ -3,10 +3,6 @@
     <h1 class="title is-4">
      Disaster Recovery secondary is&nbsp;enabled
     </h1>
-    <LinkTo
-      @params={{array "vault.cluster.replication-dr-promote.details"}}
-      class="is-block">MEEP
-    </LinkTo>
   </Page.header>
   <Page.content>
     <nav class="tabs sub-nav is-marginless">

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

@@ -0,0 +1,16 @@
+/**
+ * @module ReplicationHeader
+ * ARG TODO: finish
+ *
+ * @example
+ * ```js
+ * <ReplicationHeader finish/>
+ * ```
+ */
+
+import Component from '@ember/component';
+import layout from '../templates/components/replication-header';
+
+export default Component.extend({
+  layout,
+});

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

@@ -0,0 +1,16 @@
+/**
+ * @module ReplicationSecondaryCard
+ * ARG TODO finish
+ *
+ */
+
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import layout from '../templates/components/replication-secondary-card';
+
+export default Component.extend({
+  layout,
+  delta: computed(function() {
+    return Math.abs(this.metric_1 - this.metric_2);
+  }),
+});

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

@@ -17,7 +17,7 @@
 
   {{yield (hash 
     rows=(
-      component 'replication-page/replication-dashboard/replication-table-rows'
+      component 'replication-table-rows' data=data
     )
   )}}