@@ -21,6 +21,7 @@ import {
21
21
EuiButtonIcon ,
22
22
EuiCompressedFieldText ,
23
23
EuiToolTip ,
24
+ EuiButtonEmpty ,
24
25
} from '@elastic/eui' ;
25
26
import { Field , FieldProps , FieldArray } from 'formik' ;
26
27
import React , { useEffect , useState } from 'react' ;
@@ -48,47 +49,7 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
48
49
{ value : SparseDataOptionValue . SET_TO_ZERO , text : 'Set to zero' } ,
49
50
{ value : SparseDataOptionValue . CUSTOM_VALUE , text : 'Custom value' } ,
50
51
] ;
51
-
52
- const aboveBelowOptions = [
53
- { value : 'above' , text : 'above' } ,
54
- { value : 'below' , text : 'below' } ,
55
- ] ;
56
-
57
- function extractArrayError ( fieldName : string , form : any ) : string {
58
- const error = form . errors [ fieldName ] ;
59
- console . log ( 'Error for field:' , fieldName , error ) ; // Log the error for debugging
60
-
61
- // Check if the error is an array with objects inside
62
- if ( Array . isArray ( error ) && error . length > 0 ) {
63
- // Iterate through the array to find the first non-empty error message
64
- for ( const err of error ) {
65
- if ( typeof err === 'object' && err !== null ) {
66
- const entry = Object . entries ( err ) . find (
67
- ( [ _ , fieldError ] ) => fieldError
68
- ) ; // Find the first entry with a non-empty error message
69
- if ( entry ) {
70
- const [ fieldKey , fieldError ] = entry ;
71
-
72
- // Replace fieldKey with a more user-friendly name if it matches specific fields
73
- const friendlyFieldName =
74
- fieldKey === 'absoluteThreshold'
75
- ? 'absolute threshold'
76
- : fieldKey === 'relativeThreshold'
77
- ? 'relative threshold'
78
- : fieldKey ; // Use the original fieldKey if no match
79
-
80
- return typeof fieldError === 'string'
81
- ? `${ friendlyFieldName } ${ fieldError . toLowerCase ( ) } ` // Format the error message with the friendly field name
82
- : String ( fieldError || '' ) ;
83
- }
84
- }
85
- }
86
- }
87
-
88
- // Default case to handle other types of errors
89
- return typeof error === 'string' ? error : String ( error || '' ) ;
90
- }
91
-
52
+
92
53
return (
93
54
< ContentPanel
94
55
title = {
@@ -257,160 +218,6 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
257
218
) ;
258
219
} }
259
220
</ Field >
260
-
261
- < EuiSpacer size = "m" />
262
- < FieldArray name = "suppressionRules" >
263
- { ( arrayHelpers ) => (
264
- < >
265
- < Field name = "suppressionRules" >
266
- { ( { field, form } : FieldProps ) => (
267
- < >
268
- < EuiFlexGroup >
269
- { /* Controls the width of the whole row as FormattedFormRow does not allow that. Otherwise, our row is too packed. */ }
270
- < EuiFlexItem
271
- grow = { false }
272
- style = { { maxWidth : '1200px' } }
273
- >
274
- < FormattedFormRow
275
- title = "Suppression Rules"
276
- hint = { [
277
- `Set rules to ignore anomalies by comparing actual values against expected values.
278
- Anomalies can be ignored if the difference is within a specified absolute value or a relative percentage of the expected value.` ,
279
- ] }
280
- hintLink = { `${ BASE_DOCS_LINK } /ad` }
281
- isInvalid = { isInvalid ( field . name , form ) }
282
- error = { extractArrayError ( field . name , form ) }
283
- fullWidth
284
- >
285
- < >
286
- { form . values . suppressionRules ?. map (
287
- ( rule , index ) => (
288
- < EuiFlexGroup
289
- key = { index }
290
- gutterSize = "s"
291
- alignItems = "center"
292
- >
293
- < EuiFlexItem grow = { false } >
294
- < EuiText size = "s" >
295
- Ignore anomalies for the feature
296
- </ EuiText >
297
- </ EuiFlexItem >
298
- < EuiFlexItem grow = { 2 } >
299
- < Field
300
- name = { `suppressionRules.${ index } .featureName` }
301
- >
302
- { ( { field } : FieldProps ) => (
303
- < EuiCompressedFieldText
304
- placeholder = "Feature name"
305
- { ...field }
306
- fullWidth
307
- />
308
- ) }
309
- </ Field >
310
- </ EuiFlexItem >
311
- < EuiFlexItem grow = { false } >
312
- < EuiText size = "s" >
313
- when the actual value is no more than
314
- </ EuiText >
315
- </ EuiFlexItem >
316
- < EuiFlexItem grow = { 1 } >
317
- < EuiToolTip content = "Absolute threshold value" >
318
- < Field
319
- name = { `suppressionRules.${ index } .absoluteThreshold` }
320
- validate = { validatePositiveDecimal }
321
- >
322
- { ( { field } : FieldProps ) => (
323
- < EuiCompressedFieldNumber
324
- placeholder = "Absolute"
325
- { ...field }
326
- value = { field . value || '' }
327
- />
328
- ) }
329
- </ Field >
330
- </ EuiToolTip >
331
- </ EuiFlexItem >
332
- < EuiFlexItem grow = { false } >
333
- < EuiText size = "s" > or</ EuiText >
334
- </ EuiFlexItem >
335
- < EuiFlexItem grow = { 1 } >
336
- < EuiToolTip content = "Relative threshold value as a percentage" >
337
- < Field
338
- name = { `suppressionRules.${ index } .relativeThreshold` }
339
- validate = { validatePositiveDecimal }
340
- >
341
- { ( { field } : FieldProps ) => (
342
- < div
343
- style = { {
344
- display : 'flex' ,
345
- alignItems : 'center' ,
346
- } }
347
- >
348
- < EuiCompressedFieldNumber
349
- placeholder = "Relative"
350
- { ...field }
351
- value = { field . value || '' }
352
- />
353
- < EuiText size = "s" > %</ EuiText >
354
- </ div >
355
- ) }
356
- </ Field >
357
- </ EuiToolTip >
358
- </ EuiFlexItem >
359
- < EuiFlexItem grow = { 1 } >
360
- < EuiToolTip content = "Select above or below expected value" >
361
- < Field
362
- name = { `suppressionRules.${ index } .aboveBelow` }
363
- >
364
- { ( { field } : FieldProps ) => (
365
- < EuiCompressedSelect
366
- options = { aboveBelowOptions }
367
- { ...field }
368
- />
369
- ) }
370
- </ Field >
371
- </ EuiToolTip >
372
- </ EuiFlexItem >
373
- < EuiFlexItem grow = { false } >
374
- < EuiText size = "s" >
375
- the expected value.
376
- </ EuiText >
377
- </ EuiFlexItem >
378
- < EuiFlexItem grow = { false } >
379
- < EuiButtonIcon
380
- iconType = "trash"
381
- color = "danger"
382
- aria-label = "Delete rule"
383
- onClick = { ( ) =>
384
- arrayHelpers . remove ( index )
385
- }
386
- />
387
- </ EuiFlexItem >
388
- </ EuiFlexGroup >
389
- )
390
- ) }
391
- </ >
392
- </ FormattedFormRow >
393
- </ EuiFlexItem >
394
- </ EuiFlexGroup >
395
- </ >
396
- ) }
397
- </ Field >
398
- < EuiSpacer size = "s" />
399
- < EuiButtonIcon
400
- iconType = "plusInCircle"
401
- onClick = { ( ) =>
402
- arrayHelpers . push ( {
403
- fieldName : '' ,
404
- absoluteThreshold : null , // Set to null to allow empty inputs
405
- relativeThreshold : null , // Set to null to allow empty inputs
406
- aboveBelow : 'above' ,
407
- } )
408
- }
409
- aria-label = "Add rule"
410
- />
411
- </ >
412
- ) }
413
- </ FieldArray >
414
221
</ >
415
222
) : null }
416
223
</ ContentPanel >
0 commit comments