Skip to content

Commit aee22ec

Browse files
AbhishekA1509AbhishekA1509
committed
feat: add new environment icon and update CICD history components for improved status handling
1 parent f6dbef8 commit aee22ec

File tree

5 files changed

+113
-112
lines changed

5 files changed

+113
-112
lines changed

‎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/Shared/Components/CICDHistory/TriggerDetails.tsx

Lines changed: 107 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
77
import { ReactComponent as ICPulsateStatus } from '@Icons/ic-pulsate-status.svg'
88
import { ReactComponent as ICAborted } from '@Icons/ic-aborted.svg'
99
import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
10+
import { ReactComponent as ICEnvironment } from '@Icons/ic-environment.svg'
1011
import { ToastManager, ToastVariantType } from '@Shared/Services'
1112
import { getDeploymentStageTitle } from '@Pages/Applications'
1213
import { ZERO_TIME_STRING } from '@Common/Constants'
@@ -61,7 +62,7 @@ const Finished = memo(({ status, finishedOn, artifact, type, executionInfo }: Fi
6162
}
6263

6364
return (
64-
<div className="flexbox pt-12 dc__gap-8 left dc__min-width-fit-content dc__align-items-center">
65+
<div className="flexbox py-8 dc__gap-8 left dc__min-width-fit-content dc__align-items-center">
6566
{renderTitle()}
6667

6768
{finishedOnTime && finishedOnTime !== ZERO_TIME_STRING && (
@@ -140,9 +141,9 @@ const ProgressingStatus = memo(({ stage, type, label = 'In progress' }: Progress
140141

141142
return (
142143
<>
143-
<div className="flex dc__gap-8 left pt-12">
144+
<div className="flex dc__gap-8 left">
144145
<div className="dc__min-width-fit-content">
145-
<div className="fs-14 fw-6 flex left inprogress-status-color">{label}</div>
146+
<div className="fs-13 fw-6 flex left inprogress-status-color">{label}</div>
146147
</div>
147148

148149
{abort && (
@@ -268,20 +269,15 @@ const StartDetails = ({
268269
artifact,
269270
type,
270271
environmentName,
271-
isJobView,
272-
triggerMetadata,
273-
renderDeploymentHistoryTriggerMetaText,
274272
renderTargetConfigInfo,
275273
stage,
276274
}: StartDetailsType): JSX.Element => {
277275
const { url } = useRouteMatch()
278276
const { pathname } = useLocation()
279277

280278
return (
281-
<div
282-
className={`w-100 pr-20 flex column left ${stage === DeploymentStageType.DEPLOY ? 'dc__border-bottom-n1' : ''}`}
283-
>
284-
<div className="flexbox dc__gap-8 dc__align-items-center pb-12 flex-wrap">
279+
<div className="w-100 pr-20 flex column left">
280+
<div className="flexbox dc__gap-8 dc__align-items-center py-8 flex-wrap">
285281
<div className="flex left dc__gap-4 cn-9 fs-13 fw-6 lh-20">
286282
<div className="flex left dc__no-shrink dc__gap-4" data-testid="deployment-history-start-heading">
287283
<h3 className="m-0 cn-9 fs-13 fw-6 lh-20">Triggered</h3>
@@ -352,31 +348,23 @@ const StartDetails = ({
352348
</Link>
353349
)}
354350
</div>
355-
356-
{triggerMetadata &&
357-
renderDeploymentHistoryTriggerMetaText &&
358-
renderDeploymentHistoryTriggerMetaText(triggerMetadata)}
359-
360-
{isJobView && (
361-
<div className="flexbox dc__align-items-center dc__gap-8 pb-8">
362-
<span className="cn-9 fs-13 fw-6 lh-20">Env</span>
363-
<span className="fs-12 lh-20">{environmentName !== '' ? environmentName : DEFAULT_ENV}</span>
364-
{environmentName === '' && <i className="fw-4 fs-12 lh-20">(Default)</i>}
365-
</div>
366-
)}
367351
</div>
368352
)
369353
}
370354

355+
const renderBlockWithBorder = () => (
356+
<div className="flex flex-grow-1">
357+
<div className="dc__border-left--n3 h-100" />
358+
</div>
359+
)
360+
371361
const renderDetailsSuccessIconBlock = () => (
372362
<>
373363
<div className="flex">
374364
<ICSuccess className="icon-dim-20" />
375365
</div>
376366

377-
<div className="flex flex-grow-1">
378-
<div className="dc__border-left--n7 h-100" />
379-
</div>
367+
{renderBlockWithBorder()}
380368
</>
381369
)
382370

@@ -392,7 +380,6 @@ const NonProgressingStatus = memo(
392380
strokeOpacity="0.3"
393381
strokeWidth="10"
394382
/>
395-
<path d="M10 0L10 5" stroke="var(--N700)" />
396383
</svg>
397384
),
398385
)
@@ -438,106 +425,119 @@ const TriggerDetails = memo(
438425
)
439426

440427
return (
441-
<div className="trigger-details flexbox-col pb-12">
442-
<div className="flexbox-col py-12">
443-
<div className="trigger-details__summary lh-20">
444-
<div className="display-grid trigger-details__grid">
445-
<div className="flexbox dc__content-center">
446-
<div className="flexbox-col">
447-
{renderDetailsSuccessIconBlock()}
428+
<div className="trigger-details flexbox-col">
429+
<div className="flexbox-col py-8 trigger-details__summary lh-20">
430+
<div className="display-grid trigger-details__grid">
431+
<div className="flexbox dc__content-center">
432+
<div className="flexbox-col dc__gap-4">
433+
<div className="flex flex-grow-1" />
434+
{renderDetailsSuccessIconBlock()}
435+
</div>
436+
</div>
448437

449-
{!!triggerMetadata && renderDeploymentHistoryTriggerMetaText && (
450-
<>
451-
{renderDeploymentHistoryTriggerMetaText(triggerMetadata, true)}
438+
<div className="flexbox-col flex-grow-1">
439+
<StartDetails
440+
startedOn={executionInfo?.triggeredOn || startedOn}
441+
triggeredBy={triggeredBy}
442+
triggeredByEmail={triggeredByEmail}
443+
ciMaterials={ciMaterials}
444+
gitTriggers={gitTriggers}
445+
artifact={artifact}
446+
type={type}
447+
environmentName={environmentName}
448+
renderTargetConfigInfo={renderTargetConfigInfo}
449+
stage={stage}
450+
/>
451+
</div>
452+
</div>
452453

453-
<div className="flex flex-grow-1">
454-
<div className="dc__border-left--n7 h-100" />
455-
</div>
456-
</>
457-
)}
454+
{!!triggerMetadata && !!renderDeploymentHistoryTriggerMetaText && (
455+
<div className="display-grid trigger-details__grid">
456+
<div className="flexbox dc__content-center">
457+
<div className="flexbox-col dc__gap-4">
458+
{renderBlockWithBorder()}
459+
{renderDeploymentHistoryTriggerMetaText(triggerMetadata, true)}
460+
{renderBlockWithBorder()}
458461
</div>
459462
</div>
460463

461-
<div className="flexbox-col flex-grow-1">
462-
<StartDetails
463-
startedOn={executionInfo?.triggeredOn || startedOn}
464-
triggeredBy={triggeredBy}
465-
triggeredByEmail={triggeredByEmail}
466-
ciMaterials={ciMaterials}
467-
gitTriggers={gitTriggers}
468-
artifact={artifact}
469-
type={type}
470-
environmentName={environmentName}
471-
isJobView={isJobView}
472-
triggerMetadata={triggerMetadata}
473-
renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
474-
renderTargetConfigInfo={renderTargetConfigInfo}
475-
stage={stage}
476-
/>
477-
</div>
464+
{renderDeploymentHistoryTriggerMetaText(triggerMetadata)}
478465
</div>
466+
)}
479467

480-
{!!executionInfo?.executionStartedOn && (
481-
<div className="display-grid trigger-details__grid">
482-
<div className="flexbox dc__content-center">
483-
<div className="flexbox-col">
484-
<div className="flex flex-grow-1">
485-
<div className="dc__border-left--n7 h-100" />
486-
</div>
487-
488-
{renderDetailsSuccessIconBlock()}
489-
490-
<div className="flex flex-grow-1">
491-
<div className="dc__border-left--n7 h-100" />
492-
</div>
493-
</div>
468+
{isJobView && (
469+
<div className="display-grid trigger-details__grid">
470+
<div className="flexbox dc__content-center">
471+
<div className="flexbox-col dc__gap-4">
472+
{renderBlockWithBorder()}
473+
<ICEnvironment className="icon-dim-20 dc__no-shrink scn-9" />
474+
{renderBlockWithBorder()}
494475
</div>
476+
</div>
495477

496-
<div className="w-100 pr-20 flexbox dc__gap-8 py-12">
497-
<h3 className="m-0 cn-9 fs-13 fw-6 lh-20">Execution started</h3>
498-
<time className="cn-7 fs-13">
499-
{getFormattedTriggerTime(executionInfo.executionStartedOn)}
500-
</time>
501-
</div>
478+
<div className="flexbox dc__align-items-center dc__gap-8 py-8">
479+
<span className="cn-9 fs-13 fw-6 lh-20">Env</span>
480+
<span className="fs-12 lh-20">
481+
{environmentName !== '' ? environmentName : DEFAULT_ENV}
482+
</span>
483+
{environmentName === '' && <i className="fw-4 fs-12 lh-20">(Default)</i>}
502484
</div>
503-
)}
485+
</div>
486+
)}
504487

488+
{!!executionInfo?.executionStartedOn && (
505489
<div className="display-grid trigger-details__grid">
506490
<div className="flexbox dc__content-center">
507-
<div className="flexbox-col">
508-
<div className="flex flex-grow-1">
509-
<div className="dc__border-left--n7 h-100" />
510-
</div>
511-
512-
<CurrentStatusIcon
513-
status={status}
514-
executionInfoCurrentStatus={executionInfo?.currentStatus}
515-
/>
491+
<div className="flexbox-col dc__gap-4">
492+
{renderBlockWithBorder()}
493+
{renderDetailsSuccessIconBlock()}
516494
</div>
517495
</div>
518496

519-
<CurrentStatus
520-
executionInfo={executionInfo}
521-
status={status}
522-
finishedOn={finishedOn}
523-
artifact={artifact}
524-
stage={stage}
525-
type={type}
526-
/>
497+
<div className="w-100 pr-20 flexbox dc__gap-8 py-8">
498+
<h3 className="m-0 cn-9 fs-13 fw-6 lh-20">Execution started</h3>
499+
<time className="cn-7 fs-13">
500+
{getFormattedTriggerTime(executionInfo.executionStartedOn)}
501+
</time>
502+
</div>
527503
</div>
504+
)}
505+
506+
<div className="display-grid trigger-details__grid">
507+
<div className="flexbox dc__content-center">
508+
<div className="flexbox-col dc__gap-4">
509+
{renderBlockWithBorder()}
510+
511+
<CurrentStatusIcon
512+
status={status}
513+
executionInfoCurrentStatus={executionInfo?.currentStatus}
514+
/>
515+
516+
<div className="flex flex-grow-1" />
517+
</div>
518+
</div>
519+
520+
<CurrentStatus
521+
executionInfo={executionInfo}
522+
status={status}
523+
finishedOn={finishedOn}
524+
artifact={artifact}
525+
stage={stage}
526+
type={type}
527+
/>
528528
</div>
529-
</div>
530529

531-
<div className="display-grid trigger-details__grid py-4">
532-
<WorkerStatus
533-
message={executionInfo?.workerDetails.message || message}
534-
podStatus={executionInfo?.workerDetails.status || podStatus}
535-
stage={stage}
536-
finishedOn={executionInfo?.workerDetails.endTime || finishedOn}
537-
clusterId={executionInfo?.workerDetails.clusterId || DEFAULT_CLUSTER_ID}
538-
workerPodName={workerPodName}
539-
namespace={namespace}
540-
/>
530+
<div className="display-grid trigger-details__grid py-4">
531+
<WorkerStatus
532+
message={executionInfo?.workerDetails.message || message}
533+
podStatus={executionInfo?.workerDetails.status || podStatus}
534+
stage={stage}
535+
finishedOn={executionInfo?.workerDetails.endTime || finishedOn}
536+
clusterId={executionInfo?.workerDetails.clusterId || DEFAULT_CLUSTER_ID}
537+
workerPodName={workerPodName}
538+
namespace={namespace}
539+
/>
540+
</div>
541541
</div>
542542
</div>
543543
)

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -295,9 +295,6 @@ export interface StartDetailsType {
295295
artifact: string
296296
type: HistoryComponentType
297297
environmentName?: string
298-
isJobView?: boolean
299-
triggerMetadata?: string
300-
renderDeploymentHistoryTriggerMetaText: (triggerMetaData: string) => JSX.Element
301298
/**
302299
* Callback handler for showing the target config
303300
*/

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
2929
import { ReactComponent as ICInProgress } from '@Icons/ic-in-progress.svg'
3030
import { ReactComponent as ICHelpFilled } from '@Icons/ic-help-filled.svg'
3131
import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
32+
import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
3233
import { isTimeStringAvailable } from '@Shared/Helpers'
3334
import { DATE_TIME_FORMATS } from '@Common/Constants'
3435
import {
@@ -295,7 +296,7 @@ export const getIconFromWorkflowStageStatusType = (
295296
return renderFailedTriggerIcon(baseClass)
296297

297298
case WorkflowStageStatusType.SUCCEEDED:
298-
return renderSuccessTriggerIcon(baseClass)
299+
return <ICSuccess className={baseClass} />
299300

300301
case WorkflowStageStatusType.NOT_STARTED:
301302
case WorkflowStageStatusType.RUNNING:

0 commit comments

Comments
 (0)