Skip to content

Commit 45489be

Browse files
AbhishekA1509AbhishekA1509
committed
feat: add BuildAndTaskSummaryTooltipCard and GitTriggerList components for enhanced CICD history display
1 parent 07c9d8b commit 45489be

File tree

4 files changed

+167
-169
lines changed

4 files changed

+167
-169
lines changed

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { memo } from 'react'
2+
import { Tooltip } from '@Common/Tooltip'
3+
import { ReactComponent as ICCalendar } from '@Icons/ic-calendar.svg'
4+
import { ReactComponent as ICUserCircle } from '@Icons/ic-user-circle.svg'
5+
import GitTriggerList from './GitTriggerList'
6+
import { WorkerStatus } from './TriggerOutput'
7+
import { DEFAULT_CLUSTER_ID } from './constants'
8+
import { getFormattedTriggerTime, sanitizeWorkflowExecutionStages } from './utils'
9+
import { BuildAndTaskSummaryTooltipCardProps } from './types'
10+
11+
const BuildAndTaskSummaryTooltipCard = memo(
12+
({
13+
workflowExecutionStages,
14+
triggeredByEmail,
15+
namespace,
16+
podName,
17+
stage,
18+
gitTriggers,
19+
ciMaterials,
20+
}: BuildAndTaskSummaryTooltipCardProps): JSX.Element => {
21+
const executionInfo = sanitizeWorkflowExecutionStages(workflowExecutionStages)
22+
23+
return (
24+
<div className="shadow__overlay p-16 br-4 w-350 bg__primary mxh-300 dc__overflow-auto flexbox-col dc__gap-16">
25+
{/* Info section */}
26+
<div className="dc__icon-text-layout">
27+
<ICCalendar className="fcn-7 icon-dim-20 dc__no-shrink" />
28+
<time className="cn-9 fs-12 cn-9 fw-4 lh-20">
29+
{executionInfo?.triggeredOn ? getFormattedTriggerTime(executionInfo.triggeredOn) : '--'}
30+
</time>
31+
32+
<ICUserCircle className="fcn-7 icon-dim-20 dc__no-shrink" />
33+
<Tooltip content={triggeredByEmail}>
34+
<span className="cn-9 fs-12 fw-4 lh-20 dc__truncate">{triggeredByEmail}</span>
35+
</Tooltip>
36+
37+
<WorkerStatus
38+
message={executionInfo?.workerDetails?.message}
39+
podStatus={executionInfo?.workerDetails?.status}
40+
stage={stage}
41+
finishedOn={executionInfo?.workerDetails?.endTime}
42+
clusterId={executionInfo?.workerDetails?.clusterId || DEFAULT_CLUSTER_ID}
43+
workerPodName={podName}
44+
namespace={namespace}
45+
workerMessageContainerClassName="cn-7 fs-12 fw-4 lh-18"
46+
titleClassName="cn-9 fs-12 fw-4 lh-20"
47+
viewWorkerPodClassName="fs-12"
48+
/>
49+
</div>
50+
51+
{Object.keys(gitTriggers ?? {}).length > 0 && ciMaterials?.length > 0 && (
52+
<div className="dc__border-bottom-n1" />
53+
)}
54+
55+
<GitTriggerList gitTriggers={gitTriggers} ciMaterials={ciMaterials} />
56+
</div>
57+
)
58+
},
59+
)
60+
61+
export default BuildAndTaskSummaryTooltipCard

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { memo } from 'react'
2+
import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
3+
import { GitTriggers } from '@Shared/types'
4+
import { createGitCommitUrl, SourceTypeMap } from '@Common/Common.service'
5+
import { getHandleOpenURL, renderMaterialIcon } from '@Shared/Helpers'
6+
import { Tooltip } from '@Common/Tooltip'
7+
import { DeploymentSummaryTooltipCardType } from './types'
8+
import { CiPipelineSourceConfig } from './CiPipelineSourceConfig'
9+
import { CommitChipCell } from '../CommitChipCell'
10+
11+
const GitTriggerList = memo(
12+
({
13+
ciMaterials,
14+
gitTriggers,
15+
addMarginTop,
16+
}: Pick<DeploymentSummaryTooltipCardType, 'ciMaterials' | 'gitTriggers'> & {
17+
addMarginTop?: boolean
18+
}): JSX.Element => (
19+
// eslint-disable-next-line react/jsx-no-useless-fragment
20+
<>
21+
{Object.keys(gitTriggers ?? {}).length > 0 &&
22+
ciMaterials?.map((ciMaterial) => {
23+
const gitDetail: GitTriggers = gitTriggers[ciMaterial.id]
24+
const sourceType = gitDetail?.CiConfigureSourceType
25+
? gitDetail.CiConfigureSourceType
26+
: ciMaterial?.type
27+
const sourceValue = gitDetail?.CiConfigureSourceValue
28+
? gitDetail.CiConfigureSourceValue
29+
: ciMaterial?.value
30+
const gitMaterialUrl = gitDetail?.GitRepoUrl ? gitDetail.GitRepoUrl : ciMaterial?.url
31+
if (sourceType !== SourceTypeMap.WEBHOOK && !gitDetail) {
32+
return null
33+
}
34+
35+
return (
36+
<div className={`${addMarginTop ? 'mt-22' : ''} ci-material-detail"`} key={ciMaterial.id}>
37+
{sourceType === SourceTypeMap.WEBHOOK ? (
38+
<div className="flex left column">
39+
<CiPipelineSourceConfig
40+
sourceType={sourceType}
41+
sourceValue={sourceValue}
42+
showTooltip={false}
43+
/>
44+
</div>
45+
) : (
46+
<div className="flexbox-col dc__gap-8">
47+
<div className="flexbox dc__gap-4 dc__align-start">
48+
{renderMaterialIcon(gitMaterialUrl)}
49+
50+
{gitDetail?.GitRepoName && (
51+
<>
52+
<Tooltip content={gitDetail.GitRepoName}>
53+
<span className="cn-9 fs-13 fw-6 lh-20">
54+
{gitDetail.GitRepoName}
55+
</span>
56+
</Tooltip>
57+
58+
<span className="cn-5 fs-13 fw-4 lh-20 dc__no-shrink">/</span>
59+
</>
60+
)}
61+
62+
<a
63+
href={createGitCommitUrl(gitMaterialUrl, gitDetail?.Commit)}
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
className="anchor flexbox dc__gap-2 dc__align-items-center"
67+
>
68+
<ICBranch className="icon-dim-12 dc__no-shrink fcn-7" />
69+
{sourceValue}
70+
</a>
71+
</div>
72+
73+
{gitDetail?.Commit && (
74+
<CommitChipCell
75+
commits={[gitDetail.Commit]}
76+
handleClick={getHandleOpenURL(
77+
createGitCommitUrl(ciMaterial.url, gitDetail.Commit),
78+
)}
79+
/>
80+
)}
81+
82+
{gitDetail?.Message && (
83+
<Tooltip content={gitDetail.Message}>
84+
<p className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate--clamp-3">
85+
{gitDetail.Message}
86+
</p>
87+
</Tooltip>
88+
)}
89+
</div>
90+
)}
91+
</div>
92+
)
93+
})}
94+
</>
95+
),
96+
)
97+
98+
export default GitTriggerList

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

Lines changed: 5 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -22,129 +22,22 @@ import ReactSelect, { components } from 'react-select'
2222
import moment from 'moment'
2323
import { ReactComponent as ICArrowBackward } from '@Icons/ic-arrow-backward.svg'
2424
import { ReactComponent as ICDocker } from '@Icons/ic-docker.svg'
25-
import { ReactComponent as ICCalendar } from '@Icons/ic-calendar.svg'
26-
import { ReactComponent as ICUserCircle } from '@Icons/ic-user-circle.svg'
27-
import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
2825
import { DeploymentStageType } from '@Shared/constants'
29-
import { getHandleOpenURL, renderMaterialIcon } from '@Shared/Helpers'
3026
import {
3127
SidebarType,
3228
CICDSidebarFilterOptionType,
3329
HistoryComponentType,
3430
HistorySummaryCardType,
3531
DeploymentSummaryTooltipCardType,
3632
FetchIdDataStatus,
37-
BuildAndTaskSummaryTooltipCardProps,
3833
} from './types'
34+
import BuildAndTaskSummaryTooltipCard from './BuildAndTaskSummaryTooltipCard'
3935
import { getCustomOptionSelectionStyle } from '../ReactSelect'
4036
import { DetectBottom } from '../DetectBottom'
41-
import {
42-
ConditionalWrap,
43-
DATE_TIME_FORMATS,
44-
SourceTypeMap,
45-
createGitCommitUrl,
46-
DropdownIndicator,
47-
Tooltip,
48-
} from '../../../Common'
49-
import { GitTriggers } from '../../types'
50-
import { CiPipelineSourceConfig } from './CiPipelineSourceConfig'
51-
import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap, DEFAULT_CLUSTER_ID } from './constants'
52-
import {
53-
getFormattedTriggerTime,
54-
getHistoryItemStatusIconFromWorkflowStages,
55-
getTriggerStatusIcon,
56-
getWorkflowNodeStatusTitle,
57-
sanitizeWorkflowExecutionStages,
58-
} from './utils'
59-
import { WorkerStatus } from './TriggerOutput'
60-
import { CommitChipCell } from '../CommitChipCell'
61-
62-
const GitTriggerList = memo(
63-
({
64-
ciMaterials,
65-
gitTriggers,
66-
addMarginTop,
67-
}: Pick<DeploymentSummaryTooltipCardType, 'ciMaterials' | 'gitTriggers'> & {
68-
addMarginTop?: boolean
69-
}): JSX.Element => (
70-
// eslint-disable-next-line react/jsx-no-useless-fragment
71-
<>
72-
{Object.keys(gitTriggers ?? {}).length > 0 &&
73-
ciMaterials?.map((ciMaterial) => {
74-
const gitDetail: GitTriggers = gitTriggers[ciMaterial.id]
75-
const sourceType = gitDetail?.CiConfigureSourceType
76-
? gitDetail.CiConfigureSourceType
77-
: ciMaterial?.type
78-
const sourceValue = gitDetail?.CiConfigureSourceValue
79-
? gitDetail.CiConfigureSourceValue
80-
: ciMaterial?.value
81-
const gitMaterialUrl = gitDetail?.GitRepoUrl ? gitDetail.GitRepoUrl : ciMaterial?.url
82-
if (sourceType !== SourceTypeMap.WEBHOOK && !gitDetail) {
83-
return null
84-
}
85-
86-
return (
87-
<div className={`${addMarginTop ? 'mt-22' : ''} ci-material-detail"`} key={ciMaterial.id}>
88-
{sourceType === SourceTypeMap.WEBHOOK ? (
89-
<div className="flex left column">
90-
<CiPipelineSourceConfig
91-
sourceType={sourceType}
92-
sourceValue={sourceValue}
93-
showTooltip={false}
94-
/>
95-
</div>
96-
) : (
97-
<div className="flexbox-col dc__gap-8">
98-
<div className="flexbox dc__gap-4 dc__align-start">
99-
{renderMaterialIcon(gitMaterialUrl)}
100-
101-
{gitDetail?.GitRepoName && (
102-
<>
103-
<Tooltip content={gitDetail.GitRepoName}>
104-
<span className="cn-9 fs-13 fw-6 lh-20">
105-
{gitDetail.GitRepoName}
106-
</span>
107-
</Tooltip>
108-
109-
<span className="cn-5 fs-13 fw-4 lh-20 dc__no-shrink">/</span>
110-
</>
111-
)}
112-
113-
<a
114-
href={createGitCommitUrl(gitMaterialUrl, gitDetail?.Commit)}
115-
target="_blank"
116-
rel="noopener noreferrer"
117-
className="anchor flexbox dc__gap-2 dc__align-items-center"
118-
>
119-
<ICBranch className="icon-dim-12 dc__no-shrink fcn-7" />
120-
{sourceValue}
121-
</a>
122-
</div>
123-
124-
{gitDetail?.Commit && (
125-
<CommitChipCell
126-
commits={[gitDetail.Commit]}
127-
handleClick={getHandleOpenURL(
128-
createGitCommitUrl(ciMaterial.url, gitDetail.Commit),
129-
)}
130-
/>
131-
)}
132-
133-
{gitDetail?.Message && (
134-
<Tooltip content={gitDetail.Message}>
135-
<p className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate--clamp-3">
136-
{gitDetail.Message}
137-
</p>
138-
</Tooltip>
139-
)}
140-
</div>
141-
)}
142-
</div>
143-
)
144-
})}
145-
</>
146-
),
147-
)
37+
import { ConditionalWrap, DATE_TIME_FORMATS, DropdownIndicator } from '../../../Common'
38+
import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constants'
39+
import { getHistoryItemStatusIconFromWorkflowStages, getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
40+
import GitTriggerList from './GitTriggerList'
14841

14942
const DeploymentSummaryTooltipCard = memo(
15043
({
@@ -172,56 +65,6 @@ const DeploymentSummaryTooltipCard = memo(
17265
),
17366
)
17467

175-
const BuildAndTaskSummaryTooltipCard = memo(
176-
({
177-
workflowExecutionStages,
178-
triggeredByEmail,
179-
namespace,
180-
podName,
181-
stage,
182-
gitTriggers,
183-
ciMaterials,
184-
}: BuildAndTaskSummaryTooltipCardProps): JSX.Element => {
185-
const executionInfo = sanitizeWorkflowExecutionStages(workflowExecutionStages)
186-
187-
return (
188-
<div className="shadow__overlay p-16 br-4 w-350 bg__primary mxh-300 dc__overflow-auto flexbox-col dc__gap-16">
189-
{/* Info section */}
190-
<div className="dc__icon-text-layout">
191-
<ICCalendar className="fcn-7 icon-dim-20 dc__no-shrink" />
192-
<time className="cn-9 fs-12 cn-9 fw-4 lh-20">
193-
{executionInfo?.triggeredOn ? getFormattedTriggerTime(executionInfo.triggeredOn) : '--'}
194-
</time>
195-
196-
<ICUserCircle className="fcn-7 icon-dim-20 dc__no-shrink" />
197-
<Tooltip content={triggeredByEmail}>
198-
<span className="cn-9 fs-12 fw-4 lh-20 dc__truncate">{triggeredByEmail}</span>
199-
</Tooltip>
200-
201-
<WorkerStatus
202-
message={executionInfo?.workerDetails?.message}
203-
podStatus={executionInfo?.workerDetails?.status}
204-
stage={stage}
205-
finishedOn={executionInfo?.workerDetails?.endTime}
206-
clusterId={executionInfo?.workerDetails?.clusterId || DEFAULT_CLUSTER_ID}
207-
workerPodName={podName}
208-
namespace={namespace}
209-
workerMessageContainerClassName="cn-7 fs-12 fw-4 lh-18"
210-
titleClassName="cn-9 fs-12 fw-4 lh-20"
211-
viewWorkerPodClassName="fs-12"
212-
/>
213-
</div>
214-
215-
{Object.keys(gitTriggers ?? {}).length > 0 && ciMaterials?.length > 0 && (
216-
<div className="dc__border-bottom-n1" />
217-
)}
218-
219-
<GitTriggerList gitTriggers={gitTriggers} ciMaterials={ciMaterials} />
220-
</div>
221-
)
222-
},
223-
)
224-
22568
const ViewAllCardsTile = memo(
22669
({ handleViewAllHistory }: { handleViewAllHistory: () => void }): JSX.Element => (
22770
<div className="flex pt-12 pb-12 pl-16 pr-16 dc__gap-16 dc__align-self-stretch">

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,7 @@ interface WorkflowExecutionStageCommonDTO {
141141

142142
export interface PodExecutionStageDTO extends WorkflowExecutionStageCommonDTO {
143143
metadata: {
144-
clusterId: number
145-
podName: string
144+
clusterId?: number
146145
}
147146
}
148147

@@ -198,18 +197,15 @@ export interface ExecutionInfoType {
198197
triggeredOn: string
199198
/**
200199
* Extracted from startTime from Execution stage (since will work in both old and new format)
201-
* If this is not given then, we won't be showing this field
200+
* If this is not given then, we won't be showing Execution started field
202201
* If preparation field has failed, then we will be using finishedOn field to show the status
203202
*/
204203
executionStartedOn: string
205204
/**
206205
* Will be the endTime of Execution stage.
207206
*/
208207
finishedOn?: string
209-
/**
210-
* Will never be NOT_STARTED
211-
*/
212-
currentStatus: WorkflowStageStatusType
208+
currentStatus: Exclude<WorkflowStageStatusType, WorkflowStageStatusType.NOT_STARTED>
213209
workerDetails: Pick<PodExecutionStageDTO, 'message' | 'status' | 'endTime'> &
214210
Pick<PodExecutionStageDTO['metadata'], 'clusterId'>
215211
}

0 commit comments

Comments
 (0)