diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss index 140593cb17f6ec..231d0f6a0d8c55 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss @@ -1,3 +1,4 @@ @import 'pages/analytics_exploration/components/regression_exploration/index'; @import 'pages/analytics_management/components/analytics_list/index'; @import 'pages/analytics_management/components/create_analytics_button/index'; +@import 'pages/analytics_creation/components/index'; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss new file mode 100644 index 00000000000000..28d0928eb4d354 --- /dev/null +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss @@ -0,0 +1,3 @@ +.dfAnalyticsCreationWizard__card { + width: 300px; +} diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx index 183cbe084f9b35..babb5571052702 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx @@ -5,7 +5,7 @@ */ import React, { FC, Fragment } from 'react'; -import { EuiCard, EuiHorizontalRule, EuiIcon } from '@elastic/eui'; +import { EuiCard, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useNavigateToPath } from '../../../../../contexts/kibana'; @@ -18,10 +18,8 @@ export const BackToListPanel: FC = () => { return ( - } title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', { defaultMessage: 'Data Frame Analytics', diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/create_step.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/create_step.tsx index 8ad49b84134cb5..dc9f1bd586d9fe 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/create_step.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/create_step.tsx @@ -18,8 +18,7 @@ import { i18n } from '@kbn/i18n'; import { CreateAnalyticsFormProps } from '../../../analytics_management/hooks/use_create_analytics_form'; import { Messages } from '../shared'; import { ANALYTICS_STEPS } from '../../page'; -import { BackToListPanel } from '../back_to_list_panel'; -import { ProgressStats } from './progress_stats'; +import { CreateStepFooter } from '../create_step_footer'; interface Props extends CreateAnalyticsFormProps { step: ANALYTICS_STEPS; @@ -28,7 +27,7 @@ interface Props extends CreateAnalyticsFormProps { export const CreateStep: FC = ({ actions, state, step }) => { const { createAnalyticsJob, startAnalyticsJob } = actions; const { isAdvancedEditorValidJson, isJobCreated, isJobStarted, isValid, requestMessages } = state; - const { jobId } = state.form; + const { jobId, jobType } = state.form; const [checked, setChecked] = useState(true); const [showProgress, setShowProgress] = useState(false); @@ -86,8 +85,9 @@ export const CreateStep: FC = ({ actions, state, step }) => { )} - {isJobCreated === true && showProgress && } - {isJobCreated === true && } + {isJobCreated === true && ( + + )} ); }; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/progress_stats.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/create_step_footer.tsx similarity index 55% rename from x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/progress_stats.tsx rename to x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/create_step_footer.tsx index c87f0f4206feb6..93d88ebc0b5ac2 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/progress_stats.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/create_step_footer.tsx @@ -4,38 +4,43 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { FC, useState, useEffect } from 'react'; -import { - EuiCallOut, - EuiFlexGroup, - EuiFlexItem, - EuiProgress, - EuiSpacer, - EuiText, -} from '@elastic/eui'; +import React, { FC, useEffect, useState } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { useMlKibana } from '../../../../../contexts/kibana'; + import { getDataFrameAnalyticsProgressPhase, DATA_FRAME_TASK_STATE, } from '../../../analytics_management/components/analytics_list/common'; import { isGetDataFrameAnalyticsStatsResponseOk } from '../../../analytics_management/services/analytics_service/get_analytics'; +import { useMlKibana } from '../../../../../contexts/kibana'; import { ml } from '../../../../../services/ml_api_service'; -import { DataFrameAnalyticsId } from '../../../../common/analytics'; +import { BackToListPanel } from '../back_to_list_panel'; +import { ViewResultsPanel } from '../view_results_panel'; +import { ProgressStats } from './progress_stats'; +import { ANALYSIS_CONFIG_TYPE } from '../../../../common/analytics'; export const PROGRESS_REFRESH_INTERVAL_MS = 1000; -export const ProgressStats: FC<{ jobId: DataFrameAnalyticsId }> = ({ jobId }) => { +interface Props { + jobId: string; + jobType: ANALYSIS_CONFIG_TYPE; + showProgress: boolean; +} + +export interface AnalyticsProgressStats { + currentPhase: number; + progress: number; + totalPhases: number; +} + +export const CreateStepFooter: FC = ({ jobId, jobType, showProgress }) => { const [initialized, setInitialized] = useState(false); const [failedJobMessage, setFailedJobMessage] = useState(undefined); - const [currentProgress, setCurrentProgress] = useState< - | { - currentPhase: number; - progress: number; - totalPhases: number; - } - | undefined - >(undefined); + const [jobFinished, setJobFinished] = useState(false); + const [currentProgress, setCurrentProgress] = useState( + undefined + ); const { services: { notifications }, @@ -77,6 +82,7 @@ export const ProgressStats: FC<{ jobId: DataFrameAnalyticsId }> = ({ jobId }) => jobStats.state === DATA_FRAME_TASK_STATE.STOPPED ) { clearInterval(interval); + setJobFinished(true); } } else { clearInterval(interval); @@ -95,62 +101,26 @@ export const ProgressStats: FC<{ jobId: DataFrameAnalyticsId }> = ({ jobId }) => return () => clearInterval(interval); }, [initialized]); - if (currentProgress === undefined) return null; - return ( - <> - - {failedJobMessage !== undefined && ( - <> - -

{failedJobMessage}

-
- - - )} - - - {i18n.translate('xpack.ml.dataframe.analytics.create.analyticsProgressTitle', { - defaultMessage: 'Progress', - })} - - - - - - - - {i18n.translate('xpack.ml.dataframe.analytics.create.analyticsProgressPhaseTitle', { - defaultMessage: 'Phase', - })}{' '} - {currentProgress.currentPhase}/{currentProgress.totalPhases} - - - - - - - - {`${currentProgress.progress}%`} - - - + + + {showProgress && ( + + )} + + + + + + + + {jobFinished === true && ( + + + + )} + + + ); }; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/index.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/index.ts new file mode 100644 index 00000000000000..fc4e230ba10341 --- /dev/null +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { CreateStepFooter } from './create_step_footer'; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/progress_stats.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/progress_stats.tsx new file mode 100644 index 00000000000000..522bafa54a2707 --- /dev/null +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step_footer/progress_stats.tsx @@ -0,0 +1,83 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FC } from 'react'; +import { + EuiCallOut, + EuiFlexGroup, + EuiFlexItem, + EuiProgress, + EuiSpacer, + EuiText, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { AnalyticsProgressStats } from './create_step_footer'; + +interface Props { + currentProgress?: AnalyticsProgressStats; + failedJobMessage: string | undefined; +} + +export const ProgressStats: FC = ({ currentProgress, failedJobMessage }) => { + if (currentProgress === undefined) return null; + + return ( + <> + + {failedJobMessage !== undefined && ( + <> + +

{failedJobMessage}

+
+ + + )} + + + {i18n.translate('xpack.ml.dataframe.analytics.create.analyticsProgressTitle', { + defaultMessage: 'Progress', + })} + + + + + + + + {i18n.translate('xpack.ml.dataframe.analytics.create.analyticsProgressPhaseTitle', { + defaultMessage: 'Phase', + })}{' '} + {currentProgress.currentPhase}/{currentProgress.totalPhases} + + + + + + + + {`${currentProgress.progress}%`} + + + + ); +}; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/index.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/index.ts new file mode 100644 index 00000000000000..ef3c0cce38652b --- /dev/null +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { ViewResultsPanel } from './view_results_panel'; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx new file mode 100644 index 00000000000000..13706eb548ec8a --- /dev/null +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx @@ -0,0 +1,46 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FC, Fragment } from 'react'; +import { EuiCard, EuiIcon } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { useNavigateToPath } from '../../../../../contexts/kibana'; +import { getResultsUrl } from '../../../analytics_management/components/analytics_list/common'; +import { ANALYSIS_CONFIG_TYPE } from '../../../../common/analytics'; + +interface Props { + jobId: string; + analysisType: ANALYSIS_CONFIG_TYPE; +} + +export const ViewResultsPanel: FC = ({ jobId, analysisType }) => { + const navigateToPath = useNavigateToPath(); + + const redirectToAnalyticsManagementPage = async () => { + const path = getResultsUrl(jobId, analysisType); + await navigateToPath(path); + }; + + return ( + + } + title={i18n.translate('xpack.ml.dataframe.analytics.create.viewResultsCardTitle', { + defaultMessage: 'View Results', + })} + description={i18n.translate( + 'xpack.ml.dataframe.analytics.create.viewResultsCardDescription', + { + defaultMessage: 'View results for the analytics job.', + } + )} + onClick={redirectToAnalyticsManagementPage} + data-test-subj="analyticsWizardViewResultsCard" + /> + + ); +}; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts index e2d9ecccf06266..cc52138d7c7b73 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts @@ -130,6 +130,6 @@ export function isCompletedAnalyticsJob(stats: DataFrameAnalyticsStats) { return stats.state === DATA_FRAME_TASK_STATE.STOPPED && progress === 100; } -export function getResultsUrl(jobId: string, analysisType: string) { +export function getResultsUrl(jobId: string, analysisType: ANALYSIS_CONFIG_TYPE | string) { return `#/data_frame_analytics/exploration?_g=(ml:(jobId:${jobId},analysisType:${analysisType}))`; }