Ui/replication merge cleanup 2 (#9212)

* replace with replicationModeForDisplay that is defined on the cluster

* fix spelling on replication and confirmed with design for placeholder when Not defined

* remove extra div with box class

* change manage link to take you to the secondaries manage as it's within the known secondaries card

* fix scroll always showing by adding auto, and decreasing the height.  WIP

* add empty state to known_primary_cluster_addrs

* address pr comments

Author: Monkeychip

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

@@ -102,6 +102,11 @@
       .grid-item-third-row {
         grid-column: 1 / span 2;
         grid-row: 3/4;
+
+        .empty-state {
+          padding: 0px 12px;
+          box-shadow: none;
+        }
       }
       .grid-item-bottom-row {
         grid-column: 1 / span 2;

ui/app/styles/components/selectable-card.scss

@@ -69,8 +69,8 @@
   }
 
   .vlt-table {
-    max-height: 240px;
-    overflow-y: scroll;
+    max-height: 200px;
+    overflow-y: auto;
   }
 }
 

ui/lib/core/addon/components/replication-table-rows.js

@@ -25,8 +25,8 @@ export default Component.extend({
   secondaryId: computed('replicationDetails.{secondaryId}', function() {
     return this.replicationDetails.secondaryId;
   }),
-  primaryClusterAddr: computed('replcationDetails.{primaryClusterAddr}', function() {
-    return this.replicationDetails.primaryClusterAddr;
+  primaryClusterAddr: computed('replicationDetails.{primaryClusterAddr}', function() {
+    return this.replicationDetails.primaryClusterAddr || 'Not defined';
   }),
   merkleRoot: computed('replicationDetails.{merkleRoot}', function() {
     return this.replicationDetails.merkleRoot || 'unknown';

ui/lib/core/addon/templates/components/confirmation-modal.hbs

@@ -6,25 +6,23 @@
   @showCloseButton={{true}}
 >
   <section class="modal-card-body">
-    <div class="box is-shadowless is-fullwidth is-sideless">
 
-      {{yield}}
+    {{yield}}
 
-      <div class="modal-confirm-section">
-        <p class="has-text-weight-semibold is-size-6">
-          Confirm
-        </p>
-        <p class="is-help">Type <strong>{{confirmText}}</strong> to confirm {{toConfirmMsg}}</p>
-        {{input
-            type="text"
-            value=confirmationInput
-            name="confirmationInput"
-            class="input has-margin-top"
-            autocomplete="off"
-            spellcheck="false"
-            data-test-confirmation-modal-input=testSelector
-          }}
-        </div>
+    <div class="modal-confirm-section">
+      <p class="has-text-weight-semibold is-size-6">
+        Confirm
+      </p>
+      <p class="is-help">Type <strong>{{confirmText}}</strong> to confirm {{toConfirmMsg}}</p>
+      {{input
+        type="text"
+        value=confirmationInput
+        name="confirmationInput"
+        class="input has-margin-top"
+        autocomplete="off"
+        spellcheck="false"
+        data-test-confirmation-modal-input=testSelector
+      }}
     </div>
   </section>
   <footer class="modal-card-foot modal-card-foot-outlined">

ui/lib/core/addon/templates/components/replication-action-demote.hbs

@@ -4,7 +4,7 @@
       Demote cluster
     </h4>
     <p>
-      Demote this {{if (eq model.replicationMode "dr") "Disaster Recovery" "Performance"}} primary to a secondary.
+      Demote this {{model.replicationModeForDisplay}} primary to a secondary.
     </p>
   </div>
   <div class="action-block-action">
@@ -23,7 +23,7 @@
   @onClose={{action (mut isModalActive) false}}
   @isActive={{isModalActive}}
   @buttonClass="is-primary"
-  @confirmText={{if (eq replicationDisplayMode "DR") "Disaster Recovery" replicationDisplayMode}}
+  @confirmText={{model.replicationModeForDisplay}}
   @toConfirmMsg="demoting this cluster"
   @onConfirm={{action "onSubmit" "demote" model.replicationAttrs.modeForUrl}}
   @testSelector="demote"
@@ -37,7 +37,7 @@
         This cluster is currently operating as a performance secondary. Demoting it will leave your replication setup <strong>without a performance primary cluster</strong> until a new cluster is promoted.
       </p>
     {{/if}}
-    Demoting this {{replicationDisplayMode}} primary to a {{replicationDisplayMode}} secondary means that the resulting secondary cluster:
+    Demoting this {{model.replicationModeForDisplay}} primary to a {{model.replicationModeForDisplay}} secondary means that the resulting secondary cluster:
   </p>
   <ul class="bullet has-bottom-margin-m">
     {{#if (and

ui/lib/core/addon/templates/components/replication-action-disable.hbs

@@ -4,7 +4,7 @@
       Disable Replication
     </h4>
     <p>
-      Disable {{replicationDisplayMode}} Replication entirely on the cluster.
+      Disable {{model.replicationModeForDisplay}} Replication entirely on the cluster.
     </p>
   </div>
 
@@ -23,8 +23,8 @@
   @title="Disable Replication?"
   @onClose={{action (mut isModalActive) false}}
   @isActive={{isModalActive}}
-  @confirmText={{if (eq replicationDisplayMode "DR") "Disaster Recovery" replicationDisplayMode}}
-  @toConfirmMsg="disabling {{replicationDisplayMode}} Replication on this cluster"
+  @confirmText={{model.replicationModeForDisplay}}
+  @toConfirmMsg="disabling {{model.replicationModeForDisplay}} Replication on this cluster"
   @onConfirm={{action
     "onSubmit"
     "disable"
@@ -37,8 +37,8 @@
   @testSelector="disable"
 >
   <p class="has-bottom-margin-m">
-    {{#if (and model.replicationAttrs.isPrimary (eq replicationDisplayMode "DR"))}}This cannot be undone. {{/if}}
-    Disabling {{replicationDisplayMode}} Replication entirely on this {{if (eq model.replicationAttrs.isPrimary true) "primary" "secondary"}} cluster means that:
+    {{#if (and model.replicationAttrs.isPrimary (eq model.replicationMode "dr"))}}This cannot be undone. {{/if}}
+    Disabling {{model.replicationModeForDisplay}} Replication entirely on this {{if (eq model.replicationAttrs.isPrimary true) "primary" "secondary"}} cluster means that:
   </p>
   <ul class="bullet">
     {{#if model.replicationAttrs.isPrimary}}

ui/lib/core/addon/templates/components/replication-action-promote.hbs

@@ -4,7 +4,7 @@
       Promote cluster
     </h4>
     <p>
-      Promote this cluster to a {{replicationDisplayMode}} primary
+      Promote this cluster to a {{model.replicationModeForDisplay}} primary
     </p>
   </div>
 
@@ -27,53 +27,51 @@
   @showCloseButton={{true}}
 >
   <section class="modal-card-body">
-    <div class="box is-shadowless is-fullwidth is-sideless">
 
-      {{#if (eq replicationMode "dr")}}
-      <p class="has-bottom-margin-m">
-        To promote this DR Replication Secondary to a primary, enter the DR Operation token.
-      </p>
-      {{/if}}
-      <p class="has-bottom-margin-m">
-        Vault Replication is not designed for active-active usage. Enabling two primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected. If the cluster has a primary, be sure to demote it before promoting a secondary.
-      </p>
+    {{#if (eq replicationMode "dr")}}
+    <p class="has-bottom-margin-m">
+      To promote this DR Replication Secondary to a primary, enter the DR Operation token.
+    </p>
+    {{/if}}
+    <p class="has-bottom-margin-m">
+      Vault Replication is not designed for active-active usage. Enabling two primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected. If the cluster has a primary, be sure to demote it before promoting a secondary.
+    </p>
 
-      <div data-test-promote-dr-inputs>
-        {{#if (eq replicationMode "dr")}}
-        <div class="field is-borderless">
-          <label for="dr_operation_token" class="is-label is-size-6">
-            DR Operation Token
-          </label>
-          <div class="control">
-            {{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}}
-          </div>
+    <div data-test-promote-dr-inputs>
+      {{#if (eq replicationMode "dr")}}
+      <div class="field is-borderless">
+        <label for="dr_operation_token" class="is-label is-size-6">
+          DR Operation Token
+        </label>
+        <div class="control">
+          {{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}}
         </div>
-        {{/if}}
-        <div class="field">
-          <label for="primary_cluster_addr" class="is-label is-size-6">
-            Primary cluster address <em class="is-optional">(optional)</em>
-          </label>
-          <div class="control">
-            {{input class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}}
-          </div>
-          <p class="help">
-            Overrides the cluster address that the primary gives to secondary nodes.
-          </p>
+      </div>
+      {{/if}}
+      <div class="field">
+        <label for="primary_cluster_addr" class="is-label is-size-6">
+          Primary cluster address <em class="is-optional">(optional)</em>
+        </label>
+        <div class="control">
+          {{input class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}}
         </div>
+        <p class="help">
+          Overrides the cluster address that the primary gives to secondary nodes.
+        </p>
+      </div>
 
-        <div class="field">
-          <div class="b-checkbox">
-            <input type="checkbox"
-            id="forcePromote"
-            class="styled"
-            checked={{force}}
-            onchange={{action (mut force) value="target.checked"}}
-            />
-            <label for="forcePromote" class="is-label is-size-6">
-              Force promotion of this cluster
-            </label>
-            <p>Promote the cluster even if certain safety checks fail. This could result in data loss of data isn't fully replicated</p>
-          </div>
+      <div class="field">
+        <div class="b-checkbox">
+          <input type="checkbox"
+          id="forcePromote"
+          class="styled"
+          checked={{force}}
+          onchange={{action (mut force) value="target.checked"}}
+          />
+          <label for="forcePromote" class="is-label is-size-6">
+            Force promotion of this cluster
+          </label>
+          <p>Promote the cluster even if certain safety checks fail. This could result in data loss of data isn't fully replicated</p>
         </div>
       </div>
     </div>

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

@@ -12,7 +12,6 @@
             onSubmit=(action "onSubmit")
             replicationMode=replicationMode
             model=model
-            replicationDisplayMode=replicationDisplayMode
           }}
         </div>
     {{/each}}

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

@@ -86,15 +86,25 @@
         known_primary_cluster_addr
       </h6>
       <p class="has-text-grey">
-        A list of all the nodes in the primary's cluster. This is updated every ten seconds.
+        A list of all the nodes in the primary's cluster. This value is updated every ten seconds.
       </p>
     </div>
     <div class="grid-item-third-row">
-      <InfoTable
-        @title="Known Primary Cluster Addrs"
-        @header="cluster_addr"
-        @items={{knownPrimaryClusterAddrs}}
-      />
+      {{#if (is-empty knownPrimaryClusterAddrs)}}
+        <EmptyState
+          @title="No known_primary_cluster_addrs"
+          @message="These addresses are used by the secondary to communicate with the primary cluster.  Should always be non-zero in a functioning replication setup.">
+          <LearnLink @path="/vault/operations/monitor-replication">
+            Learn more
+          </LearnLink>
+        </EmptyState>
+      {{else}}
+        <InfoTable
+          @title="Known Primary Cluster Addrs"
+          @header="cluster_addr"
+          @items={{knownPrimaryClusterAddrs}}
+        />
+      {{/if}}
     </div>
   {{/if}}
 </div>

ui/lib/replication/addon/templates/components/known-secondaries-card.hbs

@@ -1,7 +1,7 @@
 <div class="selectable-card is-rounded secondaries">
   <div class="level">
     <h3 class="card-title title is-5">Known Secondaries</h3>
-    <ToolbarLink @params={{array "mode.manage" cluster.replicationMode}} data-test-manage-link>
+    <ToolbarLink @params={{array "mode.secondaries" cluster.replicationMode}} data-test-manage-link>
       Manage
     </ToolbarLink>
   </div>