Skip to content

Commit 50e1801

Browse files
AbhishekA1509AbhishekA1509
committed
refactor: Simplify component structure and improve state management in DeploymentStatus components
1 parent 755c127 commit 50e1801

File tree

7 files changed

+54
-65
lines changed

7 files changed

+54
-65
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { Fragment } from 'react'
18-
1917
import { TIMELINE_STATUS } from '@Shared/types'
2018

2119
import { DeploymentStatusDetailRow } from './DeploymentStatusDetailRow'
@@ -57,9 +55,11 @@ const DeploymentStatusDetailBreakdown = ({
5755
TIMELINE_STATUS.KUBECTL_APPLY,
5856
] as DeploymentStatusDetailRowType['type'][]
5957
).map((timelineStatus) => (
60-
<Fragment key={timelineStatus}>
61-
<DeploymentStatusDetailRow type={timelineStatus} {...deploymentStatusDetailRowProps} />
62-
</Fragment>
58+
<DeploymentStatusDetailRow
59+
key={timelineStatus}
60+
type={timelineStatus}
61+
{...deploymentStatusDetailRowProps}
62+
/>
6363
))}
6464

6565
<DeploymentStatusDetailRow

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const DeploymentStatusDetailRow = ({
6868
}
6969
}
7070
const toggleDropdown = () => {
71-
setIsCollapsed(!isCollapsed)
71+
setIsCollapsed((prevState) => !prevState)
7272
}
7373

7474
const renderDetailedData = () => {
@@ -79,7 +79,6 @@ export const DeploymentStatusDetailRow = ({
7979
return (
8080
<div className="px-8 py-12">
8181
<div>
82-
{/* TODO: Can be statusBreakDownType */}
8382
{statusBreakDownType.subSteps?.map((items, index) => (
8483
// eslint-disable-next-line react/no-array-index-key
8584
<div className="flex left lh-20 mb-8" key={`item-${index}`}>
@@ -101,7 +100,7 @@ export const DeploymentStatusDetailRow = ({
101100
<div className="resource-list fs-13">
102101
{statusBreakDownType.resourceDetails.map((nodeDetails) => (
103102
<div
104-
className="app-status-row pt-8 pb-8"
103+
className="app-status-row py-8"
105104
key={`${nodeDetails.resourceKind}/${nodeDetails.resourceName}`}
106105
>
107106
<div className="dc__break-word">{nodeDetails.resourceKind}</div>
@@ -129,7 +128,7 @@ export const DeploymentStatusDetailRow = ({
129128
}
130129

131130
const isAccordion =
132-
statusBreakDownType.subSteps?.length ||
131+
!!statusBreakDownType.subSteps?.length ||
133132
(type === TIMELINE_STATUS.APP_HEALTH && APP_HEALTH_DROP_DOWN_LIST.includes(statusBreakDownType.icon)) ||
134133
((type === TIMELINE_STATUS.GIT_COMMIT || type === TIMELINE_STATUS.ARGOCD_SYNC) &&
135134
statusBreakDownType.icon === 'failed')

‎src/Shared/Components/DeploymentStatusBreakdown/constants.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { DeploymentPhaseType, DeploymentStatusTimelineType, TIMELINE_STATUS } fr
33

44
import { WorkflowRunnerStatusDTO } from './types'
55

6-
export const DEPLOYMENT_STATUS_TEXT_MAP: Record<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS], string> = {
6+
export const DEPLOYMENT_STATUS_TEXT_MAP: Readonly<
7+
Record<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS], string>
8+
> = {
79
[DEPLOYMENT_STATUS.SUCCEEDED]: 'Succeeded',
810
[DEPLOYMENT_STATUS.HEALTHY]: 'Healthy',
911
[DEPLOYMENT_STATUS.FAILED]: 'Failed',
1012
[DEPLOYMENT_STATUS.TIMED_OUT]: 'Timed out',
11-
// TODO: Add icons
1213
[DEPLOYMENT_STATUS.UNABLE_TO_FETCH]: 'Unable to fetch status',
1314
[DEPLOYMENT_STATUS.INPROGRESS]: 'In progress',
1415
[DEPLOYMENT_STATUS.PROGRESSING]: 'Progressing',
@@ -21,9 +22,8 @@ export const DEPLOYMENT_STATUS_TEXT_MAP: Record<(typeof DEPLOYMENT_STATUS)[keyof
2122
}
2223

2324
// Might be more but as per BE its only these for now
24-
export const WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP: Record<
25-
WorkflowRunnerStatusDTO,
26-
(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS]
25+
export const WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP: Readonly<
26+
Record<WorkflowRunnerStatusDTO, (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS]>
2727
> = {
2828
[WorkflowRunnerStatusDTO.ABORTED]: DEPLOYMENT_STATUS.FAILED,
2929
[WorkflowRunnerStatusDTO.FAILED]: DEPLOYMENT_STATUS.FAILED,
@@ -43,7 +43,7 @@ export const WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP: Record<
4343
[WorkflowRunnerStatusDTO.QUEUED]: DEPLOYMENT_STATUS.QUEUED,
4444
}
4545

46-
export const PROGRESSING_DEPLOYMENT_STATUS: (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS][] = [
46+
export const PROGRESSING_DEPLOYMENT_STATUS: Readonly<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS][]> = [
4747
DEPLOYMENT_STATUS.INPROGRESS,
4848
DEPLOYMENT_STATUS.PROGRESSING,
4949
DEPLOYMENT_STATUS.STARTING,

‎src/Shared/Components/DeploymentStatusBreakdown/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export enum WorkflowRunnerStatusDTO {
1515
STARTING = 'Starting',
1616
QUEUED = 'Queued',
1717
INITIATING = 'Initiating',
18-
// Not found on BE but for Backward compatibility
18+
// Not found on BE but added for Backward compatibility
1919
HEALTHY = 'Healthy',
2020
DEGRADED = 'Degraded',
2121
}

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

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const getPredicate =
8686

8787
case TIMELINE_STATUS.APP_HEALTH:
8888
return [TIMELINE_STATUS.HEALTHY, TIMELINE_STATUS.DEGRADED, TIMELINE_STATUS.DEPLOYMENT_FAILED].includes(
89-
timelineItem.status as TIMELINE_STATUS,
89+
timelineItem.status,
9090
)
9191

9292
default:
@@ -136,22 +136,15 @@ const processKubeCTLApply = (
136136
if (resourceDetails) {
137137
// Used to parse resource details base struct with current phase as last phase
138138
DEPLOYMENT_PHASES.forEach((phase) => {
139-
let breakPhase = false
140-
resourceDetails.forEach((item) => {
141-
if (breakPhase) {
142-
return
143-
}
144-
145-
if (phase === item.resourcePhase) {
146-
tableData.currentPhase = phase
147-
tableData.currentTableData.push({
148-
icon: 'success',
149-
phase,
150-
message: `${phase}: Create and update resources based on manifest`,
151-
})
152-
breakPhase = true
153-
}
154-
})
139+
const resourceWithSamePhase = resourceDetails.find((item) => item.resourcePhase === phase)
140+
if (resourceWithSamePhase) {
141+
tableData.currentPhase = phase
142+
tableData.currentTableData.push({
143+
icon: 'success',
144+
phase,
145+
message: `${phase}: Create and update resources based on manifest`,
146+
})
147+
}
155148
})
156149
}
157150

@@ -231,16 +224,15 @@ export const processDeploymentStatusDetailsData = (
231224
return deploymentData
232225
}
233226

234-
// Would move for each timeline iteratively and if timeline is in terminal state then early return
235-
// If timeline is in non-terminal state then we mark it as waiting
236-
if (!data?.timelines?.length) {
227+
if (!data.timelines.length) {
237228
return deploymentData
238229
}
239230

240231
const isProgressing = PROGRESSING_DEPLOYMENT_STATUS.includes(deploymentStatus)
241-
const isArgoCDAvailable = data.timelines.some((timeline) => timeline.status.includes(TIMELINE_STATUS.ARGOCD_SYNC))
232+
const isArgoCDSyncAvailable = data.timelines.some((timeline) =>
233+
timeline.status.includes(TIMELINE_STATUS.ARGOCD_SYNC),
234+
)
242235

243-
// After initial processing will mark all unavailable timelines [present before last invalid state] as success
244236
PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.forEach((timelineStatusType, index) => {
245237
const element = findRight(data.timelines, getPredicate(timelineStatusType))
246238

@@ -292,11 +284,7 @@ export const processDeploymentStatusDetailsData = (
292284
timelineData.displaySubText = ''
293285

294286
// These are singular events so either their success will come or failure
295-
if (
296-
[TIMELINE_STATUS.GIT_COMMIT_FAILED, TIMELINE_STATUS.ARGOCD_SYNC_FAILED].includes(
297-
element.status as TIMELINE_STATUS,
298-
)
299-
) {
287+
if ([TIMELINE_STATUS.GIT_COMMIT_FAILED, TIMELINE_STATUS.ARGOCD_SYNC_FAILED].includes(element.status)) {
300288
timelineData.displaySubText = 'Failed'
301289
timelineData.icon = 'failed'
302290
timelineData.isCollapsed = false
@@ -307,7 +295,7 @@ export const processDeploymentStatusDetailsData = (
307295
break
308296

309297
case TIMELINE_STATUS.KUBECTL_APPLY: {
310-
if (!isArgoCDAvailable) {
298+
if (!isArgoCDSyncAvailable) {
311299
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'success'
312300
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = ''
313301
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.time = element.statusTime
@@ -337,8 +325,8 @@ export const processDeploymentStatusDetailsData = (
337325
break
338326
}
339327

328+
// Moving the next timeline to inprogress
340329
if (timelineData.icon === 'success' && index !== PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.length - 1) {
341-
// Moving the next timeline to inprogress
342330
const nextTimelineStatus = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER[index + 1]
343331
const nextTimeline = deploymentData.deploymentStatusBreakdown[nextTimelineStatus]
344332

@@ -353,7 +341,6 @@ export const processDeploymentStatusDetailsData = (
353341
const timelineData = deploymentData.deploymentStatusBreakdown[timelineStatusType]
354342

355343
if (timelineData.icon === 'inprogress' || timelineData.icon === 'success') {
356-
// If the timeline is in progress or success then we will mark all the previous steps as success
357344
for (let j = i - 1; j >= 0; j -= 1) {
358345
const prevTimelineStatusType = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER[j]
359346
const prevTimelineData = deploymentData.deploymentStatusBreakdown[prevTimelineStatusType]

‎src/Shared/Components/StatusComponent/utils.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ export const getIconName = (status: string, showAnimatedIcon: boolean): IconName
7070
case 'timedout':
7171
case 'timed_out':
7272
return 'ic-timeout-dash'
73+
case 'unable_to_fetch':
74+
return 'ic-disconnect'
7375
default:
7476
return null
7577
}
@@ -90,6 +92,7 @@ export const getIconColor = (status: string): IconsProps['color'] => {
9092
case 'request_accepted':
9193
case 'starting':
9294
return 'O500'
95+
case 'unable_to_fetch':
9396
case 'timedout':
9497
case 'timed_out':
9598
return 'R500'

‎src/Shared/types.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,25 +1175,6 @@ export interface SyncStageResourceDetail {
11751175
statusMessage: string
11761176
}
11771177

1178-
export interface DeploymentStatusDetailsTimelineType
1179-
extends Pick<SyncStageResourceDetail, 'id' | 'cdWorkflowRunnerId'> {
1180-
status: string
1181-
statusDetail: string
1182-
statusTime: string
1183-
resourceDetails?: SyncStageResourceDetail[]
1184-
}
1185-
1186-
export interface DeploymentStatusDetailsType {
1187-
deploymentFinishedOn: string
1188-
deploymentStartedOn: string
1189-
triggeredBy: string
1190-
statusFetchCount: number
1191-
statusLastFetchedAt: string
1192-
timelines: DeploymentStatusDetailsTimelineType[]
1193-
wfrStatus?: WorkflowRunnerStatusDTO
1194-
isDeploymentWithoutApproval: boolean
1195-
}
1196-
11971178
export enum TIMELINE_STATUS {
11981179
DEPLOYMENT_INITIATED = 'DEPLOYMENT_INITIATED',
11991180
GIT_COMMIT = 'GIT_COMMIT',
@@ -1218,6 +1199,25 @@ export enum TIMELINE_STATUS {
12181199
HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED',
12191200
}
12201201

1202+
export interface DeploymentStatusDetailsTimelineType
1203+
extends Pick<SyncStageResourceDetail, 'id' | 'cdWorkflowRunnerId'> {
1204+
status: TIMELINE_STATUS
1205+
statusDetail: string
1206+
statusTime: string
1207+
resourceDetails?: SyncStageResourceDetail[]
1208+
}
1209+
1210+
export interface DeploymentStatusDetailsType {
1211+
deploymentFinishedOn: string
1212+
deploymentStartedOn: string
1213+
triggeredBy: string
1214+
statusFetchCount: number
1215+
statusLastFetchedAt: string
1216+
timelines: DeploymentStatusDetailsTimelineType[]
1217+
wfrStatus?: WorkflowRunnerStatusDTO
1218+
isDeploymentWithoutApproval: boolean
1219+
}
1220+
12211221
export type DeploymentStatusTimelineType =
12221222
| TIMELINE_STATUS.DEPLOYMENT_INITIATED
12231223
| TIMELINE_STATUS.GIT_COMMIT

0 commit comments

Comments
 (0)