Skip to content

Commit

Permalink
Refactor field types
Browse files Browse the repository at this point in the history
  • Loading branch information
@sorenlouv
sorenlouv committed Sep 17, 2020
1 parent a9ce803 commit 0d61470
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 245 deletions.
66 changes: 14 additions & 52 deletions x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,17 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiSelect, EuiExpression, EuiFieldNumber } from '@elastic/eui';

import { i18n } from '@kbn/i18n';
import { isFinite } from 'lodash';
import React from 'react';
import { useParams } from 'react-router-dom';
import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
import { ALERT_TYPES_CONFIG, AlertType } from '../../../../common/alert_types';
import {
ENVIRONMENT_ALL,
getEnvironmentLabel,
} from '../../../../common/environment_filter_values';
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
import { useEnvironments } from '../../../hooks/useEnvironments';
import { useUrlParams } from '../../../hooks/useUrlParams';
import { EnvironmentField, ServiceField, IsAboveField } from '../fields';
import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';

export interface AlertParams {
windowSize: number;
Expand Down Expand Up @@ -52,54 +48,20 @@ export function ErrorCountAlertTrigger(props: Props) {
...alertParams,
};

const threshold = isFinite(params.threshold) ? params.threshold : '';

const fields = [
<EuiExpression
description={i18n.translate(
'xpack.apm.transactionDurationAnomalyAlertTrigger.service',
{
defaultMessage: 'Service',
}
)}
value={serviceName}
<ServiceField value={serviceName} />,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<PopoverExpression
value={getEnvironmentLabel(params.environment)}
title={i18n.translate('xpack.apm.errorRateAlertTrigger.environment', {
defaultMessage: 'Environment',
<IsAboveField
value={params.threshold}
unit={i18n.translate('xpack.apm.errorCountAlertTrigger.errors', {
defaultMessage: ' errors',
})}
>
<EuiSelect
value={params.environment}
options={environmentOptions}
onChange={(e) =>
setAlertParams(
'environment',
e.target.value as AlertParams['environment']
)
}
compressed
/>
</PopoverExpression>,
<PopoverExpression
title={i18n.translate('xpack.apm.errorRateAlertTrigger.isAbove', {
defaultMessage: 'is above',
})}
value={threshold.toString()}
>
<EuiFieldNumber
value={threshold}
step={0}
onChange={(e) =>
setAlertParams('threshold', parseInt(e.target.value, 10))
}
compressed
append={i18n.translate('xpack.apm.errorRateAlertTrigger.errors', {
defaultMessage: 'errors',
})}
/>
</PopoverExpression>,
onChange={(value) => setAlertParams('threshold', value)}
/>,
<ForLastExpression
onChangeWindowSize={(windowSize) =>
setAlertParams('windowSize', windowSize || '')
Expand Down
1 change: 0 additions & 1 deletion ...ck/plugins/apm/public/components/alerting/ServiceAlertTrigger/PopoverExpression/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ interface Props {

export function PopoverExpression(props: Props) {
const { title, value, children } = props;

const [popoverOpen, setPopoverOpen] = useState(false);

return (
Expand Down
105 changes: 25 additions & 80 deletions x-pack/plugins/apm/public/components/alerting/TransactionDurationAlertTrigger/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiFieldNumber, EuiSelect, EuiExpression } from '@elastic/eui';
import { EuiSelect } from '@elastic/eui';
import { useParams } from 'react-router-dom';
import { i18n } from '@kbn/i18n';
import { map } from 'lodash';
Expand All @@ -15,10 +15,13 @@ import { useServiceTransactionTypes } from '../../../hooks/useServiceTransaction
import { useUrlParams } from '../../../hooks/useUrlParams';
import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
import {
ENVIRONMENT_ALL,
getEnvironmentLabel,
} from '../../../../common/environment_filter_values';
EnvironmentField,
ServiceField,
TransactionTypeField,
IsAboveField,
} from '../fields';

interface AlertParams {
windowSize: number;
Expand Down Expand Up @@ -86,59 +89,17 @@ export function TransactionDurationAlertTrigger(props: Props) {
};

const fields = [
<EuiExpression
description={i18n.translate(
'xpack.apm.transactionDurationAnomalyAlertTrigger.service',
{
defaultMessage: 'Service',
}
)}
value={serviceName}
<ServiceField value={serviceName} />,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<TransactionTypeField
currentValue={params.transactionType}
options={transactionTypes.map((key) => ({ text: key, value: key }))}
onChange={(e) => setAlertParams('transactionType', e.target.value)}
/>,
<PopoverExpression
value={getEnvironmentLabel(params.environment)}
title={i18n.translate(
'xpack.apm.transactionDurationAlertTrigger.environment',
{
defaultMessage: 'Environment',
}
)}
>
<EuiSelect
value={params.environment}
options={environmentOptions}
onChange={(e) =>
setAlertParams(
'environment',
e.target.value as AlertParams['environment']
)
}
compressed
/>
</PopoverExpression>,
<PopoverExpression
value={params.transactionType}
title={i18n.translate('xpack.apm.transactionDurationAlertTrigger.type', {
defaultMessage: 'Type',
})}
>
<EuiSelect
value={params.transactionType}
options={transactionTypes.map((key) => {
return {
text: key,
value: key,
};
})}
onChange={(e) =>
setAlertParams(
'transactionType',
e.target.value as AlertParams['transactionType']
)
}
compressed
/>
</PopoverExpression>,
<PopoverExpression
value={params.aggregationType}
title={i18n.translate('xpack.apm.transactionDurationAlertTrigger.when', {
Expand All @@ -153,33 +114,17 @@ export function TransactionDurationAlertTrigger(props: Props) {
value: key,
};
})}
onChange={(e) =>
setAlertParams(
'aggregationType',
e.target.value as AlertParams['aggregationType']
)
}
compressed
/>
</PopoverExpression>,
<PopoverExpression
value={params.threshold ? `${params.threshold}ms` : ''}
title={i18n.translate(
'xpack.apm.transactionDurationAlertTrigger.isAbove',
{
defaultMessage: 'is above',
}
)}
>
<EuiFieldNumber
value={params.threshold ?? ''}
onChange={(e) => setAlertParams('threshold', e.target.value)}
append={i18n.translate('xpack.apm.transactionDurationAlertTrigger.ms', {
defaultMessage: 'ms',
})}
onChange={(e) => setAlertParams('aggregationType', e.target.value)}
compressed
/>
</PopoverExpression>,
<IsAboveField
value={params.threshold}
unit={i18n.translate('xpack.apm.transactionDurationAlertTrigger.ms', {
defaultMessage: 'ms',
})}
onChange={(value) => setAlertParams('threshold', value)}
/>,
<ForLastExpression
onChangeWindowSize={(timeWindowSize) =>
setAlertParams('windowSize', timeWindowSize || '')
Expand Down
51 changes: 13 additions & 38 deletions ...k/plugins/apm/public/components/alerting/TransactionDurationAnomalyAlertTrigger/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiExpression, EuiSelect } from '@elastic/eui';

import { useParams } from 'react-router-dom';
import { i18n } from '@kbn/i18n';
import React from 'react';
Expand All @@ -17,14 +17,16 @@ import {
AnomalySeverity,
SelectAnomalySeverity,
} from './SelectAnomalySeverity';
import {
ENVIRONMENT_ALL,
getEnvironmentLabel,
} from '../../../../common/environment_filter_values';
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
import {
TRANSACTION_PAGE_LOAD,
TRANSACTION_REQUEST,
} from '../../../../common/transaction_types';
import {
EnvironmentField,
ServiceField,
TransactionTypeField,
} from '../fields';

interface Params {
windowSize: number;
Expand Down Expand Up @@ -74,40 +76,13 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
};

const fields = [
<EuiExpression
description={i18n.translate(
'xpack.apm.transactionDurationAnomalyAlertTrigger.service',
{
defaultMessage: 'Service',
}
)}
value={serviceName}
/>,
<EuiExpression
description={i18n.translate(
'xpack.apm.transactionDurationAnomalyAlertTrigger.transactionType',
{
defaultMessage: 'Transaction Type',
}
)}
value={transactionType}
<ServiceField value={serviceName} />,
<TransactionTypeField currentValue={transactionType} />,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<PopoverExpression
value={getEnvironmentLabel(params.environment)}
title={i18n.translate(
'xpack.apm.transactionDurationAnomalyAlertTrigger.environment',
{
defaultMessage: 'Environment',
}
)}
>
<EuiSelect
value={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
compressed
/>
</PopoverExpression>,
<PopoverExpression
value={<AnomalySeverity severityScore={params.anomalyScore} />}
title={i18n.translate(
Expand Down
Loading

0 comments on commit 0d61470

Please sign in to comment.