Skip to content

Commit 0d61470

Browse files
sorenlouvsorenlouv
committed
Refactor field types
1 parent a9ce803 commit 0d61470

File tree

6 files changed

+183
-245
lines changed

6 files changed

+183
-245
lines changed

‎x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.tsx‎

Lines changed: 14 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,17 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
import { EuiSelect, EuiExpression, EuiFieldNumber } from '@elastic/eui';
6+
77
import { i18n } from '@kbn/i18n';
8-
import { isFinite } from 'lodash';
98
import React from 'react';
109
import { useParams } from 'react-router-dom';
1110
import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
1211
import { ALERT_TYPES_CONFIG, AlertType } from '../../../../common/alert_types';
13-
import {
14-
ENVIRONMENT_ALL,
15-
getEnvironmentLabel,
16-
} from '../../../../common/environment_filter_values';
12+
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
1713
import { useEnvironments } from '../../../hooks/useEnvironments';
1814
import { useUrlParams } from '../../../hooks/useUrlParams';
15+
import { EnvironmentField, ServiceField, IsAboveField } from '../fields';
1916
import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
20-
import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
2117

2218
export interface AlertParams {
2319
windowSize: number;
@@ -52,54 +48,20 @@ export function ErrorCountAlertTrigger(props: Props) {
5248
...alertParams,
5349
};
5450

55-
const threshold = isFinite(params.threshold) ? params.threshold : '';
56-
5751
const fields = [
58-
<EuiExpression
59-
description={i18n.translate(
60-
'xpack.apm.transactionDurationAnomalyAlertTrigger.service',
61-
{
62-
defaultMessage: 'Service',
63-
}
64-
)}
65-
value={serviceName}
52+
<ServiceField value={serviceName} />,
53+
<EnvironmentField
54+
currentValue={params.environment}
55+
options={environmentOptions}
56+
onChange={(e) => setAlertParams('environment', e.target.value)}
6657
/>,
67-
<PopoverExpression
68-
value={getEnvironmentLabel(params.environment)}
69-
title={i18n.translate('xpack.apm.errorRateAlertTrigger.environment', {
70-
defaultMessage: 'Environment',
58+
<IsAboveField
59+
value={params.threshold}
60+
unit={i18n.translate('xpack.apm.errorCountAlertTrigger.errors', {
61+
defaultMessage: ' errors',
7162
})}
72-
>
73-
<EuiSelect
74-
value={params.environment}
75-
options={environmentOptions}
76-
onChange={(e) =>
77-
setAlertParams(
78-
'environment',
79-
e.target.value as AlertParams['environment']
80-
)
81-
}
82-
compressed
83-
/>
84-
</PopoverExpression>,
85-
<PopoverExpression
86-
title={i18n.translate('xpack.apm.errorRateAlertTrigger.isAbove', {
87-
defaultMessage: 'is above',
88-
})}
89-
value={threshold.toString()}
90-
>
91-
<EuiFieldNumber
92-
value={threshold}
93-
step={0}
94-
onChange={(e) =>
95-
setAlertParams('threshold', parseInt(e.target.value, 10))
96-
}
97-
compressed
98-
append={i18n.translate('xpack.apm.errorRateAlertTrigger.errors', {
99-
defaultMessage: 'errors',
100-
})}
101-
/>
102-
</PopoverExpression>,
63+
onChange={(value) => setAlertParams('threshold', value)}
64+
/>,
10365
<ForLastExpression
10466
onChangeWindowSize={(windowSize) =>
10567
setAlertParams('windowSize', windowSize || '')

‎x-pack/plugins/apm/public/components/alerting/ServiceAlertTrigger/PopoverExpression/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ interface Props {
1515

1616
export function PopoverExpression(props: Props) {
1717
const { title, value, children } = props;
18-
1918
const [popoverOpen, setPopoverOpen] = useState(false);
2019

2120
return (

‎x-pack/plugins/apm/public/components/alerting/TransactionDurationAlertTrigger/index.tsx‎

Lines changed: 25 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
import { EuiFieldNumber, EuiSelect, EuiExpression } from '@elastic/eui';
6+
import { EuiSelect } from '@elastic/eui';
77
import { useParams } from 'react-router-dom';
88
import { i18n } from '@kbn/i18n';
99
import { map } from 'lodash';
@@ -15,10 +15,13 @@ import { useServiceTransactionTypes } from '../../../hooks/useServiceTransaction
1515
import { useUrlParams } from '../../../hooks/useUrlParams';
1616
import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
1717
import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
18+
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
1819
import {
19-
ENVIRONMENT_ALL,
20-
getEnvironmentLabel,
21-
} from '../../../../common/environment_filter_values';
20+
EnvironmentField,
21+
ServiceField,
22+
TransactionTypeField,
23+
IsAboveField,
24+
} from '../fields';
2225

2326
interface AlertParams {
2427
windowSize: number;
@@ -86,59 +89,17 @@ export function TransactionDurationAlertTrigger(props: Props) {
8689
};
8790

8891
const fields = [
89-
<EuiExpression
90-
description={i18n.translate(
91-
'xpack.apm.transactionDurationAnomalyAlertTrigger.service',
92-
{
93-
defaultMessage: 'Service',
94-
}
95-
)}
96-
value={serviceName}
92+
<ServiceField value={serviceName} />,
93+
<EnvironmentField
94+
currentValue={params.environment}
95+
options={environmentOptions}
96+
onChange={(e) => setAlertParams('environment', e.target.value)}
97+
/>,
98+
<TransactionTypeField
99+
currentValue={params.transactionType}
100+
options={transactionTypes.map((key) => ({ text: key, value: key }))}
101+
onChange={(e) => setAlertParams('transactionType', e.target.value)}
97102
/>,
98-
<PopoverExpression
99-
value={getEnvironmentLabel(params.environment)}
100-
title={i18n.translate(
101-
'xpack.apm.transactionDurationAlertTrigger.environment',
102-
{
103-
defaultMessage: 'Environment',
104-
}
105-
)}
106-
>
107-
<EuiSelect
108-
value={params.environment}
109-
options={environmentOptions}
110-
onChange={(e) =>
111-
setAlertParams(
112-
'environment',
113-
e.target.value as AlertParams['environment']
114-
)
115-
}
116-
compressed
117-
/>
118-
</PopoverExpression>,
119-
<PopoverExpression
120-
value={params.transactionType}
121-
title={i18n.translate('xpack.apm.transactionDurationAlertTrigger.type', {
122-
defaultMessage: 'Type',
123-
})}
124-
>
125-
<EuiSelect
126-
value={params.transactionType}
127-
options={transactionTypes.map((key) => {
128-
return {
129-
text: key,
130-
value: key,
131-
};
132-
})}
133-
onChange={(e) =>
134-
setAlertParams(
135-
'transactionType',
136-
e.target.value as AlertParams['transactionType']
137-
)
138-
}
139-
compressed
140-
/>
141-
</PopoverExpression>,
142103
<PopoverExpression
143104
value={params.aggregationType}
144105
title={i18n.translate('xpack.apm.transactionDurationAlertTrigger.when', {
@@ -153,33 +114,17 @@ export function TransactionDurationAlertTrigger(props: Props) {
153114
value: key,
154115
};
155116
})}
156-
onChange={(e) =>
157-
setAlertParams(
158-
'aggregationType',
159-
e.target.value as AlertParams['aggregationType']
160-
)
161-
}
162-
compressed
163-
/>
164-
</PopoverExpression>,
165-
<PopoverExpression
166-
value={params.threshold ? `${params.threshold}ms` : ''}
167-
title={i18n.translate(
168-
'xpack.apm.transactionDurationAlertTrigger.isAbove',
169-
{
170-
defaultMessage: 'is above',
171-
}
172-
)}
173-
>
174-
<EuiFieldNumber
175-
value={params.threshold ?? ''}
176-
onChange={(e) => setAlertParams('threshold', e.target.value)}
177-
append={i18n.translate('xpack.apm.transactionDurationAlertTrigger.ms', {
178-
defaultMessage: 'ms',
179-
})}
117+
onChange={(e) => setAlertParams('aggregationType', e.target.value)}
180118
compressed
181119
/>
182120
</PopoverExpression>,
121+
<IsAboveField
122+
value={params.threshold}
123+
unit={i18n.translate('xpack.apm.transactionDurationAlertTrigger.ms', {
124+
defaultMessage: 'ms',
125+
})}
126+
onChange={(value) => setAlertParams('threshold', value)}
127+
/>,
183128
<ForLastExpression
184129
onChangeWindowSize={(timeWindowSize) =>
185130
setAlertParams('windowSize', timeWindowSize || '')

‎x-pack/plugins/apm/public/components/alerting/TransactionDurationAnomalyAlertTrigger/index.tsx‎

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
import { EuiExpression, EuiSelect } from '@elastic/eui';
6+
77
import { useParams } from 'react-router-dom';
88
import { i18n } from '@kbn/i18n';
99
import React from 'react';
@@ -17,14 +17,16 @@ import {
1717
AnomalySeverity,
1818
SelectAnomalySeverity,
1919
} from './SelectAnomalySeverity';
20-
import {
21-
ENVIRONMENT_ALL,
22-
getEnvironmentLabel,
23-
} from '../../../../common/environment_filter_values';
20+
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
2421
import {
2522
TRANSACTION_PAGE_LOAD,
2623
TRANSACTION_REQUEST,
2724
} from '../../../../common/transaction_types';
25+
import {
26+
EnvironmentField,
27+
ServiceField,
28+
TransactionTypeField,
29+
} from '../fields';
2830

2931
interface Params {
3032
windowSize: number;
@@ -74,40 +76,13 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
7476
};
7577

7678
const fields = [
77-
<EuiExpression
78-
description={i18n.translate(
79-
'xpack.apm.transactionDurationAnomalyAlertTrigger.service',
80-
{
81-
defaultMessage: 'Service',
82-
}
83-
)}
84-
value={serviceName}
85-
/>,
86-
<EuiExpression
87-
description={i18n.translate(
88-
'xpack.apm.transactionDurationAnomalyAlertTrigger.transactionType',
89-
{
90-
defaultMessage: 'Transaction Type',
91-
}
92-
)}
93-
value={transactionType}
79+
<ServiceField value={serviceName} />,
80+
<TransactionTypeField currentValue={transactionType} />,
81+
<EnvironmentField
82+
currentValue={params.environment}
83+
options={environmentOptions}
84+
onChange={(e) => setAlertParams('environment', e.target.value)}
9485
/>,
95-
<PopoverExpression
96-
value={getEnvironmentLabel(params.environment)}
97-
title={i18n.translate(
98-
'xpack.apm.transactionDurationAnomalyAlertTrigger.environment',
99-
{
100-
defaultMessage: 'Environment',
101-
}
102-
)}
103-
>
104-
<EuiSelect
105-
value={params.environment}
106-
options={environmentOptions}
107-
onChange={(e) => setAlertParams('environment', e.target.value)}
108-
compressed
109-
/>
110-
</PopoverExpression>,
11186
<PopoverExpression
11287
value={<AnomalySeverity severityScore={params.anomalyScore} />}
11388
title={i18n.translate(

0 commit comments

Comments
 (0)