diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx index d3ddc5999e7d3..47e95ccf00672 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx @@ -37,7 +37,6 @@ import { getAnalyticsFactory } from '../../services/analytics_service'; import { getColumns } from './columns'; import { ExpandedRow } from './expanded_row'; import { ProgressBar, AnalyticsTable } from './analytics_table'; -import { useRefreshInterval } from './use_refresh_interval'; function getItemIdToExpandedRowMap( itemIds: DataFrameAnalyticsId[], @@ -65,12 +64,15 @@ function stringMatch(str: string | undefined, substr: string) { interface Props { isManagementTable?: boolean; + blockRefresh?: boolean; } // isManagementTable - for use in Kibana managagement ML section -export const DataFrameAnalyticsList: FC = ({ isManagementTable }) => { +export const DataFrameAnalyticsList: FC = ({ + isManagementTable = false, + blockRefresh = false, +}) => { const [isInitialized, setIsInitialized] = useState(false); const [isLoading, setIsLoading] = useState(false); - const [blockRefresh, setBlockRefresh] = useState(false); const [filterActive, setFilterActive] = useState(false); const [analytics, setAnalytics] = useState([]); @@ -101,8 +103,6 @@ export const DataFrameAnalyticsList: FC = ({ isManagementTable }) => { isLoading: setIsLoading, onRefresh: () => getAnalytics(true), }); - // Call useRefreshInterval() after the subscription above is set up. - useRefreshInterval(setBlockRefresh); const onQueryChange = ({ query, error }: { query: Query; error: any }) => { if (error) { diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx index 4362a0f8d7106..63def83dd6705 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx @@ -105,6 +105,7 @@ export const getColumns = ( name: 'ID', sortable: true, truncateText: true, + width: isManagementTable === true ? '20%' : undefined, }, // Description is not supported yet by API /* @@ -124,6 +125,7 @@ export const getColumns = ( }), sortable: true, truncateText: true, + width: isManagementTable === true ? '25%' : undefined, }, { field: DataFrameAnalyticsListColumn.configDestIndex, @@ -132,6 +134,7 @@ export const getColumns = ( }), sortable: true, truncateText: true, + width: isManagementTable === true ? '20%' : undefined, }, { name: i18n.translate('xpack.ml.dataframe.analyticsList.status', { defaultMessage: 'Status' }), @@ -208,7 +211,14 @@ export const getColumns = ( }, ]; - if (isManagementTable === false) { + if (isManagementTable === true) { + columns.push({ + name: i18n.translate('xpack.ml.jobsList.analyticsSpacesLabel', { + defaultMessage: 'Spaces', + }), + render: () => {'all'}, + }); + } else { columns.push({ name: i18n.translate('xpack.ml.dataframe.analyticsList.tableActionLabel', { defaultMessage: 'Actions', diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/refresh_analytics_list_button/refresh_analytics_list_button.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/refresh_analytics_list_button/refresh_analytics_list_button.tsx index d42677f178228..6707dadc04a69 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/refresh_analytics_list_button/refresh_analytics_list_button.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/refresh_analytics_list_button/refresh_analytics_list_button.tsx @@ -4,27 +4,25 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { useRefreshAnalyticsList } from '../../../../common'; -interface RefreshAnalyticsListButtonProps { - isLoading: boolean; - onClick(): void; -} -export const RefreshAnalyticsListButton: FC = ({ - onClick, - isLoading, -}) => ( - - - -); +export const RefreshAnalyticsListButton: FC = () => { + const [isLoading, setIsLoading] = useState(false); + const { refresh } = useRefreshAnalyticsList({ isLoading: setIsLoading }); + return ( + + + + ); +}; diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/page.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/page.tsx index cf56d42782224..f84b22276ce69 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/page.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/page.tsx @@ -24,14 +24,15 @@ import { } from '@elastic/eui'; import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu'; -import { useRefreshAnalyticsList } from '../../common'; import { CreateAnalyticsButton } from './components/create_analytics_button'; import { DataFrameAnalyticsList } from './components/analytics_list'; import { RefreshAnalyticsListButton } from './components/refresh_analytics_list_button'; +import { useRefreshInterval } from './components/analytics_list/use_refresh_interval'; export const Page: FC = () => { - const [isLoading, setIsLoading] = useState(false); - const { refresh } = useRefreshAnalyticsList({ isLoading: setIsLoading }); + const [blockRefresh, setBlockRefresh] = useState(false); + + useRefreshInterval(setBlockRefresh); return ( @@ -68,7 +69,7 @@ export const Page: FC = () => { {/* grow={false} fixes IE11 issue with nested flex */} - {} + {/* grow={false} fixes IE11 issue with nested flex */} @@ -80,7 +81,7 @@ export const Page: FC = () => { - + diff --git a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_analytics_table.scss b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_analytics_table.scss index ce53c33ca9ece..1151599a526e4 100644 --- a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_analytics_table.scss +++ b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_analytics_table.scss @@ -26,3 +26,11 @@ .mlTaskStateBadge { max-width: 100px; } + +.mlKibanaManagement__analyticsSpacer { + clear: both; +} + +.mlKibanaManagement__analyticsRefreshButton { + float: right; +} diff --git a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx index 6bdfa64833a39..181f66de45b4c 100644 --- a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx +++ b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx @@ -4,29 +4,38 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Fragment, FC } from 'react'; +import React, { Fragment, FC, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { I18nContext } from 'ui/i18n'; import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, EuiPageContent, EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, EuiSpacer, EuiTabbedContent, + EuiText, EuiTitle, } from '@elastic/eui'; +import { metadata } from 'ui/metadata'; // @ts-ignore undeclared module import { JobsListView } from '../../../../jobs/jobs_list/components/jobs_list_view'; import { DataFrameAnalyticsList } from '../../../../data_frame_analytics/pages/analytics_management/components/analytics_list'; +import { RefreshAnalyticsListButton } from '../../../../data_frame_analytics/pages/analytics_management/components/refresh_analytics_list_button'; interface Props { isMlEnabledInSpace: boolean; } +interface Tab { + id: string; + name: string; + content: any; +} -export const JobsListPage: FC = ({ isMlEnabledInSpace }) => { - const tabs = [ +function getTabs(isMlEnabledInSpace: boolean): Tab[] { + return [ { id: 'anomaly_detection_jobs', name: i18n.translate('xpack.ml.management.jobsList.anomalyDetectionTab', { @@ -47,30 +56,88 @@ export const JobsListPage: FC = ({ isMlEnabledInSpace }) => { content: ( + + + + ), }, ]; +} + +export const JobsListPage: FC = ({ isMlEnabledInSpace }) => { + const tabs = getTabs(isMlEnabledInSpace); + const [currentTabId, setCurrentTabId] = useState(tabs[0].id); + + // metadata.branch corresponds to the version used in documentation links. + const anomalyDetectionJobsUrl = `https://www.elastic.co/guide/en/elastic-stack-overview/${metadata.branch}/ml-jobs.html`; + const anomalyJobsUrl = `https://www.elastic.co/guide/en/elastic-stack-overview/${metadata.branch}/ml-dfanalytics.html`; + + const anomalyDetectionDocsLabel = i18n.translate( + 'xpack.ml.management.jobsList.anomalyDetectionDocsLabel', + { + defaultMessage: 'Anomaly detection jobs docs', + } + ); + const analyticsDocsLabel = i18n.translate('xpack.ml.management.jobsList.analyticsDocsLabel', { + defaultMessage: 'Analytics jobs docs', + }); function renderTabs() { - return ; + return ( + { + setCurrentTabId(id); + }} + size="s" + tabs={getTabs(isMlEnabledInSpace)} + initialSelectedTab={tabs[0]} + /> + ); } return ( - - - -

+ + + +

{i18n.translate('xpack.ml.management.jobsList.jobsListTitle', { - defaultMessage: 'Jobs', + 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.', + })} + + + {renderTabs()}