Ui/summary dashboard

ui/app/app.js

@@ -31,6 +31,9 @@ App = Application.extend({
           'version',
           'wizard',
         ],
+        externalRoutes: {
+          replication: 'vault.cluster.replication.index',
+        },
       },
     },
     kmip: {

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

@@ -1,4 +1,6 @@
 .replication-dashboard {
+  box-shadow: none;
+
   .selectable-card {
     line-height: normal;
 
@@ -35,7 +37,7 @@
 
     &.secondary {
       grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-      grid-gap: $spacing-xl; //ARG TODO double check ok
+      grid-gap: $spacing-xl;
     }
 
     .card-container {
@@ -46,6 +48,10 @@
       padding: $spacing-l;
       line-height: 1.5;
 
+      &.summary {
+        grid-template-rows: 0.2fr 1fr 0.2fr 1fr;
+      }
+
       &.has-border-danger:hover {
         box-shadow: none;
       }
@@ -55,10 +61,14 @@
         min-height: 250px;
       }
 
-      .grid-item-title {
-        grid-column: 1 / span 2;
+      .grid-item-top-left {
+        grid-column: 1 / span 1;
         display: flex;
       }
+      .grid-item-top-right {
+        grid-column: 2 / span 1;
+        justify-self: right;
+      }
       .grid-item-left {
         grid-column: 1/1;
         grid-row: 2/2;
@@ -70,15 +80,29 @@
       .grid-item-left-bottom {
         grid-column: 1/1;
         grid-row: 3/3;
+        margin-top: -8px;
 
         display: flex;
         align-items: center;
       }
       .grid-item-right-bottom {
         grid-column: 2/2;
         grid-row: 3/3;
+        margin-top: -8px;
+      }
+      .grid-item-full-bottom {
+        grid-column: 1 / span 2;
+        grid-row: 4/4;
       }
     }
+
+    &.summary {
+      margin-bottom: $spacing-xl;
+    }
+  }
+  .summary-state {
+    padding-bottom: $spacing-xl;
+    border-bottom: 1px solid rgba($grey-dark, 0.3);
   }
 
   // prevent double lines at the bottom of the dashboard

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

@@ -0,0 +1,5 @@
+.replication-header {
+  .tabs-container {
+    margin-bottom: $spacing-l;
+  }
+}

ui/app/styles/core.scss

@@ -81,6 +81,7 @@
 @import './components/raft-join';
 @import './components/replication-dashboard';
 @import './components/replication-doc-link';
+@import './components/replication-header';
 @import './components/replication-page';
 @import './components/replication-primary-card';
 @import './components/replication-summary';

ui/app/components/key-value-header.js → ui/lib/core/addon/components/key-value-header.js

@@ -1,9 +1,11 @@
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 import utils from 'vault/lib/key-utils';
+import layout from '../templates/components/key-value-header';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
 export default Component.extend({
+  layout,
   tagName: 'nav',
   classNames: 'key-value-header breadcrumb',
   ariaLabel: 'breadcrumbs',

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

@@ -9,6 +9,7 @@ export default Component.extend({
   data: null,
   replicationDetails: null,
   isSecondary: null,
+  isSummaryDashboard: false,
   isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() {
     const { state } = this.replicationDetails;
     const isSecondary = this.isSecondary;
@@ -40,4 +41,22 @@ export default Component.extend({
 
     return progressBar;
   }),
+  summaryState: computed(
+    'replicationDetailsSummary.dr.{state}',
+    'replicationDetailsSummary.performance.{state}',
+    function() {
+      const { replicationDetailsSummary } = this;
+      const drState = replicationDetailsSummary.dr.state;
+      const performanceState = replicationDetailsSummary.performance.state;
+
+      if (drState !== performanceState) {
+        // when DR and Performance is enabled on the same cluster,
+        // the states should always be the same
+        // we are leaving this console log statement to be sure
+        console.log('DR State: ', drState, 'Performance State: ', performanceState);
+      }
+
+      return drState;
+    }
+  ),
 });

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

@@ -3,7 +3,9 @@ import layout from '../templates/components/replication-header';
 
 export default Component.extend({
   layout,
+  classNames: ['replication-header'],
   isSecondary: null,
   secondaryId: null,
+  isSummaryDashboard: false,
   'data-test-replication-header': true,
 });

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

@@ -12,6 +12,7 @@ const MODE = {
 export default Component.extend({
   layout,
   store: service(),
+  router: service(),
   reindexingDetails: null,
   didReceiveAttrs() {
     this._super(arguments);
@@ -29,22 +30,45 @@ export default Component.extend({
     }
     this.set('reindexingDetails', resp);
   }),
+  isSummaryDashboard: computed('model.dr.{mode}', 'model.performance.{mode}', function() {
+    const router = this.router;
+    const currentRoute = router.get('currentRouteName');
+
+    // we only show the summary dashboard in the replication index route
+    if (currentRoute === 'vault.cluster.replication.index') {
+      const drMode = this.model.dr.mode;
+      const performanceMode = this.model.performance.mode;
+      return drMode && performanceMode === 'primary';
+    }
+  }),
   formattedReplicationMode: computed('model.{replicationMode}', function() {
     // dr or performance 🤯
+    const { isSummaryDashboard } = this;
+    if (isSummaryDashboard) {
+      return 'Disaster Recovery & Performance';
+    }
     const mode = this.model.replicationMode;
     return MODE[mode];
   }),
-  clusterMode: computed('model.{replicationAttrs}', function() {
+  clusterMode: computed('model.{replicationAttrs}', 'isSummaryDashboard', function() {
     // primary or secondary
     const { model } = this;
+    const { isSummaryDashboard } = this;
+    if (isSummaryDashboard) {
+      // replicationAttrs does not exist when summaryDashboard
+      return 'primary';
+    }
     return model.replicationAttrs.mode;
   }),
   isLoadingData: computed('clusterMode', 'model.{replicationAttrs}', function() {
     const { clusterMode } = this;
     const { model } = this;
+    const { isSummaryDashboard } = this;
+    if (isSummaryDashboard) {
+      return false;
+    }
     const clusterId = model.replicationAttrs.clusterId;
     const replicationDisabled = model.replicationAttrs.replicationDisabled;
-
     if (clusterMode === 'bootstrapping' || (!clusterId && !replicationDisabled)) {
       // if clusterMode is bootstrapping
       // if no clusterId, the data hasn't loaded yet, wait for another status endpoint to be called
@@ -56,8 +80,26 @@ export default Component.extend({
     const { clusterMode } = this;
     return clusterMode === 'secondary';
   }),
-  replicationDetails: computed('model.{replicationMode}', function() {
+  replicationDetailsSummary: computed('isSummaryDashboard', function() {
+    const { model } = this;
+    const { isSummaryDashboard } = this;
+    if (!isSummaryDashboard) {
+      return;
+    }
+    if (isSummaryDashboard) {
+      let combinedObject = {};
+      combinedObject.dr = model['dr'];
+      combinedObject.performance = model['performance'];
+      return combinedObject;
+    }
+  }),
+  replicationDetails: computed('model.{replicationMode}', 'isSummaryDashboard', function() {
     const { model } = this;
+    const { isSummaryDashboard } = this;
+    if (isSummaryDashboard) {
+      // Cannot return null
+      return {};
+    }
     const replicationMode = model.replicationMode;
     return model[replicationMode];
   }),

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

@@ -0,0 +1,52 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import layout from '../templates/components/replication-summary-card';
+
+/**
+ * @module ReplicationSummaryCard
+ * ReplicationSummaryCard components
+ *
+ * @example
+ * ```js
+ * <ReplicationSummaryCard
+    @title='States'
+    @replicationDetails=replicationDetails
+    />
+ * ```
+ * @param {string} [title=null] - The title to be displayed on the top left corner of the card.
+ * @param replicationDetails=null{DS.Model.replicationDetails} - An Ember data object off the Ember data model.  It is computed at the parent component and passed through to this component.
+ */
+
+export default Component.extend({
+  layout,
+  title: null,
+  replicationDetails: null,
+  lastDrWAL: computed('replicationDetails.dr.{lastWAL}', function() {
+    return this.replicationDetails.dr && this.replicationDetails.dr.lastWAL
+      ? this.replicationDetails.dr.lastWAL
+      : 0;
+  }),
+  lastPerformanceWAL: computed('replicationDetails.performance.{lastWAL}', function() {
+    return this.replicationDetails.performance && this.replicationDetails.performance.lastWAL
+      ? this.replicationDetails.performance.lastWAL
+      : 0;
+  }),
+  merkleRootDr: computed('replicationDetails.dr.{merkleRoot}', function() {
+    return this.replicationDetails.dr && this.replicationDetails.dr.merkleRoot
+      ? this.replicationDetails.dr.merkleRoot
+      : '';
+  }),
+  merkleRootPerformance: computed('replicationDetails.performance.{merkleRoot}', function() {
+    return this.replicationDetails.performance && this.replicationDetails.performance.merkleRoot
+      ? this.replicationDetails.performance.merkleRoot
+      : '';
+  }),
+  knownSecondariesDr: computed('replicationDetails.dr.{knownSecondaries}', function() {
+    const knownSecondaries = this.replicationDetails.dr.knownSecondaries;
+    return knownSecondaries.length;
+  }),
+  knownSecondariesPerformance: computed('replicationDetails.performance.{knownSecondaries}', function() {
+    const knownSecondaries = this.replicationDetails.performance.knownSecondaries;
+    return knownSecondaries.length;
+  }),
+});

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

@@ -9,16 +9,41 @@
         data-test-isReindexing />
     </div>
   {{/if}}
-  <div
-    class="selectable-card-container {{if isSecondary 'secondary' 'primary'}}"
-    data-test-selectable-card-container={{if isSecondary 'secondary' 'primary'}}>
-    {{yield (hash
-      card=(component componentToRender replicationDetails=replicationDetails)
-    )}}
-    {{#if (not isSecondary)}}
-      {{yield (hash secondaryCard=(component 'known-secondaries-card'))}}
-    {{/if}}
-  </div>
+  {{#if isSummaryDashboard}}
+    <div class="summary-state">
+      <h6 class="title is-5 {{if (get (cluster-states summaryState) "isOk") "" "has-text-danger"}}" data-test-error>state</h6>
+      {{#unless (get (cluster-states summaryState) "isOk")}}
+        <AlertInline
+          @type="danger"
+          @message="The cluster is {{summaryState}}. Please check your server logs." />
+      {{else}}
+        <p class="has-text-grey is-size-8">The current operating state of both Disaster Recovery and Performance. This value should be ‘running.’ If the value is idle, it indicates an issue and needs to be investigated.</p>
+      {{/unless}}
+      <h2 class="title is-3" data-test-summary-state>{{summaryState}}
+        {{#if (get (cluster-states summaryState) "isOk")}}
+          <Icon @glyph={{get (cluster-states summaryState) "glyph"}} class="{{if (get (cluster-states summaryState) "isOk") "has-text-success" "has-text-danger"}}" data-test-icon />
+        {{/if}}
+      </h2>
+    </div>
+    <div
+      class="selectable-card-container summary secondary"
+      data-test-selectable-card-container-summary>
+        {{yield (hash
+          card=(component componentToRender replicationDetails=replicationDetailsSummary)
+        )}}
+    </div>
+  {{else}}
+    <div
+      class="selectable-card-container {{if isSecondary 'secondary' 'primary'}}"
+      data-test-selectable-card-container={{if isSecondary 'secondary' 'primary'}}>
+      {{yield (hash
+        card=(component componentToRender replicationDetails=replicationDetails)
+      )}}
+      {{#if (not isSecondary)}}
+        {{yield (hash secondaryCard=(component 'known-secondaries-card'))}}
+      {{/if}}
+    </div>
+  {{/if}}
   {{#if isSyncing}}
     <div class="syncing-alert">
       <AlertBanner
@@ -29,8 +54,10 @@
         data-test-isSyncing/>
     </div>
   {{/if}}
-  <ReplicationTableRows
-    @replicationDetails={{replicationDetails}}
-    @clusterMode={{clusterMode}}/>
-  <ReplicationDocLink data-test-replication-doc-link/>
+  {{#unless isSummaryDashboard}}
+    <ReplicationTableRows
+      @replicationDetails={{replicationDetails}}
+      @clusterMode={{clusterMode}}/>
+    <ReplicationDocLink data-test-replication-doc-link/>
+  {{/unless}}
 </div>