Skip to content

Commit 87a656d

Browse files
AbhishekA1509AbhishekA1509
committed
fix: add backward compatability for Sidebar tooltip
1 parent a7138d5 commit 87a656d

File tree

4 files changed

+52
-23
lines changed

4 files changed

+52
-23
lines changed

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

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constant
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,
@@ -142,6 +145,9 @@ const HistorySummaryCard = memo(
142145
}
143146
}
144147

148+
const areWorkerStatusSeparated =
149+
stage !== DeploymentStageType.DEPLOY && Object.keys(workflowExecutionStages || {}).length > 0
150+
145151
return (
146152
<ConditionalWrap
147153
condition={Array.isArray(ciMaterials)}
@@ -151,16 +157,8 @@ const HistorySummaryCard = memo(
151157
placement="right"
152158
interactive
153159
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-
) : (
160+
// Adding check for workflowExecutionStages to cater backward compatibility
161+
areWorkerStatusSeparated ? (
164162
<BuildAndTaskSummaryTooltipCard
165163
workflowExecutionStages={workflowExecutionStages}
166164
triggeredByEmail={triggeredByEmail}
@@ -170,6 +168,15 @@ const HistorySummaryCard = memo(
170168
gitTriggers={gitTriggers}
171169
ciMaterials={ciMaterials}
172170
/>
171+
) : (
172+
<DeploymentSummaryTooltipCard
173+
status={status}
174+
startedOn={startedOn}
175+
triggeredBy={triggeredBy}
176+
triggeredByEmail={triggeredByEmail}
177+
ciMaterials={ciMaterials}
178+
gitTriggers={gitTriggers}
179+
/>
173180
)
174181
}
175182
>
@@ -185,7 +192,7 @@ const HistorySummaryCard = memo(
185192
ref={assignTargetCardRef}
186193
>
187194
<div className="w-100 deployment-history-card">
188-
{stage !== DeploymentStageType.DEPLOY && !!workflowExecutionStages
195+
{areWorkerStatusSeparated
189196
? getHistoryItemStatusIconFromWorkflowStages(workflowExecutionStages)
190197
: getTriggerStatusIcon(status)}
191198
<div className="flexbox-col dc__gap-8">

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

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const Finished = memo(({ status, finishedOn, artifact, type, executionInfo }: Fi
7676
)
7777
})
7878

79-
const ProgressingStatus = memo(({ stage, type }: ProgressingStatusType): JSX.Element => {
79+
const ProgressingStatus = memo(({ stage, type, label = 'In progress' }: ProgressingStatusType): JSX.Element => {
8080
const [aborting, setAborting] = useState(false)
8181
const [abortConfirmation, setAbortConfirmation] = useState(false)
8282
const [abortError, setAbortError] = useState<{
@@ -140,7 +140,7 @@ const ProgressingStatus = memo(({ stage, type }: ProgressingStatusType): JSX.Ele
140140
<>
141141
<div className="flex dc__gap-8 left pt-12">
142142
<div className="dc__min-width-fit-content">
143-
<div className="fs-14 fw-6 flex left inprogress-status-color">In progress</div>
143+
<div className="fs-14 fw-6 flex left inprogress-status-color">{label}</div>
144144
</div>
145145

146146
{abort && (
@@ -217,7 +217,17 @@ const CurrentStatus = memo(
217217
}
218218

219219
if (executionInfo.currentStatus === WorkflowStageStatusType.RUNNING) {
220-
return <ProgressingStatus stage={stage} type={type} />
220+
return (
221+
<ProgressingStatus
222+
stage={stage}
223+
type={type}
224+
{...(!executionInfo.executionStartedOn
225+
? {
226+
label: 'Waiting To Start',
227+
}
228+
: {})}
229+
/>
230+
)
221231
}
222232

223233
if (executionInfo.currentStatus === WorkflowStageStatusType.UNKNOWN) {
@@ -446,7 +456,7 @@ const TriggerDetails = memo(
446456

447457
<div className="flexbox-col flex-grow-1">
448458
<StartDetails
449-
startedOn={executionInfo?.triggeredOn ?? startedOn}
459+
startedOn={executionInfo?.triggeredOn || startedOn}
450460
triggeredBy={triggeredBy}
451461
triggeredByEmail={triggeredByEmail}
452462
ciMaterials={ciMaterials}
@@ -463,7 +473,7 @@ const TriggerDetails = memo(
463473
</div>
464474
</div>
465475

466-
{executionInfo?.executionStartedOn && (
476+
{!!executionInfo?.executionStartedOn && (
467477
<div className="display-grid trigger-details__grid">
468478
<div className="flexbox dc__content-center">
469479
<div className="flexbox-col">
@@ -472,12 +482,18 @@ const TriggerDetails = memo(
472482
</div>
473483

474484
{renderDetailsSuccessIconBlock()}
485+
486+
<div className="flex flex-grow-1">
487+
<div className="dc__border-left--n7 h-100" />
488+
</div>
475489
</div>
476490
</div>
477491

478492
<div className="w-100 pr-20 flexbox dc__gap-8 py-12">
479493
<h3 className="m-0 cn-9 fs-13 fw-6 lh-20">Execution started</h3>
480-
<time className="cn-7 fs-13">{getFormattedTriggerTime(startedOn)}</time>
494+
<time className="cn-7 fs-13">
495+
{getFormattedTriggerTime(executionInfo.executionStartedOn)}
496+
</time>
481497
</div>
482498
</div>
483499
)}
@@ -510,10 +526,10 @@ const TriggerDetails = memo(
510526

511527
<div className="display-grid trigger-details__grid py-4">
512528
<WorkerStatus
513-
message={executionInfo?.workerDetails.message ?? message}
514-
podStatus={executionInfo?.workerDetails.status ?? podStatus}
529+
message={executionInfo?.workerDetails.message || message}
530+
podStatus={executionInfo?.workerDetails.status || podStatus}
515531
stage={stage}
516-
finishedOn={executionInfo?.workerDetails.endTime ?? finishedOn}
532+
finishedOn={executionInfo?.workerDetails.endTime || finishedOn}
517533
clusterId={executionInfo?.workerDetails.clusterId || DEFAULT_CLUSTER_ID}
518534
workerPodName={workerPodName}
519535
namespace={namespace}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,10 @@ export interface TriggerDetailsType
330330
export type ProgressingStatusType = {
331331
stage: DeploymentStageType
332332
type: HistoryComponentType
333+
/**
334+
* @default 'In progress''
335+
*/
336+
label?: string
333337
}
334338

335339
export interface CurrentStatusIconProps {

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ export const sanitizeWorkflowExecutionStages = (
273273

274274
return {
275275
triggeredOn: isTimeStringAvailable(computedTriggeredOn) ? computedTriggeredOn : '',
276-
executionStartedOn: isOldData ? null : executionStage?.startTime,
276+
executionStartedOn: isOldData ? '' : executionStage?.startTime,
277277
finishedOn: isTimeStringAvailable(finishedOn) ? finishedOn : '',
278278
currentStatus: lastStatus,
279279
workerDetails: getWorkerInfoFromExecutionStages(workflowExecutionStages),
@@ -349,5 +349,7 @@ export const getWorkflowNodeStatusTitle = (status: string) => {
349349
return status
350350
}
351351

352-
export const getFormattedTriggerTime = (time: string) =>
353-
moment(time, 'YYYY-MM-DDTHH:mm:ssZ').format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)
352+
export const getFormattedTriggerTime = (time: string): string =>
353+
isTimeStringAvailable(time)
354+
? moment(time, 'YYYY-MM-DDTHH:mm:ssZ').format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)
355+
: ''

0 commit comments

Comments
 (0)