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 2029c6252acbfa3..6b5997c599f9634 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 @@ -4,11 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Fragment, FC, useState, useEffect } from 'react'; +import React, { Fragment, FC, useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiButtonEmpty, EuiCallOut, EuiEmptyPrompt } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiCallOut, + EuiEmptyPrompt, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, +} from '@elastic/eui'; import { DataFrameAnalyticsId, useRefreshAnalyticsList } from '../../../../common'; import { checkPermission } from '../../../../../privilege/check_privilege'; @@ -22,7 +29,6 @@ import { Query, Clause, } from './common'; -import { ActionDispatchers } from '../../hooks/use_create_analytics_form/actions'; import { getAnalyticsFactory } from '../../services/analytics_service'; import { getColumns } from './columns'; import { ExpandedRow } from './expanded_row'; @@ -33,7 +39,9 @@ import { SortDirection, SORT_DIRECTION, } from '../../../../../components/ml_in_memory_table'; -import { AnalyticStatsBarStats } from '../../../../../components/stats_bar'; +import { AnalyticStatsBarStats, StatsBar } from '../../../../../components/stats_bar'; +import { RefreshAnalyticsListButton } from '../refresh_analytics_list_button'; +import { CreateAnalyticsButton } from '../create_analytics_button'; function getItemIdToExpandedRowMap( itemIds: DataFrameAnalyticsId[], @@ -60,19 +68,16 @@ function stringMatch(str: string | undefined, substr: string) { } interface Props { - isManagementTable?: boolean; + allowCreate?: boolean; isMlEnabledInSpace?: boolean; blockRefresh?: boolean; - openCreateJobModal?: ActionDispatchers['openModal']; - onJobStatsChange?: (stats: AnalyticStatsBarStats | undefined) => void; + createAnalyticsForm?: any; } -// isManagementTable - for use in Kibana managagement ML section export const DataFrameAnalyticsList: FC = ({ - isManagementTable = false, + allowCreate = true, isMlEnabledInSpace = true, blockRefresh = false, - openCreateJobModal, - onJobStatsChange, + createAnalyticsForm, }) => { const [isInitialized, setIsInitialized] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -106,12 +111,6 @@ export const DataFrameAnalyticsList: FC = ({ blockRefresh ); - useEffect(() => { - if (onJobStatsChange) { - onJobStatsChange(analyticsStats); - } - }, [analyticsStats]); - // Subscribe to the refresh observable to trigger reloading the analytics list. useRefreshAnalyticsList({ isLoading: setIsLoading, @@ -227,9 +226,12 @@ export const DataFrameAnalyticsList: FC = ({ } actions={ - !isManagementTable && openCreateJobModal !== undefined + !allowCreate ? [ - + {i18n.translate('xpack.ml.dataFrame.analyticsList.emptyPromptButtonText', { defaultMessage: 'Create your first data frame analytics job', })} @@ -246,7 +248,7 @@ export const DataFrameAnalyticsList: FC = ({ const columns = getColumns( expandedRowItemIds, setExpandedRowItemIds, - isManagementTable, + allowCreate, isMlEnabledInSpace ); @@ -324,7 +326,28 @@ export const DataFrameAnalyticsList: FC = ({ return ( - + + + {analyticsStats && ( + + + + )} + + + + + + + {allowCreate && ( + + + + )} + + + + { const [blockRefresh, setBlockRefresh] = useState(false); - const [stats, setStats] = useState( - {} as AnalyticStatsBarStats - ); useRefreshInterval(setBlockRefresh); @@ -46,8 +35,8 @@ export const Page: FC = () => { - - + +

{ />

- {stats && ( -
- -
- )} -
- - - {/* grow={false} fixes IE11 issue with nested flex */} - - - - {/* grow={false} fixes IE11 issue with nested flex */} - - - - - -
- - - - { - setStats(analyticsStats); - }} - /> - - + + +
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_jobs_list.scss b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_jobs_list.scss index d94bb5d67827998..824f764de390206 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_jobs_list.scss +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_jobs_list.scss @@ -1,7 +1,3 @@ -.job-management { - padding: $euiSizeL; -} - .new-job-button-container { float: right; -} \ No newline at end of file +} diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js index 315e66d00d041a7..2ea7e76bed0753c 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js @@ -4,11 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ - +import React, { Component } from 'react'; import { timefilter } from 'ui/timefilter'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { ml } from 'plugins/ml/services/ml_api_service'; -import { loadFullJob, filterJobs, checkForAutoStartDatafeed } from '../utils'; +import { checkForAutoStartDatafeed, filterJobs, loadFullJob } from '../utils'; import { JobsList } from '../jobs_list'; import { JobDetails } from '../job_details'; import { JobFilterBar } from '../job_filter_bar'; @@ -26,22 +27,10 @@ import { isEqual } from 'lodash'; import { DEFAULT_REFRESH_INTERVAL_MS, - MINIMUM_REFRESH_INTERVAL_MS, DELETING_JOBS_REFRESH_INTERVAL_MS, + MINIMUM_REFRESH_INTERVAL_MS, } from '../../../../../common/constants/jobs_list'; -import React, { - Component -} from 'react'; - -import { - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiTitle, -} from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; - let jobsRefreshInterval = null; let deletingJobsRefreshTimeout = null; @@ -446,14 +435,6 @@ export class JobsListView extends Component { return (
- -

- -

-
@@ -473,7 +454,7 @@ export class JobsListView extends Component { isRefreshing={isRefreshing} /> - {isManagementTable === undefined && + {!isManagementTable && } diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js index 188048d2d2f05fa..35fab4b06fa5641 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js @@ -5,6 +5,8 @@ */ import React, { Fragment } from 'react'; +import { EuiTitle } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { NavigationMenu } from '../../components/navigation_menu'; @@ -13,6 +15,14 @@ import { JobsListView } from './components/jobs_list_view'; export const JobsPage = (props) => ( + +

+ +

+
); 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 99e0a240d32d149..41d68acb80dada8 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 @@ -23,7 +23,6 @@ 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; @@ -56,14 +55,7 @@ function getTabs(isMlEnabledInSpace: boolean): Tab[] { content: ( - - - - - + ), },