From dfab647d334aef9705fd838b663db931d596470c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 10 Dec 2018 14:15:56 -0800 Subject: [PATCH 1/8] Refine Remote Clusters copy and add links to docs. --- .../public/sections/components/index.js | 8 +++ .../remote_cluster_form/index.js | 0 .../remote_cluster_form.js | 33 +++++++---- .../remote_cluster_page_title/index.js | 7 +++ .../remote_cluster_page_title.js | 55 +++++++++++++++++++ .../remote_cluster_add/remote_cluster_add.js | 25 +++------ .../remote_cluster_edit.js | 27 ++++----- .../public/services/documentation_links.js | 12 ++++ 8 files changed, 124 insertions(+), 43 deletions(-) create mode 100644 x-pack/plugins/remote_clusters/public/sections/components/index.js rename x-pack/plugins/remote_clusters/public/sections/{ => components}/remote_cluster_form/index.js (100%) rename x-pack/plugins/remote_clusters/public/sections/{ => components}/remote_cluster_form/remote_cluster_form.js (91%) create mode 100644 x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/index.js create mode 100644 x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/remote_cluster_page_title.js create mode 100644 x-pack/plugins/remote_clusters/public/services/documentation_links.js diff --git a/x-pack/plugins/remote_clusters/public/sections/components/index.js b/x-pack/plugins/remote_clusters/public/sections/components/index.js new file mode 100644 index 0000000000000..a4b2c63ec552e --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/components/index.js @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { RemoteClusterForm } from './remote_cluster_form'; +export { RemoteClusterPageTitle } from './remote_cluster_page_title'; diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_form/index.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/index.js similarity index 100% rename from x-pack/plugins/remote_clusters/public/sections/remote_cluster_form/index.js rename to x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/index.js diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_form/remote_cluster_form.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js similarity index 91% rename from x-pack/plugins/remote_clusters/public/sections/remote_cluster_form/remote_cluster_form.js rename to x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js index ab7345374a1ae..1aef158bddee7 100644 --- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_form/remote_cluster_form.js +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js @@ -34,7 +34,9 @@ import { import { isSeedNodeValid, isSeedNodePortValid, -} from '../../services'; +} from '../../../services'; + +import { skippingDisconnectedClustersUrl } from '../../../services/documentation_links'; const defaultFields = { name: '', @@ -274,7 +276,7 @@ export class RemoteClusterFormUi extends Component {

@@ -284,9 +286,10 @@ export class RemoteClusterFormUi extends Component {

@@ -343,7 +346,7 @@ export class RemoteClusterFormUi extends Component {

@@ -353,10 +356,20 @@ export class RemoteClusterFormUi extends Component {

+ + + ), + }} />

diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/index.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/index.js new file mode 100644 index 0000000000000..316cb05087725 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/index.js @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { RemoteClusterPageTitle } from './remote_cluster_page_title'; diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/remote_cluster_page_title.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/remote_cluster_page_title.js new file mode 100644 index 0000000000000..f8bd3535b34f1 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_page_title/remote_cluster_page_title.js @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiPageContentHeader, + EuiSpacer, + EuiTitle, +} from '@elastic/eui'; + +import { remoteClustersUrl } from '../../../services/documentation_links'; + +export const RemoteClusterPageTitle = ({ title }) => ( + + + + + + + +

{title}

+ + + + + + + + + + + +); + +RemoteClusterPageTitle.propTypes = { + title: PropTypes.node.isRequired, +}; diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_add/remote_cluster_add.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_add/remote_cluster_add.js index 5729eb950ff3f..9b9989705578b 100644 --- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_add/remote_cluster_add.js +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_add/remote_cluster_add.js @@ -14,14 +14,11 @@ import { EuiPage, EuiPageBody, EuiPageContent, - EuiPageContentHeader, - EuiSpacer, - EuiTitle, } from '@elastic/eui'; import { CRUD_APP_BASE_PATH } from '../../constants'; import { listBreadcrumb, addBreadcrumb } from '../../services'; -import { RemoteClusterForm } from '../remote_cluster_form'; +import { RemoteClusterPageTitle, RemoteClusterForm } from '../components'; export class RemoteClusterAddUi extends Component { static propTypes = { @@ -61,18 +58,14 @@ export class RemoteClusterAddUi extends Component { horizontalPosition="center" className="remoteClusterAddPage" > - - - - -

- -

- - + + )} + /> - - - - -

- -

- - + + )} + /> {this.renderContent()} diff --git a/x-pack/plugins/remote_clusters/public/services/documentation_links.js b/x-pack/plugins/remote_clusters/public/services/documentation_links.js new file mode 100644 index 0000000000000..a7ccaa7df8800 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/services/documentation_links.js @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links'; + +const esBase = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}`; + +export const skippingDisconnectedClustersUrl = `${esBase}/modules-cross-cluster-search.html#_skipping_disconnected_clusters`; +export const remoteClustersUrl = `${esBase}/modules-remote-clusters.html`; From 89c2049ab2c1c785fd55a8f7bbe18a9c14865b8d Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 10 Dec 2018 14:33:51 -0800 Subject: [PATCH 2/8] Disabl Save button when there are errors. Integrate seed node errors into form validation. --- .../remote_cluster_form.js | 35 ++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js index 1aef158bddee7..0d646897e17d0 100644 --- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js @@ -99,7 +99,7 @@ export class RemoteClusterFormUi extends Component { errors.seeds = ( ); } @@ -118,7 +118,7 @@ export class RemoteClusterFormUi extends Component { this.setState({ fields: newFields, fieldsErrors: this.getFieldsErrors(newFields), - areErrorsVisible: false, + // areErrorsVisible: false, }); }; @@ -140,9 +140,8 @@ export class RemoteClusterFormUi extends Component { save = () => { const { save } = this.props; - const { fieldsErrors } = this.state; - if (Object.keys(fieldsErrors).length > 0) { + if (this.hasErrors()) { this.setState({ areErrorsVisible: true, }); @@ -150,7 +149,6 @@ export class RemoteClusterFormUi extends Component { } const cluster = this.getAllFields(); - save(cluster); }; @@ -159,6 +157,10 @@ export class RemoteClusterFormUi extends Component { const errors = []; + if (!seedNode) { + return errors; + } + const isInvalid = !isSeedNodeValid(seedNode); if (isInvalid) { @@ -182,6 +184,11 @@ export class RemoteClusterFormUi extends Component { }; onCreateSeed = (newSeed) => { + // If the user just hit enter without typing anything, treat it as a no-op. + if (!newSeed) { + return; + } + const localSeedErrors = this.getLocalSeedErrors(newSeed); if (localSeedErrors.length !== 0) { @@ -248,6 +255,13 @@ export class RemoteClusterFormUi extends Component { }); }; + hasErrors = () => { + const { fieldsErrors, localSeedErrors } = this.state; + const errorValues = Object.values(fieldsErrors); + const hasErrors = errorValues.some(error => error !== undefined) || localSeedErrors.length; + return hasErrors; + }; + renderSeeds() { const { areErrorsVisible, @@ -300,7 +314,7 @@ export class RemoteClusterFormUi extends Component { label={( )} helpText={( @@ -404,6 +418,7 @@ export class RemoteClusterFormUi extends Component { renderActions() { const { isSaving, cancel } = this.props; + const { areErrorsVisible } = this.state; if (isSaving) { return ( @@ -442,6 +457,8 @@ export class RemoteClusterFormUi extends Component { ); } + const isSaveDisabled = areErrorsVisible && this.hasErrors(); + return ( @@ -450,6 +467,7 @@ export class RemoteClusterFormUi extends Component { iconType="check" onClick={this.save} fill + disabled={isSaveDisabled} > { - const { areErrorsVisible, fieldsErrors } = this.state; - const errorValues = Object.values(fieldsErrors); - const hasErrors = errorValues.some(error => error !== undefined); + const { areErrorsVisible } = this.state; + const hasErrors = this.hasErrors(); if (!areErrorsVisible || !hasErrors) { return null; From 132694102e99f50df0672b353e407cb0f97b432c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 10 Dec 2018 14:49:22 -0800 Subject: [PATCH 3/8] Add Auto-follow Patterns subtitle. --- .../auto_follow_pattern_list.js | 4 ++ .../public/app/sections/home/home.js | 50 ++++++++++++------- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js index d785327431ab5..f8d75bd154118 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js @@ -49,6 +49,10 @@ export class AutoFollowPatternListUI extends PureComponent { )} body={ +

+ Auto-follow patterns +

+

- - - -

+ +

+ +

+ + + + + + + +

-

+

+

- - + + + - - + + + ); @@ -91,7 +105,7 @@ export class CrossClusterReplicationHomeUI extends PureComponent { return ( From 655ebb7dd5b6d70b5ff4735e4f6dabe99d4646c6 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 11 Dec 2018 15:08:29 -0800 Subject: [PATCH 4/8] Remove subtitle from empty prompt. --- .../home/auto_follow_pattern_list/auto_follow_pattern_list.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js index f8d75bd154118..d785327431ab5 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js @@ -49,10 +49,6 @@ export class AutoFollowPatternListUI extends PureComponent { )} body={ -

- Auto-follow patterns -

-

Date: Wed, 12 Dec 2018 13:35:26 -0800 Subject: [PATCH 5/8] Update Remote Clusters copy. --- .../remote_cluster_form.js | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js index 0d646897e17d0..223cc8541a728 100644 --- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js @@ -176,7 +176,7 @@ export class RemoteClusterFormUi extends Component { if (isPortInvalid) { errors.push(intl.formatMessage({ id: 'xpack.remoteClusters.remoteClusterForm.localSeedError.invalidPortMessage', - defaultMessage: 'Seed node must define a numeric port.', + defaultMessage: 'A port is required.', })); } @@ -290,7 +290,7 @@ export class RemoteClusterFormUi extends Component {

@@ -300,10 +300,8 @@ export class RemoteClusterFormUi extends Component {

@@ -320,8 +318,7 @@ export class RemoteClusterFormUi extends Component { helpText={( )} isInvalid={showErrors} @@ -332,7 +329,7 @@ export class RemoteClusterFormUi extends Component { noSuggestions placeholder={intl.formatMessage({ id: 'xpack.remoteClusters.remoteClusterForm.fieldSeedsPlaceholder', - defaultMessage: '127.0.0.1:9400', + defaultMessage: 'host:port', })} selectedOptions={formattedSeeds} onCreateOption={this.onCreateSeed} @@ -360,7 +357,7 @@ export class RemoteClusterFormUi extends Component {

@@ -370,15 +367,22 @@ export class RemoteClusterFormUi extends Component {

+ + + ), learnMoreLink: ( @@ -406,7 +410,7 @@ export class RemoteClusterFormUi extends Component { > )} color="danger" @@ -594,8 +598,7 @@ export class RemoteClusterFormUi extends Component { description={( )} fullWidth From 37dd82f6a66cf19955cfe1a33c1f01276d26bd58 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 12 Dec 2018 13:40:24 -0800 Subject: [PATCH 6/8] Fix the switch jumping up and down. --- x-pack/plugins/remote_clusters/public/index.scss | 11 +++++++++++ .../remote_cluster_form/remote_cluster_form.js | 1 + 2 files changed, 12 insertions(+) diff --git a/x-pack/plugins/remote_clusters/public/index.scss b/x-pack/plugins/remote_clusters/public/index.scss index 33cca267d4075..b25832255cece 100644 --- a/x-pack/plugins/remote_clusters/public/index.scss +++ b/x-pack/plugins/remote_clusters/public/index.scss @@ -17,3 +17,14 @@ max-width: 1000px !important; /* 1 */ width: 100% !important; /* 1 */ } + +/** + * 1. Override EuiFormRow styles. Otherwise the switch will jump around when toggled on and off, + * as the 'Reset to defaults' link is added to and removed from the DOM. + * 2. Fix the positioning. + */ + +.remoteClusterSkipIfUnavailableSwitch { + justify-content: flex-start !important; /* 1 */ + padding-top: $euiSizeS !important; +} diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js index 223cc8541a728..3becf99873c08 100644 --- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js @@ -395,6 +395,7 @@ export class RemoteClusterFormUi extends Component { fullWidth > Date: Wed, 12 Dec 2018 13:45:56 -0800 Subject: [PATCH 7/8] CCR copy fixes. --- .../home/auto_follow_pattern_list/auto_follow_pattern_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js index d785327431ab5..cd8012a0fa45b 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js @@ -52,7 +52,7 @@ export class AutoFollowPatternListUI extends PureComponent {

From f32ec113b9bcbd24768899eac982576dbcea568e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 12 Dec 2018 13:48:43 -0800 Subject: [PATCH 8/8] Fix typo. --- .../components/remote_cluster_form/remote_cluster_form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js index 3becf99873c08..6eaade2a95404 100644 --- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js @@ -368,7 +368,7 @@ export class RemoteClusterFormUi extends Component {