import React , { Fragment , FC } from 'react' ; import { AnnotationDomainType , LineAnnotation } from '@elastic/charts' ; import { Anomaly } from '../../../../common/results_loader' ; import { getSeverityColor } from '../../../../../../../../common/util/anomaly_utils' ; import { ANOMALY_THRESHOLD } from '../../../../../../../../common/constants/anomalies' ; interface Props { anomalyData ? : Anomaly [ ] ; } interface Severities { critical : any [ ] ; major : any [ ] ; minor : any [ ] ; warning : any [ ] ; unknown : any [ ] ; low : any [ ] ; } function getAnomalyStyle ( threshold ) { return { line : { stroke : getSeverityColor ( threshold ) , strokeWidth : 3 , opacity : 1 , } , } ; } function splitAnomalySeverities ( anomalies ) { const severities = { critical : [ ] , major : [ ] , minor : [ ] , warning : [ ] , unknown : [ ] , low : [ ] , } ; anomalies . forEach ( ( a ) => { if ( a . value !== 0 ) { severities [ a . severity ] . push ( { dataValue : a . time } ) ; } } ) ; return severities ; } export const Anomalies = ( { anomalyData } ) => { const anomalies = anomalyData === undefined ? [ ] : anomalyData ; const severities = splitAnomalySeverities ( anomalies ) ; return ( < Fragment > < LineAnnotation id = "low" domainType = { AnnotationDomainType . XDomain } dataValues = { severities . low } style = { getAnomalyStyle ( ANOMALY_THRESHOLD . LOW ) } hideTooltips = { true } / > < LineAnnotation id = "warning" domainType = { AnnotationDomainType . XDomain } dataValues = { severities . warning } style = { getAnomalyStyle ( ANOMALY_THRESHOLD . WARNING ) } hideTooltips = { true } / > < LineAnnotation id = "minor" domainType = { AnnotationDomainType . XDomain } dataValues = { severities . minor } style = { getAnomalyStyle ( ANOMALY_THRESHOLD . MINOR ) } hideTooltips = { true } / > < LineAnnotation id = "major" domainType = { AnnotationDomainType . XDomain } dataValues = { severities . major } style = { getAnomalyStyle ( ANOMALY_THRESHOLD . MAJOR ) } hideTooltips = { true } / > < LineAnnotation id = "critical" domainType = { AnnotationDomainType . XDomain } dataValues = { severities . critical } style = { getAnomalyStyle ( ANOMALY_THRESHOLD . CRITICAL ) } hideTooltips = { true } / > < /Fragment>); } ;