From 10e72162a0f91866572bf6e58fc6afbca4092656 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Tue, 15 Jun 2021 15:28:40 +0200 Subject: [PATCH] [Remote Clusters] Migrate to new page layout (#102042) * 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> --- .../list/remote_clusters_list.test.js | 4 + .../remote_cluster_page_title.js | 76 ++---- .../remote_cluster_add/remote_cluster_add.js | 10 +- .../remote_cluster_edit.js | 161 ++++++------ .../remote_cluster_list.js | 236 +++++++++--------- .../remote_cluster_table.js | 13 + .../store/actions/load_clusters.js | 13 +- .../remote_clusters/public/shared_imports.ts | 6 +- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 10 files changed, 245 insertions(+), 276 deletions(-) diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js b/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js index c91732019f79fe..209c224618f78e 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js @@ -181,6 +181,10 @@ describe('', () => { 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([ diff --git a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_page_title/remote_cluster_page_title.js b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_page_title/remote_cluster_page_title.js index 1706be8cfbe2f6..2b2e7338fb6b05 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_page_title/remote_cluster_page_title.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_page_title/remote_cluster_page_title.js @@ -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 }) => ( - - - - - - - -

{title}

- - - - - - - - - - - - {description ? ( - <> - - - - {description} - - - ) : null} - - - + <> + {title}} + rightSideItems={[ + + + , + ]} + description={description} + /> + + + ); RemoteClusterPageTitle.propTypes = { diff --git a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js index 124d2d42afb789..f62550ca5aa107 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js @@ -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'; @@ -58,11 +56,7 @@ export class RemoteClusterAdd extends PureComponent { const { isAddingCluster, addClusterError } = this.props; return ( - + <> - + ); } } diff --git a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js index 18ee2e2b3875dd..1f3388d06e54c6 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js @@ -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 = { @@ -92,56 +82,50 @@ export class RemoteClusterEdit extends Component { } }; - renderContent() { + render() { const { clusterName } = this.state; const { isLoading, cluster, isEditingCluster, getEditClusterError } = this.props; if (isLoading) { return ( - - - - - - - - - - - - - + + + + + ); } if (!cluster) { return ( - - + +

+ +

} - color="danger" - iconType="alert" - > - - - - - - + +

+ } + actions={ + @@ -149,10 +133,10 @@ export class RemoteClusterEdit extends Component { id="xpack.remoteClusters.edit.viewRemoteClustersButtonLabel" defaultMessage="View remote clusters" /> - - - - + + } + /> + ); } @@ -160,23 +144,50 @@ export class RemoteClusterEdit extends Component { if (isConfiguredByNode) { return ( - - - - - - - - - + + + + + } + body={ +

+ +

+ } + actions={ + + + + } + /> + ); } return ( <> + + } + /> + {hasDeprecatedProxySetting ? ( <> ) : null} + ); } - - render() { - return ( - - - } - /> - - {this.renderContent()} - - ); - } } diff --git a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js index ccf4c7568f7ad9..b94ae8f7edbc04 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js @@ -5,32 +5,24 @@ * 2.0. */ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButton, + EuiButtonEmpty, EuiEmptyPrompt, - EuiFlexGroup, - EuiFlexItem, EuiLoadingKibana, - EuiLoadingSpinner, EuiOverlayMask, - EuiPageBody, EuiPageContent, - EuiPageContentHeader, - EuiPageContentHeaderSection, EuiSpacer, - EuiText, - EuiTextColor, - EuiTitle, - EuiCallOut, + EuiPageHeader, } from '@elastic/eui'; +import { remoteClustersUrl } from '../../services/documentation'; import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public'; -import { extractQueryParams } from '../../../shared_imports'; +import { extractQueryParams, SectionLoading } from '../../../shared_imports'; import { setBreadcrumbs } from '../../services/breadcrumb'; import { RemoteClusterTable } from './remote_cluster_table'; @@ -82,41 +74,6 @@ export class RemoteClusterList extends Component { clearInterval(this.interval); } - getHeaderSection(isAuthorized) { - return ( - - - - -

- -

- - - - {isAuthorized && ( - - - - - - )} - - - - ); - } - renderBlockingAction() { const { isCopyingCluster, isRemovingCluster } = this.props; @@ -132,16 +89,28 @@ export class RemoteClusterList extends Component { } renderNoPermission() { - const title = i18n.translate('xpack.remoteClusters.remoteClusterList.noPermissionTitle', { - defaultMessage: 'Permission error', - }); return ( - - + + + + } + body={ +

+ +

+ } /> - + ); } @@ -150,80 +119,84 @@ export class RemoteClusterList extends Component { // handle unexpected error shapes in the API action. const { statusCode, error: errorString } = error.body; - const title = i18n.translate('xpack.remoteClusters.remoteClusterList.loadingErrorTitle', { - defaultMessage: 'Error loading remote clusters', - }); return ( - - {statusCode} {errorString} - + + + + + } + body={ +

+ {statusCode} {errorString} +

+ } + /> + ); } renderEmpty() { return ( - - - - } - body={ - + + + + + } + body={

- - } - actions={ - - - - } - /> + } + actions={ + + + + } + /> + ); } renderLoading() { return ( - - - - - - - - - - - - - + + + + ); } @@ -231,10 +204,35 @@ export class RemoteClusterList extends Component { const { clusters } = this.props; return ( - + <> + + } + rightSideItems={[ + + + , + ]} + /> + + + - + ); } @@ -242,7 +240,6 @@ export class RemoteClusterList extends Component { const { isLoading, clusters, clusterLoadError } = this.props; const isEmpty = !isLoading && !clusters.length; const isAuthorized = !clusterLoadError || clusterLoadError.status !== 403; - const isHeaderVisible = clusterLoadError || !isEmpty; let content; @@ -261,13 +258,10 @@ export class RemoteClusterList extends Component { } return ( - - - {isHeaderVisible && this.getHeaderSection(isAuthorized)} - {content} - {this.renderBlockingAction()} - - + <> + {content} + {this.renderBlockingAction()} + ); } } diff --git a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js index 3da8bb505fc543..1404e51d98a6d4 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js @@ -330,6 +330,19 @@ export class RemoteClusterTable extends Component { )} ) : undefined, + toolsRight: ( + + + + ), onChange: this.onSearch, box: { incremental: true, diff --git a/x-pack/plugins/remote_clusters/public/application/store/actions/load_clusters.js b/x-pack/plugins/remote_clusters/public/application/store/actions/load_clusters.js index 343237e70a120e..1a6459627c9a13 100644 --- a/x-pack/plugins/remote_clusters/public/application/store/actions/load_clusters.js +++ b/x-pack/plugins/remote_clusters/public/application/store/actions/load_clusters.js @@ -5,9 +5,7 @@ * 2.0. */ -import { i18n } from '@kbn/i18n'; - -import { loadClusters as sendLoadClustersRequest, showApiError } from '../../services'; +import { loadClusters as sendLoadClustersRequest } from '../../services'; import { LOAD_CLUSTERS_START, LOAD_CLUSTERS_SUCCESS, LOAD_CLUSTERS_FAILURE } from '../action_types'; @@ -20,17 +18,10 @@ export const loadClusters = () => async (dispatch) => { try { clusters = await sendLoadClustersRequest(); } catch (error) { - dispatch({ + return dispatch({ type: LOAD_CLUSTERS_FAILURE, payload: { error }, }); - - return showApiError( - error, - i18n.translate('xpack.remoteClusters.loadAction.errorTitle', { - defaultMessage: 'Error loading remote clusters', - }) - ); } dispatch({ diff --git a/x-pack/plugins/remote_clusters/public/shared_imports.ts b/x-pack/plugins/remote_clusters/public/shared_imports.ts index fd281753186665..c8d7f1d9f13f3d 100644 --- a/x-pack/plugins/remote_clusters/public/shared_imports.ts +++ b/x-pack/plugins/remote_clusters/public/shared_imports.ts @@ -5,4 +5,8 @@ * 2.0. */ -export { extractQueryParams, indices } from '../../../../src/plugins/es_ui_shared/public'; +export { + extractQueryParams, + indices, + SectionLoading, +} from '../../../../src/plugins/es_ui_shared/public'; diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 0fc57664fda1ba..75c33d33d96d54 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -17685,7 +17685,6 @@ "xpack.remoteClusters.form.errors.serverNameMissing": "サーバー名が必要です。", "xpack.remoteClusters.licenseCheckErrorMessage": "ライセンス確認失敗", "xpack.remoteClusters.listBreadcrumbTitle": "リモートクラスター", - "xpack.remoteClusters.loadAction.errorTitle": "リモートクラスターの読み込み中にエラーが発生", "xpack.remoteClusters.readDocsButtonLabel": "リモートクラスタードキュメント", "xpack.remoteClusters.refreshAction.errorTitle": "リモートクラスターの更新中にエラーが発生", "xpack.remoteClusters.remoteClusterForm.actions.savingText": "保存中", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index a03bab0917a159..0344374f996df0 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -17924,7 +17924,6 @@ "xpack.remoteClusters.form.errors.serverNameMissing": "服务器名必填。", "xpack.remoteClusters.licenseCheckErrorMessage": "许可证检查失败", "xpack.remoteClusters.listBreadcrumbTitle": "远程集群", - "xpack.remoteClusters.loadAction.errorTitle": "加载远程集群时出错", "xpack.remoteClusters.readDocsButtonLabel": "远程集群文档", "xpack.remoteClusters.refreshAction.errorTitle": "刷新远程集群时出错", "xpack.remoteClusters.remoteClusterForm.actions.savingText": "正在保存",