From c730d0d4804b67102f607ee6ead15b3f595e17b3 Mon Sep 17 00:00:00 2001 From: Dmitrii Arnautov Date: Sun, 6 Oct 2019 21:13:35 +0200 Subject: [PATCH] [ML] components split --- .../recognize/components/kibana_objects.tsx | 83 ++++++++++ .../recognize/components/module_jobs.tsx | 102 ++++++++++++ .../jobs/new_job_new/recognize/page.tsx | 152 ++---------------- 3 files changed, 199 insertions(+), 138 deletions(-) create mode 100644 x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/kibana_objects.tsx create mode 100644 x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/kibana_objects.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/kibana_objects.tsx new file mode 100644 index 00000000000000..8758d82af04a41 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/kibana_objects.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, memo } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiLoadingSpinner, + EuiText, + EuiTitle, + EuiListGroup, + EuiListGroupItem, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { KibanaObjectUi } from '../page'; + +export interface KibanaObjectItemProps { + objectType: string; + kibanaObjects: KibanaObjectUi[]; + isSaving: boolean; +} + +export const KibanaObjects: FC = memo( + ({ objectType, kibanaObjects, isSaving }) => { + const kibanaObjectLabels: { [key: string]: string } = { + dashboard: i18n.translate('xpack.ml.newJob.simple.recognize.dashboardsLabel', { + defaultMessage: 'Dashboards', + }), + search: i18n.translate('xpack.ml.newJob.simple.recognize.searchesLabel', { + defaultMessage: 'Searches', + }), + visualization: i18n.translate('xpack.ml.newJob.simple.recognize.visualizationsLabel', { + defaultMessage: 'Visualizations', + }), + }; + + return ( + <> + +

{kibanaObjectLabels[objectType]}

+ + + {kibanaObjects.map(({ id, title, success, exists }) => ( + + + {isSaving ? : null} + {success !== undefined ? ( + + ) : null} + + + + {title} + + {exists && ( + + + + )} + + + } + /> + ))} + + + ); + } +); diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx new file mode 100644 index 00000000000000..2b25750c6aac8f --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx @@ -0,0 +1,102 @@ +/* + * 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, memo } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { + EuiBadge, + EuiFlexGroup, + EuiFlexItem, + EuiListGroup, + EuiListGroupItem, + EuiLoadingSpinner, + EuiText, + EuiTitle, +} from '@elastic/eui'; + +interface ModuleJobsProps { + jobs: any[]; + jobPrefix: string; + isSaving: boolean; +} + +export const ModuleJobs: FC = memo(({ jobs, jobPrefix, isSaving }) => { + return ( + <> + +

+ +

+ + + + {jobs.map(({ id, config: { description }, setupResult, datafeedResult }) => ( + + + + + + {jobPrefix} + {id} + + + + {setupResult && datafeedResult && ( + + + + + + + + + + + + )} + + + + + {description} + + + {setupResult && setupResult.error && ( + + {setupResult.error.msg} + + )} + + {isSaving && } + + } + /> + ))} + + + ); +}); diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx index 596ccb0a262329..19945de365e003 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx +++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx @@ -23,15 +23,10 @@ import { EuiFormRow, EuiDescribedFormGroup, EuiFieldText, - EuiListGroupItem, - EuiListGroup, EuiCheckbox, EuiAccordion, EuiButton, - EuiLoadingSpinner, - EuiIcon, EuiTextAlign, - EuiBadge, } from '@elastic/eui'; // @ts-ignore import { ml } from 'plugins/ml/services/ml_api_service'; @@ -53,14 +48,16 @@ import { getTimeFilterRange } from '../../../components/full_time_range_selector import { JobGroupsInput } from '../pages/components/job_details_step/components/groups/job_groups_input'; import { mlJobService } from '../../../services/job_service'; import { CreateResultCallout } from './components/create_result_callout'; - -type KibanaObjectUi = KibanaObject & KibanaObjectResponse; +import { KibanaObjects } from './components/kibana_objects'; +import { ModuleJobs } from './components/module_jobs'; interface ModuleJobUI extends ModuleJob { datafeedResult?: DatafeedResponse; setupResult?: JobResponse; } +export type KibanaObjectUi = KibanaObject & KibanaObjectResponse; + export interface KibanaObjects { [objectType: string]: KibanaObjectUi[]; } @@ -80,17 +77,6 @@ export enum SAVE_STATE { export const Page: FC = ({ module, existingGroupIds }) => { const { from, to } = getTimeFilterRange(); - const kibanaObjectLabels: { [key: string]: string } = { - dashboard: i18n.translate('xpack.ml.newJob.simple.recognize.dashboardsLabel', { - defaultMessage: 'Dashboards', - }), - search: i18n.translate('xpack.ml.newJob.simple.recognize.searchesLabel', { - defaultMessage: 'Searches', - }), - visualization: i18n.translate('xpack.ml.newJob.simple.recognize.visualizationsLabel', { - defaultMessage: 'Visualizations', - }), - }; // region State const [jobPrefix, setJobPrefix] = useState(''); @@ -145,9 +131,6 @@ export const Page: FC = ({ module, existingGroupIds }) => { useDedicatedIndex, startDatafeed: startDatafeedAfterSave, }); - // eslint-disable-next-line no-console - console.info(response); - const { datafeeds: datafeedsResponse, jobs: jobsResponse, kibana: kibanaResponse } = response; setJobs( @@ -180,8 +163,6 @@ export const Page: FC = ({ module, existingGroupIds }) => { ); } catch (ex) { setSaveState(SAVE_STATE.FAILED); - // eslint-disable-next-line no-console - console.error(ex); } }; @@ -362,127 +343,22 @@ export const Page: FC = ({ module, existingGroupIds }) => { - -

- -

- - - - {jobs.map(({ id, config: { description }, setupResult, datafeedResult }) => ( - - - - - - {jobPrefix} - {id} - - - - {setupResult && datafeedResult && ( - - - - - - - - - - - - )} - - - - - {description} - - - {setupResult && setupResult.error && ( - - {setupResult.error.msg} - - )} - - - {saveState === SAVE_STATE.SAVING && } - - - } - /> - ))} - + {Object.keys(kibanaObjects).map((objectType, i) => ( - -

{kibanaObjectLabels[objectType]}

- - - {Array.isArray(kibanaObjects[objectType]) && - kibanaObjects[objectType].map(({ id, title, exists, success }) => ( - - - {saveState === SAVE_STATE.SAVING ? ( - - ) : null} - {success !== undefined ? ( - - ) : null} - - - - {title} - - {exists && ( - - - - )} - - - } - /> - ))} - + {i < Object.keys(kibanaObjects).length - 1 && }