Skip to content

Commit 9940cba

Browse files
AbhishekA1509AbhishekA1509
committed
feat: add argo cd tile in deployment status steps
1 parent b68314d commit 9940cba

File tree

5 files changed

+155
-11
lines changed

5 files changed

+155
-11
lines changed

‎src/components/app/details/appDetails/DeploymentStatusBreakdown.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,17 @@ export default function DeploymentStatusDetailBreakdown({
4646
type={TIMELINE_STATUS.GIT_COMMIT}
4747
deploymentDetailedData={deploymentStatusDetailsBreakdownData}
4848
/>
49+
50+
<ErrorInfoStatusBar
51+
type={TIMELINE_STATUS.ARGOCD_SYNC}
52+
nonDeploymentError={deploymentStatusDetailsBreakdownData.nonDeploymentError}
53+
errorMessage={deploymentStatusDetailsBreakdownData.deploymentError}
54+
/>
55+
<DeploymentStatusDetailRow
56+
type={TIMELINE_STATUS.ARGOCD_SYNC}
57+
deploymentDetailedData={deploymentStatusDetailsBreakdownData}
58+
/>
59+
4960
<ErrorInfoStatusBar
5061
type={TIMELINE_STATUS.KUBECTL_APPLY}
5162
nonDeploymentError={deploymentStatusDetailsBreakdownData.nonDeploymentError}
@@ -55,6 +66,7 @@ export default function DeploymentStatusDetailBreakdown({
5566
type={TIMELINE_STATUS.KUBECTL_APPLY}
5667
deploymentDetailedData={deploymentStatusDetailsBreakdownData}
5768
/>
69+
5870
<DeploymentStatusDetailRow
5971
type={TIMELINE_STATUS.APP_HEALTH}
6072
hideVerticalConnector={true}

‎src/components/app/details/appDetails/DeploymentStatusDetailRow.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -226,19 +226,20 @@ export function DeploymentStatusDetailRow({
226226
{((type === TIMELINE_STATUS.KUBECTL_APPLY && statusBreakDownType.kubeList?.length) ||
227227
(type === TIMELINE_STATUS.APP_HEALTH &&
228228
appHealthDropDownlist.includes(statusBreakDownType.icon)) ||
229-
(type === TIMELINE_STATUS.GIT_COMMIT && statusBreakDownType.icon === 'failed')) && (
230-
<DropDownIcon
231-
style={{ marginLeft: 'auto', ['--rotateBy' as any]: `${180 * Number(!collapsed)}deg` }}
232-
className="icon-dim-24 rotate pointer"
233-
onClick={toggleDropdown}
234-
data-testid="steps-deployment-history-dropdown"
235-
/>
236-
)}
229+
((type === TIMELINE_STATUS.GIT_COMMIT || type === TIMELINE_STATUS.ARGOCD_SYNC) && statusBreakDownType.icon === 'failed')) && (
230+
<DropDownIcon
231+
style={{ marginLeft: 'auto', ['--rotateBy' as any]: `${180 * Number(!collapsed)}deg` }}
232+
className="icon-dim-24 rotate pointer"
233+
onClick={toggleDropdown}
234+
data-testid="steps-deployment-history-dropdown"
235+
/>
236+
)}
237237
</div>
238238
{isHelmManifestPushFailed && renderErrorInfoBar()}
239239
</div>
240240

241241
{type === TIMELINE_STATUS.GIT_COMMIT && renderDetailedData()}
242+
{type === TIMELINE_STATUS.ARGOCD_SYNC && renderDetailedData()}
242243
{type === TIMELINE_STATUS.KUBECTL_APPLY && renderDetailedData()}
243244
{type === TIMELINE_STATUS.APP_HEALTH && renderDetailChart()}
244245
{!hideVerticalConnector && <div className="vertical-connector"></div>}

‎src/components/app/details/appDetails/appDetails.type.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
100100
deploymentStatusBreakdown: {
101101
DEPLOYMENT_INITIATED: DeploymentStatusDetailRow
102102
GIT_COMMIT?: DeploymentStatusDetailRow
103+
ARGOCD_SYNC?: DeploymentStatusDetailRow
103104
KUBECTL_APPLY?: DeploymentStatusDetailRow
104105
APP_HEALTH?: DeploymentStatusDetailRow
105106
HELM_PACKAGE_GENERATED?: DeploymentStatusDetailRow

‎src/components/app/details/appDetails/utils.tsx

Lines changed: 131 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,7 @@ export function addQueryParamToGrafanaURL(
439439
return url
440440
}
441441

442+
// NOTE: Need to improve logic since in some cases the unknown status would leak to previous entites, can do that by not setting deploymentStatus as Failed by ourselves and let backend be source of truth of that
442443
export const processDeploymentStatusDetailsData = (
443444
data?: DeploymentStatusDetailsType,
444445
): DeploymentStatusDetailsBreakdownDataType => {
@@ -465,6 +466,14 @@ export const processDeploymentStatusDetailsData = (
465466
time: '',
466467
isCollapsed: true,
467468
},
469+
ARGOCD_SYNC: {
470+
icon: '',
471+
displayText: 'Synced with Argo CD',
472+
displaySubText: '',
473+
timelineStatus: '',
474+
time: '',
475+
isCollapsed: true,
476+
},
468477
KUBECTL_APPLY: {
469478
icon: '',
470479
displayText: 'Apply manifest to Kubernetes',
@@ -507,6 +516,7 @@ export const processDeploymentStatusDetailsData = (
507516
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'success'
508517
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.isCollapsed = true
509518
deploymentData.deploymentStatusBreakdown.APP_HEALTH.isCollapsed = true
519+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'success'
510520
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'success'
511521
} else if (element['status'] === TIMELINE_STATUS.DEPLOYMENT_FAILED) {
512522
deploymentData.deploymentStatus = DEPLOYMENT_STATUS.FAILED
@@ -534,6 +544,7 @@ export const processDeploymentStatusDetailsData = (
534544
for (let item of element.resourceDetails) {
535545
if (phase === item.resourcePhase) {
536546
tableData.currentPhase = phase
547+
// Seems else block was forgotten to add here, TODO: Sync for this later
537548
if (item.resourceStatus === 'failed') {
538549
}
539550
tableData.currentTableData.push({
@@ -595,11 +606,22 @@ export const processDeploymentStatusDetailsData = (
595606
}
596607
})
597608
}
609+
610+
// TO Support legacy data have to make sure that if ARGOCD_SYNC is not available then we fill it with dummy values
611+
const isArgoCDAvailable = data?.timelines?.some((timeline) =>
612+
timeline['status'].includes(TIMELINE_STATUS.ARGOCD_SYNC),
613+
)
614+
if (!isArgoCDAvailable) {
615+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'success'
616+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = ''
617+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.time = element['statusTime']
618+
}
598619
} else if (element['status'] === TIMELINE_STATUS.KUBECTL_APPLY_SYNCED) {
599620
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.resourceDetails = []
600621
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
601622
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.time = element['statusTime']
602623
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'success'
624+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'success'
603625
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'success'
604626
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.kubeList = tableData.currentTableData
605627

@@ -623,27 +645,87 @@ export const processDeploymentStatusDetailsData = (
623645
deploymentData.deploymentStatusBreakdown.APP_HEALTH.isCollapsed = false
624646
}
625647
}
648+
} else if (element['status'].includes(TIMELINE_STATUS.ARGOCD_SYNC)) {
649+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.time = element['statusTime']
650+
651+
if (element['status'] === TIMELINE_STATUS.ARGOCD_SYNC_FAILED) {
652+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = 'Failed'
653+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'failed'
654+
655+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
656+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unreachable'
657+
658+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ''
659+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unreachable'
660+
661+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.isCollapsed = false
662+
deploymentData.deploymentStatus = DEPLOYMENT_STATUS.FAILED
663+
deploymentData.deploymentStatusText = 'Failed'
664+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.timelineStatus = element['statusDetail']
665+
}
666+
else {
667+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'success'
668+
if (deploymentData.deploymentStatus === DEPLOYMENT_STATUS.FAILED) {
669+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
670+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unreachable'
671+
672+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ''
673+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unreachable'
674+
675+
if (deploymentData.nonDeploymentError === '') {
676+
deploymentData.nonDeploymentError = TIMELINE_STATUS.KUBECTL_APPLY
677+
}
678+
} else if (
679+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.time === '' &&
680+
deploymentData.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS
681+
) {
682+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = ''
683+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = 'Waiting'
684+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.kubeList = [
685+
{ icon: '', message: 'Waiting to be started by Argo CD' },
686+
{ icon: '', message: 'Create and update resources based on manifest' },
687+
]
688+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.isCollapsed = false
689+
}
690+
}
626691
} else if (element['status'].includes(TIMELINE_STATUS.GIT_COMMIT)) {
627692
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.time = element['statusTime']
628693
if (element['status'] === TIMELINE_STATUS.GIT_COMMIT_FAILED) {
629694
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.displaySubText = 'Failed'
630695
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'failed'
696+
697+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = ''
698+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'unreachable'
699+
700+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
631701
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unreachable'
702+
703+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ''
632704
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unreachable'
705+
633706
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.isCollapsed = false
634707
deploymentData.deploymentStatus = DEPLOYMENT_STATUS.FAILED
635708
deploymentData.deploymentStatusText = 'Failed'
636709
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.timelineStatus = element['statusDetail']
637710
} else {
638711
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'success'
639712
if (deploymentData.deploymentStatus === DEPLOYMENT_STATUS.FAILED) {
713+
if (deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon === '') {
714+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = ''
715+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'unreachable'
716+
}
717+
640718
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
641719
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unreachable'
720+
642721
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ''
643722
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unreachable'
644-
deploymentData.nonDeploymentError = TIMELINE_STATUS.KUBECTL_APPLY
723+
724+
if (deploymentData.nonDeploymentError === '') {
725+
deploymentData.nonDeploymentError = TIMELINE_STATUS.ARGOCD_SYNC
726+
}
645727
} else if (
646-
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.time === '' &&
728+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.time === '' &&
647729
deploymentData.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS
648730
) {
649731
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = ''
@@ -653,6 +735,8 @@ export const processDeploymentStatusDetailsData = (
653735
{ icon: '', message: 'Create and update resources based on manifest' },
654736
]
655737
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.isCollapsed = false
738+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'inprogress'
739+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = 'In progress'
656740
}
657741
}
658742
} else if (element['status'] === TIMELINE_STATUS.DEPLOYMENT_INITIATED) {
@@ -662,23 +746,66 @@ export const processDeploymentStatusDetailsData = (
662746
deploymentData.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS
663747
) {
664748
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'inprogress'
749+
750+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = ''
751+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = 'Waiting'
752+
753+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = ''
754+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = 'Waiting'
755+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.kubeList = [
756+
{ icon: '', message: 'Waiting to be started by Argo CD' },
757+
{ icon: '', message: 'Create and update resources based on manifest' },
758+
]
759+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.isCollapsed = false
665760
}
666761
if (deploymentData.deploymentStatus === DEPLOYMENT_STATUS.FAILED) {
667762
if (deploymentData.deploymentStatusBreakdown.GIT_COMMIT.time === '') {
668763
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.displaySubText = ''
669764
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'unreachable'
765+
766+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = ''
767+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'unreachable'
768+
670769
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
671770
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unreachable'
771+
672772
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ''
673773
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unreachable'
774+
674775
deploymentData.nonDeploymentError = TIMELINE_STATUS.GIT_COMMIT
675776
} else if (deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon !== 'failed') {
676-
if (deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.time === '') {
777+
if (deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.time === '') {
778+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = 'Unknown'
779+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'unknown'
780+
677781
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = 'Unknown'
678782
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unknown'
783+
679784
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ': Unknown'
680785
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unknown'
681786
}
787+
else if (deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon !== 'failed') {
788+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = 'Unknown'
789+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unknown'
790+
791+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ': Unknown'
792+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unknown'
793+
}
794+
}
795+
else {
796+
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.displaySubText = ''
797+
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'unreachable'
798+
799+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.displaySubText = ''
800+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'unreachable'
801+
802+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.displaySubText = ''
803+
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'unreachable'
804+
805+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = ''
806+
deploymentData.deploymentStatusBreakdown.APP_HEALTH.icon = 'unreachable'
807+
808+
deploymentData.nonDeploymentError = TIMELINE_STATUS.GIT_COMMIT
682809
}
683810
}
684811
}
@@ -692,6 +819,7 @@ export const processDeploymentStatusDetailsData = (
692819
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon = 'success'
693820
deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.isCollapsed = true
694821
deploymentData.deploymentStatusBreakdown.APP_HEALTH.isCollapsed = true
822+
deploymentData.deploymentStatusBreakdown.ARGOCD_SYNC.icon = 'success'
695823
deploymentData.deploymentStatusBreakdown.GIT_COMMIT.icon = 'success'
696824
} else if (data?.wfrStatus === 'Failed' || data?.wfrStatus === 'Degraded') {
697825
deploymentData.deploymentStatus = DEPLOYMENT_STATUS.FAILED

‎src/config/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,8 @@ export enum TIMELINE_STATUS {
703703
DEPLOYMENT_INITIATED = 'DEPLOYMENT_INITIATED',
704704
GIT_COMMIT = 'GIT_COMMIT',
705705
GIT_COMMIT_FAILED = 'GIT_COMMIT_FAILED',
706+
ARGOCD_SYNC = 'ARGOCD_SYNC',
707+
ARGOCD_SYNC_FAILED = 'ARGOCD_SYNC_FAILED',
706708
KUBECTL_APPLY = 'KUBECTL_APPLY',
707709
KUBECTL_APPLY_STARTED = 'KUBECTL_APPLY_STARTED',
708710
KUBECTL_APPLY_SYNCED = 'KUBECTL_APPLY_SYNCED',

0 commit comments

Comments
 (0)