import React from 'react' ; import { CollapsibleSection , InstanceLoadBalancerHealth , robotToHuman , Tooltip } from '@spinnaker/core' ; import type { IAmazonHealth } from '../../domain' ; export type MetricTypes = 'LoadBalancer' | 'TargetGroup' ; export interface CustomHealthLink { type : string ; href : string ; text : string ; } export interface IInstanceStatusProps { healthMetrics : IAmazonHealth [ ] ; healthState : string ; metricTypes : MetricTypes [ ] ; customHealthUrl ? : CustomHealthLink ; privateIpAddress ? : string ; } export const InstanceStatus = ( { healthMetrics , healthState , metricTypes , customHealthUrl , privateIpAddress , } ) => { const hasLoadBalancer = metricTypes . includes ( 'LoadBalancer' ) ; const hasTargetGroup = metricTypes . includes ( 'TargetGroup' ) ; return ( < CollapsibleSection heading = "Status" defaultExpanded = { true } > { ! healthMetrics . length && ( < p > { healthState === 'Starting' ? 'Starting' : 'No health metrics found for this instance' } < /p>)} < dl className = "horizontal-when-filters-collapsed" > { healthMetrics . sort ( ( a , b ) => ( a . type < b . type ? - 1 : a . type > b . type ? 1 : 0 ) ) . map ( ( metric ) => ( < React . Fragment key = { `${ metric . type }-${ metric . description }` } > < dt > { robotToHuman ( metric . type ) } < /dt> < dd > { ! metricTypes . includes ( metric . type as MetricTypes ) && ( < div > < Tooltip value = { metric . state . toLowerCase ( ) === 'down' ? metric . description : '' } placement = "left" > < span > < span className = { `glyphicon glyphicon-${ metric . state }-triangle` } /> < span > { robotToHuman ( metric . state ) } < /span> < /span> < /Tooltip> < span className = "pad-left small" > { metric . healthCheckUrl && ( < a target = "_blank" href = { metric . healthCheckUrl } > Health Check < / a > ) } { metric . healthCheckUrl && metric . statusPageUrl && < span > | < /span>} { metric . statusPageUrl && ( < a target = "_blank" href = { metric . statusPageUrl } > Status < /a>)} { customHealthUrl && metric . type === customHealthUrl . type && ( < span > { ' ' } | { ' ' } < a target = "_blank" href = { customHealthUrl . href } > { customHealthUrl . text } < /a> < /span>)} < /span> < /div>)} { hasLoadBalancer && metric . type === 'LoadBalancer' && ( metric . loadBalancers || [ ] ) . map ( ( lb ) => ( < InstanceLoadBalancerHealth key = { `lb-${ lb . name }` } loadBalancer = { lb } / > ) ) } { hasTargetGroup && metric . type === 'TargetGroup' && ( metric . targetGroups || [ ] ) . map ( ( tg ) => ( < InstanceLoadBalancerHealth key = { `tg-${ tg . name }` } loadBalancer = { tg } ipAddress = { privateIpAddress } / > ) ) } < /dd> < /React.Fragment>))} < /dl> < /CollapsibleSection>); } ;