From 8e7741baf356dd4f8cebed0be11d2374787d4735 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Fri, 25 Jun 2021 19:03:09 -0400 Subject: [PATCH] [ML] Converts management app jobs list pages to new layout (#103117) (#103408) * [ML] Converts management app jobs list pages to new layout * i[ML] Fix translations * [ML] Set acccessDenied default state back to false * [ML] Remove headers for error states and text updates following review Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Pete Harverson --- .../public/application/access_denied/page.tsx | 63 ++++------- .../components/access_denied_page.tsx | 80 +++++-------- .../components/insufficient_license_page.tsx | 104 +++++++---------- .../jobs_list_page/jobs_list_page.tsx | 106 ++++++++---------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 6 files changed, 140 insertions(+), 215 deletions(-) diff --git a/x-pack/plugins/ml/public/application/access_denied/page.tsx b/x-pack/plugins/ml/public/application/access_denied/page.tsx index fa535eb1bd53a4..bc0d17e96fe714 100644 --- a/x-pack/plugins/ml/public/application/access_denied/page.tsx +++ b/x-pack/plugins/ml/public/application/access_denied/page.tsx @@ -5,21 +5,11 @@ * 2.0. */ -import React, { Fragment } from 'react'; +import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { i18n } from '@kbn/i18n'; -import { - EuiCallOut, - EuiPage, - EuiPageBody, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiSpacer, - EuiText, - EuiTitle, -} from '@elastic/eui'; + +import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiSpacer } from '@elastic/eui'; import { NavigationMenu } from '../components/navigation_menu'; import { HelpMenu } from '../components/help_menu'; import { useMlKibana } from '../contexts/kibana'; @@ -30,44 +20,35 @@ export const Page = () => { } = useMlKibana(); const helpLink = docLinks.links.ml.guide; return ( - + <> - - - - - -

+ + + + + -

- - - - - - - + + } + body={

- - - - - + } + /> + + + - + ); }; diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx b/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx index 0d785f1918b0b5..4858db1ee55bce 100644 --- a/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx +++ b/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx @@ -5,59 +5,39 @@ * 2.0. */ -import React, { Fragment } from 'react'; +import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { i18n } from '@kbn/i18n'; -import { - EuiCallOut, - EuiPage, - EuiPageBody, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiSpacer, - EuiText, - EuiTitle, -} from '@elastic/eui'; +import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui'; export const AccessDeniedPage = () => ( - - - - - - -

- -

- - - - - - - -

- -

- - - - - - + <> + + + + + } + body={ +

+ +

+ } + /> + + ); diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx b/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx index 22951e950045b8..6d0c3639d939c8 100644 --- a/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx +++ b/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx @@ -5,78 +5,54 @@ * 2.0. */ -import React, { FC, Fragment } from 'react'; +import React, { FC } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { i18n } from '@kbn/i18n'; import { CoreStart } from 'kibana/public'; -import { - EuiCallOut, - EuiPage, - EuiPageBody, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiSpacer, - EuiText, - EuiTitle, - EuiLink, -} from '@elastic/eui'; +import { EuiEmptyPrompt, EuiLink, EuiPageContent } from '@elastic/eui'; interface Props { basePath: CoreStart['http']['basePath']; } export const InsufficientLicensePage: FC = ({ basePath }) => ( - - - - - - -

- -

- - - - - - - -

- - - - ), - }} - /> -

- - - - - - + <> + + + + + } + body={ +

+ + + + ), + }} + /> +

+ } + /> + + ); diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx b/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx index ca62ef9aaf0af1..77f0e6123dfad2 100644 --- a/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx +++ b/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx @@ -8,18 +8,15 @@ import React, { useEffect, useState, Fragment, FC, useMemo, useCallback } from 'react'; import { Router } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import { CoreStart } from 'kibana/public'; import { EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, - EuiPageContent, EuiPageContentBody, + EuiPageHeader, EuiSpacer, EuiTabbedContent, - EuiText, - EuiTitle, EuiTabbedContentTab, } from '@elastic/eui'; @@ -176,6 +173,19 @@ export const JobsListPage: FC<{ defaultMessage: 'Analytics jobs docs', }); + const docsLink = ( + + {currentTabId === 'anomaly_detection_jobs' ? anomalyDetectionDocsLabel : analyticsDocsLabel} + + ); + function renderTabs() { return ( - + } + description={ + + } + rightSideItems={[docsLink]} + bottomBorder + /> + + + + - - - -

- {i18n.translate('xpack.ml.management.jobsList.jobsListTitle', { - defaultMessage: 'Machine Learning Jobs', - })} -

- - - - {currentTabId === 'anomaly_detection_jobs' - ? anomalyDetectionDocsLabel - : analyticsDocsLabel} - - - - - - - - {i18n.translate('xpack.ml.management.jobsList.jobsListTagline', { - defaultMessage: 'View machine learning analytics and anomaly detection jobs.', - })} - - - - - {spacesEnabled && ( - <> - setShowSyncFlyout(true)}> - {i18n.translate('xpack.ml.management.jobsList.syncFlyoutButton', { - defaultMessage: 'Synchronize saved objects', - })} - - {showSyncFlyout && } - - - )} - {renderTabs()} - - + {spacesEnabled && ( + <> + setShowSyncFlyout(true)}> + {i18n.translate('xpack.ml.management.jobsList.syncFlyoutButton', { + defaultMessage: 'Synchronize saved objects', + })} + + {showSyncFlyout && } + + + )} + {renderTabs()} + diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index fe3be31feac7dc..52e956c86535c2 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -13673,7 +13673,6 @@ "xpack.maps.visTypeAlias.description": "マップを作成し、複数のレイヤーとインデックスを使用して、スタイルを設定します。", "xpack.maps.visTypeAlias.title": "マップ", "xpack.ml.accessDenied.description": "ML プラグインへのアクセスパーミッションがありません", - "xpack.ml.accessDenied.label": "パーミッションがありません", "xpack.ml.accessDeniedLabel": "アクセスが拒否されました", "xpack.ml.accessDeniedTabLabel": "アクセス拒否", "xpack.ml.actions.applyEntityFieldsFiltersTitle": "値でフィルター", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index b8889997f24101..ede71840e684d5 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -13851,7 +13851,6 @@ "xpack.maps.visTypeAlias.description": "使用多个图层和索引创建地图并提供样式。", "xpack.maps.visTypeAlias.title": "Maps", "xpack.ml.accessDenied.description": "您无权访问 ML 插件", - "xpack.ml.accessDenied.label": "权限不足", "xpack.ml.accessDeniedLabel": "访问被拒绝", "xpack.ml.accessDeniedTabLabel": "访问被拒绝", "xpack.ml.actions.applyEntityFieldsFiltersTitle": "筛留值",