import { has , sortBy } from 'lodash' ; import React from 'react' ; import { HelpField } from '@spinnaker/core' ; export interface IContainer { name : string ; image : string ; } export interface IManifestImageDetailsProps { manifest : { spec : { template : { spec : { containers : IContainer ; initContainers : IContainer ; } ; } ; } ; } ; } const normalizeImage = ( image ) : string => { if ( image && image . includes ( ':' ) ) { return image ; } return `${ image }:latest` ; } ; export const ManifestImageDetails = ( { manifest } ) => { if ( ! has ( manifest , 'spec.template.spec' ) ) { return null ; } const containers = sortBy ( manifest . spec . template . spec . containers || [ ] , [ 'image' ] ) ; const initContainers = sortBy ( manifest . spec . template . spec . initContainers || [ ] , [ 'image' ] ) ; const hasBothContainerTypes = containers . length > 0 && initContainers . length > 0 ; if ( containers . length === 0 && initContainers . length === 0 ) { return < span > No images . < /span>; } return ( < ul > { hasBothContainerTypes && < strong > Containers < /strong>} { containers . map ( ( container ) => ( < li key = { container . image } title = { normalizeImage ( container . image ) } className = "break-word" > { normalizeImage ( container . image ) } { ' ' } < HelpField content = { `This is container <strong>${ container . name }</strong>'s image.` } /> < /li>))} { hasBothContainerTypes && < strong > Init Containers < /strong>} { initContainers . map ( ( container ) => ( < li key = { container . image } className = "break-word" title = { normalizeImage ( container . image ) } > { normalizeImage ( container . image ) } { ' ' } < HelpField content = { `This is init container <strong>${ container . name }</strong>'s image.` } /> < /li>))} < /ul>); } ;