* [ML] adjust paddings the flyout form * [ML] add beta badge Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>
This commit is contained in:
parent
a5a96ab920
commit
d4514a50d3
25
x-pack/plugins/ml/public/alerting/beta_badge.tsx
Normal file
25
x-pack/plugins/ml/public/alerting/beta_badge.tsx
Normal 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>
|
||||
);
|
||||
};
|
|
@ -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}
|
||||
|
|
|
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue