Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 3x 6x 6x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { Popover, Position } from '@blueprintjs/core'
import { Icon } from '@wings-software/uicore'
import cx from 'classnames'
import { String } from 'framework/strings'
import type { ServiceExecutionSummary } from 'services/cd-ng'
import { ServicePopoverCard } from '../ServicePopoverCard/ServicePopoverCard'
import { ServicesTable } from './ServicesTable'
import css from './CDExecutionSummary.module.scss'
interface ServicesListProps {
services: ServiceExecutionSummary[]
className?: string
limit: number
}
export function ServicesList({ services, limit = 2, className }: ServicesListProps): React.ReactElement {
return (
<div className={cx(css.main, className)}>
<Icon name="services" className={css.servicesIcon} size={18} />
<div className={css.servicesList}>
{services.slice(0, limit).map(service => {
const { identifier } = service
return (
<Popover
key={identifier}
wrapperTagName="div"
targetTagName="div"
interactionKind="hover"
position={Position.BOTTOM_RIGHT}
className={css.serviceWrapper}
>
<div className={css.serviceName}>{service.displayName}</div>
<ServicePopoverCard service={service} />
</Popover>
)
})}
{services.length > limit ? (
<Popover
wrapperTagName="div"
targetTagName="div"
interactionKind="hover"
position={Position.BOTTOM_RIGHT}
className={css.serviceWrapper}
>
<String
tagName="div"
className={cx(css.serviceName, css.count)}
stringID={'common.plusNumberNoSpace'}
vars={{ number: Math.abs(services.length - limit) }}
/>
<ServicesTable services={services.slice(limit)} />
</Popover>
) : null}
</div>
</div>
)
}
|