Sidebranch: DR Secondary Dashboard - pr4

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

@@ -35,44 +35,44 @@
       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;
 
-      .grid-item-title {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 1;
-        grid-row-end: 1;
+      @include until(1320px) {
+        // prevent an issue with the card descriptions wrapping and expanding height
+        min-height: 250px;
       }
-      .grid-item-state {
-        grid-column-start: 1;
-        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;
+      .grid-item-title {
+        grid-column: 1 / span 2;
 
-        line-height: 1.5;
+        display: flex;
+      }
+      .grid-item-left {
+        grid-column: 1/1;
+        grid-row: 2/2;
       }
-      .grid-item-stream {
-        grid-column-start: 1;
-        grid-column-end: 1;
-        grid-row-start: 3;
-        grid-row-end: 3;
+      .grid-item-right {
+        grid-column: 2/2;
+        grid-row: 2/2;
       }
-      .grid-item-status {
-        grid-column-start: 2;
-        grid-column-end: 2;
-        grid-row-start: 3;
-        grid-row-end: 3;
+      .grid-item-left-bottom {
+        grid-column: 1/1;
+        grid-row: 3/3;
+
+        display: flex;
+        align-items: center;
+      }
+      .grid-item-right-bottom {
+        grid-column: 2/2;
+        grid-row: 3/3;
       }
     }
   }
+
+  .has-text-highlight {
+    color: $yellow-500;
+  }
 }

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

@@ -4,36 +4,21 @@
     <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'}}
-          @metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
+          @data={{model}}
         />
-        <Dashboard.card 
+        <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'}}
-        />
-        <Dashboard.rows
-          @metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown' }}
-          @metric_2={{if model.dr.mode model.dr.mode 'unknown' }}
-          @metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown' }}
-          @syncProgress={{if model.dr.syncProgress syncProgress false }}
+          @data={{model}}
         />
+        <Dashboard.rows @data={{model.dr}}/>
       </Page.dashboard>
     </ReplicationPage>
   </div>

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,31 @@
+/**
+ * @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,
+  state: computed('data', function() {
+    let dr = this.data.dr;
+    return dr && dr.state ? dr.state : 'unknown';
+  }),
+  connection: computed('data', function() {
+    return this.data.drStateDisplay ? this.data.drStateDisplay : 'unknown';
+  }),
+  lastWAL: computed('data', function() {
+    let dr = this.data.dr;
+    return dr && dr.lastWAL ? dr.lastWAL : 0;
+  }),
+  lastRemoteWAL: computed('data', function() {
+    let dr = this.data.dr;
+    return dr && dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
+  }),
+  delta: computed('data', function() {
+    return Math.abs(this.get('lastWAL') - this.get('lastRemoteWAL'));
+  }),
+});

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