Skip to content

Commit

Permalink
[ML] change layout, fix patterns
Browse files Browse the repository at this point in the history
  • Loading branch information
@darnautov
darnautov committed Oct 7, 2019
1 parent a70b659 commit 48a7d03
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 75 deletions.
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/ml/common/constants/validation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@ export const JOB_ID_MAX_LENGTH = 64;
* Job ID must contain lowercase alphanumeric (a-z and 0-9), hyphens or underscores.
* It must also start and end with an alphanumeric character.
*/
export const JOB_ID_PATTERN = /^(?![\-_])[a-z0-9\-_]*(?<![\-_])$/;
export const JOB_ID_PATTERN = /^([a-z0-9]+[a-z0-9\-_]*(?<![\-_]))?$/;
145 changes: 84 additions & 61 deletions x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
import React, { FC } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
EuiListGroup,
EuiListGroupItem,
EuiIcon,
EuiLoadingSpinner,
EuiText,
EuiTitle,
EuiSpacer,
EuiFlexGrid,
} from '@elastic/eui';

interface ModuleJobsProps {
Expand All @@ -32,71 +32,94 @@ export const ModuleJobs: FC<ModuleJobsProps> = ({ jobs, jobPrefix, isSaving }) =
</h4>
</EuiTitle>

<EuiListGroup bordered={false} flush={true} wrapText={true} maxWidth={true}>
<ul>
{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}
<li key={id}>
<EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="spaceBetween">
<EuiFlexItem>
<EuiText size="s" color="secondary">
{jobPrefix}
{id}
</EuiText>

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

{setupResult && setupResult.error && (
<EuiText size="xs" color="danger">
{setupResult.error.msg}
</EuiText>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
{isSaving && <EuiLoadingSpinner size="m" />}
{setupResult && datafeedResult && (
<EuiFlexGrid gutterSize="s" style={{ width: '200px' }}>
<EuiFlexItem>
<EuiText
color={setupResult.success ? 'secondary' : 'danger'}
size="xs"
className="eui-textNoWrap"
textAlign="center"
>
<EuiIcon
type={setupResult.success ? 'check' : 'cross'}
color={setupResult.success ? 'secondary' : 'danger'}
size="s"
/>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.jobLabel"
defaultMessage="Job"
/>
</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>
)}
<EuiText
color={datafeedResult.success ? 'secondary' : 'danger'}
size="xs"
className="eui-textNoWrap"
textAlign="center"
>
<EuiIcon
type={datafeedResult.success ? 'check' : 'cross'}
color={datafeedResult.success ? 'secondary' : 'danger'}
size="s"
/>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.datafeedLabel"
defaultMessage="Datafeed"
/>
</EuiText>
</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>
}
/>
<EuiFlexItem>
<EuiText
color={datafeedResult.started ? 'secondary' : 'danger'}
size="xs"
className="eui-textNoWrap"
textAlign="center"
>
<EuiIcon
type={datafeedResult.started ? 'check' : 'cross'}
color={datafeedResult.started ? 'secondary' : 'danger'}
size="s"
/>
<FormattedMessage
id="xpack.ml.newJob.simple.recognize.runningLabel"
defaultMessage="Running"
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGrid>
)}
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
</li>
))}
</EuiListGroup>
</ul>
</>
);
};
25 changes: 12 additions & 13 deletions x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
}, []);

const jobPrefixValidator = composeValidators(
patternValidator(/^(?![\-_])[a-z0-9\-_]*/),
patternValidator(/^([a-z0-9]+[a-z0-9\-_]*)?$/),
maxLengthValidator(JOB_ID_MAX_LENGTH - Math.max(...jobs.map(({ id }) => id.length)))
);
const groupValidator = composeValidators(
Expand Down Expand Up @@ -259,8 +259,8 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
</>
)}

<EuiFlexGroup wrap={true} gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup wrap={true} gutterSize="m">
<EuiFlexItem grow={1}>
<EuiPanel>
<EuiTitle size="s">
<h4>
Expand Down Expand Up @@ -442,28 +442,27 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
/>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={2}>
<EuiPanel>
<ModuleJobs
jobs={jobs}
jobPrefix={jobPrefix}
isSaving={saveState === SAVE_STATE.SAVING}
/>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
{Object.keys(kibanaObjects).map((objectType, i) => (
<Fragment key={objectType}>
<EuiPanel>
<EuiSpacer size="m" />
<EuiPanel>
{Object.keys(kibanaObjects).map((objectType, i) => (
<Fragment key={objectType}>
<KibanaObjects
objectType={objectType}
kibanaObjects={kibanaObjects[objectType]}
isSaving={saveState === SAVE_STATE.SAVING}
/>
</EuiPanel>
{i < Object.keys(kibanaObjects).length - 1 && <EuiSpacer size="s" />}
</Fragment>
))}
{i < Object.keys(kibanaObjects).length - 1 && <EuiSpacer size="s" />}
</Fragment>
))}
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="l" />
Expand Down

0 comments on commit 48a7d03

Please sign in to comment.