Skip to content

Commit ed1a6ae

Browse files
sabarasabasabarasaba
committed
wip: start migrating views from ccr
1 parent 7f62553 commit ed1a6ae

10 files changed

Lines changed: 250 additions & 317 deletions

File tree

‎x-pack/plugins/cross_cluster_replication/public/app/app.tsx‎

Lines changed: 20 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,19 @@
55
* 2.0.
66
*/
77

8-
import React, { Component, Fragment } from 'react';
8+
import React, { Component } from 'react';
99
import { Route, Switch, Router, Redirect } from 'react-router-dom';
1010
import { ScopedHistory, ApplicationStart } from 'kibana/public';
1111
import { i18n } from '@kbn/i18n';
1212
import { FormattedMessage } from '@kbn/i18n/react';
1313

14-
import {
15-
EuiEmptyPrompt,
16-
EuiFlexGroup,
17-
EuiFlexItem,
18-
EuiLoadingSpinner,
19-
EuiPageContent,
20-
EuiSpacer,
21-
EuiTitle,
22-
} from '@elastic/eui';
14+
import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';
2315

2416
import { getFatalErrors } from './services/notifications';
25-
import { SectionError } from './components';
2617
import { routing } from './services/routing';
2718
// @ts-ignore
2819
import { loadPermissions } from './services/api';
20+
import { SectionLoading, PageError } from '../shared_imports';
2921

3022
// @ts-ignore
3123
import {
@@ -119,48 +111,34 @@ class AppComponent extends Component<AppProps, AppState> {
119111

120112
if (isFetchingPermissions) {
121113
return (
122-
<EuiPageContent horizontalPosition="center">
123-
<EuiFlexGroup alignItems="center" gutterSize="m">
124-
<EuiFlexItem grow={false}>
125-
<EuiLoadingSpinner size="l" />
126-
</EuiFlexItem>
127-
128-
<EuiFlexItem>
129-
<EuiTitle size="s">
130-
<h2>
131-
<FormattedMessage
132-
id="xpack.crossClusterReplication.app.permissionCheckTitle"
133-
defaultMessage="Checking permissions…"
134-
/>
135-
</h2>
136-
</EuiTitle>
137-
</EuiFlexItem>
138-
</EuiFlexGroup>
114+
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
115+
<SectionLoading>
116+
<FormattedMessage
117+
id="xpack.crossClusterReplication.app.permissionCheckTitle"
118+
defaultMessage="Checking permissions…"
119+
/>
120+
</SectionLoading>
139121
</EuiPageContent>
140122
);
141123
}
142124

143125
if (fetchPermissionError) {
144126
return (
145-
<Fragment>
146-
<SectionError
147-
title={
148-
<FormattedMessage
149-
id="xpack.crossClusterReplication.app.permissionCheckErrorTitle"
150-
defaultMessage="Error checking permissions"
151-
/>
152-
}
153-
error={fetchPermissionError}
154-
/>
155-
156-
<EuiSpacer size="m" />
157-
</Fragment>
127+
<PageError
128+
title={
129+
<FormattedMessage
130+
id="xpack.crossClusterReplication.app.permissionCheckErrorTitle"
131+
defaultMessage="Error checking permissions"
132+
/>
133+
}
134+
error={fetchPermissionError}
135+
/>
158136
);
159137
}
160138

161139
if (!hasPermission) {
162140
return (
163-
<EuiPageContent horizontalPosition="center">
141+
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
164142
<EuiEmptyPrompt
165143
iconType="securityApp"
166144
title={

‎x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_page_title.js‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,42 @@
55
* 2.0.
66
*/
77

8-
import React, { Fragment } from 'react';
8+
import React from 'react';
99
import PropTypes from 'prop-types';
1010
import { FormattedMessage } from '@kbn/i18n/react';
1111

1212
import {
13-
EuiButtonEmpty,
14-
EuiFlexGroup,
15-
EuiFlexItem,
16-
EuiPageContentHeader,
1713
EuiSpacer,
18-
EuiTitle,
14+
EuiPageHeader,
15+
EuiButtonEmpty,
1916
} from '@elastic/eui';
2017

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

2320
export const AutoFollowPatternPageTitle = ({ title }) => (
24-
<Fragment>
25-
<EuiSpacer size="xs" />
26-
27-
<EuiPageContentHeader data-test-subj="pageTitle">
28-
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
29-
<EuiFlexItem grow={false}>
30-
<EuiTitle size="l">
31-
<h1>{title}</h1>
32-
</EuiTitle>
33-
</EuiFlexItem>
21+
<>
22+
<EuiPageHeader
23+
bottomBorder
24+
pageTitle={<span data-test-subj="pageTitle">{title}</span>}
25+
rightSideItems={[
26+
<EuiButtonEmpty
27+
size="s"
28+
flush="right"
29+
href={documentationLinks.apis.createAutoFollowPattern}
30+
target="_blank"
31+
iconType="help"
32+
data-test-subj="docsButton"
33+
>
34+
<FormattedMessage
35+
id="xpack.crossClusterReplication.readDocsAutoFollowPatternButtonLabel"
36+
defaultMessage="Auto-follow pattern docs"
37+
/>
38+
</EuiButtonEmpty>,
39+
]}
40+
/>
3441

35-
<EuiFlexItem grow={false}>
36-
<EuiButtonEmpty
37-
size="s"
38-
flush="right"
39-
href={documentationLinks.apis.createAutoFollowPattern}
40-
target="_blank"
41-
iconType="help"
42-
data-test-subj="docsButton"
43-
>
44-
<FormattedMessage
45-
id="xpack.crossClusterReplication.readDocsAutoFollowPatternButtonLabel"
46-
defaultMessage="Auto-follow pattern docs"
47-
/>
48-
</EuiButtonEmpty>
49-
</EuiFlexItem>
50-
</EuiFlexGroup>
51-
</EuiPageContentHeader>
52-
</Fragment>
42+
<EuiSpacer size="l" />
43+
</>
5344
);
5445

5546
AutoFollowPatternPageTitle.propTypes = {

‎x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_page_title.js‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,42 @@
55
* 2.0.
66
*/
77

8-
import React, { Fragment } from 'react';
8+
import React from 'react';
99
import PropTypes from 'prop-types';
1010
import { FormattedMessage } from '@kbn/i18n/react';
1111

1212
import {
13-
EuiButtonEmpty,
14-
EuiFlexGroup,
15-
EuiFlexItem,
16-
EuiPageContentHeader,
1713
EuiSpacer,
18-
EuiTitle,
14+
EuiPageHeader,
15+
EuiButtonEmpty,
1916
} from '@elastic/eui';
2017

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

2320
export const FollowerIndexPageTitle = ({ title }) => (
24-
<Fragment>
25-
<EuiSpacer size="xs" />
26-
27-
<EuiPageContentHeader data-test-subj="pageTitle">
28-
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
29-
<EuiFlexItem grow={false}>
30-
<EuiTitle size="l">
31-
<h1>{title}</h1>
32-
</EuiTitle>
33-
</EuiFlexItem>
21+
<>
22+
<EuiPageHeader
23+
bottomBorder
24+
pageTitle={<span data-test-subj="pageTitle">{title}</span>}
25+
rightSideItems={[
26+
<EuiButtonEmpty
27+
size="s"
28+
flush="right"
29+
href={documentationLinks.apis.createFollower}
30+
target="_blank"
31+
iconType="help"
32+
data-test-subj="docsButton"
33+
>
34+
<FormattedMessage
35+
id="xpack.crossClusterReplication.readDocsFollowerIndexButtonLabel"
36+
defaultMessage="Follower index docs"
37+
/>
38+
</EuiButtonEmpty>,
39+
]}
40+
/>
3441

35-
<EuiFlexItem grow={false}>
36-
<EuiButtonEmpty
37-
size="s"
38-
flush="right"
39-
href={documentationLinks.apis.createFollower}
40-
target="_blank"
41-
iconType="help"
42-
data-test-subj="docsButton"
43-
>
44-
<FormattedMessage
45-
id="xpack.crossClusterReplication.readDocsFollowerIndexButtonLabel"
46-
defaultMessage="Follower index docs"
47-
/>
48-
</EuiButtonEmpty>
49-
</EuiFlexItem>
50-
</EuiFlexGroup>
51-
</EuiPageContentHeader>
52-
</Fragment>
42+
<EuiSpacer size="l" />
43+
</>
5344
);
5445

5546
FollowerIndexPageTitle.propTypes = {

‎x-pack/plugins/cross_cluster_replication/public/app/components/section_error.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import React, { Fragment } from 'react';
99
import { EuiCallOut, EuiSpacer } from '@elastic/eui';
1010

11+
// TODO: is this file still used?
1112
export function SectionError(props) {
1213
const { title, error, ...rest } = props;
1314
const data = error.body ? error.body : error;

‎x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
import React, { PureComponent } from 'react';
99
import PropTypes from 'prop-types';
1010
import { FormattedMessage } from '@kbn/i18n/react';
11+
import { EuiPageContentBody } from '@elastic/eui';
1112

12-
import { EuiPageContent } from '@elastic/eui';
1313

1414
import { listBreadcrumb, addBreadcrumb, setBreadcrumbs } from '../../services/breadcrumbs';
1515
import {
1616
AutoFollowPatternForm,
1717
AutoFollowPatternPageTitle,
1818
RemoteClustersProvider,
19-
SectionLoading,
2019
} from '../../components';
20+
import { SectionLoading } from '../../../shared_imports';
2121

2222
export class AutoFollowPatternAdd extends PureComponent {
2323
static propTypes = {
@@ -44,7 +44,7 @@ export class AutoFollowPatternAdd extends PureComponent {
4444
} = this.props;
4545

4646
return (
47-
<EuiPageContent>
47+
<EuiPageContentBody restrictWidth style={{ width: '100%' }}>
4848
<AutoFollowPatternPageTitle
4949
title={
5050
<FormattedMessage
@@ -84,7 +84,7 @@ export class AutoFollowPatternAdd extends PureComponent {
8484
);
8585
}}
8686
</RemoteClustersProvider>
87-
</EuiPageContent>
87+
</EuiPageContentBody>
8888
);
8989
}
9090
}

‎x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,15 @@
88
import React, { PureComponent } from 'react';
99
import PropTypes from 'prop-types';
1010
import { FormattedMessage } from '@kbn/i18n/react';
11-
12-
import { EuiPageContent } from '@elastic/eui';
11+
import { EuiPageContentBody } from '@elastic/eui';
1312

1413
import { setBreadcrumbs, listBreadcrumb, addBreadcrumb } from '../../services/breadcrumbs';
1514
import {
1615
FollowerIndexForm,
1716
FollowerIndexPageTitle,
1817
RemoteClustersProvider,
19-
SectionLoading,
2018
} from '../../components';
19+
import { SectionLoading } from '../../../shared_imports';
2120

2221
export class FollowerIndexAdd extends PureComponent {
2322
static propTypes = {
@@ -45,7 +44,7 @@ export class FollowerIndexAdd extends PureComponent {
4544
} = this.props;
4645

4746
return (
48-
<EuiPageContent horizontalPosition="center" className="ccrPageContent">
47+
<EuiPageContentBody restrictWidth style={{ width: '100%' }}>
4948
<FollowerIndexPageTitle
5049
title={
5150
<FormattedMessage
@@ -86,7 +85,7 @@ export class FollowerIndexAdd extends PureComponent {
8685
);
8786
}}
8887
</RemoteClustersProvider>
89-
</EuiPageContent>
88+
</EuiPageContentBody>
9089
);
9190
}
9291
}

0 commit comments

Comments
 (0)