diff --git a/ui/README.md b/ui/README.md index b5fb1a5110..338c34618b 100644 --- a/ui/README.md +++ b/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) @@ -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. diff --git a/ui/app/adapters/cluster.js b/ui/app/adapters/cluster.js index 110060a6ea..dd7d17220a 100644 --- a/ui/app/adapters/cluster.js +++ b/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 diff --git a/ui/app/adapters/replication-mode.js b/ui/app/adapters/replication-mode.js new file mode 100644 index 0000000000..baa09570f8 --- /dev/null +++ b/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; + }); + }, +}); diff --git a/ui/app/app.js b/ui/app/app.js index 067a6f8c87..509014ac68 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -31,6 +31,9 @@ App = Application.extend({ 'version', 'wizard', ], + externalRoutes: { + replication: 'vault.cluster.replication.index', + }, }, }, kmip: { diff --git a/ui/app/components/shamir-modal-flow.js b/ui/app/components/shamir-modal-flow.js new file mode 100644 index 0000000000..2a06e6f185 --- /dev/null +++ b/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 + * This copy is the main paragraph when the token flow has not started + * ``` + * @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(); + }, + }, +}); diff --git a/ui/app/controllers/vault/cluster/replication-dr-promote.js b/ui/app/controllers/vault/cluster/replication-dr-promote/index.js similarity index 51% rename from ui/app/controllers/vault/cluster/replication-dr-promote.js rename to ui/app/controllers/vault/cluster/replication-dr-promote/index.js index 35ca35f0e7..0adb652d4f 100644 --- a/ui/app/controllers/vault/cluster/replication-dr-promote.js +++ b/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'); + }, + }, }); diff --git a/ui/app/mixins/cluster-route.js b/ui/app/mixins/cluster-route.js index b11940db71..b166956274 100644 --- a/ui/app/mixins/cluster-route.js +++ b/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) { diff --git a/ui/app/models/cluster.js b/ui/app/models/cluster.js index f7542c1ce2..dea9ae2317 100644 --- a/ui/app/models/cluster.js +++ b/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; diff --git a/ui/app/models/replication-attributes.js b/ui/app/models/replication-attributes.js index 24c2f464ea..55bba8104b 100644 --- a/ui/app/models/replication-attributes.js +++ b/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'), diff --git a/ui/app/models/replication-mode.js b/ui/app/models/replication-mode.js new file mode 100644 index 0000000000..df79d46ac9 --- /dev/null +++ b/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'), +}); diff --git a/ui/app/router.js b/ui/app/router.js index 2682227e02..916dacbb88 100644 --- a/ui/app/router.js +++ b/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); } diff --git a/ui/app/routes/vault/cluster/replication-dr-promote.js b/ui/app/routes/vault/cluster/replication-dr-promote/details.js similarity index 83% rename from ui/app/routes/vault/cluster/replication-dr-promote.js rename to ui/app/routes/vault/cluster/replication-dr-promote/details.js index 84de8c5881..3d716ad990 100644 --- a/ui/app/routes/vault/cluster/replication-dr-promote.js +++ b/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(), diff --git a/ui/app/routes/vault/cluster/replication-dr-promote/index.js b/ui/app/routes/vault/cluster/replication-dr-promote/index.js new file mode 100644 index 0000000000..3d716ad990 --- /dev/null +++ b/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'); + }, +}); diff --git a/ui/app/serializers/replication-mode.js b/ui/app/serializers/replication-mode.js new file mode 100644 index 0000000000..2e6e9210bf --- /dev/null +++ b/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); + }, +}); diff --git a/ui/app/styles/components/action-block.scss b/ui/app/styles/components/action-block.scss new file mode 100644 index 0000000000..137b4fa540 --- /dev/null +++ b/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; + } +} diff --git a/ui/app/styles/components/empty-state.scss b/ui/app/styles/components/empty-state.scss index b023403cfa..fb4d4b6e6c 100644 --- a/ui/app/styles/components/empty-state.scss +++ b/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; +} diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss index bca18fd24b..d3a0193c63 100644 --- a/ui/app/styles/components/info-table-row.scss +++ b/ui/app/styles/components/info-table-row.scss @@ -17,6 +17,8 @@ } .column { + align-self: center; + &.info-table-row-edit { padding-bottom: 0.3rem; padding-top: 0.3rem; @@ -25,6 +27,10 @@ textarea { min-height: 35px; } + + .helper-text { + font-weight: normal; + } } .hs-icon { diff --git a/ui/app/styles/components/info-table.scss b/ui/app/styles/components/info-table.scss new file mode 100644 index 0000000000..00d9678a13 --- /dev/null +++ b/ui/app/styles/components/info-table.scss @@ -0,0 +1,9 @@ +.info-table { + &.vlt-table td { + padding-top: 0px; + padding-bottom: 0px; + } + .info-table-row { + box-shadow: none; + } +} diff --git a/ui/app/styles/components/known-secondaries-card.scss b/ui/app/styles/components/known-secondaries-card.scss new file mode 100644 index 0000000000..63f1025be2 --- /dev/null +++ b/ui/app/styles/components/known-secondaries-card.scss @@ -0,0 +1,18 @@ +.selectable-card.secondaries { + grid-column: 2/3; + grid-row: 1/3; + + @include until($mobile) { + grid-column: 1/1; + grid-row: 1/1; + } + + .secondaries-table { + margin-bottom: $spacing-s; + } + + .link { + font-size: $size-7; + text-decoration: none; + } +} diff --git a/ui/app/styles/components/modal.scss b/ui/app/styles/components/modal.scss index fe784140d9..fe62926573 100644 --- a/ui/app/styles/components/modal.scss +++ b/ui/app/styles/components/modal.scss @@ -5,6 +5,8 @@ .modal-card { box-shadow: $box-shadow-highest; border: 1px solid $grey-light; + max-height: calc(100vh - 70px); + margin-top: 60px; &-head { border-radius: 0; @@ -39,6 +41,38 @@ } } +.modal-card-title.title { + display: flex; + align-items: center; +} + pre { background-color: inherit; } + +.is-highlight { + .modal-card-head { + background: $yellow-010; + border: 1px solid $yellow-100; + } + .modal-card-title { + color: $yellow-dark; + } +} + +.modal-confirm-section .is-help { + color: $grey; + margin: $spacing-xxs 0; + strong { + color: inherit; + } +} + +.modal-confirm-section { + margin: $spacing-xl 0 $spacing-m; +} + +.modal-card-foot-outlined { + background: #f7f8fa; + border-top: 1px solid #bac1cc; +} diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss new file mode 100644 index 0000000000..3cca15c76a --- /dev/null +++ b/ui/app/styles/components/replication-dashboard.scss @@ -0,0 +1,131 @@ +.replication-dashboard { + box-shadow: none; + + .selectable-card { + line-height: normal; + + &:hover { + box-shadow: 0 0 0 1px rgba($grey-dark, 0.3); + } + + .toolbar-link { + color: $blue-500; + } + } + + .helper-text { + font-weight: $font-weight-normal; + } + + .title.is-6 { + margin-bottom: $spacing-xs; + } + + .reindexing-alert, + .syncing-alert { + margin-top: $spacing-xl; + } + + .selectable-card-container { + margin-top: $spacing-xl; + display: grid; + + &.primary, + .summary { + margin: 2rem 0 2rem 0; + grid-template-columns: 1fr 2fr; + + @include until($mobile) { + grid-template-columns: 1fr; + } + } + + &.secondary { + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: $spacing-xl; + } + + .card-container { + display: grid; + grid-gap: $spacing-s; + grid-template-columns: 1fr 1fr; + grid-template-rows: 0.2fr 0.2fr 0.2fr; + padding: $spacing-l; + line-height: 1.5; + + &.summary { + grid-template-rows: 0.2fr 1fr 0.2fr 1fr; + } + + &.has-border-danger:hover { + box-shadow: none; + } + + @include until(1320px) { + // prevent an issue with the card descriptions wrapping and expanding height + min-height: 250px; + } + + .grid-item-top-left { + grid-column: 1 / span 1; + display: flex; + } + .grid-item-top-right { + grid-column: 2 / span 1; + justify-self: right; + } + .grid-item-left { + grid-column: 1/1; + grid-row: 2/2; + } + .grid-item-right { + grid-column: 2/2; + grid-row: 2/2; + } + + .grid-item-bottom-left { + grid-column: 1/1; + grid-row: 3/3; + display: flex; + align-items: center; + } + .grid-item-bottom-right { + grid-column: 2/2; + grid-row: 3/3; + } + + .grid-item-second-row { + grid-column: 1 / span 2; + grid-row: 2/2; + } + + .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; + grid-row: 4/4; + } + } + + &.summary { + margin-bottom: $spacing-xl; + } + } + .summary-state { + padding-bottom: $spacing-xl; + border-bottom: 1px solid rgba($grey-dark, 0.3); + } + + // prevent double lines at the bottom of the dashboard + &.box { + padding-bottom: 0; + padding-top: 1px; // at least 1px so border still shows + } +} diff --git a/ui/app/styles/components/replication-doc-link.scss b/ui/app/styles/components/replication-doc-link.scss new file mode 100644 index 0000000000..6bf2d02dfc --- /dev/null +++ b/ui/app/styles/components/replication-doc-link.scss @@ -0,0 +1,8 @@ +.documentation-link { + margin: $spacing-s 0 $spacing-l 0; + float: right; + + .doc-link { + font-weight: normal; + } +} diff --git a/ui/app/styles/components/replication-header.scss b/ui/app/styles/components/replication-header.scss new file mode 100644 index 0000000000..7a93426306 --- /dev/null +++ b/ui/app/styles/components/replication-header.scss @@ -0,0 +1,5 @@ +.replication-header { + .tabs-container { + margin-bottom: $spacing-l; + } +} diff --git a/ui/app/styles/components/replication-mode-summary.scss b/ui/app/styles/components/replication-mode-summary.scss new file mode 100644 index 0000000000..27ba8a5770 --- /dev/null +++ b/ui/app/styles/components/replication-mode-summary.scss @@ -0,0 +1,11 @@ +.replication-description { + flex-shrink: 1; + + .title { + margin-bottom: $spacing-xs; + } + + .detail-tags { + margin-bottom: $spacing-m; + } +} diff --git a/ui/app/styles/components/replication-page.scss b/ui/app/styles/components/replication-page.scss new file mode 100644 index 0000000000..8809a1f6dc --- /dev/null +++ b/ui/app/styles/components/replication-page.scss @@ -0,0 +1,10 @@ +.replication-page { + .empty-state { + background: none; + + .empty-state-message { + padding-bottom: $spacing-s; + border-bottom: 1px solid $grey-light; + } + } +} diff --git a/ui/app/styles/components/replication-primary-card.scss b/ui/app/styles/components/replication-primary-card.scss new file mode 100644 index 0000000000..8cf99be14e --- /dev/null +++ b/ui/app/styles/components/replication-primary-card.scss @@ -0,0 +1,15 @@ +.replication { + .selectable-card { + display: initial; + line-height: normal; + padding: $spacing-l; + + &:hover { + box-shadow: 0 0 0 1px rgba($grey-dark, 0.3); + } + + .card-title { + margin-bottom: 2rem; + } + } +} diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss new file mode 100644 index 0000000000..7e308a2d4c --- /dev/null +++ b/ui/app/styles/components/replication-summary.scss @@ -0,0 +1,9 @@ +.replication { + .toolbar { + border-top: 0px; + } + + .helper-text { + font-weight: normal; + } +} diff --git a/ui/app/styles/components/selectable-card.scss b/ui/app/styles/components/selectable-card.scss index a2939ceccd..4bdc15c1a1 100644 --- a/ui/app/styles/components/selectable-card.scss +++ b/ui/app/styles/components/selectable-card.scss @@ -67,12 +67,21 @@ font-weight: 500; line-height: 1.33; } + + .vlt-table { + max-height: 200px; + overflow-y: auto; + } } .selectable-card.is-rounded { border-radius: $radius; } +.selectable-card.has-border-danger { + box-shadow: none; +} + .change-metric-icon.is-decrease { transform: rotate(135deg); } diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 186bfadbe8..3dd3397b57 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/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; diff --git a/ui/app/styles/components/vlt-table.scss b/ui/app/styles/components/vlt-table.scss index 2b61b079fe..c55633de69 100644 --- a/ui/app/styles/components/vlt-table.scss +++ b/ui/app/styles/components/vlt-table.scss @@ -4,6 +4,15 @@ height: 0; } + &.sticky-header { + thead th { + position: sticky; + background: #fff; + box-shadow: 0 1px 0px 0px rgba($grey-dark, 0.3); + top: 0; + } + } + th, td { padding: $spacing-s; @@ -34,4 +43,9 @@ td.no-padding { padding: 0; } + + code { + font-size: $size-7; + color: $black; + } } diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index a9c4d267b6..1a91cc109b 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -60,9 +60,11 @@ @import './components/http-requests-bar-chart'; @import './components/http-requests-table'; @import './components/init-illustration'; +@import './components/info-table'; @import './components/info-table-row'; @import './components/input-hint'; @import './components/kmip-role-edit'; +@import './components/known-secondaries-card.scss'; @import './components/linked-block'; @import './components/list-item-row'; @import './components/list-pagination'; @@ -78,10 +80,19 @@ @import './components/radio-card'; @import './components/radial-progress'; @import './components/raft-join'; +@import './components/replication-dashboard'; +@import './components/replication-doc-link'; +@import './components/replication-header'; +@import './components/replication-mode-summary'; +@import './components/replication-page'; +@import './components/replication-primary-card'; +@import './components/replication-summary'; @import './components/role-item'; @import './components/search-select'; @import './components/selectable-card'; @import './components/selectable-card-container.scss'; +// action-block extends selectable-card +@import './components/action-block.scss'; @import './components/shamir-progress'; @import './components/sidebar'; @import './components/splash-page'; diff --git a/ui/app/styles/core/helpers.scss b/ui/app/styles/core/helpers.scss index 7ba1504256..884ffd0dfc 100644 --- a/ui/app/styles/core/helpers.scss +++ b/ui/app/styles/core/helpers.scss @@ -39,6 +39,10 @@ display: flex; flex-direction: column; } +.is-flex-row { + display: flex; + flex-direction: row; +} .is-flex-v-centered { display: flex; align-items: center; @@ -143,6 +147,30 @@ 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-bottom-margin-l { + margin-bottom: $spacing-l; +} +.has-top-margin-xl { + margin-top: $spacing-xl; +} +.has-border-danger { + border: 1px solid $danger; +} + +ul.bullet { + list-style: disc; + padding-left: $spacing-m; +} + +.has-text-semibold { + font-weight: $font-weight-semibold; +} diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index f1a60248ea..83e4d70f33 100644 --- a/ui/app/styles/core/message.scss +++ b/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 { diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index 3454e73bd7..ceb4f8e982 100644 --- a/ui/app/styles/core/progress.scss +++ b/ui/app/styles/core/progress.scss @@ -1,9 +1,9 @@ -.progress[value]::-webkit-progress-bar, -.progress[value]::-webkit-progress-value { - border-radius: 2px; -} .progress { - border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; + background: $progress-bar-background-color; + box-shadow: inset 0 0 0 1px $ui-gray-200; + border-radius: $radius; margin-bottom: 0; &.is-small { height: 0.5rem; @@ -11,10 +11,24 @@ &.is-narrow { width: 30px; } + &.is-medium { + width: 120px; + } } -.progress.is-rounded { - border-radius: 2px; + +// style the container in chrome +.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 bar in chrome +.progress[value]::-webkit-progress-value { + border-radius: $radius; + transition: width 1s ease-out; +} + +// style the bar in firefox +.progress[value]::-moz-progress-bar { + border-radius: $radius; + transition: width 1s ease-out; } diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss index 339d478d71..bc20bb5413 100644 --- a/ui/app/styles/utils/_bulma_variables.scss +++ b/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; diff --git a/ui/app/templates/components/shamir-flow.hbs b/ui/app/templates/components/shamir-flow.hbs index edc58ea02e..ace02e1d89 100644 --- a/ui/app/templates/components/shamir-flow.hbs +++ b/ui/app/templates/components/shamir-flow.hbs @@ -119,7 +119,7 @@ {{else}}
-
+
{{#if errors}}
{{message-error errors=errors}} diff --git a/ui/app/templates/components/shamir-modal-flow.hbs b/ui/app/templates/components/shamir-modal-flow.hbs new file mode 100644 index 0000000000..954a9e20db --- /dev/null +++ b/ui/app/templates/components/shamir-modal-flow.hbs @@ -0,0 +1,194 @@ + +
+ {{#if encoded_token}} +

+ {{#if otp}} + There are three values below. The encoded operation token and the OTP are used in the DR operation token command, which you will need to copy and paste into your CLI in order to generate the operation token. Save your encoded operation token and OTP. + {{else}} + The encoded operation token and the OTP are used in the DR operation token command, which you will need to copy and paste into your CLI in order to generate the operation token. Save your encoded operation token and OTP. + {{/if}} +

+
+

+ Encoded operation token +

+
+ + {{encoded_token}} +
+ {{#if otp}} +

+ One time password (OTP) +

+
+ + {{otp}} +
+ {{/if}} +

+ DR operation token command +

+
+ {{#let (if otp + (concat 'vault operator generate-root -otp="' otp '" -decode="' encoded_token '"') (concat 'vault operator generate-root -otp="" -decode="' encoded_token '"') ) as |cmd|}} + + {{cmd}} + {{/let}} +
+
+
+ +
+ {{else if (and generateAction (not started))}} + + {{message-error errors=errors}} + {{#if (eq generateStep 'chooseMethod')}} +
+ {{yield}} +
+
+
+ +
+
+ + or + +
+
+ +
+
+ {{/if}} + {{#if (eq generateStep 'providePGPKey')}} +
+

+ Choose a PGP Key from your computer or paste the contents of one in the form below. + This key will be used to Encrypt the generated operation token. +

+ {{pgp-file index='' key=pgpKeyFile onChange=(action 'setKey')}} +
+
+
+ +
+
+ +
+
+ {{/if}} + {{#if (eq generateStep 'beginGenerationWithPGP')}} +
+

+ Below is the base-64 encoded PGP Key that will be used to encrypt the generated operation token. + Next we'll enter portions of the master key to generate an operation token. Click the "Generate operation token" button to proceed. +

+

+ PGP Key {{pgpKeyFile.fileName}} +

+
+ + {{pgp_key}} +
+
+
+
+ +
+
+ +
+
+ {{/if}} + + {{else}} +
+
+ {{#if errors}} +
+ {{message-error errors=errors}} +
+ {{/if}} +
+ {{#if otp}} +
+

+ One-time password (OTP) +

+
+ + {{otp}} +
+
+
+ This OTP will be used to encode the generated operation token. Save this, as you will need it later to decode the operation token. +
+ {{/if}} +

+ Generate an operation token by entering a portion of the master key. Once all portions are entered, the generated token may be used to manage your secondary Disaster Recovery cluster. +

+
+
+ +
+ {{input class="input"type="password" name="key" value=key data-test-shamir-input=true}} +
+
+
+
+
+
+ +
+
+ {{#if (or started hasProgress)}} + + {{/if}} +
+
+
+
+ {{/if}} +
+
+ +
+ \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/datakey.hbs b/ui/app/templates/components/transit-key-action/datakey.hbs index b79fbac460..ed311aea82 100644 --- a/ui/app/templates/components/transit-key-action/datakey.hbs +++ b/ui/app/templates/components/transit-key-action/datakey.hbs @@ -89,7 +89,7 @@
-

Plaintext is base64 encoded

+

Plaintext is base64 encoded

Ciphertext

{{ciphertext}} diff --git a/ui/app/templates/components/wizard/replication-details.hbs b/ui/app/templates/components/wizard/replication-details.hbs deleted file mode 100644 index e04d4da686..0000000000 --- a/ui/app/templates/components/wizard/replication-details.hbs +++ /dev/null @@ -1,19 +0,0 @@ - - -

- Here you can see the details about your new replication cluster, manage or disable replication, and handle secondary clusters. You can also get a quick status by hovering over the "Replication" link at the top. -

- -
-

- Ready to move on? -

- -
- diff --git a/ui/app/templates/components/wizard/replication-setup.hbs b/ui/app/templates/components/wizard/replication-setup.hbs index 23ac6056e1..449ac22b0b 100644 --- a/ui/app/templates/components/wizard/replication-setup.hbs +++ b/ui/app/templates/components/wizard/replication-setup.hbs @@ -8,6 +8,16 @@

Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access?

+ + + + + + +

diff --git a/ui/app/templates/partials/status/cluster.hbs b/ui/app/templates/partials/status/cluster.hbs index 150e8dd0da..b084a56d63 100644 --- a/ui/app/templates/partials/status/cluster.hbs +++ b/ui/app/templates/partials/status/cluster.hbs @@ -62,6 +62,30 @@

{{/if}} + {{else}} + {{#if (has-permission 'status' routeParams='replication')}} + +
+ {{/if}} {{/if}} {{/if}} {{/unless}} diff --git a/ui/app/templates/vault/cluster/oidc-callback.hbs b/ui/app/templates/vault/cluster/oidc-callback.hbs index e0317112a8..9f73e7e591 100644 --- a/ui/app/templates/vault/cluster/oidc-callback.hbs +++ b/ui/app/templates/vault/cluster/oidc-callback.hbs @@ -1,7 +1,7 @@
-
+
- -

- Disaster Recovery secondary is enabled -

- - - - {{#if (eq action 'promote')}} - - - {{/if}} - {{#if (eq action 'update')}} - - {{/if}} - {{#unless action}} - -

- Generate an Operation Token by entering a portion of the master key. - Once all portions are entered, the generated operation token may be used to manage your secondary Disaster Recovery cluster. -

- - {{/unless}} - - diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs new file mode 100644 index 0000000000..8ee73bd585 --- /dev/null +++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs @@ -0,0 +1,45 @@ +
+
+ + + {{#if Page.isDisabled}} + + + + {{else}} + + + + + + {{/if}} + +
+
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs new file mode 100644 index 0000000000..da24814d60 --- /dev/null +++ b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs @@ -0,0 +1,41 @@ +
+
+ + + {{#if Page.isDisabled}} + + + + {{else}} +
+ +
+ {{/if}} + +
+
diff --git a/ui/lib/core/addon/components/alert-banner.js b/ui/lib/core/addon/components/alert-banner.js index 275b4b94ee..9eb6dde75e 100644 --- a/ui/lib/core/addon/components/alert-banner.js +++ b/ui/lib/core/addon/components/alert-banner.js @@ -12,9 +12,11 @@ import layout from '../templates/components/alert-banner'; * * ``` * - * @param type=null {String} - The banner type. 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. * */ @@ -23,6 +25,8 @@ export default Component.extend({ type: null, message: null, title: null, + secondIconType: null, + progressBar: null, yieldWithoutColumn: false, classNameBindings: ['containerClass'], @@ -33,4 +37,8 @@ export default Component.extend({ alertType: computed('type', function() { return messageTypes([this.get('type')]); }), + + secondAlertType: computed('secondIconType', function() { + return messageTypes([this.get('secondIconType')]); + }), }); diff --git a/ui/lib/core/addon/components/confirmation-modal.js b/ui/lib/core/addon/components/confirmation-modal.js new file mode 100644 index 0000000000..b2bac1d658 --- /dev/null +++ b/ui/lib/core/addon/components/confirmation-modal.js @@ -0,0 +1,37 @@ +/** + * @module ConfirmationModal + * ConfirmationModal components are used to provide an alternative to ConfirmationButton that automatically prompts the user to fill in confirmation text before they can continue with a potentially destructive action. It is built off the Modal component + * + * @example + * ```js + * + * ``` + * @param {function} onConfirm - onConfirm is the action that happens when user clicks onConfirm after filling in the confirmation block + * @param {boolean} isActive - Controls whether the modal is "active" eg. visible or not. + * @param {string} title - Title of the modal + * @param {function} onClose - specify what to do when user attempts to close modal + * @param {string} [buttonText=Confirm] - Button text on the confirm button + * @param {string} [confirmText=Yes] - The confirmation text that the user must type before continuing + * @param {string} [buttonClass=is-danger] - extra class to add to confirm button (eg. "is-danger") + * @param {sting} [type=warning] - Applies message-type styling to header. Override to default with empty string + * @param {string} [toConfirmMsg] - Finishes the sentence "Type YES to confirm ..." + * @param {string} [testSelector] - The unique test selector used on the input to fill in text during tests. + */ + +import Component from '@ember/component'; +import layout from '../templates/components/confirmation-modal'; + +export default Component.extend({ + layout, + buttonClass: 'is-danger', + buttonText: 'Confirm', + confirmText: 'Yes', + type: 'warning', + toConfirmMsg: '', + testSelector: '', +}); diff --git a/ui/lib/core/addon/components/empty-state.js b/ui/lib/core/addon/components/empty-state.js index 6d7c6d550b..2a2f36ac47 100644 --- a/ui/lib/core/addon/components/empty-state.js +++ b/ui/lib/core/addon/components/empty-state.js @@ -13,7 +13,7 @@ import layout from '../templates/components/empty-state'; * * @param title=null{String} - A short label for the empty state * @param message=null{String} - A description of why a user might be seeing the empty state and possibly instructions for actions they may take. - * + * @param [icon='']{String} - A optional param to display icon to the right of the title */ export default Component.extend({ @@ -21,4 +21,5 @@ export default Component.extend({ tagName: '', title: null, message: null, + icon: '', }); diff --git a/ui/lib/core/addon/components/info-table-row.js b/ui/lib/core/addon/components/info-table-row.js index ef6895c25a..2fadd1fa4c 100644 --- a/ui/lib/core/addon/components/info-table-row.js +++ b/ui/lib/core/addon/components/info-table-row.js @@ -11,11 +11,12 @@ import layout from '../templates/components/info-table-row'; * * @example * ```js - * + * * ``` * * @param value=null {any} - The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. * @param label=null {string} - The display name for the value. + * @param helperText=null {string} - Text to describe the value displayed beneath the label. * @param alwaysRender=false {Boolean} - Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render. * */ @@ -27,6 +28,7 @@ export default Component.extend({ alwaysRender: false, label: null, + helperText: null, value: null, valueIsBoolean: computed('value', function() { diff --git a/ui/lib/core/addon/components/info-table.js b/ui/lib/core/addon/components/info-table.js new file mode 100644 index 0000000000..13959817d4 --- /dev/null +++ b/ui/lib/core/addon/components/info-table.js @@ -0,0 +1,27 @@ +import Component from '@ember/component'; +import layout from '../templates/components/info-table'; + +/** + * @module InfoTable + * InfoTable components are a table with a single column and header. They are used to render a list of InfoTableRow components. + * + * @example + * ```js + * + * ``` + * @param {String} [title=Info Table] - The title of the table. Used for accessibility purposes. + * @param {String} header=null - The column header. + * @param {Array} items=null - An array of strings which will be used as the InfoTableRow value. + */ + +export default Component.extend({ + layout, + tagName: '', + title: 'Info Table', + header: null, + items: null, +}); diff --git a/ui/app/components/key-value-header.js b/ui/lib/core/addon/components/key-value-header.js similarity index 96% rename from ui/app/components/key-value-header.js rename to ui/lib/core/addon/components/key-value-header.js index fb743b9f99..79bf7bcf21 100644 --- a/ui/app/components/key-value-header.js +++ b/ui/lib/core/addon/components/key-value-header.js @@ -1,9 +1,11 @@ import { computed } from '@ember/object'; import Component from '@ember/component'; import utils from 'vault/lib/key-utils'; +import layout from '../templates/components/key-value-header'; import { encodePath } from 'vault/utils/path-encoding-helpers'; export default Component.extend({ + layout, tagName: 'nav', classNames: 'key-value-header breadcrumb', ariaLabel: 'breadcrumbs', diff --git a/ui/app/components/learn-link.js b/ui/lib/core/addon/components/learn-link.js similarity index 100% rename from ui/app/components/learn-link.js rename to ui/lib/core/addon/components/learn-link.js diff --git a/ui/app/components/modal.js b/ui/lib/core/addon/components/modal.js similarity index 54% rename from ui/app/components/modal.js rename to ui/lib/core/addon/components/modal.js index 55c5dc1f49..fda8df3a2e 100644 --- a/ui/app/components/modal.js +++ b/ui/lib/core/addon/components/modal.js @@ -10,12 +10,32 @@ * @param {function} onClose - onClose is the action taken when someone clicks the modal background or close button (if shown). * @param {string} [title] - This text shows up in the header section of the modal. * @param {boolean} [showCloseButton=false] - controls whether the close button in the top right corner shows. + * @param {string} type=null - The header type. This comes from the message-types helper. */ import Component from '@ember/component'; +import { computed } from '@ember/object'; +import { messageTypes } from 'core/helpers/message-types'; +import layout from '../templates/components/modal'; export default Component.extend({ + layout, title: null, showCloseButton: false, + type: null, + glyph: computed('type', function() { + const modalType = this.get('type'); + if (!modalType) { + return; + } + return messageTypes([this.get('type')]); + }), + modalClass: computed('type', function() { + const modalType = this.get('type'); + if (!modalType) { + return 'modal'; + } + return 'modal ' + messageTypes([this.get('type')]).class; + }), onClose: () => {}, }); diff --git a/ui/lib/core/addon/components/replication-action-generate-token.js b/ui/lib/core/addon/components/replication-action-generate-token.js new file mode 100644 index 0000000000..4127ea6bea --- /dev/null +++ b/ui/lib/core/addon/components/replication-action-generate-token.js @@ -0,0 +1,6 @@ +import Actions from './replication-actions-single'; +import layout from '../templates/components/replication-action-generate-token'; + +export default Actions.extend({ + layout, +}); diff --git a/ui/lib/core/addon/components/replication-actions-single.js b/ui/lib/core/addon/components/replication-actions-single.js index 90573cbea1..b922c382a9 100644 --- a/ui/lib/core/addon/components/replication-actions-single.js +++ b/ui/lib/core/addon/components/replication-actions-single.js @@ -3,7 +3,7 @@ import Component from '@ember/component'; export default Component.extend({ onSubmit() {}, replicationMode: null, - replicationDisplayMode: null, + replicationModeForDisplay: null, model: null, actions: { diff --git a/ui/lib/core/addon/components/replication-actions.js b/ui/lib/core/addon/components/replication-actions.js index 53b009a525..7081749f0d 100644 --- a/ui/lib/core/addon/components/replication-actions.js +++ b/ui/lib/core/addon/components/replication-actions.js @@ -1,6 +1,5 @@ import { alias } from '@ember/object/computed'; import Component from '@ember/component'; -import { computed } from '@ember/object'; import ReplicationActions from 'core/mixins/replication-actions'; import layout from '../templates/components/replication-actions'; @@ -10,7 +9,6 @@ const DEFAULTS = { primary_cluster_addr: null, errors: [], id: null, - replicationMode: null, force: false, }; @@ -19,7 +17,6 @@ export default Component.extend(ReplicationActions, DEFAULTS, { replicationMode: null, model: null, cluster: alias('model'), - reset() { if (!this || this.isDestroyed || this.isDestroying) { return; @@ -27,19 +24,9 @@ export default Component.extend(ReplicationActions, DEFAULTS, { this.setProperties(DEFAULTS); }, - replicationDisplayMode: computed('replicationMode', function() { - const replicationMode = this.get('replicationMode'); - if (replicationMode === 'dr') { - return 'DR'; - } - if (replicationMode === 'performance') { - return 'Performance'; - } - }), - actions: { onSubmit() { - return this.submitHandler(...arguments); + return this.submitHandler.perform(...arguments); }, clear() { this.reset(); diff --git a/ui/lib/core/addon/components/replication-dashboard.js b/ui/lib/core/addon/components/replication-dashboard.js new file mode 100644 index 0000000000..650a7ec247 --- /dev/null +++ b/ui/lib/core/addon/components/replication-dashboard.js @@ -0,0 +1,102 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; +import { clusterStates } from 'core/helpers/cluster-states'; +import { capitalize } from '@ember/string'; +import { htmlSafe } from '@ember/template'; +import layout from '../templates/components/replication-dashboard'; + +/** + * @module ReplicationDashboard + * The `ReplicationDashboard` component is a contextual component of the replication-page component. + * It organizes cluster data specific to mode (dr or performance) and also the type (primary or secondary). + * It is the parent contextual component of the replication--card components. + * + * @example + * ```js + * + * ``` + * @param {Object} data=null - An Ember data object that is pulled from the Ember Cluster Model. + * @param {String} [componentToRender=''] - A string that determines which card component is displayed. There are three options, replication-primary-card, replication-secondary-card, replication-summary-card. + * @param {Boolean} [isSecondary=false] - Used to determine the title and display logic. + * @param {Boolean} [isSummaryDashboard=false] - Only true when the cluster is both a dr and performance primary. If true, replicationDetailsSummary is populated and used to pass through the cluster details. + * @param {Object} replicationDetailsSummary=null - An Ember data object computed off the Ember Model. It combines the Model.dr and Model.performance objects into one and contains details specific to the mode replication. + * @param {Object} replicationDetails=null - An Ember data object pulled from the Ember Model. It contains details specific to the whether the replication is dr or performance. + * @param {String} clusterMode=null - The cluster mode passed through to a table component. + * @param {Object} reindexingDetails=null - An Ember data object used to show a reindexing progress bar. + */ + +export default Component.extend({ + layout, + componentToRender: '', + data: null, + isSecondary: false, + isSummaryDashboard: false, + replicationDetails: null, + replicationDetailsSummary: null, + isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() { + const { state } = this.replicationDetails; + const isSecondary = this.isSecondary; + return isSecondary && state && clusterStates([state]).isSyncing; + }), + isReindexing: computed('replicationDetails.{reindex_in_progress}', function() { + const { replicationDetails } = this; + return !!replicationDetails.reindex_in_progress; + }), + reindexingStage: computed('replicationDetails.{reindex_stage}', function() { + const { replicationDetails } = this; + const stage = replicationDetails.reindex_stage; + // specify the stage if we have one + if (stage) { + return `: ${capitalize(stage)}`; + } + return ''; + }), + 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) { + progressBar = { + value: reindex_building_progress, + max: reindex_building_total, + }; + } + + return progressBar; + }), + summaryState: computed( + 'replicationDetailsSummary.dr.{state}', + 'replicationDetailsSummary.performance.{state}', + function() { + const { replicationDetailsSummary } = this; + const drState = replicationDetailsSummary.dr.state; + const performanceState = replicationDetailsSummary.performance.state; + + if (drState !== performanceState) { + // when DR and Performance is enabled on the same cluster, + // the states should always be the same + // we are leaving this console log statement to be sure + console.log('DR State: ', drState, 'Performance State: ', performanceState); + } + + return drState; + } + ), + reindexMessage: computed('isSecondary', 'progressBar', function() { + if (!this.isSecondary) { + return htmlSafe( + 'This can cause a delay depending on the size of the data store. You can not use Vault during this time.' + ); + } + return 'This can cause a delay depending on the size of the data store. You can use Vault during this time.'; + }), +}); diff --git a/ui/lib/core/addon/components/replication-doc-link.js b/ui/lib/core/addon/components/replication-doc-link.js new file mode 100644 index 0000000000..af4f814a4a --- /dev/null +++ b/ui/lib/core/addon/components/replication-doc-link.js @@ -0,0 +1,17 @@ +import Component from '@ember/component'; +import layout from '../templates/components/replication-doc-link'; + +/** + * @module ReplicationDocLink + * The `ReplicationDocLink` component is a learn link with helper text used on the Replication Dashboards. + * The link takes you to the key monitoring metrics learn doc. + * + * @example + * ```js + * + * ``` + */ + +export default Component.extend({ + layout, +}); diff --git a/ui/lib/core/addon/components/replication-header.js b/ui/lib/core/addon/components/replication-header.js new file mode 100644 index 0000000000..f34a1ac4db --- /dev/null +++ b/ui/lib/core/addon/components/replication-header.js @@ -0,0 +1,31 @@ +import Component from '@ember/component'; +import layout from '../templates/components/replication-header'; + +/** + * @module ReplicationHeader + * The `ReplicationHeader` is a header component used on the Replication Dashboards. + * + * @example + * ```js + * + * ``` + * @param {Object} model=null - An Ember data object pulled from the Ember cluster model. + * @param {String} title=null - The title of the header. + * @param {String} [secondaryID=null] - The secondaryID pulled off of the model object. + * @param {Boolean} isSummaryDashboard=false - True when you have both a primary performance and dr cluster dashboard. + */ + +export default Component.extend({ + layout, + data: null, + classNames: ['replication-header'], + isSecondary: null, + secondaryId: null, + isSummaryDashboard: false, + 'data-test-replication-header': true, +}); diff --git a/ui/lib/core/addon/components/replication-mode-summary.js b/ui/lib/core/addon/components/replication-mode-summary.js index 7e19a887ee..8b01268987 100644 --- a/ui/lib/core/addon/components/replication-mode-summary.js +++ b/ui/lib/core/addon/components/replication-mode-summary.js @@ -15,7 +15,7 @@ export default Component.extend({ version: service(), router: service(), namespace: service(), - classNameBindings: ['isMenu::box', 'isMenu::level'], + classNameBindings: ['isMenu::box'], attributeBindings: ['href', 'target'], display: 'banner', isMenu: equal('display', 'menu'), @@ -48,4 +48,9 @@ export default Component.extend({ clusterIdDisplay: replicationAttr('clusterIdDisplay'), mode: null, cluster: null, + modeState: computed('cluster', 'mode', function() { + const { cluster, mode } = this; + const clusterState = cluster[mode].state; + return clusterState; + }), }); diff --git a/ui/lib/core/addon/components/replication-page.js b/ui/lib/core/addon/components/replication-page.js new file mode 100644 index 0000000000..10876f744c --- /dev/null +++ b/ui/lib/core/addon/components/replication-page.js @@ -0,0 +1,142 @@ +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'; + +/** + * @module ReplicationPage + * The `ReplicationPage` component is the parent contextual component that holds the replication-dashboard, and various replication--card components. + * It is the top level component on routes displaying replication dashboards. + * + * @example + * ```js + * + * ``` + * @param {Object} cluster=null - An Ember data object that is pulled from the Ember Cluster Model. + */ + +const MODE = { + dr: 'Disaster Recovery', + performance: 'Performance', +}; + +export default Component.extend({ + layout, + store: service(), + router: service(), + reindexingDetails: null, + didReceiveAttrs() { + this._super(arguments); + this.getReplicationModeStatus.perform(); + }, + getReplicationModeStatus: task(function*() { + let resp; + const { replicationMode } = this.model; + + if (this.isSummaryDashboard) { + // the summary dashboard is not mode specific and will error + // while running replication/null/status in the replication-mode adapter + return; + } + + try { + resp = yield this.get('store') + .adapterFor('replication-mode') + .fetchStatus(replicationMode); + } catch (e) { + // do not handle error + } + this.set('reindexingDetails', resp); + }), + isSummaryDashboard: computed('model.dr.{mode}', 'model.performance.{mode}', function() { + const router = this.router; + const currentRoute = router.get('currentRouteName'); + + // we only show the summary dashboard in the replication index route + if (currentRoute === 'vault.cluster.replication.index') { + const drMode = this.model.dr.mode; + const performanceMode = this.model.performance.mode; + return drMode === 'primary' && performanceMode === 'primary'; + } + }), + formattedReplicationMode: computed('model.{replicationMode}', 'isSummaryDashboard', function() { + // dr or performance 🤯 + const { isSummaryDashboard } = this; + if (isSummaryDashboard) { + return 'Disaster Recovery & Performance'; + } + const mode = this.model.replicationMode; + return MODE[mode]; + }), + clusterMode: computed('model.{replicationAttrs}', 'isSummaryDashboard', function() { + // primary or secondary + const { model } = this; + const { isSummaryDashboard } = this; + if (isSummaryDashboard) { + // replicationAttrs does not exist when summaryDashboard + return 'primary'; + } + return model.replicationAttrs.mode; + }), + isLoadingData: computed('clusterMode', 'model.{replicationAttrs}', function() { + const { clusterMode } = this; + const { model } = this; + const { isSummaryDashboard } = this; + if (isSummaryDashboard) { + return false; + } + const clusterId = model.replicationAttrs.clusterId; + const replicationDisabled = model.replicationAttrs.replicationDisabled; + if (clusterMode === 'bootstrapping' || (!clusterId && !replicationDisabled)) { + // if clusterMode is bootstrapping + // if no clusterId, the data hasn't loaded yet, wait for another status endpoint to be called + return true; + } + return false; + }), + isSecondary: computed('clusterMode', function() { + const { clusterMode } = this; + return clusterMode === 'secondary'; + }), + replicationDetailsSummary: computed('isSummaryDashboard', function() { + const { model } = this; + const { isSummaryDashboard } = this; + if (!isSummaryDashboard) { + return; + } + if (isSummaryDashboard) { + let combinedObject = {}; + combinedObject.dr = model['dr']; + combinedObject.performance = model['performance']; + return combinedObject; + } + }), + replicationDetails: computed('model.{replicationMode}', 'isSummaryDashboard', function() { + const { model } = this; + const { isSummaryDashboard } = this; + if (isSummaryDashboard) { + // Cannot return null + return {}; + } + const replicationMode = model.replicationMode; + return model[replicationMode]; + }), + isDisabled: computed('replicationDetails.{mode}', function() { + if (this.replicationDetails.mode === 'disabled' || this.replicationDetails.mode === 'primary') { + return true; + } + return false; + }), + message: computed('model.{anyReplicationEnabled}', 'formattedReplicationMode', function() { + let msg; + if (this.model.anyReplicationEnabled) { + msg = `This ${this.formattedReplicationMode} secondary has not been enabled. You can do so from the ${this.formattedReplicationMode} Primary.`; + } else { + msg = `This cluster has not been enabled as a ${this.formattedReplicationMode} Secondary. You can do so by enabling replication and adding a secondary from the ${this.formattedReplicationMode} Primary.`; + } + return msg; + }), +}); diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js new file mode 100644 index 0000000000..a72535e6ce --- /dev/null +++ b/ui/lib/core/addon/components/replication-secondary-card.js @@ -0,0 +1,58 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; +import layout from '../templates/components/replication-secondary-card'; +import { clusterStates } from 'core/helpers/cluster-states'; + +/** + * @module ReplicationSecondaryCard + * The `ReplicationSecondaryCard` component is a card-like component. It displays cluster mode details specific for DR and Performance Secondaries. + * + * @example + * ```js + * + * ``` + * @param {String} [title=null] - The title to be displayed on the top left corner of the card. + * @param {Object} replicationDetails=null - An Ember data object pulled from the Ember Model. It contains details specific to the mode's replication. + */ + +export default Component.extend({ + layout, + tagName: '', + title: null, + replicationDetails: null, + state: computed('replicationDetails.{state}', function() { + return this.replicationDetails && this.replicationDetails.state + ? this.replicationDetails.state + : 'unknown'; + }), + connection: computed('replicationDetails.{connection_state}', function() { + return this.replicationDetails.connection_state ? this.replicationDetails.connection_state : 'unknown'; + }), + lastRemoteWAL: computed('replicationDetails.{lastRemoteWAL}', function() { + return this.replicationDetails && this.replicationDetails.lastRemoteWAL + ? this.replicationDetails.lastRemoteWAL + : 0; + }), + inSyncState: computed('state', function() { + // if our definition of what is considered 'synced' changes, + // we should use the clusterStates helper instead + return this.state === 'stream-wals'; + }), + hasErrorClass: computed('replicationDetails', 'title', 'state', 'connection', function() { + const { title, state, connection } = this; + + // only show errors on the state card + if (title === 'Status') { + const currentClusterisOk = clusterStates([state]).isOk; + const primaryIsOk = clusterStates([connection]).isOk; + return !(currentClusterisOk && primaryIsOk); + } + return false; + }), + knownPrimaryClusterAddrs: computed('replicationDetails.{knownPrimaryClusterAddrs}', function() { + return this.replicationDetails.knownPrimaryClusterAddrs; + }), +}); diff --git a/ui/lib/core/addon/components/replication-summary-card.js b/ui/lib/core/addon/components/replication-summary-card.js new file mode 100644 index 0000000000..d4b7adc0c2 --- /dev/null +++ b/ui/lib/core/addon/components/replication-summary-card.js @@ -0,0 +1,44 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; +import layout from '../templates/components/replication-summary-card'; + +/** + * @module ReplicationSummaryCard + * The `ReplicationSummaryCard` is a card-like component. It displays cluster mode details for both DR and Performance + * + * @example + * ```js + * + * ``` + * @param {String} [title=null] - The title to be displayed on the top left corner of the card. + * @param {Object} replicationDetails=null - An Ember data object computed off the Ember Model. It combines the Model.dr and Model.performance objects into one and contains details specific to the mode replication. + */ + +export default Component.extend({ + layout, + title: null, + replicationDetails: null, + lastDrWAL: computed('replicationDetails.dr.{lastWAL}', function() { + return this.replicationDetails.dr.lastWAL || 0; + }), + lastPerformanceWAL: computed('replicationDetails.performance.{lastWAL}', function() { + return this.replicationDetails.performance.lastWAL || 0; + }), + merkleRootDr: computed('replicationDetails.dr.{merkleRoot}', function() { + return this.replicationDetails.dr.merkleRoot || ''; + }), + merkleRootPerformance: computed('replicationDetails.performance.{merkleRoot}', function() { + return this.replicationDetails.performance.merkleRoot || ''; + }), + knownSecondariesDr: computed('replicationDetails.dr.{knownSecondaries}', function() { + const knownSecondaries = this.replicationDetails.dr.knownSecondaries; + return knownSecondaries.length; + }), + knownSecondariesPerformance: computed('replicationDetails.performance.{knownSecondaries}', function() { + const knownSecondaries = this.replicationDetails.performance.knownSecondaries; + return knownSecondaries.length; + }), +}); diff --git a/ui/lib/core/addon/components/replication-table-rows.js b/ui/lib/core/addon/components/replication-table-rows.js new file mode 100644 index 0000000000..c9f868e3a1 --- /dev/null +++ b/ui/lib/core/addon/components/replication-table-rows.js @@ -0,0 +1,37 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; +import layout from '../templates/components/replication-table-rows'; + +/** + * @module ReplicationTableRows + * The `ReplicationTableRows` component is table component. It displays cluster mode details specific to the cluster of the Dashboard it is used on. + * + * @example + * ```js + * + * ``` + * @param {Object} replicationDetails=null - An Ember data object pulled from the Ember Model. It contains details specific to the whether the replication is dr or performance. + * @param {String} clusterMode=null - The cluster mode (e.g. primary or secondary) passed through to a table component. + */ + +export default Component.extend({ + layout, + classNames: ['replication-table-rows'], + replicationDetails: null, + clusterMode: null, + secondaryId: computed('replicationDetails.{secondaryId}', function() { + return this.replicationDetails.secondaryId; + }), + primaryClusterAddr: computed('replicationDetails.{primaryClusterAddr}', function() { + return this.replicationDetails.primaryClusterAddr || 'None set'; + }), + merkleRoot: computed('replicationDetails.{merkleRoot}', function() { + return this.replicationDetails.merkleRoot || 'unknown'; + }), + clusterId: computed('replicationDetails.{clusterId}', function() { + return this.replicationDetails.clusterId || 'unknown'; + }), +}); diff --git a/ui/lib/core/addon/helpers/cluster-states.js b/ui/lib/core/addon/helpers/cluster-states.js new file mode 100644 index 0000000000..6b149af36b --- /dev/null +++ b/ui/lib/core/addon/helpers/cluster-states.js @@ -0,0 +1,64 @@ +import { helper as buildHelper } from '@ember/component/helper'; + +// A hash of cluster states to ensure that the status menu and replication dashboards +// display states and glyphs consistently +// this includes states for the primary vault cluster and the connection_state + +export const CLUSTER_STATES = { + running: { + glyph: 'check-circle-outline', + isOk: true, + isSyncing: false, + }, + ready: { + glyph: 'check-circle-outline', + isOk: true, + isSyncing: false, + }, + 'stream-wals': { + glyph: 'check-circle-outline', + isOk: true, + isSyncing: false, + }, + 'merkle-diff': { + glyph: 'android-sync', + isOk: true, + isSyncing: true, + }, + connecting: { + glyph: 'android-sync', + isOk: true, + isSyncing: true, + }, + 'merkle-sync': { + glyph: 'android-sync', + isOk: true, + isSyncing: true, + }, + idle: { + glyph: 'cancel-square-outline', + isOk: false, + isSyncing: false, + }, + transient_failure: { + glyph: 'cancel-circle-outline', + isOk: false, + isSyncing: false, + }, + shutdown: { + glyph: 'cancel-circle-outline', + isOk: false, + isSyncing: false, + }, +}; + +export function clusterStates([state]) { + const defaultDisplay = { + glyph: '', + isOk: null, + isSyncing: null, + }; + return CLUSTER_STATES[state] || defaultDisplay; +} + +export default buildHelper(clusterStates); diff --git a/ui/app/helpers/date-format.js b/ui/lib/core/addon/helpers/date-format.js similarity index 100% rename from ui/app/helpers/date-format.js rename to ui/lib/core/addon/helpers/date-format.js diff --git a/ui/app/helpers/format-number.js b/ui/lib/core/addon/helpers/format-number.js similarity index 100% rename from ui/app/helpers/format-number.js rename to ui/lib/core/addon/helpers/format-number.js diff --git a/ui/lib/core/addon/helpers/message-types.js b/ui/lib/core/addon/helpers/message-types.js index 87d79083ea..76958e95e1 100644 --- a/ui/lib/core/addon/helpers/message-types.js +++ b/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]) { diff --git a/ui/lib/core/addon/helpers/replication-action-for-mode.js b/ui/lib/core/addon/helpers/replication-action-for-mode.js index 82c198d24f..d560871f43 100644 --- a/ui/lib/core/addon/helpers/replication-action-for-mode.js +++ b/ui/lib/core/addon/helpers/replication-action-for-mode.js @@ -8,7 +8,8 @@ const ACTIONS = { }, dr: { primary: ['disable', 'recover', 'reindex', 'demote'], - secondary: ['promote'], + // TODO: add disable, recover, and reindex when API is ready + secondary: ['promote', 'update-primary', 'generate-token'], bootstrapping: ['disable', 'recover', 'reindex'], }, }; diff --git a/ui/lib/core/addon/helpers/replication-mode-description.js b/ui/lib/core/addon/helpers/replication-mode-description.js new file mode 100644 index 0000000000..014ed5d92b --- /dev/null +++ b/ui/lib/core/addon/helpers/replication-mode-description.js @@ -0,0 +1,14 @@ +import { helper as buildHelper } from '@ember/component/helper'; + +const REPLICATION_MODE_DESCRIPTIONS = { + dr: + 'Disaster Recovery Replication is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests until they are elected and become a new primary.', + performance: + 'Performance Replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.', +}; + +export function replicationModeDescription([mode]) { + return REPLICATION_MODE_DESCRIPTIONS[mode]; +} + +export default buildHelper(replicationModeDescription); diff --git a/ui/lib/core/addon/mixins/replication-actions.js b/ui/lib/core/addon/mixins/replication-actions.js index c09a60aa22..8e67d15aa2 100644 --- a/ui/lib/core/addon/mixins/replication-actions.js +++ b/ui/lib/core/addon/mixins/replication-actions.js @@ -10,7 +10,8 @@ export default Mixin.create({ loading: or('save.isRunning', 'submitSuccess.isRunning'), onEnable() {}, onDisable() {}, - submitHandler(action, clusterMode, data, event) { + onPromote() {}, + submitHandler: task(function*(action, clusterMode, data, event) { let replicationMode = (data && data.replicationMode) || this.get('replicationMode'); if (event && event.preventDefault) { event.preventDefault(); @@ -22,15 +23,18 @@ export default Mixin.create({ data = Object.keys(data).reduce((newData, key) => { var val = data[key]; if (isPresent(val)) { - newData[key] = val; + if (key === 'dr_operation_token_primary' || key === 'dr_operation_token_promote') { + newData['dr_operation_token'] = val; + } else { + newData[key] = val; + } } return newData; }, {}); delete data.replicationMode; } - - return this.save.perform(action, replicationMode, clusterMode, data); - }, + return yield this.save.perform(action, replicationMode, clusterMode, data); + }), save: task(function*(action, replicationMode, clusterMode, data) { let resp; @@ -41,7 +45,7 @@ export default Mixin.create({ } catch (e) { return this.submitError(e); } - yield this.submitSuccess.perform(resp, action, clusterMode); + return yield this.submitSuccess.perform(resp, action, clusterMode); }).drop(), submitSuccess: task(function*(resp, action, mode) { @@ -89,12 +93,13 @@ export default Mixin.create({ if (action === 'disable') { yield this.onDisable(); } - if (action === 'enable') { - yield this.onEnable(replicationMode); + if (action === 'promote') { + yield this.onPromote(); } - - if (mode === 'secondary' && replicationMode === 'dr') { - yield this.router.transitionTo('vault.cluster'); + if (action === 'enable') { + /// onEnable is a method available only to route vault.cluster.replication.index + // if action 'enable' is called from vault.cluster.replication.mode.index this method is not called + yield this.onEnable(replicationMode, mode); } }).drop(), diff --git a/ui/lib/core/addon/templates/components/alert-banner.hbs b/ui/lib/core/addon/templates/components/alert-banner.hbs index 9bdbe7a2e4..e1ebd35a9c 100644 --- a/ui/lib/core/addon/templates/components/alert-banner.hbs +++ b/ui/lib/core/addon/templates/components/alert-banner.hbs @@ -1,12 +1,12 @@ -
+
{{#if @yieldWithoutColumn}} {{yield}} @@ -14,6 +14,21 @@
{{or @title this.alertType.text}} + {{#if @secondIconType}} +
{{#if @message}}

diff --git a/ui/lib/core/addon/templates/components/alert-inline.hbs b/ui/lib/core/addon/templates/components/alert-inline.hbs index 9bfd0f7334..9736238165 100644 --- a/ui/lib/core/addon/templates/components/alert-inline.hbs +++ b/ui/lib/core/addon/templates/components/alert-inline.hbs @@ -2,6 +2,6 @@ @glyph={{this.alertType.glyph}} class={{this.alertType.glyphClass}} /> -

+

{{@message}}

diff --git a/ui/lib/core/addon/templates/components/confirmation-modal.hbs b/ui/lib/core/addon/templates/components/confirmation-modal.hbs new file mode 100644 index 0000000000..9b28de1e78 --- /dev/null +++ b/ui/lib/core/addon/templates/components/confirmation-modal.hbs @@ -0,0 +1,44 @@ + +
+ + {{yield}} + +
+

+ Confirm +

+

Type {{confirmText}} to confirm {{toConfirmMsg}}

+ {{input + type="text" + value=confirmationInput + name="confirmationInput" + class="input has-margin-top" + autocomplete="off" + spellcheck="false" + data-test-confirmation-modal-input=testSelector + }} +
+
+
+ + +
+ diff --git a/ui/lib/core/addon/templates/components/empty-state.hbs b/ui/lib/core/addon/templates/components/empty-state.hbs index 0fb2a18992..eccbf82741 100644 --- a/ui/lib/core/addon/templates/components/empty-state.hbs +++ b/ui/lib/core/addon/templates/components/empty-state.hbs @@ -1,8 +1,17 @@
+ {{#if icon}} +
+ +

+ {{title}} +

+
+ {{else}}

{{title}}

+ {{/if}} {{#if message}}

{{message}} diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs index fecdfe419c..bd7f3afcdb 100644 --- a/ui/lib/core/addon/templates/components/info-table-row.hbs +++ b/ui/lib/core/addon/templates/components/info-table-row.hbs @@ -1,7 +1,14 @@ {{#if (or alwaysRender value)}} -

- {{label}} -
+ {{#if label}} +
+ {{label}} + {{#if helperText}} +
+ {{helperText}} +
+ {{/if}} +
+ {{/if}}
{{#if (has-block)}} {{yield}} diff --git a/ui/lib/core/addon/templates/components/info-table.hbs b/ui/lib/core/addon/templates/components/info-table.hbs new file mode 100644 index 0000000000..6586cd1a13 --- /dev/null +++ b/ui/lib/core/addon/templates/components/info-table.hbs @@ -0,0 +1,23 @@ +
+ + + + + + + + + {{#each items as |item|}} + + + + {{/each}} + +
+ {{header}} +
+ {{info-table-row value=item}} +
+
diff --git a/ui/app/templates/components/key-value-header.hbs b/ui/lib/core/addon/templates/components/key-value-header.hbs similarity index 100% rename from ui/app/templates/components/key-value-header.hbs rename to ui/lib/core/addon/templates/components/key-value-header.hbs diff --git a/ui/lib/core/addon/templates/components/layout-loading.hbs b/ui/lib/core/addon/templates/components/layout-loading.hbs index b144ff68bf..b0e99bd895 100644 --- a/ui/lib/core/addon/templates/components/layout-loading.hbs +++ b/ui/lib/core/addon/templates/components/layout-loading.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/ui/app/templates/components/modal.hbs b/ui/lib/core/addon/templates/components/modal.hbs similarity index 54% rename from ui/app/templates/components/modal.hbs rename to ui/lib/core/addon/templates/components/modal.hbs index 30bf510737..f2eb136eaa 100644 --- a/ui/app/templates/components/modal.hbs +++ b/ui/lib/core/addon/templates/components/modal.hbs @@ -1,9 +1,20 @@ {{#ember-wormhole to="modal-wormhole"}} -
+
-

{{title}}

+

+ {{#if glyph}} +

{{#if showCloseButton}} {{/if}} diff --git a/ui/lib/core/addon/templates/components/replication-action-demote.hbs b/ui/lib/core/addon/templates/components/replication-action-demote.hbs index 7a2d3fc7c7..81763b7aa8 100644 --- a/ui/lib/core/addon/templates/components/replication-action-demote.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-demote.hbs @@ -1,47 +1,56 @@ -

- Demote cluster -

-
- {{#if (and - (eq replicationMode 'dr') - (not model.performance.replicationDisabled) - ) - }} - -
- -
- {{/if}} -

- Demote this {{replicationDisplayMode}} primary cluster to a {{replicationDisplayMode}} secondary. The resulting secondary cluster will not - attempt to connect to a primary, but will maintain knowledge of its cluster - ID and can be reconnected to the same set of replication clusters without - wiping local storage. -

-

- In order to connect the resulting secondary to a new primary, use the Update primary action. -

-
-
-
- +
+
+

Demote cluster - +

+

+ Demote this {{model.replicationModeForDisplay}} primary to a secondary. +

+
+
+
+ + +

+ {{#if (and + (eq replicationMode 'dr') + (not model.performance.replicationDisabled) + )}} +

+ This cluster is currently operating as a performance secondary. Demoting it will leave your replication setup without a performance primary cluster until a new cluster is promoted. +

+ {{/if}} + Demoting this {{model.replicationModeForDisplay}} primary to a {{model.replicationModeForDisplay}} secondary means that the resulting secondary cluster: +

+
    + {{#if (and + (eq replicationMode 'dr') + (not model.performance.replicationDisabled) + )}} +
  • Will be read-only
    • + {{/if}} +
  • Will not attempt to connect to a primary
    • +
  • Will maintain knowledge of its cluster ID
    • +
  • Can be reconnected to the same set of replication clusters without wiping local storage.
    • +
+

+ To connect the resulting secondary to a new primary, use the Update primary action. +

+ diff --git a/ui/lib/core/addon/templates/components/replication-action-disable.hbs b/ui/lib/core/addon/templates/components/replication-action-disable.hbs index dede146a31..8f50a61515 100644 --- a/ui/lib/core/addon/templates/components/replication-action-disable.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-disable.hbs @@ -1,67 +1,53 @@ -

- Disable Replication -

-
-

- Disable {{replicationDisplayMode}} Replication entirely on the cluster. - {{#if model.replicationAttrs.isPrimary}} - Any secondaries will no longer be able to connect. - {{else if (eq model.replicationAttrs.modeForUrl 'bootstrapping')}} -
- Since the cluster is currently bootstrapping, we need to know which mode to disable. - Be sure to choose it below. - -

-
- -
-
- {{else}} - The cluster will no longer be able to connect to the primary. - {{/if}} - -

-

- In the secondary case this means a wipe of the - underlying storage when connected to a primary, and in the primary case, - secondaries connecting back to the cluster (even if they have connected - before) will require a wipe of the underlying storage. -

-
-
-
- +
+

+ Disable Replication +

+

+ Disable {{model.replicationModeForDisplay}} Replication entirely on the cluster. +

+
+ +
+
+ + +

+ {{#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: +

+
    + {{#if model.replicationAttrs.isPrimary}} +
  • Secondaries will no longer be able to connect
    • +
  • We will wipe the underlying storage of connected secondaries
    • +
  • Secondaries connecting back to the cluster will require a wipe of the underlying storage
    • + {{else}} +
  • We will wipe the underlying storage of this secondary when connected to a primary
    • + {{/if}} +
  • Re-enabling this node will change its cluster ID
    • +
+ diff --git a/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs b/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs new file mode 100644 index 0000000000..1e2992fda9 --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs @@ -0,0 +1,34 @@ +
+
+

+ Generate operation token +

+

+ This token is needed for update and promote actions. +

+
+ +
+ +
+
+ + + +

+ Updating or promoting this cluster requires an operation token, generated by inputting the master key shares. If you'd like to first encrypt the token with a PGP Key, click "Encrypt with PGP key" below, otherwise we can begin generation of the operation token. +

+ diff --git a/ui/lib/core/addon/templates/components/replication-action-promote.hbs b/ui/lib/core/addon/templates/components/replication-action-promote.hbs index 032acf2a86..7094351302 100644 --- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs @@ -1,129 +1,94 @@ -{{#if (and (eq replicationMode 'dr') (eq model.replicationAttrs.modeForUrl 'secondary'))}} -
+
+
+

+ Promote cluster +

- This cluster is currently running as a DR Replication Secondary. - Promote the cluster to a primary by entering DR Operation Token. + Promote this cluster to a {{model.replicationModeForDisplay}} primary

-
- -
- {{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}} -
-
- - {{#if showOptions}} -
-
- -
- {{input class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}} -
-

- Overrides the cluster address that the primary gives to secondary nodes. -

-
+
-
-
- - -
- +
+ +
+
+ + +
+ {{#if (eq replicationMode "dr")}} +

+ To promote this DR Replication Secondary to a primary, enter the DR Operation token. +

+ {{/if}} +

+ 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. +

+ +
+ {{#if (eq replicationMode "dr")}} +
+ +
+ {{input class="input" id="dr_operation_token_promote" name="dr_operation_token_promote" value=dr_operation_token_promote}}
- {{/if}} -
-
-
-
- - Promote cluster - -
-
-
-{{else}} -

- Promote cluster -

-
-

Promote the cluster to primary. - -

-
- -
- {{input class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}} -
-

- Overrides the cluster address that the primary gives to secondary nodes. -

-
-
-
- -
-
-
-
- - Promote cluster - -
-
-{{/if}} +
+
+ + +
+ diff --git a/ui/lib/core/addon/templates/components/replication-action-recover.hbs b/ui/lib/core/addon/templates/components/replication-action-recover.hbs index 6bf682430a..a23cfc40b5 100644 --- a/ui/lib/core/addon/templates/components/replication-action-recover.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-recover.hbs @@ -1,23 +1,49 @@ -

- Recover -

-
-

- Attempt recovery if replication is in a bad state, for instance if an error - has caused replication to stop syncing. -

-
-
-
- +
+

+ Recover +

+

+ Attempt recovery if replication is in a bad state. +

+
+ +
+
+ + +
+

+ If replication is in an adverse state, we can begin recovery. This will attempt to recover to continue syncing. +

+
+
+ + +
+ diff --git a/ui/lib/core/addon/templates/components/replication-action-reindex.hbs b/ui/lib/core/addon/templates/components/replication-action-reindex.hbs index b66d02b11c..34388a740f 100644 --- a/ui/lib/core/addon/templates/components/replication-action-reindex.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-reindex.hbs @@ -1,23 +1,54 @@ -

- Reindex -

-
-

- Reindex the local data storage. This can cause a very long delay depending - on the number and size of objects in the data store. -

-
-
-
- +
+

+ Reindex +

+

+ Reindex the local data storage +

+
+
+
+ +
+

+ Reindexing can cause a very long delay depending on the number and size of objects in the data store. + {{if model.replicationAttrs.isPrimary 'You should always re-index your secondary first.'}} +

+

+ Progress will be shown, and you will + {{if model.replicationAttrs.isPrimary 'not'}} + be able to use Vault during this time. +

+
+
+ + +
+ diff --git a/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs b/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs index eef3bd5c9e..cc21a80a58 100644 --- a/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs @@ -1,153 +1,104 @@ -{{#if (and (eq replicationMode 'dr') (eq model.replicationAttrs.modeForUrl 'secondary'))}} -
+
+
+

+ Update primary +

- Change a secondary cluster’s assigned primary cluster using a secondary - activation token. This does not wipe all data in the cluster. -

-
- -
- {{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}} -
-
-
- -
- {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}} -
-
- - {{#if showOptions}} -
-
- -
- {{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}} -
-

- Set this to the API address (normal Vault address) to override the - value embedded in the token. -

-
-
- -
- {{input value=ca_file id="ca_file" name="ca_file" class="input"}} -
-

- Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary. -

-
-
- -
- {{input value=ca_path id="ca_path" name="ca_file" class="input"}} -
-

- Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary. -

-
-
- {{/if}} -
- -
-
-
- - Update primary - -
-
-
-{{else}} -

- Update primary -

-
-

- Change a secondary cluster’s assigned primary cluster using a secondary - activation token. This does not wipe all data in the cluster. -

-
-
- -
- {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}} -
-
-
- -
- {{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}} -
-

- Set this to the API address (normal Vault address) to override the - value embedded in the token. -

-
-
- -
- {{input value=ca_file id="ca_file" name="ca_file" class="input"}} -
-

- Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary. -

-
-
- -
- {{input value=ca_path id="ca_path" name="ca_file" class="input"}} -
-

- Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary. + Change this secondary's assigned primary cluster

-
-
- - Update primary - -
+
+
-{{/if}} +
+ + +
+

+ Use a secondary activation token to change this secondary’s assigned primary. This does not wipe all data in the cluster. +

+ +
+ {{#if (eq replicationMode "dr")}} +
+ +
+ {{input class="input" id="dr_operation_token_primary" name="dr_operation_token_primary" value=dr_operation_token_primary}} +
+
+ {{/if}} +
+ +
+ {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}} +
+
+
+ +
+ {{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}} +
+

+ Set this to the API address (normal Vault address) to override the + value embedded in the token. +

+
+
+ +
+ {{input value=ca_file id="ca_file" name="ca_file" class="input"}} +
+

+ Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary. +

+
+
+ +
+ {{input value=ca_path id="ca_path" name="ca_file" class="input"}} +
+

+ Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary. +

+
+
+
+
+ + +
+ diff --git a/ui/lib/core/addon/templates/components/replication-actions.hbs b/ui/lib/core/addon/templates/components/replication-actions.hbs index 9579ee4590..b270c871b5 100644 --- a/ui/lib/core/addon/templates/components/replication-actions.hbs +++ b/ui/lib/core/addon/templates/components/replication-actions.hbs @@ -2,14 +2,18 @@ {{else}} - {{#each (if selectedAction (array selectedAction) (replication-action-for-mode replicationMode model.replicationAttrs.modeForUrl)) as |replicationAction index|}} -
- {{component (concat 'replication-action-' replicationAction) - onSubmit=(action "onSubmit") - replicationMode=replicationMode - model=model - replicationDisplayMode=replicationDisplayMode - }} -
- {{/each}} +
+ {{#each + (replication-action-for-mode replicationMode model.replicationAttrs.modeForUrl) + as |replicationAction| + }} +
+ {{component (concat 'replication-action-' replicationAction) + onSubmit=(action "onSubmit") + replicationMode=replicationMode + model=model + }} +
+ {{/each}} +
{{/if}} diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs new file mode 100644 index 0000000000..6c1734b2e8 --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs @@ -0,0 +1,63 @@ +
+ {{#if isReindexing}} +
+ +
+ {{/if}} + {{#if isSummaryDashboard}} +
+
state
+ {{#unless (get (cluster-states summaryState) "isOk")}} + + {{else}} +

The current operating state of both Disaster Recovery and Performance. This value should be ‘running.’ If the value is idle, it indicates an issue and needs to be investigated.

+ {{/unless}} +

{{summaryState}} + {{#if (get (cluster-states summaryState) "isOk")}} + + {{/if}} +

+
+
+ {{yield (hash + card=(component componentToRender replicationDetails=replicationDetailsSummary) + )}} +
+ {{else}} +
+ {{yield (hash + card=(component componentToRender replicationDetails=replicationDetails) + )}} + {{#if (not isSecondary)}} + {{yield (hash secondaryCard=(component 'known-secondaries-card'))}} + {{/if}} +
+ {{/if}} + {{#if isSyncing}} +
+ +
+ {{/if}} + {{#unless isSummaryDashboard}} + + + {{/unless}} +
diff --git a/ui/lib/core/addon/templates/components/replication-doc-link.hbs b/ui/lib/core/addon/templates/components/replication-doc-link.hbs new file mode 100644 index 0000000000..55a298d6ca --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-doc-link.hbs @@ -0,0 +1,6 @@ +
+

We have additional timeseries telemetry that can be found + in our documentation + . +

+
diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs new file mode 100644 index 0000000000..47c28c5a4a --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-header.hbs @@ -0,0 +1,84 @@ +{{!-- DR Secondary has a different Nav Header with access only to the Status menu --}} +{{#if isSecondary}} + + + + + + + +
+ +
+ + +{{/if}} + + + {{#if (not isSummaryDashboard) }} + {{#key-value-header + baseKey=baseKey + path="vault.cluster.replication-dr-promote" + root=backendCrumb + }} +
  • + + / + + {{#link-to "vault.cluster.replication-dr-promote"}} + Disaster Recovery + {{/link-to}} +
    • + {{/key-value-header}} + {{/if}} +     + +

    + {{title}} + {{#if data.anyReplicationEnabled}} + + {{if isSecondary 'secondary' 'primary'}} + + + {{secondaryId}} + + {{/if}} +

    +     +     + +{{#if showTabs}} +
    + +
    +{{/if}} diff --git a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs index 399efe0654..014897c334 100644 --- a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs +++ b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs @@ -1,4 +1,5 @@ -{{#if (eq display 'menu')}} +{{#if isMenu}} +{{!-- this is the status menu --}}
    {{#if replicationUnsupported}} @@ -31,11 +32,11 @@
    {{#if replicationEnabled}} - {{#if (get cluster (concat mode 'StateGlyph'))}} - + {{#if (cluster-states modeState)}} + {{else if syncProgress}} @@ -53,61 +54,61 @@
    {{else}} -
    +{{!-- this is the replication index page --}} +
    +
    - {{#if (and (eq mode 'performance') (not (has-feature "Performance Replication")))}} -

    - Performance Replication is a feature of Vault Enterprise Premium. -

    -

    - - Learn more - - -

    - {{else if replicationEnabled}} -
    + {{#if (and (eq mode 'performance') (not (has-feature 'Performance Replication')))}} +

    + Performance Replication is a feature of Vault Enterprise Premium. +

    +

    + + Learn more + + +

    + {{else if replicationEnabled}} +
    Enabled -
    + +
    {{capitalize modeForUrl}} {{#if secondaryId}} - + {{secondaryId}} {{/if}} - + {{clusterIdDisplay}} - {{else}} -

    - {{#if (eq mode 'dr')}} - DR is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests (until they are elected and become a new primary). - {{else}} - Performance Replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled. - {{/if}} -

    - {{/if}} -
    -
    -
    - {{#if replicationDisabled}} - {{#link-to "vault.cluster.replication.mode.index" cluster.name mode class="button is-primary"}} - Enable - {{/link-to}} - {{else if (eq mode 'dr')}} - {{cluster.drReplicationStateDisplay}} - {{else if (eq mode 'performance')}} - {{cluster.perfReplicationStateDisplay}} +
    {{/if}} +

    + {{replication-mode-description mode}} +

    +
    +
    +
    + {{#if replicationDisabled}} + {{#link-to 'mode.index' cluster.name mode class='button is-primary'}} + Enable + {{/link-to}} + {{else}} + {{#link-to 'mode.index' cluster.name mode class="button is-secondary"}} + Details + {{/link-to}} + {{/if}} +
    {{/if}} diff --git a/ui/lib/core/addon/templates/components/replication-page.hbs b/ui/lib/core/addon/templates/components/replication-page.hbs new file mode 100644 index 0000000000..4a07bcd12b --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-page.hbs @@ -0,0 +1,29 @@ +
    + {{#if isLoadingData }} + + {{else}} + {{yield + (hash + header=(component 'replication-header' + data=model + title=formattedReplicationMode + isSecondary=isSecondary + secondaryId=replicationDetails.secondaryId + isSummaryDashboard=isSummaryDashboard + ) + dashboard=(component + 'replication-dashboard' + data=model + isSecondary=isSecondary + isSummaryDashboard=isSummaryDashboard + replicationDetailsSummary=replicationDetailsSummary + replicationDetails=replicationDetails + clusterMode=clusterMode + reindexingDetails=reindexingDetails + ) + isDisabled=isDisabled + message=message + ) + }} + {{/if}} +
    diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs new file mode 100644 index 0000000000..0e7cd66ed6 --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs @@ -0,0 +1,110 @@ +
    + {{! Check if Status or Primary Cluster Card }} + {{#if (eq title 'Status')}} +

    + {{title}} +

    +
    + {{#if (get (cluster-states state) 'isOk')}} +
    + state +
    +

    + How this cluster is communicating with others at this moment. +

    + {{else}} +
    + state +
    + + {{/if}} +
    +
    + {{#if (eq connection 'transient_failure')}} +
    + connection_state +
    + + {{else if (eq connection 'shutdown')}} +
    + connection_state +
    + + {{else}} +
    + connection_state +
    +

    + The health of the connection between this cluster and others. +

    + {{/if}} +
    +

    + {{state}} + {{#if inSyncState}} + + + + + +
    + Everything is in sync +
    +     +     + {{/if}} +

    +

    + {{connection}} +

    +
    +
    + last_remote_wal +
    +

    + The last WAL index that the secondary received from the primary. Updates every 10 seconds. +

    +

    + {{format-number lastRemoteWAL}} +

    +
    + {{else}} +

    + {{title}} +

    +
    +
    + known_primary_cluster_addr +
    +

    + A list of all the nodes in the primary's cluster. This value is updated every ten seconds. +

    +
    +
    + {{#if (is-empty knownPrimaryClusterAddrs)}} + + + Learn more + + + {{else}} + + {{/if}} +
    + {{/if}} +
    diff --git a/ui/lib/core/addon/templates/components/replication-summary-card.hbs b/ui/lib/core/addon/templates/components/replication-summary-card.hbs new file mode 100644 index 0000000000..54eab24652 --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-summary-card.hbs @@ -0,0 +1,48 @@ +
    + {{!-- Check if DR or Performance Card --}} + {{#if (eq title "Disaster Recovery")}} +

    {{title}}

    +
    + + Details + +
    +
    +
    last_dr_wal
    +

    Index of last WAL entry written on local storage. Updates every ten seconds.

    +
    +
    +
    known_secondaries
    +

    Number of secondaries connected to this primary.

    +
    +

    {{format-number lastDrWAL}}

    +

    {{format-number knownSecondariesDr}}

    +
    +
    merkle_root
    +

    A snapshot of the merkle tree's root hash.

    +
    {{merkleRootDr}}
    +
    + {{else}} +

    {{title}}

    +
    + + Details + +
    +
    +
    last_performance_wal
    +

    Index of last WAL entry written on local storage. Updates every ten seconds.

    +
    +
    +
    known_secondaries
    +

    Number of secondaries connected to this primary.

    +
    +

    {{format-number lastPerformanceWAL}}

    +

    {{format-number knownSecondariesPerformance}}

    +
    +
    merkle_root
    +

    A snapshot of the merkle tree's root hash.

    +
    {{merkleRootPerformance}}
    +
    + {{/if}} +
    diff --git a/ui/lib/core/addon/templates/components/replication-table-rows.hbs b/ui/lib/core/addon/templates/components/replication-table-rows.hbs new file mode 100644 index 0000000000..9c7b388480 --- /dev/null +++ b/ui/lib/core/addon/templates/components/replication-table-rows.hbs @@ -0,0 +1,26 @@ +
    + {{#if (eq clusterMode 'secondary')}} + {{info-table-row + label='secondary_id' + helperText="The ID of the secondary activation token used to enable replication." + value=secondaryId}} + {{else}} + {{info-table-row + label='primary_cluster_addr' + helperText='The configuration of the cluster. This was set when replication was enabled.' + value=primaryClusterAddr + }} + {{/if}} + {{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=clusterMode}} + {{info-table-row + label="Replication set" + helperText="The ID for the group of clusters communicating for this replication mode" + value=clusterId}} +
    diff --git a/ui/lib/core/app/components/confirmation-modal.js b/ui/lib/core/app/components/confirmation-modal.js new file mode 100644 index 0000000000..9cfcc6021b --- /dev/null +++ b/ui/lib/core/app/components/confirmation-modal.js @@ -0,0 +1 @@ +export { default } from 'core/components/confirmation-modal'; diff --git a/ui/lib/core/app/components/info-table.js b/ui/lib/core/app/components/info-table.js new file mode 100644 index 0000000000..246a31e31f --- /dev/null +++ b/ui/lib/core/app/components/info-table.js @@ -0,0 +1 @@ +export { default } from 'core/components/info-table'; diff --git a/ui/lib/core/app/components/key-value-header.js b/ui/lib/core/app/components/key-value-header.js new file mode 100644 index 0000000000..af86eb02ac --- /dev/null +++ b/ui/lib/core/app/components/key-value-header.js @@ -0,0 +1 @@ +export { default } from 'core/components/key-value-header'; diff --git a/ui/lib/core/app/components/learn-link.js b/ui/lib/core/app/components/learn-link.js new file mode 100644 index 0000000000..7beac1aca0 --- /dev/null +++ b/ui/lib/core/app/components/learn-link.js @@ -0,0 +1 @@ +export { default } from 'core/components/learn-link'; diff --git a/ui/lib/core/app/components/modal.js b/ui/lib/core/app/components/modal.js new file mode 100644 index 0000000000..730887225d --- /dev/null +++ b/ui/lib/core/app/components/modal.js @@ -0,0 +1 @@ +export { default } from 'core/components/modal'; diff --git a/ui/lib/core/app/components/replication-action-generate-token.js b/ui/lib/core/app/components/replication-action-generate-token.js new file mode 100644 index 0000000000..cfb9a56c60 --- /dev/null +++ b/ui/lib/core/app/components/replication-action-generate-token.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-action-generate-token'; diff --git a/ui/lib/core/app/components/replication-dashboard.js b/ui/lib/core/app/components/replication-dashboard.js new file mode 100644 index 0000000000..4eb3a05dbd --- /dev/null +++ b/ui/lib/core/app/components/replication-dashboard.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-dashboard'; diff --git a/ui/lib/core/app/components/replication-doc-link.js b/ui/lib/core/app/components/replication-doc-link.js new file mode 100644 index 0000000000..b473bd2171 --- /dev/null +++ b/ui/lib/core/app/components/replication-doc-link.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-doc-link'; diff --git a/ui/lib/core/app/components/replication-header.js b/ui/lib/core/app/components/replication-header.js new file mode 100644 index 0000000000..1d351dd02c --- /dev/null +++ b/ui/lib/core/app/components/replication-header.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-header'; diff --git a/ui/lib/core/app/components/replication-page.js b/ui/lib/core/app/components/replication-page.js new file mode 100644 index 0000000000..7d3472e192 --- /dev/null +++ b/ui/lib/core/app/components/replication-page.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-page'; diff --git a/ui/lib/core/app/components/replication-secondary-card.js b/ui/lib/core/app/components/replication-secondary-card.js new file mode 100644 index 0000000000..c59635a6ec --- /dev/null +++ b/ui/lib/core/app/components/replication-secondary-card.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-secondary-card'; diff --git a/ui/lib/core/app/components/replication-summary-card.js b/ui/lib/core/app/components/replication-summary-card.js new file mode 100644 index 0000000000..41ee0173f2 --- /dev/null +++ b/ui/lib/core/app/components/replication-summary-card.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-summary-card'; diff --git a/ui/lib/core/app/components/replication-table-rows.js b/ui/lib/core/app/components/replication-table-rows.js new file mode 100644 index 0000000000..3835a992b1 --- /dev/null +++ b/ui/lib/core/app/components/replication-table-rows.js @@ -0,0 +1 @@ +export { default } from 'core/components/replication-table-rows'; diff --git a/ui/lib/core/app/helpers/cluster-states.js b/ui/lib/core/app/helpers/cluster-states.js new file mode 100644 index 0000000000..97887155ae --- /dev/null +++ b/ui/lib/core/app/helpers/cluster-states.js @@ -0,0 +1 @@ +export { default, clusterStates, CLUSTER_STATES } from 'core/helpers/cluster-states'; diff --git a/ui/lib/core/app/helpers/date-format.js b/ui/lib/core/app/helpers/date-format.js new file mode 100644 index 0000000000..a9d25fc47d --- /dev/null +++ b/ui/lib/core/app/helpers/date-format.js @@ -0,0 +1 @@ +export { default } from 'core/helpers/date-format'; diff --git a/ui/lib/core/app/helpers/format-number.js b/ui/lib/core/app/helpers/format-number.js new file mode 100644 index 0000000000..3d26913f18 --- /dev/null +++ b/ui/lib/core/app/helpers/format-number.js @@ -0,0 +1 @@ +export { default, formatNumber } from 'core/helpers/format-number'; diff --git a/ui/lib/core/app/helpers/replication-mode-description.js b/ui/lib/core/app/helpers/replication-mode-description.js new file mode 100644 index 0000000000..40186c1a7f --- /dev/null +++ b/ui/lib/core/app/helpers/replication-mode-description.js @@ -0,0 +1,5 @@ +export { + default, + replicationModeDescription, + REPLICATION_MODE_DESCRIPTIONS, +} from 'core/helpers/replication-mode-description'; diff --git a/ui/lib/core/package.json b/ui/lib/core/package.json index 80c131e2ed..fd2c2b378c 100644 --- a/ui/lib/core/package.json +++ b/ui/lib/core/package.json @@ -5,6 +5,7 @@ ], "dependencies": { "autosize": "*", + "date-fns": "*", "Duration.js": "*", "base64-js": "*", "ember-auto-import": "*", @@ -23,6 +24,7 @@ "ember-router-helpers": "*", "ember-svg-jar": "*", "ember-truth-helpers": "*", + "ember-wormhole": "^0.5.5", "escape-string-regexp": "*" } } diff --git a/ui/lib/core/stories/alert-banner.md b/ui/lib/core/stories/alert-banner.md index 2aaebbb7cf..4cb788d825 100644 --- a/ui/lib/core/stories/alert-banner.md +++ b/ui/lib/core/stories/alert-banner.md @@ -8,6 +8,8 @@ | Param | Type | Default | Description | | --- | --- | --- | --- | | type | String | | The banner type. This comes from the message-types helper. | +| [secondIconType] | String | | If you want a second icon to appear to the right of the title. This comes from the message-types helper. | +| [progressBar] | Object | | An object containing a value and maximum for a progress bar. Will be displayed next to the message title. | | [message] | String | | The message to display within the banner. | | [title] | String | | A title to show above the message. If this is not provided, there are default values for each type of alert. | diff --git a/ui/lib/core/stories/alert-banner.stories.js b/ui/lib/core/stories/alert-banner.stories.js index 1eee67e708..9ddc726695 100644 --- a/ui/lib/core/stories/alert-banner.stories.js +++ b/ui/lib/core/stories/alert-banner.stories.js @@ -1,10 +1,16 @@ import hbs from 'htmlbars-inline-precompile'; import { storiesOf } from '@storybook/ember'; import notes from './alert-banner.md'; +import { withKnobs, object } from '@storybook/addon-knobs'; import { MESSAGE_TYPES } from '../addon/helpers/message-types.js'; storiesOf('Alerts/AlertBanner/', module) .addParameters({ options: { showPanel: false } }) + .addDecorator( + withKnobs({ + escapeHTML: false, + }) + ) .add( 'AlertBanner', () => ({ @@ -20,4 +26,18 @@ storiesOf('Alerts/AlertBanner/', module) }, }), { notes } + ) + .add( + 'AlertBanner with Progress Bar', + () => ({ + template: hbs` + + `, + context: { + type: 'info', + message: 'Here is a message.', + progressBar: object('Progress Bar', { value: 75, max: 100 }), + }, + }), + { notes } ); diff --git a/ui/lib/core/stories/empty-state.md b/ui/lib/core/stories/empty-state.md index b0534c87a2..b7e1804659 100644 --- a/ui/lib/core/stories/empty-state.md +++ b/ui/lib/core/stories/empty-state.md @@ -4,11 +4,13 @@ `EmptyState` components are used to render a helpful message and any necessary content when a user encounters a state that would usually be blank. +**Params** | Param | Type | Default | Description | | --- | --- | --- | --- | | title | String | | A short label for the empty state | | message | String | | A description of why a user might be seeing the empty state and possibly instructions for actions they may take. | +| [icon] | String | '' | A optional param to display icon to the right of the title | **Example** @@ -18,7 +20,7 @@ encounters a state that would usually be blank. **See** -- [Uses of EmptyState](https://github.com/hashicorp/vault/search?l=Handlebars&q=EmptyState) -- [EmptyState Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/empty-state.js) +- [Uses of EmptyState](https://github.com/hashicorp/vault/search?l=Handlebars&q=EmptyState+OR+empty-state) +- [EmptyState Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/empty-state.js) --- diff --git a/ui/lib/core/stories/info-table-row.md b/ui/lib/core/stories/info-table-row.md index a3d7f28ab3..d5c0a54074 100644 --- a/ui/lib/core/stories/info-table-row.md +++ b/ui/lib/core/stories/info-table-row.md @@ -4,22 +4,24 @@ `InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so that the value breaks under the label on smaller viewports. +**Params** | Param | Type | Default | Description | | --- | --- | --- | --- | | value | any | | The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. | | label | string | null | The display name for the value. | +| helperText | string | null | Text to describe the value displayed beneath the label. | | alwaysRender | Boolean | false | Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render. | **Example** ```js - + ``` **See** - [Uses of InfoTableRow](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTableRow+OR+info-table-row) -- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/info-table-row.js) +- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/info-table-row.js) --- diff --git a/ui/lib/core/stories/info-table-row.stories.js b/ui/lib/core/stories/info-table-row.stories.js index 425855a177..5c0cc21322 100644 --- a/ui/lib/core/stories/info-table-row.stories.js +++ b/ui/lib/core/stories/info-table-row.stories.js @@ -11,11 +11,12 @@ storiesOf('InfoTableRow/', module) () => ({ template: hbs`
    Info Table Row
    - + `, context: { label: text('Label', 'TTL'), value: text('Value', '30m'), + helperText: text('helperText', 'A short description'), alwaysRender: boolean('Always render?', false), }, }), @@ -26,11 +27,12 @@ storiesOf('InfoTableRow/', module) () => ({ template: hbs`
    Info Table Row
    - + `, context: { label: 'Local mount?', value: boolean('Value', true), + helperText: text('helperText', 'A short description'), alwaysRender: boolean('Always render?', true), }, }), diff --git a/ui/lib/core/stories/info-table.md b/ui/lib/core/stories/info-table.md new file mode 100644 index 0000000000..e2f4b450bb --- /dev/null +++ b/ui/lib/core/stories/info-table.md @@ -0,0 +1,30 @@ + + +## InfoTable +InfoTable components are a table with a single column and header. They are used to render a list of InfoTableRow components. + +**Params** + +| Param | Type | Default | Description | +| --- | --- | --- | --- | +| [title] | String | Info Table | The title of the table. Used for accessibility purposes. | +| header | String | | The column header. | +| items | Array | | An array of strings which will be used as the InfoTableRow value. | + +**Example** + +```js + +``` + + +**See** + +- [Uses of InfoTable](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTable+OR+info-table) +- [InfoTable Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/info-table.js) + +--- diff --git a/ui/lib/core/stories/info-table.stories.js b/ui/lib/core/stories/info-table.stories.js new file mode 100644 index 0000000000..4145578ec8 --- /dev/null +++ b/ui/lib/core/stories/info-table.stories.js @@ -0,0 +1,27 @@ +import hbs from 'htmlbars-inline-precompile'; +import { storiesOf } from '@storybook/ember'; +import { withKnobs, object, text } from '@storybook/addon-knobs'; +import notes from './info-table.md'; + +const ITEMS = ['https://127.0.0.1:8201', 'hello', 3]; + +storiesOf('InfoTable/', module) + .addParameters({ options: { showPanel: true } }) + .addDecorator(withKnobs({ escapeHTML: false })) + .add( + `InfoTable`, + () => ({ + template: hbs` +
    Info Table
    + + `, + context: { + header: text('Header', 'Column Header'), + items: object('Items', ITEMS), + }, + }), + { notes } + ); diff --git a/ui/lib/replication/addon/components/known-secondaries-card.js b/ui/lib/replication/addon/components/known-secondaries-card.js new file mode 100644 index 0000000000..922796e641 --- /dev/null +++ b/ui/lib/replication/addon/components/known-secondaries-card.js @@ -0,0 +1,19 @@ +import Component from '@ember/component'; + +/** + * @module KnownSecondariesCard + * KnownSecondariesCard components are used on the Replication Details dashboards to display a table of known secondary clusters. + * + * @example + * ```js + * + * ``` + * @param {object} cluster=null - The cluster model. + * @param {object} replicationAttrs=null - The attributes passed directly from the cluster model. These are passed down to the KnownSecondariesTable. + */ + +export default Component.extend({ + tagName: '', + cluster: null, + replicationAttrs: null, +}); diff --git a/ui/lib/replication/addon/components/known-secondaries-table.js b/ui/lib/replication/addon/components/known-secondaries-table.js new file mode 100644 index 0000000000..8b975e8c9f --- /dev/null +++ b/ui/lib/replication/addon/components/known-secondaries-table.js @@ -0,0 +1,18 @@ +import Component from '@ember/component'; + +/** + * @module KnownSecondariesTable + * KnownSecondariesTable components are used on the Replication Details dashboards + * to display a table of known secondary clusters. + * + * @example + * ```js + * + * ``` + * @param {array} secondaries=null - The array of secondaries from the replication + * status endpoint. Contains the secondary api_address, id and connected_state. + */ + +export default Component.extend({ + secondaries: null, +}); diff --git a/ui/lib/replication/addon/components/replication-primary-card.js b/ui/lib/replication/addon/components/replication-primary-card.js new file mode 100644 index 0000000000..af47575460 --- /dev/null +++ b/ui/lib/replication/addon/components/replication-primary-card.js @@ -0,0 +1,41 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; +import { clusterStates } from 'core/helpers/cluster-states'; + +/** + * @module ReplicationPrimaryCard + * The `ReplicationPrimaryCard` component is a card-like component. It displays cluster mode details specific for DR and Performance Primaries. + * + * @example + * ```js + * + * ``` + * @param {String} [title=null] - The title to be displayed on the top left corner of the card. + * @param {String} [description=null] - Helper text to describe the metric on the card. + * @param {String} [glyph=null] - The glyph to display beside the metric. + * @param {String} metric=null - The main metric to highlight on the card. + */ + +export default Component.extend({ + tagName: '', + title: null, + description: null, + metric: null, + glyph: null, + hasError: computed('title', 'metric', function() { + const { title, metric } = this; + + // only show errors on the state card if state is not ok + if (title === 'State') { + return metric && !clusterStates([metric]).isOk; + } + return false; + }), + errorMessage: computed('hasError', function() { + return this.hasError ? 'Check server logs!' : false; + }), +}); diff --git a/ui/lib/replication/addon/components/replication-summary.js b/ui/lib/replication/addon/components/replication-summary.js index e39844c540..f5b4a63fdd 100644 --- a/ui/lib/replication/addon/components/replication-summary.js +++ b/ui/lib/replication/addon/components/replication-summary.js @@ -7,7 +7,6 @@ import ReplicationActions from 'core/mixins/replication-actions'; import { task } from 'ember-concurrency'; const DEFAULTS = { - mode: 'primary', token: null, id: null, loading: false, @@ -16,10 +15,11 @@ const DEFAULTS = { primary_cluster_addr: null, ca_file: null, ca_path: null, - replicationMode: 'dr', }; export default Component.extend(ReplicationActions, DEFAULTS, { + replicationMode: 'dr', + mode: 'primary', wizard: service(), version: service(), didReceiveAttrs() { @@ -67,11 +67,12 @@ export default Component.extend(ReplicationActions, DEFAULTS, { }, submit: task(function*() { - yield this.submitHandler(...arguments); - let wizard = this.get('wizard'); - wizard.transitionFeatureMachine(wizard.get('featureState'), 'ENABLEREPLICATION'); + try { + yield this.submitHandler.perform(...arguments); + } catch (e) { + // do not handle error + } }), - actions: { onSubmit(/*action, mode, data, event*/) { this.get('submit').perform(...arguments); diff --git a/ui/lib/replication/addon/controllers/application.js b/ui/lib/replication/addon/controllers/application.js index 7528a599e2..d37f5e3858 100644 --- a/ui/lib/replication/addon/controllers/application.js +++ b/ui/lib/replication/addon/controllers/application.js @@ -4,6 +4,7 @@ import { inject as service } from '@ember/service'; import Controller from '@ember/controller'; import { copy } from 'ember-copy'; import { resolve } from 'rsvp'; +import decodeConfigFromJWT from 'replication/utils/decode-config-from-jwt'; const DEFAULTS = { token: null, @@ -19,9 +20,12 @@ const DEFAULTS = { }; export default Controller.extend(copy(DEFAULTS, true), { + isModalActive: false, + expirationDate: null, store: service(), rm: service('replication-mode'), replicationMode: alias('rm.mode'), + flashMessages: service(), submitError(e) { if (e.errors) { @@ -62,6 +66,13 @@ export default Controller.extend(copy(DEFAULTS, true), { primary_api_addr: null, primary_cluster_addr: null, }); + + // decode token and return epoch expiration, convert to timestamp + const expirationDate = new Date(decodeConfigFromJWT(this.token).exp * 1000); + this.set('expirationDate', expirationDate); + + // open modal + this.toggleProperty('isModalActive'); return cluster.reload(); } this.reset(); @@ -105,7 +116,26 @@ export default Controller.extend(copy(DEFAULTS, true), { onSubmit(/*action, mode, data, event*/) { return this.submitHandler(...arguments); }, + copyClose(successMessage) { + // separate action for copy & close button so it does not try and use execCommand to copy token to clipboard + if (!!successMessage && typeof successMessage === 'string') { + this.get('flashMessages').success(successMessage); + } + this.toggleProperty('isModalActive'); + this.transitionToRoute('mode.secondaries'); + }, + toggleModal(successMessage) { + if (!!successMessage && typeof successMessage === 'string') { + this.get('flashMessages').success(successMessage); + } + // use copy browser extension to copy token if you close the modal by clicking outside of it. + const htmlSelectedToken = document.querySelector('#token-textarea'); + htmlSelectedToken.select(); + document.execCommand('copy'); + this.toggleProperty('isModalActive'); + this.transitionToRoute('mode.secondaries'); + }, clear() { this.reset(); this.setProperties({ diff --git a/ui/lib/replication/addon/controllers/replication-mode.js b/ui/lib/replication/addon/controllers/replication-mode.js index 17cc605a7a..47f9127c96 100644 --- a/ui/lib/replication/addon/controllers/replication-mode.js +++ b/ui/lib/replication/addon/controllers/replication-mode.js @@ -1,13 +1,26 @@ import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import Controller from '@ember/controller'; +import { task, timeout } from 'ember-concurrency'; export default Controller.extend({ rm: service('replication-mode'), replicationMode: alias('rm.mode'), + waitForNewClusterToInit: task(function*(replicationMode) { + // waiting for the newly enabled cluster to init + // this ensures we don't hit a capabilities-self error, called in the model of the mode/index route + yield timeout(1000); + return this.transitionToRoute('mode', replicationMode); + }), actions: { - onEnable(mode) { - return this.transitionToRoute('mode', mode); + onEnable(replicationMode, mode) { + if (replicationMode == 'dr' && mode === 'secondary') { + return this.transitionToRoute('vault.cluster'); + } else if (replicationMode === 'dr') { + return this.transitionToRoute('mode', replicationMode); + } else { + this.waitForNewClusterToInit.perform(replicationMode); + } }, onDisable() { return this.transitionToRoute('index'); diff --git a/ui/lib/replication/addon/engine.js b/ui/lib/replication/addon/engine.js index 8529bf7291..686f75d54c 100644 --- a/ui/lib/replication/addon/engine.js +++ b/ui/lib/replication/addon/engine.js @@ -19,6 +19,7 @@ const Eng = Engine.extend({ 'version', 'wizard', ], + externalRoutes: ['replication'], }, }); diff --git a/ui/lib/replication/addon/routes/application.js b/ui/lib/replication/addon/routes/application.js index dd9b3d5a3c..2191e33bb3 100644 --- a/ui/lib/replication/addon/routes/application.js +++ b/ui/lib/replication/addon/routes/application.js @@ -7,6 +7,7 @@ import ClusterRoute from 'vault/mixins/cluster-route'; export default Route.extend(ClusterRoute, { version: service(), store: service(), + auth: service(), beforeModel() { return this.get('version') @@ -17,7 +18,8 @@ export default Route.extend(ClusterRoute, { }, model() { - return this.store.findRecord('cluster', 'vault'); + const activeClusterId = this.get('auth.activeCluster'); + return this.store.peekRecord('cluster', activeClusterId); }, afterModel(model) { diff --git a/ui/lib/replication/addon/routes/mode/index.js b/ui/lib/replication/addon/routes/mode/index.js index 8014ac517a..e3eac5187b 100644 --- a/ui/lib/replication/addon/routes/mode/index.js +++ b/ui/lib/replication/addon/routes/mode/index.js @@ -1,7 +1,37 @@ +import { setProperties } from '@ember/object'; +import { hash } from 'rsvp'; import Route from '@ember/routing/route'; +import { inject as service } from '@ember/service'; export default Route.extend({ + store: service(), model() { - return this.modelFor('mode'); + const replicationMode = this.paramsFor('mode').replication_mode; + + return hash({ + cluster: this.modelFor('mode'), + canAddSecondary: this.store + .findRecord('capabilities', `sys/replication/${replicationMode}/primary/secondary-token`) + .then(c => c.get('canUpdate')), + canRevokeSecondary: this.store + .findRecord('capabilities', `sys/replication/${replicationMode}/primary/revoke-secondary`) + .then(c => c.get('canUpdate')), + }).then(({ cluster, canAddSecondary, canRevokeSecondary }) => { + setProperties(cluster, { + canRevokeSecondary, + canAddSecondary, + }); + return cluster; + }); + }, + afterModel(model) { + const replicationMode = this.paramsFor('mode').replication_mode; + if ( + !model.get(`${replicationMode}.isPrimary`) || + model.get(`${replicationMode}.replicationDisabled`) || + model.get(`${replicationMode}.replicationUnsupported`) + ) { + return this.transitionTo('mode', replicationMode); + } }, }); diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs new file mode 100644 index 0000000000..24097eccb4 --- /dev/null +++ b/ui/lib/replication/addon/templates/components/known-secondaries-card.hbs @@ -0,0 +1,24 @@ +
    +
    +

    Known Secondaries

    + + Manage + +
    +
    + {{!-- TODO remove this or when backend api changes are merged --}} + {{#unless replicationAttrs.secondaries}} + + {{else}} + + {{/unless}} +
    + {{#if cluster.canAddSecondary}} + {{#link-to "mode.secondaries.add" cluster.replicationMode class="link add-secondaries"}} + Add secondary + {{/link-to}} + {{/if}} +
    + diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs new file mode 100644 index 0000000000..1637437bcf --- /dev/null +++ b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs @@ -0,0 +1,50 @@ +
    + + + + + + + + + + + {{#each secondaries as |secondary|}} + + + + + + {{/each}} + +
    + Secondary ID + + URL + + Connected? +
    + + {{secondary.node_id}} + + + {{#if secondary.api_address}} + +

    {{secondary.api_address}}

    +     + {{else}} +

    {{secondary.api_address}}

    + {{/if}} +     		+ + {{secondary.connection_status}} + +
    +
    diff --git a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs new file mode 100644 index 0000000000..413df111d6 --- /dev/null +++ b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs @@ -0,0 +1,21 @@ +
    +

    {{title}}

    +
    + {{#if hasError}} + + {{/if}} + + {{description}} + +

    + {{#if metric}} + {{metric}} + {{else}} + unknown + {{/if}} + {{#if (and glyph (not hasError))}} + + {{/if}} +

    +
    +
    diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs index ab7fd8b761..2e512fd78e 100644 --- a/ui/lib/replication/addon/templates/components/replication-summary.hbs +++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs @@ -17,8 +17,7 @@ -
    + }}>
    {{message-error errors=errors}} {{#if initialReplicationMode}} {{#if (eq initialReplicationMode 'dr')}}

    -

    - DR is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests (until they are elected and become a new primary). + {{replication-mode-description 'dr'}}

    {{else if (eq initialReplicationMode 'performance')}}

    -

    {{#if (not (has-feature "Performance Replication"))}} @@ -63,7 +53,7 @@

    {{else}}

    - Performance replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled. + {{replication-mode-description 'performance'}}

    {{/if}} {{/if}} @@ -72,22 +62,19 @@ - In both Performance and Disaster Recovery (DR) Replication, secondaries share the underlying configuration, policies, and supporting secrets as their primary cluster. + In both Performance and Disaster Recovery (DR) Replication, secondaries share the underlying configuration, + policies, and supporting secrets as their primary cluster.

    @@ -250,11 +233,13 @@ {{input value=ca_path id="ca_path" name="ca_file" class="input"}}

    - Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary. + Specifies the path to a CA root directory containing PEM-format files that the secondary can use when + unwrapping the token from the primary.

    - Note: If both CA file and CA path are not given, they default to system CA roots. + Note: If both CA file and CA path are not given, they default to system CA + roots.

    {{/if}} {{else}} @@ -273,86 +258,115 @@ {{/if}} {{else if showModeSummary}} - - -

    - Replication -

    -     -     -
    -

    -

    - {{#if cluster.dr.replicationEnabled}} - {{#link-to - "mode.index" - "dr" - class="link-plain" - }} + + + + + + {{else}} +
    +

    +

    + {{#if cluster.dr.replicationEnabled}} + {{#if submit.isRunning }} + + {{else}} + {{#link-to + "mode.index" + "dr" + class="link-plain" + }} + {{replication-mode-summary + mode="dr" + cluster=cluster + tagName="span" + }} + {{/link-to}} + {{/if}} + {{else}} {{replication-mode-summary mode="dr" cluster=cluster - tagName="span" + tagName="div" }} - {{/link-to}} - {{else}} - {{replication-mode-summary - mode="dr" - cluster=cluster - tagName="div" - }} - {{/if}} -
    -
    -

    -

    - {{#if cluster.dr.replicationEnabled}} - {{#link-to - "mode.index" - "performance" - class="link-plain" - }} - {{replication-mode-summary - mode="performance" - cluster=cluster - tagName="span" - }} - {{/link-to}} - {{else}} - {{replication-mode-summary - mode="performance" - cluster=cluster - tagName="div" - }} - {{/if}} -
    + {{/if}} +
    + {{#unless (and submit.isRunning (eq cluster.dr.mode "bootstrapping"))}} +
    +

    +

    + {{#link-to + "mode.index" + "performance" + class="link-plain" + }} + {{replication-mode-summary + mode="performance" + cluster=cluster + tagName="span" + }} + {{/link-to}} +
    + {{/unless}} + {{/if}} {{else}} {{#if (eq replicationAttrs.mode 'initializing')}} The cluster is initializing replication. This may take some time. {{else}} - {{info-table-row label="Mode" value=replicationAttrs.mode}} - {{info-table-row label="Replication set" value=replicationAttrs.clusterId}} - {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}} - {{info-table-row label="State" value=replicationAttrs.state}} - {{info-table-row label="Primary cluster address" value=replicationAttrs.primaryClusterAddr}} - {{info-table-row label="Replication state" value=replicationAttrs.replicationState}} - {{info-table-row label="Last WAL entry" value=replicationAttrs.lastWAL}} - {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} - {{info-table-row label="Merkle root index" value=replicationAttrs.merkleRoot}} - {{#if replicationAttrs.syncProgress}} - {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}} - {{/if}} +

    {{cluster.replicationModeStatus.cluster_id}}

    +
    + + + {{#if (eq replicationAttrs.mode 'secondary')}} + + + {{else}} + + + + {{/if}} + + +
    {{/if}} {{/if}} diff --git a/ui/lib/replication/addon/templates/index.hbs b/ui/lib/replication/addon/templates/index.hbs index 48ad8416e5..f4e5553819 100644 --- a/ui/lib/replication/addon/templates/index.hbs +++ b/ui/lib/replication/addon/templates/index.hbs @@ -1,19 +1,27 @@ -{{#if (eq model.mode 'unsupported')}} - - -

    - Replication unsupported -

    -     -     - -{{else}} - -{{/if}} +
    +
    + {{#if model.replicationIsInitializing }} + + {{else}} + {{#if (eq model.mode 'unsupported')}} + + +

    + Replication unsupported +

    +     +     + + {{else}} + + {{/if}} + {{/if}} +
    +
    diff --git a/ui/lib/replication/addon/templates/mode.hbs b/ui/lib/replication/addon/templates/mode.hbs index d95c6cbabe..9ca811ef34 100644 --- a/ui/lib/replication/addon/templates/mode.hbs +++ b/ui/lib/replication/addon/templates/mode.hbs @@ -1,52 +1,57 @@ -{{#if model.replicationAttrs.replicationEnabled}} - - -

    - {{#if (eq replicationMode 'dr')}} - Disaster Recovery - {{else if (eq replicationMode 'performance')}} - Performance - {{/if}} - - {{model.replicationAttrs.modeForUrl}} - - {{#if secondaryId}} - - - {{model.replicationAttrs.secondaryId}} - - - {{/if}} - - - {{model.replicationAttrs.clusterIdDisplay}} - - -

    -     -     -
    - +
    +
    + {{#if model.replicationAttrs.replicationEnabled}} + + + + + +

    + {{model.replicationModeForDisplay}} + + {{model.replicationAttrs.modeForHeader}} + +

    +     +     +
    + +
    + {{/if}} + {{outlet}}
    -{{/if}} -{{outlet}} +
    + diff --git a/ui/lib/replication/addon/templates/mode/secondaries/add.hbs b/ui/lib/replication/addon/templates/mode/secondaries/add.hbs index 0f7430288c..c984ba44ee 100644 --- a/ui/lib/replication/addon/templates/mode/secondaries/add.hbs +++ b/ui/lib/replication/addon/templates/mode/secondaries/add.hbs @@ -3,75 +3,78 @@

    Generate a secondary token

    -

    Generate a token to enable {{replicationMode}} Replication or change primaries on secondary cluster.

    +

    Generate a token to enable {{model.replicationModeForDisplay}} replication or change primaries on secondary cluster.

    {{message-error errors=errors}} - {{#if token}} -
    - -
    -