Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ui/fix enable overflow #9173

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions ui/app/styles/components/replication-mode-summary.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.replication-description {
flex-shrink: 1;

.title {
margin-bottom: $spacing-xs;
}

.detail-tags {
margin-bottom: $spacing-m;
}
}
1 change: 1 addition & 0 deletions ui/app/styles/core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
@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';
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/core/addon/components/replication-mode-summary.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
5 changes: 0 additions & 5 deletions ui/lib/core/addon/helpers/cluster-states.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,21 @@ export const CLUSTER_STATES = {
},
'stream-wals': {
glyph: 'check-circle-outline',
display: 'Streaming',
isOk: true,
isSyncing: false,
},
'merkle-diff': {
glyph: 'android-sync',
display: 'Determining sync status',
isOk: true,
isSyncing: true,
},
connecting: {
glyph: 'android-sync',
display: 'Streaming',
isOk: true,
isSyncing: true,
},
'merkle-sync': {
glyph: 'android-sync',
display: 'Syncing',
isOk: true,
isSyncing: true,
},
Expand All @@ -59,7 +55,6 @@ export const CLUSTER_STATES = {
export function clusterStates([state]) {
const defaultDisplay = {
glyph: '',
display: '',
isOk: null,
isSyncing: null,
};
Expand Down
14 changes: 14 additions & 0 deletions ui/lib/core/addon/helpers/replication-mode-description.js
Original file line number Diff line number Diff line change
@@ -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);
81 changes: 42 additions & 39 deletions ui/lib/core/addon/templates/components/replication-mode-summary.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{{#if (eq display 'menu')}}
{{#if isMenu}}
{{!-- this is the status menu --}}
<div class="level is-mobile">
<div class="is-flex-1">
{{#if replicationUnsupported}}
Expand Down Expand Up @@ -53,59 +54,61 @@
</div>
</div>
{{else}}
<div class="level-left is-flex-1">
{{!-- this is the replication index page --}}
<div class="level">
<div class="replication-description level-left">
<div>
{{#if (and (eq mode 'performance') (not (has-feature "Performance Replication")))}}
<p>
Performance Replication is a feature of Vault Enterprise Premium.
</p>
<p class="has-text-centered">
<a
href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
class="button is-ghost has-icon-right"
data-test-upgrade-link="true"
>
Learn more
<Chevron />
</a>
</p>
{{else if replicationEnabled}}
<h5 class="title is-7 is-uppercase is-marginless">
{{#if (and (eq mode 'performance') (not (has-feature 'Performance Replication')))}}
<p>
Performance Replication is a feature of Vault Enterprise Premium.
</p>
<p class="has-text-centered">
<a
href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
class="button is-ghost has-icon-right"
data-test-upgrade-link="true"
>
Learn more
<Chevron />
</a>
</p>
{{else if replicationEnabled}}
<h6 class="title is-6 is-uppercase">
Enabled
</h5>
</h6>
<div class="detail-tags">
<span class="has-text-grey">
{{capitalize modeForUrl}}
</span>
{{#if secondaryId}}
<span class="tag">
<span class="tag is-light has-text-grey-dark">
<code>
{{secondaryId}}
</code>
</span>
{{/if}}
<span class="tag">
<span class="tag is-light has-text-grey-dark">
<code>
{{clusterIdDisplay}}
</code>
</span>
{{else}}
<p class="help has-text-grey-dark">
{{#if (eq mode 'dr')}}
{{model.replicationModeForDisplay}} 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}}
{{model.replicationModeForDisplay}} 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}}
</p>
{{/if}}
</div>
</div>
<div class="level-right">
{{#if replicationDisabled}}
{{#link-to "mode.index" cluster.name mode class="button is-primary"}}
Enable
{{/link-to}}
{{else}}
{{get (cluster-states modeState) "display"}}
</div>
{{/if}}
<p class="help has-text-grey-dark">
{{replication-mode-description mode}}
</p>
</div>
</div>
<div class="level-right">
{{#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}}
</div>
</div>
{{/if}}
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
label='secondary_id'
helperText="The ID of the secondary activation token used to enable replication."
value=secondaryId}}
{{/if}}
{{info-table-row
{{else}}
{{info-table-row
label='primary_cluster_addr'
helperText='The configuration of the cluster. This was set when replication was enabled.'
value=primaryClusterAddr}}
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."
Expand Down
5 changes: 5 additions & 0 deletions ui/lib/core/app/helpers/replication-mode-description.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export {
default,
replicationModeDescription,
REPLICATION_MODE_DESCRIPTIONS,
} from 'core/helpers/replication-mode-description';
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@
Disaster Recovery (DR) Replication
</h3>
<p class="help has-text-grey-dark">
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'}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

</p>
{{else if (eq initialReplicationMode 'performance')}}
<h3 class="title is-flex-center is-5 is-marginless">
Expand All @@ -54,8 +53,7 @@
</p>
{{else}}
<p class="help has-text-grey-dark">
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'}}
</p>
{{/if}}
{{/if}}
Expand All @@ -76,8 +74,7 @@
Disaster Recovery (DR)
</h3>
<p class="help has-text-grey-dark">
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'}}
</p>
</div>
<div>
Expand Down Expand Up @@ -105,8 +102,7 @@
</p>
{{else}}
<p class="help has-text-grey-dark">
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'}}
</p>
{{/if}}
</div>
Expand Down