Skip to content

Commit

Permalink
[ML] components split
Browse files Browse the repository at this point in the history
  • Loading branch information
darnautov committed Oct 6, 2019
1 parent 2055703 commit c730d0d
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 138 deletions.
Original file line number Diff line number Diff line change
@@ -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<KibanaObjectItemProps> = 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 (
<>
<EuiTitle size="s">
<h4>{kibanaObjectLabels[objectType]}</h4>
</EuiTitle>
<EuiListGroup bordered={false} flush={true} wrapText={true}>
{kibanaObjects.map(({ id, title, success, exists }) => (
<EuiListGroupItem
key={id}
label={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
{isSaving ? <EuiLoadingSpinner size="m" /> : null}
{success !== undefined ? (
<EuiIcon
type={success ? 'check' : 'cross'}
color={success ? 'success' : 'danger'}
/>
) : null}
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="s" color="secondary">
{title}
</EuiText>
{exists && (
<EuiText size="xs" color="danger">
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.alreadyExistsLabel"
defaultMessage="(already exists)"
/>
</EuiText>
)}
</EuiFlexItem>
</EuiFlexGroup>
}
/>
))}
</EuiListGroup>
</>
);
}
);
Original file line number Diff line number Diff line change
@@ -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<ModuleJobsProps> = memo(({ jobs, jobPrefix, isSaving }) => {
return (
<>
<EuiTitle size="s">
<h4>
<FormattedMessage id="xpack.ml.newJob.simple.recognize.jobsTitle" defaultMessage="Jobs" />
</h4>
</EuiTitle>

<EuiListGroup bordered={false} flush={true} wrapText={true} maxWidth={false}>
{jobs.map(({ id, config: { description }, setupResult, datafeedResult }) => (
<EuiListGroupItem
key={id}
label={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiText size="s" color="secondary">
{jobPrefix}
{id}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
{setupResult && datafeedResult && (
<EuiFlexGroup gutterSize="none">
<EuiBadge
color={setupResult.success ? 'secondary' : 'danger'}
iconType={setupResult.success ? 'check' : 'cross'}
>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.jobLabel"
defaultMessage="Job"
/>
</EuiBadge>
<EuiBadge
color={datafeedResult.success ? 'secondary' : 'danger'}
iconType={datafeedResult.success ? 'check' : 'cross'}
>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.datafeedLabel"
defaultMessage="Datafeed"
/>
</EuiBadge>
<EuiBadge
color={datafeedResult.started ? 'secondary' : 'danger'}
iconType={datafeedResult.started ? 'check' : 'cross'}
>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.runningLabel"
defaultMessage="Running"
/>
</EuiBadge>
</EuiFlexGroup>
)}
</EuiFlexItem>
</EuiFlexGroup>

<EuiText size="s" color="subdued">
{description}
</EuiText>

{setupResult && setupResult.error && (
<EuiText size="xs" color="danger">
{setupResult.error.msg}
</EuiText>
)}
</EuiFlexItem>
<EuiFlexItem>{isSaving && <EuiLoadingSpinner size="m" />}</EuiFlexItem>
</EuiFlexGroup>
}
/>
))}
</EuiListGroup>
</>
);
});
152 changes: 14 additions & 138 deletions x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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[];
}
Expand All @@ -80,17 +77,6 @@ export enum SAVE_STATE {

export const Page: FC<PageProps> = ({ 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<string>('');
Expand Down Expand Up @@ -145,9 +131,6 @@ export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
useDedicatedIndex,
startDatafeed: startDatafeedAfterSave,
});
// eslint-disable-next-line no-console
console.info(response);

const { datafeeds: datafeedsResponse, jobs: jobsResponse, kibana: kibanaResponse } = response;

setJobs(
Expand Down Expand Up @@ -180,8 +163,6 @@ export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
);
} catch (ex) {
setSaveState(SAVE_STATE.FAILED);
// eslint-disable-next-line no-console
console.error(ex);
}
};

Expand Down Expand Up @@ -362,127 +343,22 @@ export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiTitle size="s">
<h4>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.jobsTitle"
defaultMessage="Jobs"
/>
</h4>
</EuiTitle>

<EuiListGroup bordered={false} flush={true} wrapText={true} maxWidth={false}>
{jobs.map(({ id, config: { description }, setupResult, datafeedResult }) => (
<EuiListGroupItem
key={id}
label={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiText size="s" color="secondary">
{jobPrefix}
{id}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
{setupResult && datafeedResult && (
<EuiFlexGroup gutterSize="none">
<EuiBadge
color={setupResult.success ? 'secondary' : 'danger'}
iconType={setupResult.success ? 'check' : 'cross'}
>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.jobLabel"
defaultMessage="Job"
/>
</EuiBadge>
<EuiBadge
color={datafeedResult.success ? 'secondary' : 'danger'}
iconType={datafeedResult.success ? 'check' : 'cross'}
>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.datafeedLabel"
defaultMessage="Datafeed"
/>
</EuiBadge>
<EuiBadge
color={datafeedResult.started ? 'secondary' : 'danger'}
iconType={datafeedResult.started ? 'check' : 'cross'}
>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.runningLabel"
defaultMessage="Running"
/>
</EuiBadge>
</EuiFlexGroup>
)}
</EuiFlexItem>
</EuiFlexGroup>

<EuiText size="s" color="subdued">
{description}
</EuiText>

{setupResult && setupResult.error && (
<EuiText size="xs" color="danger">
{setupResult.error.msg}
</EuiText>
)}
</EuiFlexItem>
<EuiFlexItem>
{saveState === SAVE_STATE.SAVING && <EuiLoadingSpinner size="m" />}
</EuiFlexItem>
</EuiFlexGroup>
}
/>
))}
</EuiListGroup>
<ModuleJobs
jobs={jobs}
jobPrefix={jobPrefix}
isSaving={saveState === SAVE_STATE.SAVING}
/>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
{Object.keys(kibanaObjects).map((objectType, i) => (
<Fragment key={objectType}>
<EuiPanel>
<EuiTitle size="s">
<h4>{kibanaObjectLabels[objectType]}</h4>
</EuiTitle>
<EuiListGroup bordered={false} flush={true} wrapText={true}>
{Array.isArray(kibanaObjects[objectType]) &&
kibanaObjects[objectType].map(({ id, title, exists, success }) => (
<EuiListGroupItem
key={id}
label={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
{saveState === SAVE_STATE.SAVING ? (
<EuiLoadingSpinner size="m" />
) : null}
{success !== undefined ? (
<EuiIcon
type={success ? 'check' : 'cross'}
color={success ? 'success' : 'danger'}
/>
) : null}
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="s" color="secondary">
{title}
</EuiText>
{exists && (
<EuiText size="xs" color="danger">
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.alreadyExistsLabel"
defaultMessage="(already exists)"
/>
</EuiText>
)}
</EuiFlexItem>
</EuiFlexGroup>
}
/>
))}
</EuiListGroup>
<KibanaObjects
objectType={objectType}
kibanaObjects={kibanaObjects[objectType]}
isSaving={saveState === SAVE_STATE.SAVING}
/>
</EuiPanel>
{i < Object.keys(kibanaObjects).length - 1 && <EuiSpacer size="s" />}
</Fragment>
Expand Down

0 comments on commit c730d0d

Please sign in to comment.