Ui/replication status discoverability

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 -->
@@ -67,6 +68,11 @@ long-form version of the npm script:
 
 Make use of the many generators for code, try `ember help generate` for more details. If you're using a component that can be widely-used, consider making it an `addon` component instead (see [this PR](https://github.com/hashicorp/vault/pull/6629) for more details)
 
+eg. a reusable component named foo that you'd like in the core engine
+
+- `ember g component foo --in lib/core`
+- `echo "export { default } from 'core/components/foo';" > lib/core/app/components/foo.js`
+
 ### Running Tests
 
 Running tests will spin up a Vault dev server on port 9200 via a
@@ -158,7 +164,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/adapters/cluster.js

@@ -183,7 +183,10 @@ export default ApplicationAdapter.extend({
   },
 
   generateDrOperationToken(data, options) {
-    const verb = options && options.checkStatus ? 'GET' : 'PUT';
+    let verb = options && options.checkStatus ? 'GET' : 'PUT';
+    if (options.cancel) {
+      verb = 'DELETE';
+    }
     let url = `${this.buildURL()}/replication/dr/secondary/generate-operation-token/`;
     if (!data || data.pgp_key || data.attempt) {
       // start the generation

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/app.js

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

ui/app/components/shamir-modal-flow.js

@@ -0,0 +1,39 @@
+/**
+ * @module ShamirModalFlow
+ * ShamirModalFlow is an extension of the ShamirFlow component that does the Generate Action Token workflow inside of a Modal.
+ * Please note, this is not an extensive list of the required parameters -- please see ShamirFlow for others
+ *
+ * @example
+ * ```js
+ * <ShamirModalFlow @onClose={action 'onClose'}>This copy is the main paragraph when the token flow has not started</ShamirModalFlow>
+ * ```
+ * @param {function} onClose - This function will be triggered when the modal intends to be closed
+ */
+import { inject as service } from '@ember/service';
+import ShamirFlow from './shamir-flow';
+import layout from '../templates/components/shamir-modal-flow';
+
+export default ShamirFlow.extend({
+  layout,
+  store: service(),
+  onClose: () => {},
+  actions: {
+    onCancelClose() {
+      if (this.encoded_token) {
+        this.send('reset');
+      } else if (this.generateAction && !this.started) {
+        if (this.generateStep !== 'chooseMethod') {
+          this.send('reset');
+        }
+      } else {
+        const adapter = this.get('store').adapterFor('cluster');
+        adapter.generateDrOperationToken(this.model, { cancel: true });
+        this.send('reset');
+      }
+      this.onClose();
+    },
+    onClose() {
+      this.onClose();
+    },
+  },
+});

ui/app/controllers/vault/cluster/replication-dr-promote.js → ui/app/controllers/vault/cluster/replication-dr-promote/index.js

@@ -3,4 +3,9 @@ import Controller from '@ember/controller';
 export default Controller.extend({
   queryParams: ['action'],
   action: '',
+  actions: {
+    onPromote() {
+      this.transitionToRoute('vault.cluster.replication.mode.index', 'dr');
+    },
+  },
 });

ui/app/mixins/cluster-route.js

@@ -9,6 +9,7 @@ const CLUSTER = 'vault.cluster';
 const CLUSTER_INDEX = 'vault.cluster.index';
 const OIDC_CALLBACK = 'vault.cluster.oidc-callback';
 const DR_REPLICATION_SECONDARY = 'vault.cluster.replication-dr-promote';
+const DR_REPLICATION_SECONDARY_DETAILS = 'vault.cluster.replication-dr-promote.details';
 const EXCLUDED_REDIRECT_URLS = ['/vault/logout'];
 
 export { INIT, UNSEAL, AUTH, CLUSTER, CLUSTER_INDEX, DR_REPLICATION_SECONDARY };
@@ -70,6 +71,13 @@ export default Mixin.create({
       return UNSEAL;
     }
     if (get(cluster, 'dr.isSecondary')) {
+      if (transition && transition.targetName === DR_REPLICATION_SECONDARY_DETAILS) {
+        return DR_REPLICATION_SECONDARY_DETAILS;
+      }
+      if (this.router.currentRouteName === DR_REPLICATION_SECONDARY_DETAILS) {
+        return DR_REPLICATION_SECONDARY_DETAILS;
+      }
+
       return DR_REPLICATION_SECONDARY;
     }
     if (!isAuthed) {

ui/app/models/cluster.js

@@ -46,57 +46,22 @@ export default DS.Model.extend({
   //otherwise the particular mode will have the relevant mode attr through replication-attributes
   mode: attr('string'),
   allReplicationDisabled: and('{dr,performance}.replicationDisabled'),
-
   anyReplicationEnabled: or('{dr,performance}.replicationEnabled'),
 
-  stateDisplay(state) {
-    if (!state) {
-      return null;
-    }
-    const defaultDisp = 'Synced';
-    const displays = {
-      'stream-wals': 'Streaming',
-      'merkle-diff': 'Determining sync status',
-      'merkle-sync': 'Syncing',
-    };
-
-    return displays[state] || defaultDisp;
-  },
-
-  drStateDisplay: computed('dr.state', function() {
-    return this.stateDisplay(this.get('dr.state'));
-  }),
-
-  performanceStateDisplay: computed('performance.state', function() {
-    return this.stateDisplay(this.get('performance.state'));
-  }),
-
-  stateGlyph(state) {
-    const glyph = 'check-circle-outline';
-
-    const glyphs = {
-      'stream-wals': 'android-sync',
-      'merkle-diff': 'android-sync',
-      'merkle-sync': null,
-    };
-
-    return glyphs[state] || glyph;
-  },
-
-  drStateGlyph: computed('dr.state', function() {
-    return this.stateGlyph(this.get('dr.state'));
-  }),
-
-  performanceStateGlyph: computed('performance.state', function() {
-    return this.stateGlyph(this.get('performance.state'));
-  }),
-
   dr: fragment('replication-attributes'),
   performance: fragment('replication-attributes'),
   // this service exposes what mode the UI is currently viewing
   // replicationAttrs will then return the relevant `replication-attributes` fragment
   rm: service('replication-mode'),
   replicationMode: alias('rm.mode'),
+  replicationModeForDisplay: computed('replicationMode', function() {
+    return this.replicationMode === 'dr' ? 'Disaster Recovery' : 'Performance';
+  }),
+  replicationIsInitializing: computed('dr.mode', 'performance.mode', function() {
+    // a mode of null only happens when a cluster is being initialized
+    // otherwise the mode will be 'disabled', 'primary', 'secondary'
+    return !this.dr.mode || !this.performance.mode;
+  }),
   replicationAttrs: computed('dr.mode', 'performance.mode', 'replicationMode', function() {
     const replicationMode = this.get('replicationMode');
     return replicationMode ? get(this, replicationMode) : null;

ui/app/models/replication-attributes.js

@@ -18,16 +18,25 @@ export default Fragment.extend({
   isPrimary: match('mode', /primary/),
 
   knownSecondaries: attr('array'),
+  secondaries: attr('array'),
 
   // secondary attrs
   isSecondary: match('mode', /secondary/),
-
+  connection_state: attr('string'),
   modeForUrl: computed('mode', function() {
     const mode = this.get('mode');
     return mode === 'bootstrapping'
       ? 'bootstrapping'
       : (this.get('isSecondary') && 'secondary') || (this.get('isPrimary') && 'primary');
   }),
+  modeForHeader: computed('mode', function() {
+    const mode = this.mode;
+    if (!mode) {
+      // mode will be false or undefined if it calls the status endpoint while still setting up the cluster
+      return 'loading';
+    }
+    return mode;
+  }),
   secondaryId: attr('string'),
   primaryClusterAddr: attr('string'),
   knownPrimaryClusterAddrs: attr('array'),

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/router.js

@@ -127,7 +127,9 @@ Router.map(function() {
         this.route('show', { path: '/:policy_name' });
         this.route('edit', { path: '/:policy_name/edit' });
       });
-      this.route('replication-dr-promote');
+      this.route('replication-dr-promote', function() {
+        this.route('details');
+      });
       if (config.addRootMounts) {
         config.addRootMounts.call(this);
       }

ui/app/routes/vault/cluster/replication-dr-promote.js → ui/app/routes/vault/cluster/replication-dr-promote/details.js

@@ -1,5 +1,5 @@
 import { inject as service } from '@ember/service';
-import Base from './cluster-route-base';
+import Base from '../cluster-route-base';
 
 export default Base.extend({
   replicationMode: service(),

ui/app/routes/vault/cluster/replication-dr-promote/index.js

@@ -0,0 +1,10 @@
+import { inject as service } from '@ember/service';
+import Base from '../cluster-route-base';
+
+export default Base.extend({
+  replicationMode: service(),
+  beforeModel() {
+    this._super(...arguments);
+    this.get('replicationMode').setMode('dr');
+  },
+});

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/app/styles/components/action-block.scss

@@ -0,0 +1,67 @@
+@mixin stacked-grid {
+  grid-template-columns: 1fr;
+  grid-row: 1/1;
+}
+@mixin stacked-content {
+  margin-bottom: $spacing-l;
+}
+
+.action-block {
+  @extend .selectable-card;
+  grid-template-columns: 2fr 1fr;
+  display: grid;
+  padding: $spacing-m $spacing-l;
+  line-height: inherit;
+  grid-gap: $spacing-m;
+
+  @include until($mobile) {
+    @include stacked-grid();
+  }
+}
+
+.action-block-info {
+  @include until($mobile) {
+    @include stacked-content();
+  }
+}
+
+.action-block.stacked {
+  @include stacked-grid();
+}
+.stacked > .action-block-info {
+  @include stacked-content();
+}
+
+.action-block-title {
+  font-size: $size-5;
+  font-weight: $font-weight-bold;
+}
+.action-block-action {
+  text-align: right;
+  @include until($mobile) {
+    text-align: left;
+  }
+}
+
+/* Action Block Grid */
+.replication-actions-grid-layout {
+  display: flex;
+  flex-wrap: wrap;
+  margin: $spacing-m 0;
+  @include until($tablet) {
+    display: block;
+  }
+}
+
+.replication-actions-grid-item {
+  flex-basis: 50%;
+  padding: $spacing-s;
+}
+
+.replication-actions-grid-item .action-block {
+  height: 100%;
+  width: 100%;
+  @include until($tablet) {
+    height: inherit;
+  }
+}

ui/app/styles/components/empty-state.scss

@@ -1,8 +1,8 @@
 .empty-state {
   align-items: center;
   color: $grey;
-  display: flex;
   background: $ui-gray-010;
+  display: flex;
   justify-content: center;
   padding: $spacing-xxl $spacing-s;
   box-shadow: 0 -2px 0 -1px $ui-gray-300;
@@ -36,3 +36,8 @@
     margin-left: $spacing-s;
   }
 }
+
+.empty-state-icon > .hs-icon {
+  float: left;
+  margin-right: $spacing-xs;
+}