import { UISref } from '@uirouter/react' ; import { get } from 'lodash' ; import { DateTime } from 'luxon' ; import React from 'react' ; import type { IManifest } from '@spinnaker/core' ; import { AccountTag , CloudProviderLogo , CollapsibleSection , Spinner , timestamp } from '@spinnaker/core' ; import { ManifestLabels } from '../manifest/ManifestLabels' ; import { KubernetesManifestService } from '../manifest/manifest.service' ; import { ManifestCondition } from '../manifest/status/ManifestCondition' ; import { ManifestEvents } from '../pipelines/stages/deployManifest/manifestStatus/ManifestEvents' ; export interface IKubernetesResourceDetailsProps { app : any ; kubernetesResource : any ; } export interface IKubernetesResourceDetailsState { manifest ? : IManifest ; loading : boolean ; } export class KubernetesResourceDetails extends React . Component < IKubernetesResourceDetailsProps , IKubernetesResourceDetailsState > { private unsubscribeManifest ? : ( ) => void ; constructor ( props ) { super ( props ) ; this . state = { loading : true , manifest : null , } ; } public componentDidMount ( ) { const { kubernetesResource } = this . props ; const params = { account : kubernetesResource . accountId , location : kubernetesResource . region , name : kubernetesResource . kubernetesResource , } ; this . unsubscribeManifest = KubernetesManifestService . subscribe ( this . props . app , params , ( manifest ) => { if ( this . unsubscribeManifest != null ) { this . setState ( { manifest , loading : false } ) ; } } ) ; } public componentWillUnmount ( ) { if ( this . unsubscribeManifest ) { this . unsubscribeManifest ( ) ; this . unsubscribeManifest = null ; } } public render ( ) { const { manifest } = this . state ; const metadata = get ( manifest , [ 'manifest' , 'metadata' ] , null ) ; const creationUnixMs = get ( metadata , 'creationTimestamp' ) && DateTime . fromISO ( metadata . creationTimestamp ) . toMillis ( ) ; return ( < div className = "details-panel" > < div className = "header" > < div className = "close-button" > < a className = "btn btn-link" > < UISref to = "^" > < span className = "glyphicon glyphicon-remove" / > < /UISref> < /a> < /div> { this . state . loading ? ( < div className = "horizontal center middle" > < Spinner size = "small" / > < /div>) : (<div className="header-text horizontal middle"> < CloudProviderLogo provider = "kubernetes" height = "36px" width = "36px" / > < h3 className = "horizontal middle space-between flex-1" > { get ( metadata , [ 'name' ] , '' ) } < /h3> < /div>)} < /div> { ! this . state . loading && ( < div className = "content" > < CollapsibleSection heading = "Information" > < dl className = "dl-horizontal dl-narrow" > < dt > Created < /dt> < dd > { timestamp ( creationUnixMs ) } < /dd> < dt > Account < /dt> < dd > < AccountTag account = { get ( manifest , [ 'account' ] , '' ) } /> < /dd> < dt > Namespace < /dt> < dd > { get ( metadata , [ 'namespace' ] , '' ) } < /dd> < dt > Kind < /dt> < dd > { get ( manifest , [ 'manifest' , 'kind' ] , '' ) } < /dd> < /dl> < /CollapsibleSection> < CollapsibleSection key = "status" heading = "status" defaultExpanded = { true } > < ul > { get ( manifest , [ 'manifest' , 'status' , 'conditions' ] , [ ] ) . map ( ( condition ) => ( < li key = { condition . type + condition . lastTransitionTime } style = { { marginBottom : '10px' } } > < ManifestCondition condition = { condition } /> < /li>))} < /ul> < /CollapsibleSection> < CollapsibleSection key = "events" heading = "events" defaultExpanded = { true } > < ManifestEvents manifest = { manifest } /> < /CollapsibleSection> < CollapsibleSection key = "labels" heading = "labels" defaultExpanded = { true } > < ManifestLabels manifest = { get ( manifest , [ 'manifest' ] , { } ) } /> < /CollapsibleSection> < /div>)} < /div>); } }