Ui/replication/primary reindexing (#8906)

* fix typo

* fetch replication/mode/status and pass to dashboard component

* add reindexing stage to AlertBanner; use real value for isReindexing

* remove dr since we don't need it anymore

* add indentation

* remove TODO

* capitalize reindexing_stage and make progress 0 by default

* remove Toggle since we don't need it anymore

* get allllll the variables at once

* only run secondary details test on enterprise

ui/app/adapters/replication-mode.js

@@ -0,0 +1,14 @@
+import ApplicationAdapter from './application';
+
+export default ApplicationAdapter.extend({
+  getStatusUrl(mode) {
+    return this.buildURL() + `/replication/${mode}/status`;
+  },
+
+  fetchStatus(mode) {
+    let url = this.getStatusUrl(mode);
+    return this.ajax(url, 'GET', { unauthenticated: true }).then(resp => {
+      return resp.data;
+    });
+  },
+});

ui/app/models/replication-mode.js

@@ -0,0 +1,38 @@
+import DS from 'ember-data';
+const { attr } = DS;
+
+/* sample response
+
+{
+  "request_id": "d81bba81-e8a1-0ee9-240e-a77d36e3e08f",
+  "lease_id": "",
+  "renewable": false,
+  "lease_duration": 0,
+  "data": {
+    "cluster_id": "ab7d4191-d1a3-b4d6-6297-5a41af6154ae",
+    "known_secondaries": [
+      "test"
+    ],
+    "last_performance_wal": 72,
+    "last_reindex_epoch": "1588281113",
+    "last_wal": 73,
+    "merkle_root": "c8d258d376f01d98156f74e8d8f82ea2aca8dc4a",
+    "mode": "primary",
+    "primary_cluster_addr": "",
+    "reindex_building_progress": 26838,
+    "reindex_building_total": 305443,
+    "reindex_in_progress": true,
+    "reindex_stage": "building",
+    "state": "running"
+  },
+  "wrap_info": null,
+  "warnings": null,
+  "auth": null
+}
+
+
+*/
+
+export default DS.Model.extend({
+  status: attr('object'),
+});

ui/app/serializers/replication-mode.js

@@ -0,0 +1,12 @@
+import ApplicationSerializer from './application';
+
+export default ApplicationSerializer.extend({
+  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
+    const normalizedPayload = {
+      id: payload.id,
+      status: payload.data,
+    };
+
+    return this._super(store, primaryModelClass, normalizedPayload, id, requestType);
+  },
+});

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

@@ -1,21 +1,42 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { clusterStates } from 'core/helpers/cluster-states';
+import { capitalize } from '@ember/string';
 import layout from '../templates/components/replication-dashboard';
 
 export default Component.extend({
   layout,
   data: null,
   replicationDetails: null,
   isSecondary: null,
-  dr: null,
   isSyncing: computed('replicationDetails', 'isSecondary', function() {
     const { state } = this.replicationDetails;
     const isSecondary = this.isSecondary;
     return isSecondary && state && clusterStates([state]).isSyncing;
   }),
-  isReindexing: computed('data', function() {
-    // TODO: make this a real value
-    return false;
+  isReindexing: computed('replicationDetails', function() {
+    const { replicationDetails } = this;
+    return !!replicationDetails.reindex_in_progress;
+  }),
+  reindexingStage: computed('replicationDetails', function() {
+    const { replicationDetails } = this;
+    const stage = replicationDetails.reindex_stage;
+    // specify the stage if we have one
+    if (stage) {
+      return `: ${capitalize(stage)}`;
+    }
+    return '';
+  }),
+  reindexingProgress: computed('replicationDetails', function() {
+    // TODO: use this value to display a progress bar
+    const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
+    let progress = 0;
+
+    if (reindex_building_progress && reindex_building_total) {
+      // convert progress to a percentage
+      progress = (reindex_building_progress / reindex_building_total) * 100;
+    }
+
+    return progress;
   }),
 });

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

@@ -1,6 +1,8 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import layout from '../templates/components/replication-page';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
 
 const MODE = {
   dr: 'Disaster Recovery',
@@ -9,6 +11,26 @@ const MODE = {
 
 export default Component.extend({
   layout,
+  store: service(),
+  reindexingDetails: null,
+
+  didReceiveAttrs() {
+    this._super(arguments);
+    this.getReplicationModeStatus.perform();
+  },
+  getReplicationModeStatus: task(function*() {
+    let resp;
+    const { replicationMode } = this.model;
+    try {
+      resp = yield this.get('store')
+        .adapterFor('replication-mode')
+        .fetchStatus(replicationMode);
+    } catch (e) {
+      console.log(e);
+    }
+    this.set('reindexingDetails', resp);
+  }),
+
   replicationMode: computed('model.{replicationMode}', function() {
     // dr or performance 🤯
     let mode = this.model.replicationMode;

ui/lib/core/addon/mixins/replication-actions.js

@@ -28,7 +28,6 @@ export default Mixin.create({
       }, {});
       delete data.replicationMode;
     }
-
     return yield this.save.perform(action, replicationMode, clusterMode, data);
   }),
 

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

@@ -13,10 +13,9 @@
     {{/if}}
   {{/if}}
 
-  {{!-- TODO check for actual reindexing status --}}
   {{#if isReindexing}}
     <AlertBanner
-      @title="Re-indexing in progress: Scanning"
+      @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."/>

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

@@ -1,9 +1,18 @@
 <div class="replication-page">
-{{yield (hash
-  header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
-  toggle=(component 'replication-toggle')
-  dashboard=(component 'replication-dashboard' data=model isSecondary=isSecondary replicationDetails=replicationDetails clusterMode=clusterMode)
-  isDisabled=isDisabled
-  message=message
-)}}
+  {{yield
+    (hash
+      header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
+      toggle=(component 'replication-toggle')
+      dashboard=(component
+        'replication-dashboard'
+        data=model
+        isSecondary=isSecondary
+        replicationDetails=replicationDetails
+        clusterMode=clusterMode
+        reindexingDetails=reindexingDetails
+      )
+      isDisabled=isDisabled
+      message=message
+    )
+  }}
 </div>

ui/lib/replication/addon/templates/components/replication-summary.hbs

@@ -329,9 +329,9 @@
   {{#if (eq replicationAttrs.mode 'initializing')}}
     The cluster is initializing replication. This may take some time.
   {{else}}
+    <p>{{cluster.replicationModeStatus.cluster_id}}</p>
     <div class="replication">
       <ReplicationPage @model={{cluster}} as |Page|>
-        <Page.toggle />
         <Page.dashboard @data={{cluster}} @componentToRender='replication-primary-card' as |Dashboard|>
           <Dashboard.card
             @title='State'

ui/tests/acceptance/replication/dr/secondary-test.js

@@ -4,7 +4,7 @@ import { currentURL, visit } from '@ember/test-helpers';
 
 import authPage from 'vault/tests/pages/auth';
 
-module('Acceptance | DR secondary details', function(hooks) {
+module('Acceptance | Enterprise | DR secondary details', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function() {