Skip to content

[CCR] Follower index list fixes from design feedback #29484

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.

Sign up for GitHub

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

Merged
jen-huang merged 6 commits into from
Jan 30, 2019
Merged

[CCR] Follower index list fixes from design feedback #29484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dc5a1e6
Delete remote cluster settings before updating
jen-huang Jan 29, 2019
5daf739
Fix detail panel z-index
jen-huang Jan 29, 2019
7d243b3
Remove default descriptor from follower index detail panel setting va…
jen-huang Jan 29, 2019
79336a3
Follower index confirm action copy adjustments
jen-huang Jan 29, 2019
e213604
Merge remote-tracking branch 'upstream/feature/ccr' into feature/ccr-…
jen-huang Jan 30, 2019
983bc9d
Change z-index styling to use EUI vars
jen-huang Jan 30, 2019
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
7 changes: 7 additions & 0 deletions x-pack/plugins/cross_cluster_replication/public/app/_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,10 @@
.ccrFollowerIndicesHelpText {
transform: translateY(-3px);
}

/**
* 1. Prevent context menu popover appearing above confirmation modal
*/
.ccrFollowerIndicesDetailPanel {
z-index: $euiZMask - 1; /* 1 */
}
63 changes: 46 additions & 17 deletions .../plugins/cross_cluster_replication/public/app/components/follower_index_pause_provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {

import { pauseFollowerIndex } from '../store/actions';
import { arrify } from '../../../common/services/utils';
import { areAllSettingsDefault } from '../services/follower_index_default_settings';

class Provider extends PureComponent {
static propTypes = {
Expand All @@ -23,7 +24,7 @@ class Provider extends PureComponent {

state = {
isModalOpen: false,
ids: null
indices: []
}

onMouseOverModal = (event) => {
Expand All @@ -32,13 +33,13 @@ class Provider extends PureComponent {
event.stopPropagation();
};

pauseFollowerIndex = (id) => {
this.setState({ isModalOpen: true, ids: arrify(id) });
pauseFollowerIndex = (index) => {
this.setState({ isModalOpen: true, indices: arrify(index) });
};

onConfirm = () => {
this.props.pauseFollowerIndex(this.state.ids);
this.setState({ isModalOpen: false, ids: null });
this.props.pauseFollowerIndex(this.state.indices.map(index => index.name));
this.setState({ isModalOpen: false, indices: [] });
this.props.onConfirm && this.props.onConfirm();
}

Expand All @@ -50,17 +51,18 @@ class Provider extends PureComponent {

renderModal = () => {
const { intl } = this.props;
const { ids } = this.state;
const isSingle = ids.length === 1;
const { indices } = this.state;
const isSingle = indices.length === 1;
const title = isSingle
? intl.formatMessage({
id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.pauseSingleTitle',
defaultMessage: 'Pause follower index \'{name}\'?',
}, { name: ids[0] })
}, { name: indices[0].name })
: intl.formatMessage({
id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.pauseMultipleTitle',
defaultMessage: 'Pause {count} follower indices?',
}, { count: ids.length });
}, { count: indices.length });
const hasCustomSettings = indices.some(index => !areAllSettingsDefault(index));

return (
<EuiOverlayMask>
Expand All @@ -75,24 +77,51 @@ class Provider extends PureComponent {
defaultMessage: 'Cancel',
})
}
buttonColor="primary"
buttonColor={hasCustomSettings ? 'danger' : 'primary'}
confirmButtonText={
intl.formatMessage({
hasCustomSettings ? intl.formatMessage({
id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.confirmButtonTextWithSettingWarning',
defaultMessage: 'Pause and revert advanced settings to defaults',
}) : intl.formatMessage({
id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.confirmButtonText',
defaultMessage: 'Pause',
})
}
onMouseOver={this.onMouseOverModal}
>
{!isSingle && (
{isSingle ? (
<Fragment>
{
hasCustomSettings ? (
<p>
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.singlePauseDescriptionWithSettingWarning"
defaultMessage="The custom advanced settings on this follower index will be reverted to default
advanced settings."
/>
</p>
) : null
}
</Fragment>
) : (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescription"
defaultMessage="These follower indices will be paused:"
/>
{
hasCustomSettings ? (
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescriptionWithSettingWarning"
defaultMessage="The follower indices below will be paused. Custom advanced settings on one or more
of these follower indices will be reverted to default advanced settings."
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescription"
defaultMessage="These follower indices will be paused:"
/>
)
}
</p>
<ul>{ids.map(id => <li key={id}>{id}</li>)}</ul>
<ul>{indices.map(index => <li key={index.name}>{index.name}</li>)}</ul>
</Fragment>
)}
</EuiConfirmModal>
Expand Down
22 changes: 17 additions & 5 deletions ...plugins/cross_cluster_replication/public/app/components/follower_index_resume_provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import { connect } from 'react-redux';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import {
EuiConfirmModal,
EuiLink,
EuiOverlayMask,
} from '@elastic/eui';

import routing from '../services/routing';
import { resumeFollowerIndex } from '../store/actions';
import { arrify } from '../../../common/services/utils';

Expand Down Expand Up @@ -79,7 +81,7 @@ class Provider extends PureComponent {
confirmButtonText={
intl.formatMessage({
id: 'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.confirmButtonText',
defaultMessage: 'Resume',
defaultMessage: 'Resume using default advanced settings',
})
}
onMouseOver={this.onMouseOverModal}
Expand All @@ -88,17 +90,27 @@ class Provider extends PureComponent {
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.singleResumeDescription"
defaultMessage="This follower index will be resumed using default settings. To resume using
different settings, edit this follower index instead."
defaultMessage="This follower index will be resumed using default advanced settings.
To resume using custom advanced settings, {editLink}."
values={{
editLink: (
<EuiLink href={routing.getFollowerIndexPath(ids[0])}>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.singleResumeEditLink"
defaultMessage="edit this follower index instead"
/>
</EuiLink>
),
}}
/>
</p>
) : (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.multipleResumeDescription"
defaultMessage="These follower indices will be resumed using default settings. To resume using
different settings, edit each follower index instead:"
defaultMessage="The follower indices below will be resumed using default advanced settings.
To resume using custom advanced settings, edit each follower index instead."
/>
</p>
<ul>{ids.map(id => <li key={id}>{id}</li>)}</ul>
Expand Down
8 changes: 6 additions & 2 deletions ...ugins/cross_cluster_replication/public/app/components/follower_index_unfollow_provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@ class Provider extends PureComponent {
<p>
<FormattedMessage
id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.singleUnfollowDescription"
defaultMessage="This follower index will be paused, closed, and converted into a regular index."
defaultMessage="This follower index will be paused, closed, and converted into a regular index.
The index will no longer appear in Cross Cluster Replication but can still be managed using Index
Management. This operation cannot be undone."
/>
</p>
</Fragment>
Expand All @@ -98,7 +100,9 @@ class Provider extends PureComponent {
<p>
<FormattedMessage
id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.multipleUnfollowDescription"
defaultMessage="These follower indices will be paused, closed, and converted into regular indices:"
defaultMessage="The follower indices below will be paused, closed, and converted into regular indices.
The indices will no longer appear in Cross Cluster Replication but can still be managed using Index
Management. This operation cannot be undone."
/>
</p>
<ul>{ids.map(id => <li key={id}>{id}</li>)}</ul>
Expand Down
8 changes: 4 additions & 4 deletions ...on/public/app/sections/home/follower_indices_list/components/context_menu/context_menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export class ContextMenuUi extends PureComponent {
);

const pausedFollowerIndexNames = followerIndices.filter(({ isPaused }) => isPaused).map((index) => index.name);
const activeFollowerIndexNames = followerIndices.filter(({ isPaused }) => !isPaused).map((index) => index.name);
const activeFollowerIndices = followerIndices.filter(({ isPaused }) => !isPaused);

return (
<EuiPopover
Expand All @@ -106,17 +106,17 @@ export class ContextMenuUi extends PureComponent {
<EuiContextMenuPanel>

{
activeFollowerIndexNames.length ? (
activeFollowerIndices.length ? (
<FollowerIndexPauseProvider onConfirm={this.closePopover}>
{(pauseFollowerIndex) => (
<EuiContextMenuItem
icon="pause"
onClick={() => pauseFollowerIndex(activeFollowerIndexNames)}
onClick={() => pauseFollowerIndex(activeFollowerIndices)}
>
<FormattedMessage
id="xpack.crossClusterReplication.followerIndex.contextMenu.pauseLabel"
defaultMessage="Pause follower {activeFollowerIndicesLength, plural, one {index} other {indices}}"
values={{ activeFollowerIndicesLength: activeFollowerIndexNames.length }}
values={{ activeFollowerIndicesLength: activeFollowerIndices.length }}
/>
</EuiContextMenuItem>
)}
Expand Down
40 changes: 11 additions & 29 deletions ...on/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ import 'brace/theme/textmate';
import { ContextMenu } from '../context_menu';

import { API_STATUS } from '../../../../../constants';
import { isSettingDefault } from '../../../../../services/follower_index_default_settings';


export class DetailPanelUi extends Component {
static propTypes = {
Expand All @@ -47,23 +45,6 @@ export class DetailPanelUi extends Component {
closeDetailPanel: PropTypes.func.isRequired,
}

renderSetting(name, value) {
if(isSettingDefault(name, value)) {
return (
<Fragment>
{value}{' '}
<em>
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexDetailPanel.defaultSettingLabel"
defaultMessage="(Default)"
/>
</em>
</Fragment>
);
}
return value;
}

renderFollowerIndex() {
const {
followerIndex: {
Expand Down Expand Up @@ -183,7 +164,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxReadRequestOperationCount', maxReadRequestOperationCount)}
{maxReadRequestOperationCount}
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand All @@ -198,7 +179,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxOutstandingReadRequests', maxOutstandingReadRequests)}
{maxOutstandingReadRequests}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -217,7 +198,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxReadRequestSize', maxReadRequestSize)}
{maxReadRequestSize}
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand All @@ -232,7 +213,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxWriteRequestOperationCount', maxWriteRequestOperationCount)}
{maxWriteRequestOperationCount}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -251,7 +232,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxWriteRequestSize', maxWriteRequestSize)}
{maxWriteRequestSize}
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand All @@ -266,7 +247,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxOutstandingWriteRequests', maxOutstandingWriteRequests)}
{maxOutstandingWriteRequests}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -285,7 +266,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxWriteBufferCount', maxWriteBufferCount)}
{maxWriteBufferCount}
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand All @@ -300,7 +281,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxWriteBufferSize', maxWriteBufferSize)}
{maxWriteBufferSize}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -319,7 +300,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('maxRetryDelay', maxRetryDelay)}
{maxRetryDelay}
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand All @@ -334,7 +315,7 @@ export class DetailPanelUi extends Component {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{this.renderSetting('readPollTimeout', readPollTimeout)}
{readPollTimeout}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down Expand Up @@ -497,6 +478,7 @@ export class DetailPanelUi extends Component {

return (
<EuiFlyout
className="ccrFollowerIndicesDetailPanel"
data-test-subj="followerIndexDetailsFlyout"
onClose={closeDetailPanel}
aria-labelledby="followerIndexDetailsFlyoutTitle"
Expand Down
5 changes: 3 additions & 2 deletions ...ns/home/follower_indices_list/components/follower_indices_table/follower_indices_table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ export const FollowerIndicesTable = injectI18n(
const actions = [
/* Pause or resume follower index */
{
render: ({ name, isPaused }) => {
render: (followerIndex) => {
const { name, isPaused } = followerIndex;
const label = isPaused
? intl.formatMessage({
id: 'xpack.crossClusterReplication.followerIndexList.table.actionResumeDescription',
Expand All @@ -100,7 +101,7 @@ export const FollowerIndicesTable = injectI18n(
) : (
<FollowerIndexPauseProvider>
{(pauseFollowerIndex) => (
<span onClick={() => pauseFollowerIndex(name)}>
<span onClick={() => pauseFollowerIndex(followerIndex)}>
<EuiIcon
aria-label={label}
type="pause"
Expand Down
4 changes: 4 additions & 0 deletions .../plugins/cross_cluster_replication/public/app/services/follower_index_default_settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,7 @@ export const getSettingDefault = (name) => {
export const isSettingDefault = (name, value) => {
return getSettingDefault(name) === value;
};

export const areAllSettingsDefault = (settings) => {
Copy link
Copy Markdown
Contributor

@cjcenizal cjcenizal Jan 30, 2019

Choose a reason for hiding this comment

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

You and I are kind of duplicating each other's logic: https://github.com/elastic/kibana/pull/29543/files#diff-09a600da2112444503d4078ae82502d4R246. But I should probably just move the stuff in my PR into services and group it with this file into a module.

Copy link
Copy Markdown
Contributor Author

@jen-huang jen-huang Jan 30, 2019

Choose a reason for hiding this comment

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

I noticed that too and figured we could just consolidate after both PRs are merged 🙂

return Object.keys(defaultSettings).every((name) => isSettingDefault(name, settings[name]));
};
Loading