Skip to content

Commit 1ff12c9

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #540 from devtron-labs/fix/build-time-breakdown
feat: add backward compatibility and UAT for Build time breakdown
2 parents a7138d5 + 0ed6dc9 commit 1ff12c9

File tree

14 files changed

+250
-182
lines changed

14 files changed

+250
-182
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.5.11",
3+
"version": "1.5.11-beta-4",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/Icon/ic-environment.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-pulsate-status.svg

Lines changed: 0 additions & 1 deletion
Loading

‎src/Common/AppStatus/AppStatus.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@
1515
*/
1616

1717
import Tippy from '@tippyjs/react'
18+
import { WorkflowStatusEnum } from '@Shared/types'
19+
import { renderProgressingTriggerIcon } from '@Shared/Components'
1820
import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
19-
import { ReactComponent as InfoIcon } from '../../Assets/Icon/ic-info-outlined.svg'
21+
import { ReactComponent as InfoIcon } from '@Icons/ic-info-outlined.svg'
2022
import { StatusConstants, YET_TO_RUN } from './constants'
2123
import { AppStatusType } from './types'
22-
import { triggerStatus } from './utils'
24+
import { parseJobStatus, triggerStatus } from './utils'
2325

2426
export default function AppStatus({
2527
appStatus,
@@ -31,6 +33,8 @@ export default function AppStatus({
3133
let status = appStatus
3234
if (isDeploymentStatus) {
3335
status = triggerStatus(appStatus)
36+
} else if (isJobView) {
37+
status = parseJobStatus(appStatus)
3438
}
3539
const appStatusLowerCase = status?.toLowerCase()
3640
const isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower
@@ -52,6 +56,10 @@ export default function AppStatus({
5256
const iconClass = getIconClass()
5357

5458
const renderIcon = () => {
59+
if (isJobView && appStatus === WorkflowStatusEnum.WAITING_TO_START) {
60+
return renderProgressingTriggerIcon()
61+
}
62+
5563
if (iconClass) {
5664
return iconClass === 'failed' || iconClass === 'error' ? (
5765
<ICErrorCross className="icon-dim-16 dc__no-shrink ic-error-cross-red" />

‎src/Common/AppStatus/utils.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { WorkflowStatusEnum } from '@Shared/types'
1718
import { TIMELINE_STATUS } from '../../Shared/constants'
1819

1920
export const triggerStatus = (triggerDetailStatus: string): string => {
@@ -29,3 +30,11 @@ export const triggerStatus = (triggerDetailStatus: string): string => {
2930
}
3031
return triggerDetailStatus
3132
}
33+
34+
export const parseJobStatus = (status: string): string => {
35+
if (status === WorkflowStatusEnum.WAITING_TO_START) {
36+
return 'Waiting to start'
37+
}
38+
39+
return status
40+
}

‎src/Shared/Components/CICDHistory/Artifacts.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { ReactComponent as ICHelpOutline } from '@Icons/ic-help.svg'
2424
import folder from '@Icons/ic-folder.svg'
2525
import docker from '@Icons/ic-docker.svg'
2626
import noartifact from '@Images/no-artifact.webp'
27+
import { getIsApprovalPolicyConfigured } from '@Shared/Helpers'
2728
import { TargetPlatformBadgeList } from '../TargetPlatforms'
2829
import {
2930
GenericEmptyState,
@@ -66,7 +67,9 @@ export const CIListItem = ({
6667
targetPlatforms,
6768
}: CIListItemType) => {
6869
const headerMetaDataPresent =
69-
!!userApprovalMetadata || !!appliedFilters?.length || !!promotionApprovalMetadata?.promotedFromType
70+
!!getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) ||
71+
!!appliedFilters?.length ||
72+
!!promotionApprovalMetadata?.promotedFromType
7073

7174
return (
7275
<>
@@ -153,14 +156,20 @@ const Artifacts = ({
153156
buildId: string
154157
}>()
155158

159+
const lowerCaseStatus = status.toLowerCase()
160+
156161
async function handleArtifact() {
157162
await handleDownload({
158163
downloadUrl: downloadArtifactUrl,
159164
fileName: `${buildId || triggerId}.zip`,
160165
})
161166
}
162167

163-
if (status.toLowerCase() === TERMINAL_STATUS_MAP.RUNNING || status.toLowerCase() === TERMINAL_STATUS_MAP.STARTING) {
168+
if (
169+
lowerCaseStatus === TERMINAL_STATUS_MAP.RUNNING ||
170+
lowerCaseStatus === TERMINAL_STATUS_MAP.STARTING ||
171+
lowerCaseStatus === TERMINAL_STATUS_MAP.WAITING_TO_START
172+
) {
164173
return <CIProgressView />
165174
}
166175
// If artifactId is not 0 image info is shown, if isArtifactUploaded is true reports are shown
@@ -170,9 +179,10 @@ const Artifacts = ({
170179
// NOTE: This means there are no reports and no image artifacts i.e. empty state
171180
if (!isArtifactUploaded && !artifactId) {
172181
if (
173-
status.toLowerCase() === TERMINAL_STATUS_MAP.FAILED ||
174-
status.toLowerCase() === TERMINAL_STATUS_MAP.CANCELLED ||
175-
status.toLowerCase() === TERMINAL_STATUS_MAP.ERROR
182+
lowerCaseStatus === TERMINAL_STATUS_MAP.FAILED ||
183+
lowerCaseStatus === TERMINAL_STATUS_MAP.CANCELLED ||
184+
lowerCaseStatus === TERMINAL_STATUS_MAP.ERROR ||
185+
lowerCaseStatus === TERMINAL_STATUS_MAP.TIMED_OUT
176186
) {
177187
return (
178188
<GenericEmptyState
@@ -190,7 +200,7 @@ const Artifacts = ({
190200
)
191201
}
192202

193-
if (status.toLowerCase() === TERMINAL_STATUS_MAP.SUCCEEDED) {
203+
if (lowerCaseStatus === TERMINAL_STATUS_MAP.SUCCEEDED) {
194204
return (
195205
<GenericEmptyState
196206
title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsFound}

‎src/Shared/Components/CICDHistory/GitTriggerList.tsx

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const GitTriggerList = memo(
3030
}
3131

3232
return (
33-
<div className={`${addMarginTop ? 'mt-22' : ''}`} key={ciMaterial.id}>
33+
<div className={`${addMarginTop ? 'mt-16' : ''}`} key={ciMaterial.id}>
3434
{sourceType === SourceTypeMap.WEBHOOK ? (
3535
<div className="flex left column">
3636
<CiPipelineSourceConfig
@@ -40,29 +40,20 @@ const GitTriggerList = memo(
4040
/>
4141
</div>
4242
) : (
43-
<div className="flexbox-col dc__gap-8">
44-
<div className="flexbox dc__gap-4 dc__align-start flex-wrap">
43+
<div className="flexbox-col dc__gap-4">
44+
<div className="flexbox dc__gap-6 dc__align-start">
4545
{renderMaterialIcon(gitMaterialUrl)}
4646

4747
{gitDetail?.GitRepoName && (
48-
<>
49-
<span className="cn-9 fs-13 fw-6 lh-20 dc__word-break">
50-
{gitDetail.GitRepoName}
51-
</span>
52-
53-
<span className="cn-5 fs-13 fw-4 lh-20 dc__no-shrink">/</span>
54-
</>
48+
<span className="cn-9 fs-13 fw-6 lh-20 dc__word-break">
49+
{gitDetail.GitRepoName}
50+
</span>
5551
)}
52+
</div>
5653

57-
<a
58-
href={createGitCommitUrl(gitMaterialUrl, gitDetail?.Commit)}
59-
target="_blank"
60-
rel="noopener noreferrer"
61-
className="anchor flexbox dc__gap-2 dc__align-items-center dc__word-break"
62-
>
63-
<ICBranch className="icon-dim-12 dc__no-shrink fcn-7" />
64-
{sourceValue}
65-
</a>
54+
<div className="flexbox dc__gap-6 dc__align-start">
55+
<ICBranch className="icon-dim-20 p-2 dc__no-shrink fcn-7" />
56+
<span className="cn-7 dc__word-break fs-13 fw-4 lh-16">{sourceValue}</span>
6657
</div>
6758

6859
{gitDetail?.Commit && (

‎src/Shared/Components/CICDHistory/Sidebar.tsx

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,14 @@ import {
3434
import BuildAndTaskSummaryTooltipCard from './BuildAndTaskSummaryTooltipCard'
3535
import { getCustomOptionSelectionStyle } from '../ReactSelect'
3636
import { DetectBottom } from '../DetectBottom'
37-
import { ConditionalWrap, DATE_TIME_FORMATS, DropdownIndicator } from '../../../Common'
37+
import { ConditionalWrap, DATE_TIME_FORMATS, DropdownIndicator, Tooltip } from '../../../Common'
3838
import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constants'
3939
import { getHistoryItemStatusIconFromWorkflowStages, getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
4040
import GitTriggerList from './GitTriggerList'
4141

42+
/**
43+
* @description To be shown on deployment history or when we don't have workflowExecutionStages
44+
*/
4245
const DeploymentSummaryTooltipCard = memo(
4346
({
4447
status,
@@ -47,22 +50,32 @@ const DeploymentSummaryTooltipCard = memo(
4750
triggeredByEmail,
4851
ciMaterials,
4952
gitTriggers,
50-
}: DeploymentSummaryTooltipCardType): JSX.Element => (
51-
<div className="shadow__overlay p-16 br-4 w-400 bg__overlay border__primary mxh-300 dc__overflow-auto">
52-
<span className="fw-6 fs-16 mb-4" style={{ color: colorMap[status.toLowerCase()] }}>
53-
{getWorkflowNodeStatusTitle(status)}
54-
</span>
55-
<div className="flex column left">
56-
<div className="flex left fs-12 cn-7">
57-
<div>{moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}</div>
58-
<div className="dc__bullet ml-6 mr-6" />
59-
<div>{triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}</div>
60-
</div>
53+
}: DeploymentSummaryTooltipCardType): JSX.Element => {
54+
const triggeredByText = triggeredBy === 1 ? 'auto trigger' : triggeredByEmail
55+
56+
return (
57+
<div className="shadow__overlay p-16 br-4 w-400 bg__overlay border__primary mxh-300 dc__overflow-auto">
58+
<span className="fw-6 fs-16 mb-4" style={{ color: colorMap[status.toLowerCase()] }}>
59+
{getWorkflowNodeStatusTitle(status)}
60+
</span>
61+
<div className="flex column left">
62+
<div className="flex left fs-12 cn-7">
63+
<div className="dc__no-shrink">
64+
{moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
65+
</div>
66+
67+
<div className="dc__bullet ml-6 mr-6 dc__no-shrink" />
68+
69+
<Tooltip content={triggeredByText}>
70+
<span className="dc__truncate">{triggeredByText}</span>
71+
</Tooltip>
72+
</div>
6173

62-
<GitTriggerList addMarginTop ciMaterials={ciMaterials} gitTriggers={gitTriggers} />
74+
<GitTriggerList addMarginTop ciMaterials={ciMaterials} gitTriggers={gitTriggers} />
75+
</div>
6376
</div>
64-
</div>
65-
),
77+
)
78+
},
6679
)
6780

6881
const ViewAllCardsTile = memo(
@@ -142,6 +155,9 @@ const HistorySummaryCard = memo(
142155
}
143156
}
144157

158+
const areWorkerStatusSeparated =
159+
stage !== DeploymentStageType.DEPLOY && Object.keys(workflowExecutionStages || {}).length > 0
160+
145161
return (
146162
<ConditionalWrap
147163
condition={Array.isArray(ciMaterials)}
@@ -151,16 +167,8 @@ const HistorySummaryCard = memo(
151167
placement="right"
152168
interactive
153169
render={() =>
154-
stage === DeploymentStageType.DEPLOY ? (
155-
<DeploymentSummaryTooltipCard
156-
status={status}
157-
startedOn={startedOn}
158-
triggeredBy={triggeredBy}
159-
triggeredByEmail={triggeredByEmail}
160-
ciMaterials={ciMaterials}
161-
gitTriggers={gitTriggers}
162-
/>
163-
) : (
170+
// Adding check for workflowExecutionStages to cater backward compatibility
171+
areWorkerStatusSeparated ? (
164172
<BuildAndTaskSummaryTooltipCard
165173
workflowExecutionStages={workflowExecutionStages}
166174
triggeredByEmail={triggeredByEmail}
@@ -170,6 +178,15 @@ const HistorySummaryCard = memo(
170178
gitTriggers={gitTriggers}
171179
ciMaterials={ciMaterials}
172180
/>
181+
) : (
182+
<DeploymentSummaryTooltipCard
183+
status={status}
184+
startedOn={startedOn}
185+
triggeredBy={triggeredBy}
186+
triggeredByEmail={triggeredByEmail}
187+
ciMaterials={ciMaterials}
188+
gitTriggers={gitTriggers}
189+
/>
173190
)
174191
}
175192
>
@@ -185,7 +202,7 @@ const HistorySummaryCard = memo(
185202
ref={assignTargetCardRef}
186203
>
187204
<div className="w-100 deployment-history-card">
188-
{stage !== DeploymentStageType.DEPLOY && !!workflowExecutionStages
205+
{areWorkerStatusSeparated
189206
? getHistoryItemStatusIconFromWorkflowStages(workflowExecutionStages)
190207
: getTriggerStatusIcon(status)}
191208
<div className="flexbox-col dc__gap-8">

0 commit comments

Comments
 (0)