maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Fix form layout of the Anomaly jobs health rule type (#110017) (#110040)

Browse source 
* [ML] adjust paddings the flyout form

* [ML] add beta badge

Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>
This commit is contained in:
Kibana Machine 2021-08-25 10:54:56 -04:00 committed by GitHub
parent a5a96ab920
commit d4514a50d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
x-pack/plugins/ml/public/alerting/beta_badge.tsx Normal file
View file

@ -0,0 +1,25 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { FC } from 'react';
import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
export const BetaBadge: FC<{ message: string }> = ({ message }) => {
return (
<EuiFlexGroup gutterSize={'none'} justifyContent={'flexEnd'}>
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate('xpack.ml.anomalyDetectionAlert.betaBadgeLabel', {
defaultMessage: 'Beta',
})}
tooltipContent={message}
/>
</EuiFlexItem>
</EuiFlexGroup>
);
};

10
x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx
View file

@ -19,6 +19,7 @@ import { useMlKibana } from '../../application/contexts/kibana';
import { TestsSelectionControl } from './tests_selection_control';
import { isPopulatedObject } from '../../../common';
import { ALL_JOBS_SELECTION } from '../../../common/constants/alerts';
import { BetaBadge } from '../beta_badge';
export type MlAnomalyAlertTriggerProps = AlertTypeParamsExpressionProps<MlAnomalyDetectionJobsHealthRuleParams>;
@ -92,6 +93,15 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC<MlAnomalyAlertTriggerProps> = ({
error={formErrors}
isInvalid={isFormInvalid}
>
<BetaBadge
message={i18n.translate(
'xpack.ml.alertTypes.jobsHealthAlertingRule.betaBadgeTooltipContent',
{
defaultMessage: `Anomaly detection job health alerts are a beta feature. We'd love to hear your feedback.`,
}
)}
/>
<JobSelectorControl
jobsAndGroupIds={includeJobsAndGroupIds}
adJobsApiService={adJobsApiService}

196
x-pack/plugins/ml/public/alerting/jobs_health_rule/tests_selection_control.tsx
View file

@ -43,112 +43,116 @@ export const TestsSelectionControl: FC<TestsSelectionControlProps> = React.memo(
);
return (
<EuiForm component="div" isInvalid={!!errors?.length} error={errors}>
{(Object.entries(uiConfig) as Array<
[JobsHealthTests, typeof uiConfig[JobsHealthTests]]
>).map(([name, conf], i) => {
return (
<EuiDescribedFormGroup
key={name}
title={<h4>{HEALTH_CHECK_NAMES[name]?.name}</h4>}
description={HEALTH_CHECK_NAMES[name]?.description}
>
<EuiFormRow>
<EuiSwitch
label={
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.enableTestLabel"
defaultMessage="Enable"
/>
}
onChange={updateCallback.bind(null, {
[name]: {
...uiConfig[name],
enabled: !uiConfig[name].enabled,
},
})}
checked={uiConfig[name].enabled}
/>
</EuiFormRow>
<EuiSpacer size="s" />
{name === 'delayedData' ? (
<>
<EuiFormRow
<>
<EuiForm component="div" isInvalid={!!errors?.length} error={errors}>
{(Object.entries(uiConfig) as Array<
[JobsHealthTests, typeof uiConfig[JobsHealthTests]]
>).map(([name, conf], i) => {
return (
<EuiDescribedFormGroup
key={name}
title={<h4>{HEALTH_CHECK_NAMES[name]?.name}</h4>}
description={HEALTH_CHECK_NAMES[name]?.description}
fullWidth
gutterSize={'s'}
>
<EuiFormRow>
<EuiSwitch
label={
<>
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountLabel"
defaultMessage="Number of documents"
/>
<EuiToolTip
position="bottom"
content={
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountHint"
defaultMessage="The threshold for the amount of missing documents to alert upon."
/>
}
>
<EuiIcon type="questionInCircle" />
</EuiToolTip>
</>
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.enableTestLabel"
defaultMessage="Enable"
/>
}
>
<EuiFieldNumber
value={uiConfig.delayedData.docsCount}
onChange={updateCallback.bind(null, {
[name]: {
...uiConfig[name],
enabled: !uiConfig[name].enabled,
},
})}
checked={uiConfig[name].enabled}
/>
</EuiFormRow>
{name === 'delayedData' ? (
<>
<EuiSpacer size="m" />
<EuiFormRow
label={
<>
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountLabel"
defaultMessage="Number of documents"
/>
<EuiToolTip
position="bottom"
content={
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountHint"
defaultMessage="The threshold for the amount of missing documents to alert upon."
/>
}
>
<EuiIcon type="questionInCircle" />
</EuiToolTip>
</>
}
>
<EuiFieldNumber
value={uiConfig.delayedData.docsCount}
onChange={(e) => {
updateCallback({
[name]: {
...uiConfig[name],
docsCount: Number(e.target.value),
},
});
}}
min={1}
/>
</EuiFormRow>
<EuiSpacer size="m" />
<TimeIntervalControl
label={
<>
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalLabel"
defaultMessage="Time interval"
/>
<EuiToolTip
position="bottom"
content={
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalHint"
defaultMessage="The lookback interval to check during rule execution for delayed data. By default derived from the longest bucket span and query delay."
/>
}
>
<EuiIcon type="questionInCircle" />
</EuiToolTip>
</>
}
value={uiConfig.delayedData.timeInterval}
onChange={(e) => {
updateCallback({
[name]: {
...uiConfig[name],
docsCount: Number(e.target.value),
timeInterval: e,
},
});
}}
min={1}
/>
</EuiFormRow>
<EuiSpacer size="s" />
<TimeIntervalControl
label={
<>
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalLabel"
defaultMessage="Time interval"
/>
<EuiToolTip
position="bottom"
content={
<FormattedMessage
id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalHint"
defaultMessage="The lookback interval to check during rule execution for delayed data. By default derived from the longest bucket span and query delay."
/>
}
>
<EuiIcon type="questionInCircle" />
</EuiToolTip>
</>
}
value={uiConfig.delayedData.timeInterval}
onChange={(e) => {
updateCallback({
[name]: {
...uiConfig[name],
timeInterval: e,
},
});
}}
/>
<EuiSpacer size="s" />
</>
) : null}
</EuiDescribedFormGroup>
);
})}
</EuiForm>
</>
) : null}
</EuiDescribedFormGroup>
);
})}
</EuiForm>
<EuiSpacer size="l" />
</>
);
}
);

23
x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { EuiSpacer, EuiForm, EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiSpacer, EuiForm } from '@elastic/eui';
import useMount from 'react-use/lib/useMount';
import { i18n } from '@kbn/i18n';
import { JobSelectorControl } from './job_selector';
@ -31,6 +31,7 @@ import { getLookbackInterval, getTopNBuckets } from '../../common/util/alerts';
import { isDefined } from '../../common/types/guards';
import { AlertTypeParamsExpressionProps } from '../../../triggers_actions_ui/public';
import { parseInterval } from '../../common/util/parse_interval';
import { BetaBadge } from './beta_badge';
export type MlAnomalyAlertTriggerProps = AlertTypeParamsExpressionProps<MlAnomalyDetectionAlertParams>;
@ -154,21 +155,11 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
return (
<EuiForm data-test-subj={'mlAnomalyAlertForm'}>
<EuiFlexGroup gutterSize={'none'} justifyContent={'flexEnd'}>
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate('xpack.ml.anomalyDetectionAlert.betaBadgeLabel', {
defaultMessage: 'Beta',
})}
tooltipContent={i18n.translate(
'xpack.ml.anomalyDetectionAlert.betaBadgeTooltipContent',
{
defaultMessage: `Anomaly detection alerts are a beta feature. We'd love to hear your feedback.`,
}
)}
/>
</EuiFlexItem>
</EuiFlexGroup>
<BetaBadge
message={i18n.translate('xpack.ml.anomalyDetectionAlert.betaBadgeTooltipContent', {
defaultMessage: `Anomaly detection alerts are a beta feature. We'd love to hear your feedback.`,
})}
/>
<JobSelectorControl
jobsAndGroupIds={jobsAndGroupIds}