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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 5x 3x 3x 2x 2x 2x 1x 3x 2x | /*
* Copyright 2021 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 moment from 'moment'
import { partition } from 'lodash-es'
import { Text } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { useExecutionContext } from '@pipeline/context/ExecutionContext'
import { isExecutionComplete, isExecutionSkipped } from '@pipeline/utils/statusHelpers'
import { String, useStrings } from 'framework/strings'
import { Collapse } from '@pipeline/components/execution/StepDetails/common/Collapse/Collapse'
import css from './PipelineDetailsTab.module.scss'
export function PipelineDetailsTab(): React.ReactElement {
const { pipelineStagesMap, queryParams } = useExecutionContext()
const { getString } = useStrings()
const [completedStages, upcomingStages] = partition(
[...pipelineStagesMap.values()].filter(stage => !isExecutionSkipped(stage.status)),
stage => isExecutionComplete(stage.status)
)
const filteredCompletedStages = completedStages.reverse().filter(stage => queryParams.stage !== stage.nodeUuid)
const filteredUpcomingStages = upcomingStages.filter(stage => queryParams.stage !== stage.nodeUuid)
return (
<div className={css.main}>
<div className={css.upcoming}>
<String stringID="pipeline.execution.upcomingStagesPrefix" />
{filteredUpcomingStages.length > 0 ? (
<span>{filteredUpcomingStages.map(stage => stage.name).join(', ')}</span>
) : (
<String stringID="none" />
)}
</div>
<String tagName="div" className={css.title} stringID="pipeline.execution.stagesExecuted" />
{filteredCompletedStages.length > 0 ? (
filteredCompletedStages.map(stage => (
<div key={stage.nodeUuid}>
<Collapse
titleContentClassName={css.summary}
titleClassName={css.collapseTitle}
title={
<React.Fragment>
<div>{`${getString('pipeline.execution.stageTitlePrefix')} ${stage.name}`}</div>
<div>
{stage.endTs
? `${getString('pipeline.execution.timePrefix')}${moment(stage.endTs).fromNow()}`
: /* istanbul ignore next */ null}
</div>
</React.Fragment>
}
isDefaultOpen
>
{stage.moduleInfo?.cd ? (
<div className={css.stageInfo}>
<div>
<String className={css.heading} tagName="div" stringID="serviceOrServices" />
<Text lineClamp={1} font={{ size: 'small' }} color={Color.BLACK}>
{stage.moduleInfo.cd.serviceInfo?.displayName}
</Text>
</div>
<div>
<String className={css.heading} tagName="div" stringID="artifactOrArtifacts" />
<div>
{[
stage.moduleInfo.cd.serviceInfo?.artifacts?.primary ? (
<div>
<Text lineClamp={1} font={{ size: 'small' }} color={Color.BLACK}>
{stage.moduleInfo.cd.serviceInfo.artifacts.primary.imagePath}
</Text>
<Text lineClamp={1} font={{ size: 'small' }} color={Color.BLACK}>
({getString('common.artifactTag')}: #
{stage.moduleInfo.cd.serviceInfo.artifacts.primary.tag})
</Text>
</div>
) : (
''
),
...(stage.moduleInfo.cd.serviceInfo?.artifacts?.sidecars || /* istanbul ignore next */ []).map(
(artifact: any) => (
<div key={artifact.imagePath}>
<Text lineClamp={1} color={Color.BLACK}>
{artifact.imagePath}
</Text>
<Text lineClamp={1} color={Color.BLACK}>
({getString('common.artifactTag')}: #{artifact.tag})
</Text>
</div>
)
)
]
.filter(str => str)
.map((str, i) => (
<div key={i}>{str}</div>
))}
</div>
</div>
<div>
<String className={css.heading} tagName="div" stringID="environmentOrEnvironments" />
<Text lineClamp={1} font={{ size: 'small' }} color={Color.BLACK}>
{stage.moduleInfo.cd.infraExecutionSummary?.name}
</Text>
</div>
</div>
) : /* istanbul ignore next */ null}
</Collapse>
</div>
))
) : (
<String stringID="none" />
)}
</div>
)
}
|