Skip to content

Commit 12cf6f9

Browse files
AbhishekA1509AbhishekA1509
committed
feat: enhance CICD components with improved status rendering and icon logic
1 parent 6ba9035 commit 12cf6f9

File tree

5 files changed

+78
-32
lines changed

5 files changed

+78
-32
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const GitTriggerList = memo(
9696
) : (
9797
<div className="flexbox-col dc__gap-8">
9898
<div className="flexbox dc__gap-4 dc__align-start">
99-
{renderMaterialIcon(gitDetail?.GitRepoName)}
99+
{renderMaterialIcon(gitMaterialUrl)}
100100

101101
{gitDetail?.GitRepoName && (
102102
<>
@@ -308,7 +308,7 @@ const HistorySummaryCard = memo(
308308
placement="right"
309309
interactive
310310
render={() =>
311-
isCDType ? (
311+
stage === DeploymentStageType.DEPLOY ? (
312312
<DeploymentSummaryTooltipCard
313313
status={status}
314314
startedOn={startedOn}

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

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import {
5656
History,
5757
HistoryLogsProps,
5858
WorkflowStageStatusType,
59+
CurrentStatusIconProps,
5960
} from './types'
6061
import { getTagDetails, getTriggerDetails, cancelCiTrigger, cancelPrePostCdTrigger } from './service'
6162
import {
@@ -67,6 +68,7 @@ import {
6768
TERMINAL_STATUS_COLOR_CLASS_MAP,
6869
PROGRESSING_STATUS,
6970
WORKFLOW_STAGE_STATUS_TO_TEXT_MAP,
71+
EXECUTION_FINISHED_TEXT_MAP,
7072
} from './constants'
7173
import { GitTriggers } from '../../types'
7274
import LogsRenderer from './LogsRenderer'
@@ -79,23 +81,37 @@ import { ConfirmationModal, ConfirmationModalVariantType } from '../Confirmation
7981
import {
8082
FAILED_WORKFLOW_STAGE_STATUS_MAP,
8183
getFormattedTriggerTime,
84+
getIconFromWorkflowStageStatusType,
8285
getWorkerPodBaseUrl,
8386
sanitizeWorkflowExecutionStages,
8487
} from './utils'
8588
import './cicdHistory.scss'
8689

8790
const Finished = React.memo(({ status, finishedOn, artifact, type, executionInfo }: FinishedType): JSX.Element => {
8891
const finishedOnTime = executionInfo?.finishedOn || finishedOn
89-
const computedStatus = executionInfo?.currentStatus || status
9092

91-
return (
92-
<div className="flexbox pt-12 dc__gap-8 left dc__min-width-fit-content dc__align-items-center">
93+
const renderTitle = () => {
94+
if (executionInfo) {
95+
return (
96+
<span className="cn-9 fs-13 fw-6 lh-20">
97+
{EXECUTION_FINISHED_TEXT_MAP[executionInfo.currentStatus] || 'Execution finished'}
98+
</span>
99+
)
100+
}
101+
102+
return (
93103
<div
94-
className={`${computedStatus} fs-13 fw-6 ${TERMINAL_STATUS_COLOR_CLASS_MAP[computedStatus.toLowerCase()] || 'cn-5'}`}
104+
className={`${status} fs-13 fw-6 ${TERMINAL_STATUS_COLOR_CLASS_MAP[status.toLowerCase()] || 'cn-5'}`}
95105
data-testid="deployment-status-text"
96106
>
97-
{computedStatus && computedStatus.toLowerCase() === 'cancelled' ? 'Aborted' : computedStatus}
107+
{status?.toLowerCase() === 'cancelled' ? 'Aborted' : status}
98108
</div>
109+
)
110+
}
111+
112+
return (
113+
<div className="flexbox pt-12 dc__gap-8 left dc__min-width-fit-content dc__align-items-center">
114+
{renderTitle()}
99115

100116
{finishedOnTime && finishedOnTime !== ZERO_TIME_STRING && (
101117
<time className="dc__vertical-align-middle fs-13">{getFormattedTriggerTime(finishedOnTime)}</time>
@@ -483,8 +499,12 @@ const NonProgressingStatus = React.memo(
483499
),
484500
)
485501

486-
const CurrentStatusIcon = React.memo(({ status }: { status: string }): JSX.Element => {
487-
if (status === WorkflowStageStatusType.RUNNING || PULSATING_STATUS_MAP[status]) {
502+
const CurrentStatusIcon = React.memo(({ status, executionInfoCurrentStatus }: CurrentStatusIconProps): JSX.Element => {
503+
if (executionInfoCurrentStatus) {
504+
return getIconFromWorkflowStageStatusType(executionInfoCurrentStatus, 'icon-dim-20 dc__no-shirnk')
505+
}
506+
507+
if (PULSATING_STATUS_MAP[status]) {
488508
return <ICPulsateStatus />
489509
}
490510

@@ -586,7 +606,10 @@ export const TriggerDetails = React.memo(
586606
<div className="dc__border-left--n7 h-100" />
587607
</div>
588608

589-
<CurrentStatusIcon status={executionInfo ? executionInfo.currentStatus : status} />
609+
<CurrentStatusIcon
610+
status={status}
611+
executionInfoCurrentStatus={executionInfo?.currentStatus}
612+
/>
590613
</div>
591614
</div>
592615

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

Lines changed: 12 additions & 4 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 { multiSelectStyles } from '../../../Common/MultiSelectCustomization'
1819
import { WorkflowStageStatusType } from './types'
1920

@@ -91,29 +92,29 @@ export const statusColor = {
9192
degraded: 'var(--R500)',
9293
healthy: 'var(--G500)',
9394
notdeployed: 'var(--N500)',
95+
[WorkflowStageStatusType.NOT_STARTED.toLowerCase()]: 'var(--N500)',
9496
missing: 'var(--N700)',
9597
progressing: 'var(--O500)',
9698
initiating: 'var(--O500)',
9799
starting: 'var(--O500)',
100+
[WorkflowStatusEnum.WAITING_TO_START.toLowerCase()]: 'var(--O500)',
98101
succeeded: 'var(--G500)',
99102
running: 'var(--O500)',
100103
failed: 'var(--R500)',
101104
error: 'var(--R500)',
102105
cancelled: 'var(--R500)',
103106
aborted: 'var(--R500)',
104107
timedout: 'var(--R500)',
108+
[WorkflowStageStatusType.TIMEOUT.toLowerCase()]: 'var(--R500)',
105109
unabletofetch: 'var(--R500)',
106110
hibernating: 'var(--N700)',
107-
[WorkflowStageStatusType.NOT_STARTED.toLowerCase()]: 'var(--N500)',
108-
[WorkflowStageStatusType.TIMEOUT.toLowerCase()]: 'var(--R500)',
109111
}
110112

111-
export const PULSATING_STATUS_MAP: { [key in keyof typeof statusColor | WorkflowStageStatusType.RUNNING]?: boolean } = {
113+
export const PULSATING_STATUS_MAP: { [key in keyof typeof statusColor]?: boolean } = {
112114
progressing: true,
113115
initiating: true,
114116
starting: true,
115117
running: true,
116-
[WorkflowStageStatusType.RUNNING.toLowerCase()]: true,
117118
}
118119

119120
export const WORKFLOW_STAGE_STATUS_TO_TEXT_MAP: Record<WorkflowStageStatusType, string> = {
@@ -126,6 +127,13 @@ export const WORKFLOW_STAGE_STATUS_TO_TEXT_MAP: Record<WorkflowStageStatusType,
126127
[WorkflowStageStatusType.UNKNOWN]: 'Unknown',
127128
}
128129

130+
export const EXECUTION_FINISHED_TEXT_MAP: Partial<Record<WorkflowStageStatusType, string>> = {
131+
[WorkflowStageStatusType.SUCCEEDED]: 'succeeded',
132+
[WorkflowStageStatusType.FAILED]: 'failed',
133+
[WorkflowStageStatusType.ABORTED]: 'aborted',
134+
[WorkflowStageStatusType.TIMEOUT]: 'timed out',
135+
}
136+
129137
export const TERMINAL_STATUS_COLOR_CLASS_MAP = {
130138
[TERMINAL_STATUS_MAP.SUCCEEDED]: 'cg-5',
131139
[TERMINAL_STATUS_MAP.HEALTHY]: 'cg-5',

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,11 @@ export type ProgressingStatusType = {
336336
type: HistoryComponentType
337337
}
338338

339+
export interface CurrentStatusIconProps {
340+
status: string
341+
executionInfoCurrentStatus: WorkflowStageStatusType
342+
}
343+
339344
export interface WorkerStatusType
340345
extends Pick<ExecutionInfoType['workerDetails'], 'clusterId'>,
341346
Pick<TriggerDetailsType, 'namespace'> {

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

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,33 @@ export const sanitizeWorkflowExecutionStages = (
292292
}
293293
}
294294

295+
export const getIconFromWorkflowStageStatusType = (
296+
status: WorkflowStageStatusType,
297+
baseClass: string = 'icon-dim-20 dc__no-shrink',
298+
): ReactElement => {
299+
switch (status) {
300+
case WorkflowStageStatusType.TIMEOUT:
301+
return <TimeOut className={baseClass} />
302+
303+
case WorkflowStageStatusType.ABORTED:
304+
return <ICAborted className={baseClass} />
305+
306+
case WorkflowStageStatusType.FAILED:
307+
return renderFailedTriggerIcon()
308+
309+
case WorkflowStageStatusType.SUCCEEDED:
310+
return renderSuccessTriggerIcon()
311+
312+
// NOT_STARTED case is not expected
313+
case WorkflowStageStatusType.NOT_STARTED:
314+
case WorkflowStageStatusType.RUNNING:
315+
return renderProgressingTriggerIcon()
316+
317+
default:
318+
return <ICHelpFilled className={baseClass} />
319+
}
320+
}
321+
295322
export const getHistoryItemStatusIconFromWorkflowStages = (
296323
workflowExecutionStages: WorkflowExecutionStagesMapDTO['workflowExecutionStages'],
297324
): ReactElement => {
@@ -310,24 +337,7 @@ export const getHistoryItemStatusIconFromWorkflowStages = (
310337
return <ICWarningY5 className={baseClass} />
311338
}
312339

313-
const status = executionInfo.currentStatus
314-
315-
switch (status) {
316-
case WorkflowStageStatusType.TIMEOUT:
317-
return <TimeOut className={baseClass} />
318-
319-
case WorkflowStageStatusType.ABORTED:
320-
return <ICAborted className={baseClass} />
321-
322-
case WorkflowStageStatusType.FAILED:
323-
return renderFailedTriggerIcon()
324-
325-
case WorkflowStageStatusType.SUCCEEDED:
326-
return renderSuccessTriggerIcon()
327-
328-
default:
329-
return <ICHelpFilled className={baseClass} />
330-
}
340+
return getIconFromWorkflowStageStatusType(executionInfo.currentStatus, baseClass)
331341
}
332342

333343
export const getWorkerPodBaseUrl = (clusterId: number = DEFAULT_CLUSTER_ID, podNamespace: string = 'devtron-ci') =>

0 commit comments

Comments
 (0)