import {Duration, Ticker} from 'argo-ui'; import * as moment from 'moment'; import * as React from 'react'; import {Revision, Timestamp} from '../../../shared/components'; import * as models from '../../../shared/models'; import {getHydratorSyncSourceRepoURL} from '../utils'; import './application-hydrate-operation-state.scss'; interface Props { hydrateOperationState: models.HydrateOperation; } export const ApplicationHydrateOperationState: React.FunctionComponent = ({hydrateOperationState}) => { const operationAttributes = [ {title: 'PHASE', value: hydrateOperationState.phase}, ...(hydrateOperationState.message ? [{title: 'MESSAGE', value: hydrateOperationState.message}] : []), {title: 'STARTED AT', value: }, { title: 'DURATION', value: ( {time => ( )} ) } ]; if (hydrateOperationState.finishedAt && hydrateOperationState.phase !== 'Hydrating') { operationAttributes.push({title: 'FINISHED AT', value: }); } if (hydrateOperationState.drySHA) { operationAttributes.push({ title: 'DRY REVISION', value: (

) }); } if (hydrateOperationState.finishedAt && hydrateOperationState.hydratedSHA) { operationAttributes.push({ title: 'HYDRATED REVISION', value: (

) }); } return (

{operationAttributes.map(attr => (

{attr.title}

{attr.value}

))}

); };