Sidebranch: DR Secondary Dashboard state message handlers

ui/app/models/replication-attributes.js

@@ -21,7 +21,7 @@ export default Fragment.extend({
 
   // secondary attrs
   isSecondary: match('mode', /secondary/),
-
+  connection_state: attr('string'),
   modeForUrl: computed('mode', function() {
     const mode = this.get('mode');
     return mode === 'bootstrapping'

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

@@ -1,10 +1,6 @@
 .replication-dashboard {
-  .has-margin-bottom {
-    padding-bottom: $spacing-xs;
-  }
-
-  .has-large-margin-top {
-    margin-top: $spacing-xl;
+  .documentation-link {
+    float: right;
   }
 
   .selectable-card {
@@ -37,8 +33,7 @@
       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: 220px;
+      height: 220px;
 
       @include until(1320px) {
         // prevent an issue with the card descriptions wrapping and expanding height
@@ -71,8 +66,4 @@
       }
     }
   }
-
-  .has-text-highlight {
-    color: $yellow-500;
-  }
 }

ui/app/styles/core/helpers.scss

@@ -143,6 +143,18 @@
   font-size: $size-8;
   text-transform: lowercase;
 }
-.has-bottom-margin {
+.has-bottom-margin-xs {
+  margin-bottom: $spacing-xs;
+}
+.has-bottom-margin-s {
+  margin-bottom: $spacing-s;
+}
+.has-bottom-margin-m {
   margin-bottom: $spacing-m;
 }
+.has-top-margin-xl {
+  margin-top: $spacing-xl;
+}
+.has-border-danger {
+  border: 1px solid $danger;
+}

ui/app/templates/components/transit-key-action/datakey.hbs

@@ -89,7 +89,7 @@
             <Icon @glyph="copy-action" aria-label="Copy" />
           </CopyButton>
         </div>
-        <p class="help has-bottom-margin">Plaintext is base64 encoded</p>
+        <p class="help has-bottom-margin-m">Plaintext is base64 encoded</p>
         <h2 class="title is-6">Ciphertext</h2>
         <div class="copy-text level">
           <code class="level-left">{{ciphertext}}</code>

ui/app/templates/vault/cluster/oidc-callback.hbs

@@ -1,7 +1,7 @@
 <div class="splash-page-container section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
   <div class="columns is-centered is-gapless is-fullwidth">
     <div class="column is-4-desktop is-6-tablet">
-      <div class="has-text-grey has-bottom-margin has-current-color-fill">
+      <div class="has-text-grey has-bottom-margin-m has-current-color-fill">
         <LogoEdition />
       </div>
       <AlertBanner

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

@@ -3,22 +3,28 @@
     {{!-- ARG TODO setup error state and return --}}
     <ReplicationPage @model={{model}} as |Page|>
       <Page.header 
-        @showTabs={{false}} 
-        @model={{model}}
+        @showTabs={{false}}
       />
       <Page.toggle />
       <Page.dashboard 
       {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
         @componentToRender='replication-secondary-card' as |Dashboard|>
         <Dashboard.card
           @title="States"
-          @data={{model}}
         />
         <Dashboard.card
           @title="Write-Ahead Logs (WALs)"
-          @data={{model}}
         />
-        <Dashboard.rows @data={{model.dr}}/>
+        {{#if Dashboard.isSyncing }}
+          <AlertBanner 
+            @title="Syncing in progress"
+            @type="info"
+            @secondIconType="loading"
+            @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
+            @class="has-top-margin-xl"
+          />
+        {{/if}}
+        <Dashboard.rows/>
       </Page.dashboard>
     </ReplicationPage>
   </div>

ui/lib/core/addon/components/alert-banner.js

@@ -13,6 +13,7 @@ import layout from '../templates/components/alert-banner';
  * ```
  *
  * @param type=null {String} - The banner type. This comes from the message-types helper.
+ * @param secondIconType=null {String} - Optional. If you want a second icon to appear to the right of the title. This comes from the message-types helper.
  * @param [message=null {String}] - The message to display within the banner.
  * @param [title=null {String}] - A title to show above the message. If this is not provided, there are default values for each type of alert.
  *
@@ -23,6 +24,7 @@ export default Component.extend({
   type: null,
   message: null,
   title: null,
+  secondIconType: null,
   yieldWithoutColumn: false,
   classNameBindings: ['containerClass'],
 
@@ -33,4 +35,8 @@ export default Component.extend({
   alertType: computed('type', function() {
     return messageTypes([this.get('type')]);
   }),
+
+  secondAlertType: computed('secondIconType', function() {
+    return messageTypes([this.get('secondIconType')]);
+  }),
 });

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

@@ -1,6 +1,22 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import layout from '../templates/components/replication-dashboard';
 
+const MERKLE_STATES = { sync: 'merkle-sync', diff: 'merkle-diff' };
+
 export default Component.extend({
   layout,
+  data: null,
+  dr: computed('data', function() {
+    let dr = this.data.dr;
+    if (!dr) {
+      return false;
+    }
+    return dr;
+  }),
+  isSyncing: computed('data', function() {
+    if (this.dr.state === MERKLE_STATES.sync || this.dr.state === MERKLE_STATES.diff) {
+      return true;
+    }
+  }),
 });

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

@@ -9,8 +9,20 @@
  */
 
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import layout from '../templates/components/replication-header';
 
 export default Component.extend({
   layout,
+  data: null,
+  isSecondary: computed('data', function() {
+    let data = this.data;
+    let dr = this.data.dr;
+    if (!dr) {
+      return false;
+    }
+    if (dr.mode === 'secondary' && data.rm.mode == 'dr') {
+      return true;
+    }
+  }),
 });

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

@@ -8,24 +8,52 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 import layout from '../templates/components/replication-secondary-card';
 
+const STATES = {
+  streamWals: 'stream-wals',
+  idle: 'idle',
+  transientFailure: 'transient-failure',
+  shutdown: 'shutdown',
+};
+
 export default Component.extend({
   layout,
-  state: computed('data', function() {
+  data: null,
+  dr: computed('data', function() {
     let dr = this.data.dr;
-    return dr && dr.state ? dr.state : 'unknown';
+    if (!dr) {
+      return false;
+    }
+    return dr;
+  }),
+  state: computed('dr', function() {
+    return this.dr && this.dr.state ? this.dr.state : 'unknown';
   }),
   connection: computed('data', function() {
-    return this.data.drStateDisplay ? this.data.drStateDisplay : 'unknown';
+    return this.dr.connection_state ? this.dr.connection_state : 'unknown';
   }),
-  lastWAL: computed('data', function() {
-    let dr = this.data.dr;
-    return dr && dr.lastWAL ? dr.lastWAL : 0;
+  lastWAL: computed('dr', function() {
+    return this.dr && this.dr.lastWAL ? this.dr.lastWAL : 0;
   }),
-  lastRemoteWAL: computed('data', function() {
-    let dr = this.data.dr;
-    return dr && dr.lastRemoteWAL ? dr.lastRemoteWAL : 0;
+  lastRemoteWAL: computed('dr', function() {
+    return this.dr && this.dr.lastRemoteWAL ? this.dr.lastRemoteWAL : 0;
   }),
   delta: computed('data', function() {
     return Math.abs(this.get('lastWAL') - this.get('lastRemoteWAL'));
   }),
+  inSyncState: computed('state', function() {
+    if (this.state === STATES.streamWals) {
+      return true;
+    }
+  }),
+  hasErrorClass: computed('data', 'title', 'state', 'connection', function() {
+    if (this.title === 'States') {
+      if (
+        this.state === STATES.idle ||
+        this.connection === STATES.transientFailure ||
+        this.connection === STATES.shutdown
+      ) {
+        return true;
+      }
+    }
+  }),
 });

ui/lib/core/addon/helpers/message-types.js

@@ -25,6 +25,12 @@ export const MESSAGE_TYPES = {
     glyph: 'alert-triangle',
     text: 'Warning',
   },
+  loading: {
+    class: 'is-success',
+    glyphClass: 'has-text-success',
+    glyph: 'loading',
+    text: 'Loading',
+  },
 };
 
 export function messageTypes([type]) {

ui/lib/core/addon/templates/components/alert-banner.hbs

@@ -14,6 +14,14 @@
       <div class="column">
         <div class="message-title">
           {{or @title this.alertType.text}}
+          {{#if @secondIconType}}
+            <Icon
+              @size="l"
+              class="{{secondAlertType.glyphClass}}"
+              aria-hidden=true
+              @glyph={{secondAlertType.glyph}}
+            />
+          {{/if}}
         </div>
         {{#if @message}}
           <p class="message-body">

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

@@ -1,24 +1,31 @@
 <div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
-  <h2 class="has-text-weight-semibold is-size-4 has-margin-bottom">Primary Cluster</h2>
+  <h2 class="has-text-weight-semibold is-size-4 has-bottom-margin-xs">Primary Cluster</h2>
   <p class="has-text-grey is-size-8">If you set a primary_cluster_addr when enabling replication, it will appear here.</p>
+
   {{#if model.dr.primaryClusterAddr}}
     <code>{{model.dr.primaryClusterAddr}}</code>
   {{else}}
     <code>no known primary cluster address</code>
   {{/if}}
 
-  <div class="selectable-card-container has-large-margin-top">
+  <div class="selectable-card-container has-top-margin-xl">
     {{yield (hash 
-      card=(
-        component componentToRender
-      )
+      card=(component componentToRender data=data)
     )}}
   </div>
-
+  
   {{yield (hash 
-    rows=(
-      component 'replication-table-rows' data=data
-    )
+    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>
+
 </div>

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

@@ -1,5 +1,5 @@
 {{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
-{{#if (and (eq data.rm.mode 'dr') (eq data.dr.mode 'secondary') )}}
+{{#if isSecondary}}
   <NavHeader as |Nav|>
     <Nav.home>
       <HomeLink @class="navbar-item splash-page-logo has-text-white">

ui/lib/core/addon/templates/components/replication-secondary-card.hbs

@@ -1,17 +1,50 @@
-<div class="selectable-card is-rounded card-container">
+<div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}">
   {{!-- Check if State or WAL Card --}}
   {{#if (eq title "States")}}
     <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
     <div class="grid-item-left">
-      <code class="has-text-black">state</code>
-      <p class="has-text-grey is-size-8">How this cluster is communicating with others at this moment.</p>
+      {{#if (eq state "idle")}}
+          <code class="has-text-danger">state</code>
+          <AlertInline
+            @type="danger"
+            @message="Please check your server logs."
+          />
+      {{else}}
+        <code class="has-text-black">state</code>
+        <p class="has-text-grey is-size-8">How this cluster is communicating with others at this moment.</p>
+      {{/if}}
     </div>
     <div class="grid-item-right">
-      <code class="has-text-black">connection_state</code>
-      <p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
+      {{#if (or (eq connection "transient-failure") (eq connection "shutdown"))}}
+        <code class="has-text-danger">connection_state</code>
+        <AlertInline
+          @type="danger"
+          @message="ARG TODO: waiting on feedback to fill this in."
+        />
+      {{else}}
+        <code class="has-text-black">connection_state</code>
+        <p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
+      {{/if}}
     </div>
     {{!-- ARG TODO connection state is likely wrong here, waiting for reply from RFC --}}
-      <h2 class="title-number grid-item-left-bottom">{{state}}</h2>
+      <h2 class="title-number grid-item-left-bottom">{{state}}
+        {{#if inSyncState }}
+          <ToolTip @verticalPosition="above" as |T|>
+            <T.trigger>
+              <Icon 
+                @glyph={{"check-circle-outline" }} 
+                @size="m" 
+                class={{"has-text-success"}}
+              />
+            </T.trigger>
+            <T.content @class="tool-tip">
+              <div class="box">
+                Everything is in sync
+              </div>
+            </T.content>
+          </ToolTip>
+        {{/if}}
+      </h2>
       <h2 class="title-number is-5 grid-item-right-bottom">{{connection}}</h2>
   {{else}}
     <h3 class="title is-4 grid-item-title card-title">{{title}}

ui/lib/core/addon/templates/components/replication-table-rows.hbs

@@ -1,7 +1,9 @@
 {{#unless data}}
-  <EmptyState />
+  <EmptyState
+    @title="Data not available"
+  />
 {{else}}
-  <div class="has-large-margin-top">
+  <div class="has-top-margin-xl has-bottom-margin-s">
     {{info-table-row label="Merkle root index" helperText="A snapshot in time of the merkle tree's root hash. Changes on every update to storage." value=merkleRoot}}
     {{info-table-row label="Mode" value=mode}}
     {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=clusterId}}

ui/lib/core/stories/alert-banner.md

@@ -8,6 +8,7 @@
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | type | <code>String</code> | <code></code> | The banner type. This comes from the message-types helper. |
+| secondIconType | <code>String</code> | <code></code> | Optional. If you want a second icon to appear to the right of the title. This comes from the message-types helper. |
 | [message] | <code>String</code> | <code></code> | The message to display within the banner. |
 | [title] | <code>String</code> | <code></code> | A title to show above the message. If this is not provided, there are default values for each type of alert. |