Skip to content

Commit

Permalink
[CCR] Migrate to new page layout structure (elastic#102507) (elastic#…
Browse files Browse the repository at this point in the history 
…102946)

* wip: start migrating views from ccr

* finish up migrating ccr pages to new nav layout

* Fix tests, linter errors and i18n strings

* remove todo

* Render loading and error states centered in screen without page title

* Keep loader going while we still setting the payload

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@sabarasaba @kibanamachine
sabarasaba and kibanamachine authored Jun 22, 2021
1 parent d16023c commit cc051ce
Show file tree
Hide file tree
Showing 16 changed files with 513 additions and 614 deletions.
8 changes: 4 additions & 4 deletions ...ss_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_add.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ describe('Create Auto-follow pattern', () => {
expect(exists('remoteClustersLoading')).toBe(true);
expect(find('remoteClustersLoading').text()).toBe('Loading remote clusters…');
});

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

describe('when remote clusters are loaded', () => {
Expand All @@ -59,6 +55,10 @@ describe('Create Auto-follow pattern', () => {
component.update();
});

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

test('should display the Auto-follow pattern form', async () => {
expect(exists('autoFollowPatternForm')).toBe(true);
});
Expand Down
8 changes: 4 additions & 4 deletions ...s/cross_cluster_replication/public/__jest__/client_integration/follower_index_add.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,6 @@ describe('Create Follower index', () => {
expect(exists('remoteClustersLoading')).toBe(true);
expect(find('remoteClustersLoading').text()).toBe('Loading remote clusters…');
});

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

describe('when remote clusters are loaded', () => {
Expand All @@ -62,6 +58,10 @@ describe('Create Follower index', () => {
component.update();
});

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

test('should display the Follower index form', async () => {
expect(exists('followerIndexForm')).toBe(true);
});
Expand Down
62 changes: 20 additions & 42 deletions x-pack/plugins/cross_cluster_replication/public/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,19 @@
* 2.0.
*/

import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
import { Route, Switch, Router, Redirect } from 'react-router-dom';
import { ScopedHistory, ApplicationStart } from 'kibana/public';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

import {
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
EuiPageContent,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';

import { getFatalErrors } from './services/notifications';
import { SectionError } from './components';
import { routing } from './services/routing';
// @ts-ignore
import { loadPermissions } from './services/api';
import { SectionLoading, PageError } from '../shared_imports';

// @ts-ignore
import {
Expand Down Expand Up @@ -119,48 +111,34 @@ class AppComponent extends Component<AppProps, AppState> {

if (isFetchingPermissions) {
return (
<EuiPageContent horizontalPosition="center">
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="l" />
</EuiFlexItem>

<EuiFlexItem>
<EuiTitle size="s">
<h2>
<FormattedMessage
id="xpack.crossClusterReplication.app.permissionCheckTitle"
defaultMessage="Checking permissions…"
/>
</h2>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<SectionLoading>
<FormattedMessage
id="xpack.crossClusterReplication.app.permissionCheckTitle"
defaultMessage="Checking permissions…"
/>
</SectionLoading>
</EuiPageContent>
);
}

if (fetchPermissionError) {
return (
<Fragment>
<SectionError
title={
<FormattedMessage
id="xpack.crossClusterReplication.app.permissionCheckErrorTitle"
defaultMessage="Error checking permissions"
/>
}
error={fetchPermissionError}
/>

<EuiSpacer size="m" />
</Fragment>
<PageError
title={
<FormattedMessage
id="xpack.crossClusterReplication.app.permissionCheckErrorTitle"
defaultMessage="Error checking permissions"
/>
}
error={fetchPermissionError}
/>
);
}

if (!hasPermission) {
return (
<EuiPageContent horizontalPosition="center">
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<EuiEmptyPrompt
iconType="securityApp"
title={
Expand Down
61 changes: 24 additions & 37 deletions ...plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_page_title.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +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 {
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiPageContentHeader,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { EuiSpacer, EuiPageHeader, EuiButtonEmpty } from '@elastic/eui';

import { documentationLinks } from '../services/documentation_links';

export const AutoFollowPatternPageTitle = ({ title }) => (
<Fragment>
<EuiSpacer size="xs" />
<>
<EuiPageHeader
bottomBorder
pageTitle={<span data-test-subj="pageTitle">{title}</span>}
rightSideItems={[
<EuiButtonEmpty
size="s"
flush="right"
href={documentationLinks.apis.createAutoFollowPattern}
target="_blank"
iconType="help"
data-test-subj="docsButton"
>
<FormattedMessage
id="xpack.crossClusterReplication.readDocsAutoFollowPatternButtonLabel"
defaultMessage="Auto-follow pattern docs"
/>
</EuiButtonEmpty>,
]}
/>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
flush="right"
href={documentationLinks.apis.createAutoFollowPattern}
target="_blank"
iconType="help"
data-test-subj="docsButton"
>
<FormattedMessage
id="xpack.crossClusterReplication.readDocsAutoFollowPatternButtonLabel"
defaultMessage="Auto-follow pattern docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentHeader>
</Fragment>
<EuiSpacer size="l" />
</>
);

AutoFollowPatternPageTitle.propTypes = {
Expand Down
61 changes: 24 additions & 37 deletions x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_page_title.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +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 {
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiPageContentHeader,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { EuiSpacer, EuiPageHeader, EuiButtonEmpty } from '@elastic/eui';

import { documentationLinks } from '../services/documentation_links';

export const FollowerIndexPageTitle = ({ title }) => (
<Fragment>
<EuiSpacer size="xs" />
<>
<EuiPageHeader
bottomBorder
pageTitle={<span data-test-subj="pageTitle">{title}</span>}
rightSideItems={[
<EuiButtonEmpty
size="s"
flush="right"
href={documentationLinks.apis.createFollower}
target="_blank"
iconType="help"
data-test-subj="docsButton"
>
<FormattedMessage
id="xpack.crossClusterReplication.readDocsFollowerIndexButtonLabel"
defaultMessage="Follower index docs"
/>
</EuiButtonEmpty>,
]}
/>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
flush="right"
href={documentationLinks.apis.createFollower}
target="_blank"
iconType="help"
data-test-subj="docsButton"
>
<FormattedMessage
id="xpack.crossClusterReplication.readDocsFollowerIndexButtonLabel"
defaultMessage="Follower index docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentHeader>
</Fragment>
<EuiSpacer size="l" />
</>
);

FollowerIndexPageTitle.propTypes = {
Expand Down
56 changes: 31 additions & 25 deletions ...luster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,15 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@kbn/i18n/react';

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

import { listBreadcrumb, addBreadcrumb, setBreadcrumbs } from '../../services/breadcrumbs';
import {
AutoFollowPatternForm,
AutoFollowPatternPageTitle,
RemoteClustersProvider,
SectionLoading,
} from '../../components';
import { SectionLoading } from '../../../shared_imports';

export class AutoFollowPatternAdd extends PureComponent {
static propTypes = {
Expand All @@ -44,30 +43,37 @@ export class AutoFollowPatternAdd extends PureComponent {
} = this.props;

return (
<EuiPageContent>
<AutoFollowPatternPageTitle
title={
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPattern.addTitle"
defaultMessage="Add auto-follow pattern"
/>
}
/>

<RemoteClustersProvider>
{({ isLoading, error, remoteClusters }) => {
if (isLoading) {
return (
<SectionLoading dataTestSubj="remoteClustersLoading">
<RemoteClustersProvider>
{({ isLoading, error, remoteClusters }) => {
if (isLoading) {
return (
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
color="subdued"
data-test-subj="remoteClustersLoading"
>
<SectionLoading>
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClustersMessage"
defaultMessage="Loading remote clusters…"
/>
</SectionLoading>
);
}
</EuiPageContent>
);
}

return (
<EuiPageContentBody restrictWidth style={{ width: '100%' }}>
<AutoFollowPatternPageTitle
title={
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPattern.addTitle"
defaultMessage="Add auto-follow pattern"
/>
}
/>

return (
<AutoFollowPatternForm
apiStatus={apiStatus}
apiError={apiError}
Expand All @@ -81,10 +87,10 @@ export class AutoFollowPatternAdd extends PureComponent {
/>
}
/>
);
}}
</RemoteClustersProvider>
</EuiPageContent>
</EuiPageContentBody>
);
}}
</RemoteClustersProvider>
);
}
}
Loading

0 comments on commit cc051ce

Please sign in to comment.