Skip to content

Commit

Permalink
[Remote Clusters] Migrate to new page layout (elastic#102042)
Browse files Browse the repository at this point in the history 
* change page templates

* Small copy tweaks

* Update docs

* small CR changes

* exit function call if fails

* update i18n strings

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@sabarasaba @kibanamachine
sabarasaba and kibanamachine committed Jun 15, 2021
1 parent 2cb387b commit 10e7216
Show file tree
Hide file tree
Showing 10 changed files with 245 additions and 276 deletions.
4 changes: 4 additions & 0 deletions x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,10 @@ describe('<RemoteClusterList />', () => {
expect(exists('remoteClusterCreateButton')).toBe(true);
});

test('should have link to documentation', () => {
expect(exists('documentationLink')).toBe(true);
});

test('should list the remote clusters in the table', () => {
expect(tableCellsValues.length).toEqual(remoteClusters.length);
expect(tableCellsValues).toEqual([
Expand Down
76 changes: 26 additions & 50 deletions ...ic/application/sections/components/remote_cluster_page_title/remote_cluster_page_title.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,38 @@
* 2.0.
*/

import React, { Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@kbn/i18n/react';
import { remoteClustersUrl } from '../../../services/documentation';

import {
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { EuiPageHeader, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';

export const RemoteClusterPageTitle = ({ title, description }) => (
<Fragment>
<EuiSpacer size="xs" />

<EuiTitle size="l">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="l" data-test-subj="remoteClusterPageTitle">
<h1>{title}</h1>
</EuiTitle>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
flush="right"
href={remoteClustersUrl}
target="_blank"
iconType="help"
data-test-subj="remoteClusterDocsButton"
>
<FormattedMessage
id="xpack.remoteClusters.readDocsButtonLabel"
defaultMessage="Remote cluster docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTitle>

{description ? (
<>
<EuiSpacer size="s" />

<EuiTitle size="s">
<EuiText color="subdued">{description}</EuiText>
</EuiTitle>
</>
) : null}

<EuiSpacer size="m" />
</Fragment>
<>
<EuiPageHeader
bottomBorder
pageTitle={<span data-test-subj="remoteClusterPageTitle">{title}</span>}
rightSideItems={[
<EuiButtonEmpty
size="s"
flush="right"
href={remoteClustersUrl}
target="_blank"
iconType="help"
data-test-subj="remoteClusterDocsButton"
>
<FormattedMessage
id="xpack.remoteClusters.readDocsButtonLabel"
defaultMessage="Remote cluster docs"
/>
</EuiButtonEmpty>,
]}
description={description}
/>

<EuiSpacer size="l" />
</>
);

RemoteClusterPageTitle.propTypes = {
Expand Down
10 changes: 2 additions & 8 deletions ...gins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@kbn/i18n/react';

import { EuiPageContent } from '@elastic/eui';

import { extractQueryParams } from '../../../shared_imports';
import { getRouter, redirect } from '../../services';
import { setBreadcrumbs } from '../../services/breadcrumb';
Expand Down Expand Up @@ -58,11 +56,7 @@ export class RemoteClusterAdd extends PureComponent {
const { isAddingCluster, addClusterError } = this.props;

return (
<EuiPageContent
horizontalPosition="center"
className="remoteClusterAddPage"
data-test-subj="remoteClusterAddPage"
>
<>
<RemoteClusterPageTitle
title={
<FormattedMessage
Expand All @@ -84,7 +78,7 @@ export class RemoteClusterAdd extends PureComponent {
save={this.save}
cancel={this.cancel}
/>
</EuiPageContent>
</>
);
}
}
161 changes: 78 additions & 83 deletions ...ns/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,17 @@
* 2.0.
*/

import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@kbn/i18n/react';

import {
EuiButtonEmpty,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
EuiPageContent,
EuiSpacer,
EuiText,
EuiTextColor,
} from '@elastic/eui';
import { EuiButton, EuiCallOut, EuiEmptyPrompt, EuiPageContent, EuiSpacer } from '@elastic/eui';

import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
import { extractQueryParams } from '../../../shared_imports';
import { extractQueryParams, SectionLoading } from '../../../shared_imports';
import { getRouter, redirect } from '../../services';
import { setBreadcrumbs } from '../../services/breadcrumb';
import { RemoteClusterPageTitle, RemoteClusterForm, ConfiguredByNodeWarning } from '../components';
import { RemoteClusterPageTitle, RemoteClusterForm } from '../components';

export class RemoteClusterEdit extends Component {
static propTypes = {
Expand Down Expand Up @@ -92,91 +82,112 @@ export class RemoteClusterEdit extends Component {
}
};

renderContent() {
render() {
const { clusterName } = this.state;

const { isLoading, cluster, isEditingCluster, getEditClusterError } = this.props;

if (isLoading) {
return (
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiText>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.remoteClusters.edit.loadingLabel"
defaultMessage="Loading remote cluster..."
/>
</EuiTextColor>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<SectionLoading>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingLabel"
defaultMessage="Loading remote cluster…"
/>
</SectionLoading>
</EuiPageContent>
);
}

if (!cluster) {
return (
<Fragment>
<EuiCallOut
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
iconType="alert"
title={
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorTitle"
defaultMessage="Error loading remote cluster"
/>
<h2>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorTitle"
defaultMessage="Error loading remote cluster"
/>
</h2>
}
color="danger"
iconType="alert"
>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorMessage"
defaultMessage="The remote cluster '{name}' does not exist."
values={{ name: clusterName }}
/>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
body={
<p>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorMessage"
defaultMessage="The remote cluster '{name}' does not exist."
values={{ name: clusterName }}
/>
</p>
}
actions={
<EuiButton
{...reactRouterNavigate(this.props.history, '/list')}
color="danger"
iconType="arrowLeft"
flush="left"
>
<FormattedMessage
id="xpack.remoteClusters.edit.viewRemoteClustersButtonLabel"
defaultMessage="View remote clusters"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
</EuiButton>
}
/>
</EuiPageContent>
);
}

const { isConfiguredByNode, hasDeprecatedProxySetting } = cluster;

if (isConfiguredByNode) {
return (
<Fragment>
<ConfiguredByNodeWarning />

<EuiSpacer size="s" />

<EuiButtonEmpty color="primary" onClick={this.cancel}>
<FormattedMessage
id="xpack.remoteClusters.edit.backToRemoteClustersButtonLabel"
defaultMessage="Back to remote clusters"
/>
</EuiButtonEmpty>
</Fragment>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="primary">
<EuiEmptyPrompt
iconType="iInCircle"
title={
<h2>
<FormattedMessage
id="xpack.remoteClusters.edit.configuredByNodeWarningTitle"
defaultMessage="Defined in configuration"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.remoteClusters.configuredByNodeWarningBody"
defaultMessage="You can't edit or delete this remote cluster because it's defined in a node's
elasticsearch.yml configuration file."
/>
</p>
}
actions={
<EuiButton color="primary" iconType="arrowLeft" flush="left" onClick={this.cancel}>
<FormattedMessage
id="xpack.remoteClusters.edit.backToRemoteClustersButtonLabel"
defaultMessage="Back to remote clusters"
/>
</EuiButton>
}
/>
</EuiPageContent>
);
}

return (
<>
<RemoteClusterPageTitle
title={
<FormattedMessage
id="xpack.remoteClusters.editTitle"
defaultMessage="Edit remote cluster"
/>
}
/>

{hasDeprecatedProxySetting ? (
<>
<EuiCallOut
Expand All @@ -197,6 +208,7 @@ export class RemoteClusterEdit extends Component {
<EuiSpacer />
</>
) : null}

<RemoteClusterForm
cluster={cluster}
isSaving={isEditingCluster}
Expand All @@ -207,21 +219,4 @@ export class RemoteClusterEdit extends Component {
</>
);
}

render() {
return (
<EuiPageContent horizontalPosition="center" className="remoteClusterAddPage">
<RemoteClusterPageTitle
title={
<FormattedMessage
id="xpack.remoteClusters.editTitle"
defaultMessage="Edit remote cluster"
/>
}
/>

{this.renderContent()}
</EuiPageContent>
);
}
}
Loading

0 comments on commit 10e7216

Please sign in to comment.