Skip to content

Commit 3cc1744

Browse files
committed
feat: add user icons and improve trigger time formatting in CICD components
1 parent fa7d75f commit 3cc1744

File tree

7 files changed

+221
-97
lines changed

7 files changed

+221
-97
lines changed

src/Assets/Icon/ic-github.svg

Lines changed: 3 additions & 0 deletions
Loading

src/Assets/Icon/ic-user-circle.svg

Lines changed: 3 additions & 0 deletions
Loading

src/Shared/Components/CICDHistory/Sidebar.tsx

Lines changed: 171 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,26 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useEffect, useRef } from 'react'
17+
import React, { memo, useEffect, useRef } from 'react'
1818
import TippyHeadless from '@tippyjs/react/headless'
1919
import ReactGA from 'react-ga4'
2020
import { useHistory, useParams, useRouteMatch, generatePath, useLocation, NavLink } from 'react-router-dom'
2121
import ReactSelect, { components } from 'react-select'
2222
import moment from 'moment'
23+
import { ReactComponent as ICArrowBackward } from '@Icons/ic-arrow-backward.svg'
24+
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 ICGithub } from '@Icons/ic-github.svg'
28+
import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
2329
import {
2430
SidebarType,
2531
CICDSidebarFilterOptionType,
2632
HistoryComponentType,
2733
HistorySummaryCardType,
28-
SummaryTooltipCardType,
34+
DeploymentSummaryTooltipCardType,
2935
FetchIdDataStatus,
36+
BuildAndTaskSummaryTooltipCardProps,
3037
} from './types'
3138
import { getCustomOptionSelectionStyle } from '../ReactSelect'
3239
import { DetectBottom } from '../DetectBottom'
@@ -36,23 +43,106 @@ import {
3643
SourceTypeMap,
3744
createGitCommitUrl,
3845
DropdownIndicator,
46+
Tooltip,
3947
} from '../../../Common'
40-
import { ReactComponent as ICArrowBackward } from '../../../Assets/Icon/ic-arrow-backward.svg'
41-
import { ReactComponent as ICDocker } from '../../../Assets/Icon/ic-docker.svg'
4248
import { GitTriggers } from '../../types'
4349
import { CiPipelineSourceConfig } from './CiPipelineSourceConfig'
44-
import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constants'
45-
import { getHistoryItemStatusIconFromWorkflowStages, getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
50+
import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap, DEFAULT_CLUSTER_ID } from './constants'
51+
import {
52+
getFormattedTriggerTime,
53+
getHistoryItemStatusIconFromWorkflowStages,
54+
getTriggerStatusIcon,
55+
getWorkflowNodeStatusTitle,
56+
sanitizeWorkflowExecutionStages,
57+
} from './utils'
58+
import { WorkerStatus } from './TriggerOutput'
59+
60+
const GitTriggerList = memo(
61+
({
62+
ciMaterials,
63+
gitTriggers,
64+
addMarginTop,
65+
}: Pick<DeploymentSummaryTooltipCardType, 'ciMaterials' | 'gitTriggers'> & {
66+
addMarginTop?: boolean
67+
}): JSX.Element => (
68+
// eslint-disable-next-line react/jsx-no-useless-fragment
69+
<>
70+
{Object.keys(gitTriggers ?? {}).length > 0 &&
71+
ciMaterials?.map((ciMaterial) => {
72+
const gitDetail: GitTriggers = gitTriggers[ciMaterial.id]
73+
const sourceType = gitDetail?.CiConfigureSourceType
74+
? gitDetail.CiConfigureSourceType
75+
: ciMaterial?.type
76+
const sourceValue = gitDetail?.CiConfigureSourceValue
77+
? gitDetail.CiConfigureSourceValue
78+
: ciMaterial?.value
79+
const gitMaterialUrl = gitDetail?.GitRepoUrl ? gitDetail.GitRepoUrl : ciMaterial?.url
80+
if (sourceType !== SourceTypeMap.WEBHOOK && !gitDetail) {
81+
return null
82+
}
83+
return (
84+
<div className={`${addMarginTop ? 'mt-22' : ''} ci-material-detail"`} key={ciMaterial.id}>
85+
{sourceType === SourceTypeMap.WEBHOOK ? (
86+
<div className="flex left column">
87+
<CiPipelineSourceConfig
88+
sourceType={sourceType}
89+
sourceValue={sourceValue}
90+
showTooltip={false}
91+
/>
92+
</div>
93+
) : (
94+
<div className="flexbox-col dc__gap-8">
95+
<div className="flexbox dc__gap-4">
96+
<ICGithub className="icon-dim-20 dc__no-shrink" />
97+
98+
{gitDetail?.GitRepoName && (
99+
<>
100+
<Tooltip content={gitDetail.GitRepoName}>
101+
<span className="cn-9 fs-13 fw-6 lh-20">
102+
{gitDetail.GitRepoName}
103+
</span>
104+
</Tooltip>
105+
106+
<span className="cn-5 fs-13 fw-4 lh-20 dc__no-shrink">/</span>
107+
</>
108+
)}
109+
110+
<a
111+
href={createGitCommitUrl(gitMaterialUrl, gitDetail.Commit)}
112+
target="_blank"
113+
rel="noopener noreferrer"
114+
className="anchor flexbox dc__gap-2"
115+
>
116+
<ICBranch className="icon-dim-12 dc__no-shrink fcn-7" />
117+
{sourceValue}
118+
</a>
119+
</div>
46120

47-
const SummaryTooltipCard = React.memo(
121+
{gitDetail?.Message && (
122+
<Tooltip content={gitDetail.Message}>
123+
<p className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate--clamp-3">
124+
{gitDetail.Message}
125+
</p>
126+
</Tooltip>
127+
)}
128+
</div>
129+
)}
130+
</div>
131+
)
132+
})}
133+
</>
134+
),
135+
)
136+
137+
const DeploymentSummaryTooltipCard = memo(
48138
({
49139
status,
50140
startedOn,
51141
triggeredBy,
52142
triggeredByEmail,
53143
ciMaterials,
54144
gitTriggers,
55-
}: SummaryTooltipCardType): JSX.Element => (
145+
}: DeploymentSummaryTooltipCardType): JSX.Element => (
56146
<div className="build-card-popup p-16 br-4 w-400 bg__primary mxh-300 dc__overflow-scroll">
57147
<span className="fw-6 fs-16 mb-4" style={{ color: colorMap[status.toLowerCase()] }}>
58148
{getWorkflowNodeStatusTitle(status)}
@@ -63,54 +153,57 @@ const SummaryTooltipCard = React.memo(
63153
<div className="dc__bullet ml-6 mr-6" />
64154
<div>{triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}</div>
65155
</div>
66-
{Object.keys(gitTriggers ?? {}).length > 0 &&
67-
ciMaterials?.map((ciMaterial) => {
68-
const gitDetail: GitTriggers = gitTriggers[ciMaterial.id]
69-
const sourceType = gitDetail?.CiConfigureSourceType
70-
? gitDetail.CiConfigureSourceType
71-
: ciMaterial?.type
72-
const sourceValue = gitDetail?.CiConfigureSourceValue
73-
? gitDetail.CiConfigureSourceValue
74-
: ciMaterial?.value
75-
const gitMaterialUrl = gitDetail?.GitRepoUrl ? gitDetail.GitRepoUrl : ciMaterial?.url
76-
if (sourceType !== SourceTypeMap.WEBHOOK && !gitDetail) {
77-
return null
78-
}
79-
return (
80-
<div className="mt-22 ci-material-detail" key={ciMaterial.id}>
81-
{sourceType === SourceTypeMap.WEBHOOK ? (
82-
<div className="flex left column">
83-
<CiPipelineSourceConfig
84-
sourceType={sourceType}
85-
sourceValue={sourceValue}
86-
showTooltip={false}
87-
/>
88-
</div>
89-
) : (
90-
<>
91-
<div className="dc__git-logo"> </div>
92-
<div className="flex left column">
93-
<a
94-
href={createGitCommitUrl(gitMaterialUrl, gitDetail.Commit)}
95-
target="_blank"
96-
rel="noopener noreferrer"
97-
className="fs-12 fw-6 cn-9 pointer"
98-
>
99-
/{sourceValue}
100-
</a>
101-
<p className="fs-12 cn-7">{gitDetail?.Message}</p>
102-
</div>
103-
</>
104-
)}
105-
</div>
106-
)
107-
})}
156+
157+
<GitTriggerList addMarginTop ciMaterials={ciMaterials} gitTriggers={gitTriggers} />
108158
</div>
109159
</div>
110160
),
111161
)
112162

113-
const ViewAllCardsTile = React.memo(
163+
const BuildAndTaskSummaryTooltipCard = memo(
164+
({
165+
workflowExecutionStages,
166+
triggeredByEmail,
167+
namespace,
168+
podName,
169+
stage,
170+
gitTriggers,
171+
ciMaterials,
172+
}: BuildAndTaskSummaryTooltipCardProps): JSX.Element => {
173+
const executionInfo = sanitizeWorkflowExecutionStages(workflowExecutionStages)
174+
175+
return (
176+
<div className="build-card-popup p-16 br-4 w-350 bg__primary mxh-300 dc__overflow-auto flexbox-col dc__gap-16">
177+
{/* Info section */}
178+
<div className="dc__icon-text-layout">
179+
<ICCalendar className="fcn-7 icon-dim-20 dc__no-shrink" />
180+
<time className="cn-9 fs-12 cn-9 fw-4 lh-20">
181+
{executionInfo?.triggeredOn ? getFormattedTriggerTime(executionInfo.triggeredOn) : '--'}
182+
</time>
183+
184+
<ICUserCircle className="fcn-7 icon-dim-20 dc__no-shrink" />
185+
<Tooltip content={triggeredByEmail}>
186+
<span className="cn-9 fs-12 fw-4 lh-20 dc__truncate">{triggeredByEmail}</span>
187+
</Tooltip>
188+
189+
<WorkerStatus
190+
message={executionInfo?.workerDetails?.message}
191+
podStatus={executionInfo?.workerDetails?.status}
192+
stage={stage}
193+
finishedOn={executionInfo?.workerDetails?.endTime}
194+
clusterId={executionInfo?.workerDetails?.clusterId || DEFAULT_CLUSTER_ID}
195+
workerPodName={podName}
196+
namespace={namespace}
197+
/>
198+
</div>
199+
200+
<GitTriggerList gitTriggers={gitTriggers} ciMaterials={ciMaterials} />
201+
</div>
202+
)
203+
},
204+
)
205+
206+
const ViewAllCardsTile = memo(
114207
({ handleViewAllHistory }: { handleViewAllHistory: () => void }): JSX.Element => (
115208
<div className="flex pt-12 pb-12 pl-16 pr-16 dc__gap-16 dc__align-self-stretch">
116209
<button
@@ -129,7 +222,7 @@ const ViewAllCardsTile = React.memo(
129222
),
130223
)
131224

132-
const HistorySummaryCard = React.memo(
225+
const HistorySummaryCard = memo(
133226
({
134227
id,
135228
status,
@@ -145,6 +238,8 @@ const HistorySummaryCard = React.memo(
145238
renderRunSource,
146239
runSource,
147240
resourceId,
241+
podName,
242+
namespace,
148243
workflowExecutionStages,
149244
}: HistorySummaryCardType): JSX.Element => {
150245
const { path, params } = useRouteMatch()
@@ -193,16 +288,28 @@ const HistorySummaryCard = React.memo(
193288
<TippyHeadless
194289
placement="right"
195290
interactive
196-
render={() => (
197-
<SummaryTooltipCard
198-
status={status}
199-
startedOn={startedOn}
200-
triggeredBy={triggeredBy}
201-
triggeredByEmail={triggeredByEmail}
202-
ciMaterials={ciMaterials}
203-
gitTriggers={gitTriggers}
204-
/>
205-
)}
291+
render={() =>
292+
isCDType ? (
293+
<DeploymentSummaryTooltipCard
294+
status={status}
295+
startedOn={startedOn}
296+
triggeredBy={triggeredBy}
297+
triggeredByEmail={triggeredByEmail}
298+
ciMaterials={ciMaterials}
299+
gitTriggers={gitTriggers}
300+
/>
301+
) : (
302+
<BuildAndTaskSummaryTooltipCard
303+
workflowExecutionStages={workflowExecutionStages}
304+
triggeredByEmail={triggeredByEmail}
305+
namespace={namespace}
306+
podName={podName}
307+
stage={stage}
308+
gitTriggers={gitTriggers}
309+
ciMaterials={ciMaterials}
310+
/>
311+
)
312+
}
206313
>
207314
{children}
208315
</TippyHeadless>
@@ -397,6 +504,8 @@ const Sidebar = React.memo(
397504
renderRunSource={renderRunSource}
398505
resourceId={resourceId}
399506
workflowExecutionStages={triggerDetails.workflowExecutionStages}
507+
podName={triggerDetails.podName}
508+
namespace={triggerDetails.namespace}
400509
/>
401510
))}
402511
{hasMore && (fetchIdData === FetchIdDataStatus.SUSPEND || !fetchIdData) && (

0 commit comments

Comments
 (0)