Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

fix create/edit detector page according to UX review comments #67

Merged
merged 1 commit into from
Apr 30, 2020
Merged

fix create/edit detector page according to UX review comments #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion public/pages/createDetector/components/DetectorInfo/DetectorInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ function DetectorInfo(props: DetectorInfoProps) {
<FormattedFormRow
title="Name"
hint="Specify a unique and descriptive name that is easy to
recognize."
recognize. Detector name must contain 1-64 characters.
Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)"
isInvalid={isInvalid(field.name, form)}
error={getError(field.name, form)}
>
Expand Down
12 changes: 6 additions & 6 deletions ...createDetector/components/DetectorInfo/__tests__/__snapshots__/DetectorInfo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
<div>
<div
class="euiPanel euiPanel--paddingMedium"
style="padding-left: 0px; padding-right: 0px;"
style="padding: 20px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 10px;"
style="padding: 0px;"
>
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--small content-panel-title"
>
Name and description
</h3>
Expand Down Expand Up @@ -42,11 +42,11 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
/>
<div
style="padding: 0px 10px;"
style="padding: 10px 0px;"
>
<div
class="euiFormRow"
hint="Specify a unique and descriptive name that is easy to recognize."
hint="Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)"
id="random_id-row"
title="Name"
>
Expand All @@ -66,7 +66,7 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
<p
class="sublabel"
>
Specify a unique and descriptive name that is easy to recognize.
Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)
</p>
</div>
</label>
Expand Down
4 changes: 3 additions & 1 deletion public/pages/createDetector/components/Settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ export const Settings = () => {
title="Detector interval"
hint="Define how often the detector collects data to generate
anomalies. The shorter the interval is, the more real time
the detector results will be. The detector interval,
the detector results will be, and the more computing resources
the detector will need. The detector interval,
together with data ingestion speed, also determines the
preparation time of the detector. Long intervals and slow
ingestion speed means the detector takes longer time to
Expand Down Expand Up @@ -80,6 +81,7 @@ export const Settings = () => {
need to account for extra processing time."
isInvalid={isInvalid(field.name, form)}
error={getError(field.name, form)}
style={{ marginTop: '16px' }}
>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
Expand Down
23 changes: 18 additions & 5 deletions public/pages/createDetector/containers/CreateDetector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import {
updateDetector,
} from '../../../redux/reducers/ad';
import { BREADCRUMBS } from '../../../utils/constants';
import { getErrorMessage } from '../../../utils/utils';
import { getErrorMessage, validateName } from '../../../utils/utils';
import { DetectorInfo } from '../components/DetectorInfo';
import { useFetchDetectorInfo } from '../hooks/useFetchDetectorInfo';
import { DataSource } from './DataSource/index';
Expand Down Expand Up @@ -74,10 +74,19 @@ export function CreateDetector(props: CreateADProps) {
const createOrEditBreadcrumb = props.isEdit
? BREADCRUMBS.EDIT_DETECTOR
: BREADCRUMBS.CREATE_DETECTOR;
chrome.breadcrumbs.set([
let breadCrumbs = [
BREADCRUMBS.ANOMALY_DETECTOR,
BREADCRUMBS.DETECTORS,
createOrEditBreadcrumb,
]);
];
if (detector && detector.name) {
breadCrumbs.splice(2, 0, {
text: detector.name,
//@ts-ignore
href: `#/detectors/${detectorId}`,
});
}
chrome.breadcrumbs.set(breadCrumbs);
});
// If no detector found with ID, redirect it to list
useEffect(() => {
Expand Down Expand Up @@ -144,6 +153,10 @@ export function CreateDetector(props: CreateADProps) {
if (isEmpty(detectorName)) {
throw 'Detector name can not be empty';
} else {
const error = validateName(detectorName);
if (error) {
throw error;
}
//TODO::Avoid making call if value is same
const resp = await dispatch(
searchDetector({ query: { term: { 'name.keyword': detectorName } } })
Expand Down Expand Up @@ -182,7 +195,7 @@ export function CreateDetector(props: CreateADProps) {
initialValues={detectorToFormik(detector)}
onSubmit={handleSubmit}
>
{formikProps => (
{(formikProps) => (
<Fragment>
<DetectorInfo onValidateDetectorName={handleValidateName} />
<EuiSpacer />
Expand All @@ -204,7 +217,7 @@ export function CreateDetector(props: CreateADProps) {
//@ts-ignore
onClick={formikProps.handleSubmit}
>
{props.isEdit ? 'Save change' : 'Create'}
{props.isEdit ? 'Save changes' : 'Create'}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
35 changes: 18 additions & 17 deletions public/pages/createDetector/containers/__tests__/__snapshots__/CreateDetector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
</div>
<div
class="euiPanel euiPanel--paddingMedium"
style="padding-left: 0px; padding-right: 0px;"
style="padding: 20px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 10px;"
style="padding: 0px;"
>
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--small content-panel-title"
>
Name and description
</h3>
Expand Down Expand Up @@ -61,11 +61,11 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
/>
<div
style="padding: 0px 10px;"
style="padding: 10px 0px;"
>
<div
class="euiFormRow"
hint="Specify a unique and descriptive name that is easy to recognize."
hint="Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)"
id="random_id-row"
title="Name"
>
Expand All @@ -85,7 +85,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
<p
class="sublabel"
>
Specify a unique and descriptive name that is easy to recognize.
Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)
</p>
</div>
</label>
Expand Down Expand Up @@ -154,17 +154,17 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
/>
<div
class="euiPanel euiPanel--paddingMedium"
style="padding-left: 0px; padding-right: 0px;"
style="padding: 20px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 10px;"
style="padding: 0px;"
>
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--small content-panel-title"
>
Data Source
</h3>
Expand Down Expand Up @@ -192,7 +192,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
/>
<div
style="padding: 0px 10px;"
style="padding: 10px 0px;"
>
<div
class="euiFormRow"
Expand Down Expand Up @@ -515,17 +515,17 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
/>
<div
class="euiPanel euiPanel--paddingMedium"
style="padding-left: 0px; padding-right: 0px;"
style="padding: 20px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 10px;"
style="padding: 0px;"
>
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--small content-panel-title"
>
Detector operation settings
</h3>
Expand Down Expand Up @@ -553,7 +553,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
/>
<div
style="padding: 0px 10px;"
style="padding: 10px 0px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand All @@ -564,7 +564,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
>
<div
class="euiFormRow euiFormRow--fullWidth"
hint="Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies."
hint="Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be, and the more computing resources the detector will need. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies."
id="random_id-row"
title="Detector interval"
>
Expand All @@ -584,7 +584,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
<p
class="sublabel"
>
Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies.
Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be, and the more computing resources the detector will need. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies.
</p>
</div>
</label>
Expand Down Expand Up @@ -635,6 +635,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
class="euiFormRow euiFormRow--fullWidth"
hint="Specify a window of delay for a detector to fetch data, if you need to account for extra processing time."
id="random_id-row"
style="margin-top: 16px;"
title="Window delay"
>
<div>
Expand Down Expand Up @@ -678,7 +679,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
name="windowDelay"
placeholder="Window delay"
type="number"
value="0"
value="1"
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion public/pages/createDetector/containers/utils/constant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const INITIAL_VALUES: ADFormikValues = {
filterType: FILTER_TYPES.SIMPLE,
filterQuery: JSON.stringify({ query: { bool: { filter: [] } } }, null, 4),
detectionInterval: 10,
windowDelay: 0,
windowDelay: 1,
};

export const EMPTY_UI_FILTER: UIFilter = {
Expand Down