import React from 'react' ; import { keyBy } from 'lodash' ; import type { ApmUrlParams } from '../../../../../context/url_params_context/types' ; import { IWaterfall , WaterfallLegendType , } from './waterfall/waterfall_helpers/waterfall_helpers' ; import { Waterfall } from './waterfall' ; import { WaterfallLegends } from './waterfall_legends' ; import { useApmServiceContext } from '../../../../../context/apm_service/use_apm_service_context' ; interface Props { urlParams : ApmUrlParams ; waterfall : IWaterfall ; } export function WaterfallContainer ( { urlParams , waterfall } ) { const { serviceName } = useApmServiceContext ( ) ; if ( ! waterfall ) { return null ; } const { legends , items } = waterfall ; const serviceLegends = legends . filter ( ( { type } ) => type === WaterfallLegendType . ServiceName ) ; const serviceColors = serviceLegends . reduce ( ( colorMap , legend ) => { return { ... colorMap , [ legend . value ! ] : legend . color , } ; } , { } as Record < string , string > ) ; const colorBy = serviceLegends . length > 1 ? WaterfallLegendType . ServiceName : WaterfallLegendType . SpanType ; const displayedLegends = legends . filter ( ( legend ) => legend . type === colorBy ) ; const legendsByValue = keyBy ( displayedLegends , 'value' ) ; items . forEach ( ( item ) => { let color = '' ; if ( 'legendValues' in item ) { color = legendsByValue [ item . legendValues [ colorBy ] ] . color ; } if ( ! color ) { color = serviceColors [ item . doc . service . name ] ; } item . color = color ; } ) ; const legendsWithFallbackLabel = displayedLegends . map ( ( legend ) => { return { ... legend , value : ! legend . value ? serviceName : legend . value } ; } ) ; return ( < div > < WaterfallLegends legends = { legendsWithFallbackLabel } type = { colorBy } / > < Waterfall waterfallItemId = { urlParams . waterfallItemId } waterfall = { waterfall } / > < /div>); }