import Mustache from 'mustache' ; import React from 'react' ; import { SectionLink , SectionLinks , } from '../../../../../../observability/public' ; import { CustomLink } from '../../../../../common/custom_link/custom_link_types' ; import { Transaction } from '../../../../../typings/es_schemas/ui/transaction' ; import { unit } from '../../../../utils/style' ; export function CustomLinkList ( { customLinks , transaction , } ) { return ( < SectionLinks style = { { maxHeight : unit * 10 , overflowY : 'auto' } } > { customLinks . map ( ( link ) => { const href = getHref ( link , transaction ) ; return ( < SectionLink key = { link . id } label = { link . label } href = { href } target = "_blank" / > ) ; } ) } < /SectionLinks>); } function getHref ( link , transaction ) { try { return Mustache . render ( link . url , transaction ) ; } catch ( e ) { return link . url ; } }