Add Replication Reindexing Progress Bar

ui/README.md

@@ -17,6 +17,7 @@
     - [Writing Stories](#writing-stories)
       - [Adding a new story](#adding-a-new-story)
     - [Code Generators](#code-generators-1)
+    - [Storybook Deployment](#storybook-deployment)
   - [Further Reading / Useful Links](#further-reading--useful-links)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -158,7 +159,7 @@ Note that placing a param inside brackets (e.g. `[closedLabel=More options]` ind
 
 2. Generate a new story with `ember generate story [name-of-component]`
 3. Inside the newly generated `stories` file, add at least one example of the component. If the component should be interactive, enable the [Storybook Knobs addon](https://github.com/storybooks/storybook/tree/master/addons/knobs).
-4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component]` (e.g. `yarn gen-md alert-banner`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file.
+4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file.
 
 See the [Storybook Docs](https://storybook.js.org/docs/basics/introduction/) for more information on writing stories.
 

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

@@ -15,20 +15,30 @@
     margin-bottom: $spacing-xs;
   }
 
+  .reindexing-alert,
+  .syncing-alert {
+    margin-top: $spacing-xl;
+  }
+
   .selectable-card-container {
+    margin-top: $spacing-xl;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     grid-template-rows: 1fr;
-    grid-gap: 2rem;
+    grid-gap: $spacing-xl;
 
     .card-container {
       display: grid;
-      grid-gap: 1rem;
+      grid-gap: $spacing-s;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 0.2fr 1fr 0.2fr;
       padding: $spacing-l;
       line-height: 1.5;
 
+      &.has-border-danger:hover {
+        box-shadow: none;
+      }
+
       @include until(1320px) {
         // prevent an issue with the card descriptions wrapping and expanding height
         min-height: 250px;

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

@@ -1,6 +1,5 @@
 .replication {
   .selectable-card-container {
-    margin: 2rem 0 2rem 0;
     grid-template-columns: 1fr 2fr;
 
     @include until($mobile) {

ui/app/styles/components/ui-wizard.scss

@@ -191,7 +191,7 @@
 }
 
 .progress-bar {
-  background: $ui-gray-100;
+  background: $progress-bar-background-color;
   box-shadow: inset 0 0 0 1px $ui-gray-200;
   display: flex;
   height: $wizard-progress-bar-height;

ui/app/styles/core/message.scss

@@ -25,6 +25,10 @@
     font-size: 16px;
     font-weight: $font-weight-bold;
     line-height: 1.25;
+
+    .progress {
+      margin-left: $spacing-xs;
+    }
   }
 
   .close-button + .message-title {

ui/app/styles/core/progress.scss

@@ -1,20 +1,24 @@
-.progress[value]::-webkit-progress-bar,
-.progress[value]::-webkit-progress-value {
-  border-radius: 2px;
-}
 .progress {
-  border-radius: 0;
+  background: $progress-bar-background-color;
+  border-radius: $radius;
   margin-bottom: 0;
   &.is-small {
     height: 0.5rem;
   }
   &.is-narrow {
     width: 30px;
   }
+  &.is-medium {
+    width: 120px;
+  }
 }
-.progress.is-rounded {
-  border-radius: 2px;
+
+// style the container
+.progress[value]::-webkit-progress-bar {
+  box-shadow: inset 0 0 0 1px $ui-gray-200;
 }
-.progress.is-bordered {
-  box-shadow: 0 0 0 4px $progress-bar-background-color;
+
+// style the progress bar
+.progress[value]::-webkit-progress-value {
+  border-radius: $radius;
 }

ui/app/styles/utils/_bulma_variables.scss

@@ -65,7 +65,7 @@ $navbar-background-color: transparent;
 $menu-item-hover-background-color: $blue;
 $menu-item-hover-color: $white;
 
-$progress-bar-background-color: lighten($grey-light, 15%);
+$progress-bar-background-color: $ui-gray-050;
 
 $base-border: 1px solid $ui-gray-300;
 $light-border: 1px solid $ui-gray-200;

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

@@ -12,10 +12,11 @@ import layout from '../templates/components/alert-banner';
  * <AlertBanner @type="danger" @message="{{model.keyId}} is not a valid lease ID"/>
  * ```
  *
- * @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.
+ * @param {String} type=null  - The banner type. This comes from the message-types helper.
+ * @param {String} [secondIconType=null] - If you want a second icon to appear to the right of the title. This comes from the message-types helper.
+ * @param {Object} [progressBar=null] - An object containing a value and maximum for a progress bar. Will be displayed next to the message title.
+ * @param {String} [message=null] - The message to display within the banner.
+ * @param {String} [title=null] - A title to show above the message. If this is not provided, there are default values for each type of alert.
  *
  */
 
@@ -25,6 +26,7 @@ export default Component.extend({
   message: null,
   title: null,
   secondIconType: null,
+  progressBar: null,
   yieldWithoutColumn: false,
   classNameBindings: ['containerClass'],
 

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

@@ -27,19 +27,17 @@ export default Component.extend({
     }
     return '';
   }),
-  reindexingProgress: computed(
-    'replicationDetails.{reindex_building_progress,reindex_building_total}',
-    function() {
-      // TODO: use this value to display a progress bar
-      const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
-      let progress = 0;
+  progressBar: computed('replicationDetails.{reindex_building_progress,reindex_building_total}', function() {
+    const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
+    let progressBar = null;
 
-      if (reindex_building_progress && reindex_building_total) {
-        // convert progress to a percentage
-        progress = (reindex_building_progress / reindex_building_total) * 100;
-      }
-
-      return progress;
+    if (reindex_building_progress && reindex_building_total) {
+      progressBar = {
+        value: reindex_building_progress,
+        max: reindex_building_total,
+      };
     }
-  ),
+
+    return progressBar;
+  }),
 });

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

@@ -1,12 +1,12 @@
-<div data-test-flash-message=true>
+<div data-test-flash-message="true">
   <div class="columns is-mobile is-variable is-1">
     <div class="column is-narrow message-icon">
       <Icon
         @size="l"
         class="{{alertType.glyphClass}}"
-        aria-hidden=true
+        aria-hidden="true"
         @glyph={{alertType.glyph}}
-      />
+        />
     </div>
     {{#if @yieldWithoutColumn}}
       {{yield}}
@@ -18,10 +18,17 @@
             <Icon
               @size="l"
               class="{{secondAlertType.glyphClass}}"
-              aria-hidden=true
+              aria-hidden="true"
               @glyph={{secondAlertType.glyph}}
             />
           {{/if}}
+          {{#if @progressBar}}
+            <progress
+              value={{progressBar.value}}
+              max={{progressBar.max}}
+              class="progress is-success is-medium is-inline-block"
+            ></progress>
+          {{/if}}
         </div>
         {{#if @message}}
           <p class="message-body">

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

@@ -1,14 +1,16 @@
 <div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
   {{#if isReindexing}}
-    <AlertBanner
-      @title={{concat "Re-indexing in progress" reindexingStage}}
-      @type="info"
-      @secondIconType="loading"
-      @message="This can cause a delay depending on the size of the data store. You can use Vault during this time."
-      data-test-isReindexing/>
+    <div class="reindexing-alert">
+      <AlertBanner
+        @title={{concat "Re-indexing in progress" reindexingStage}}
+        @type="info"
+        @progressBar={{progressBar}}
+        @message="This can cause a delay depending on the size of the data store. You can use Vault during this time."
+        data-test-isReindexing />
+    </div>
   {{/if}}
 
-  <div class="selectable-card-container has-top-margin-xl">
+  <div class="selectable-card-container">
     {{yield (hash
       card=(component componentToRender replicationDetails=replicationDetails)
     )}}
@@ -18,13 +20,14 @@
 
   </div>
   {{#if 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" 
-      data-test-isSyncing/>
+    <div class="syncing-alert">
+      <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."
+        data-test-isSyncing/>
+    </div>
   {{/if}}
   <ReplicationTableRows
     @replicationDetails={{replicationDetails}}

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

@@ -1,7 +1,7 @@
 <div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}" data-test-replication-secondary-card>
   {{!-- Check if State or WAL Card --}}
   {{#if (eq title "States")}}
-    <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
+    <h3 class="title is-5 grid-item-title card-title">{{title}}</h3>
     <div class="grid-item-left">
       {{#if (get (cluster-states state) "isOk")}}
         <h6 class="title is-6">state</h6>
@@ -45,7 +45,7 @@
     </h2>
     <h2 class="title is-3 grid-item-right-bottom" data-test-connection>{{connection}}</h2>
   {{else}}
-    <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
+    <h3 class="title is-5 grid-item-title card-title">{{title}}</h3>
     <div class="grid-item-left">
       <h6 class="title is-6">last_remote_wal</h6>
       <p class="has-text-grey is-size-8">The last WAL index that the secondary received from the primary. Updates every 10 seconds.</p>
@@ -58,7 +58,7 @@
             href={{primaryClusterAddr}}
             class="link"
             target="_blank"
-            rel="noreferrer noopener" 
+            rel="noreferrer noopener"
           >
             {{primaryClusterAddr}}
           </a>

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

@@ -8,7 +8,8 @@
 | 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. |
+| [secondIconType] | <code>String</code> | <code></code> | If you want a second icon to appear to the right of the title. This comes from the message-types helper. |
+| [progressBar] | <code>Object</code> | <code></code> | An object containing a value and maximum for a progress bar. Will be displayed next to the message title. |
 | [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. |
 

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

@@ -20,4 +20,18 @@ storiesOf('Alerts/AlertBanner/', module)
       },
     }),
     { notes }
+  )
+  .add(
+    'AlertBanner with Progress Bar',
+    () => ({
+      template: hbs`
+      <AlertBanner @type={{type}} @message={{message}} @progressBar={{progressBar}} />
+    `,
+      context: {
+        type: 'info',
+        message: 'Here is a message.',
+        progressBar: { value: 75, max: 100 },
+      },
+    }),
+    { notes }
   );

ui/tests/integration/components/replication-dashboard-test.js

@@ -8,11 +8,19 @@ const REPLICATION_DETAILS = {
   primaryClusterAddr: 'https://127.0.0.1:8201',
 };
 
-const REPLICATION_DETAILS_SYNCING = {
+const IS_SYNCING = {
   state: 'merkle-diff',
   primaryClusterAddr: 'https://127.0.0.1:8201',
 };
 
+const IS_REINDEXING = {
+  reindex_building_progress: 26838,
+  reindex_building_total: 305443,
+  reindex_in_progress: true,
+  reindex_stage: 'building',
+  state: 'running',
+};
+
 module('Integration | Enterprise | Component | replication-dashboard', function(hooks) {
   setupRenderingTest(hooks);
 
@@ -25,34 +33,50 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
     this.set('replicationDetails', REPLICATION_DETAILS);
 
     await render(hbs`<ReplicationDashboard
-    @replicationDetails={{replicationDetails}}
-    @clusterMode={{clusterMode}}
-    @isSecondary={{isSecondary}}
+      @replicationDetails={{replicationDetails}}
+      @clusterMode={{clusterMode}}
+      @isSecondary={{isSecondary}}
     />`);
 
     assert.dom('[data-test-replication-dashboard]').exists();
     assert.dom('[data-test-table-rows').exists();
-    assert
-      .dom('[data-test-primary-cluster-address]')
-      .includesText(
-        REPLICATION_DETAILS.primaryClusterAddr,
-        `shows the correct primary cluster address value`
-      );
     assert.dom('[data-test-replication-doc-link]').exists();
     assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render');
   });
 
   test('it renders an alert banner if the dashboard is syncing', async function(assert) {
-    this.set('replicationDetailsSyncing', REPLICATION_DETAILS_SYNCING);
+    this.set('replicationDetails', IS_SYNCING);
 
-    await render(hbs`<ReplicationDashboard 
-    @replicationDetails={{replicationDetailsSyncing}} 
-    @clusterMode={{clusterMode}}
-    @isSecondary={{isSecondary}}
-    @componentToRender='replication-secondary-card'
+    await render(hbs`<ReplicationDashboard
+      @replicationDetails={{replicationDetails}}
+      @clusterMode={{clusterMode}}
+      @isSecondary={{isSecondary}}
+      @componentToRender='replication-secondary-card'
     />`);
 
     assert.dom('[data-test-isSyncing]').exists();
-    assert.dom('[data-test-isReindexing]').doesNotExist();
+    assert
+      .dom('[data-test-isReindexing]')
+      .doesNotExist('does not show reindexing banner if cluster is cluster is not reindexing');
+  });
+
+  test('it shows an alert banner if the cluster is reindexing', async function(assert) {
+    this.set('replicationDetails', IS_REINDEXING);
+
+    await render(hbs`<ReplicationDashboard
+      @replicationDetails={{replicationDetails}}
+      @clusterMode={{clusterMode}}
+      @isSecondary={{isSecondary}}
+      @componentToRender='replication-secondary-card'
+    />`);
+
+    assert.dom('[data-test-isReindexing]').exists();
+    assert.dom('.message-title').includesText('Building', 'shows reindexing stage if there is one');
+    assert
+      .dom('.message-title>.progress')
+      .hasValue(
+        IS_REINDEXING.reindex_building_progress,
+        'shows the reindexing progress inside the alert banner'
+      );
   });
 });