feat: consolidate status color definitions and enhance workflow stage handling in CICD components

Author: AbhishekA1509

src/Shared/Components/CICDHistory/Sidebar.tsx

@@ -41,8 +41,7 @@ import { ReactComponent as ICArrowBackward } from '../../../Assets/Icon/ic-arrow
 import { ReactComponent as ICDocker } from '../../../Assets/Icon/ic-docker.svg'
 import { GitTriggers } from '../../types'
 import { CiPipelineSourceConfig } from './CiPipelineSourceConfig'
-import { HISTORY_LABEL, FILTER_STYLE } from './constants'
-import { statusColor as colorMap } from '../../constants'
+import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constants'
 import { getTriggerStatusIcon } from './utils'
 
 const SummaryTooltipCard = React.memo(

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -24,6 +24,7 @@ import { CommitChipCell } from '@Shared/Components/CommitChipCell'
 import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
 import { ReactComponent as ICLines } from '@Icons/ic-lines.svg'
 import { ReactComponent as ICPulsateStatus } from '@Icons/ic-pulsate-status.svg'
+import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
 import { ToastManager, ToastVariantType } from '@Shared/Services'
 import { getDeploymentStageTitle } from '@Pages/Applications'
@@ -46,10 +47,8 @@ import {
     FetchIdDataStatus,
     FinishedType,
     HistoryComponentType,
-    PROGRESSING_STATUS,
     ProgressingStatusType,
     StartDetailsType,
-    TERMINAL_STATUS_COLOR_CLASS_MAP,
     TriggerDetailsStatusIconType,
     TriggerDetailsType,
     TriggerOutputProps,
@@ -61,16 +60,24 @@ import {
     WorkflowStageStatusType,
 } from './types'
 import { getTagDetails, getTriggerDetails, cancelCiTrigger, cancelPrePostCdTrigger } from './service'
-import { DEFAULT_CLUSTER_ID, DEFAULT_ENV, TIMEOUT_VALUE } from './constants'
+import {
+    DEFAULT_CLUSTER_ID,
+    DEFAULT_ENV,
+    TIMEOUT_VALUE,
+    statusColor as colorMap,
+    PULSATING_STATUS_MAP,
+    TERMINAL_STATUS_COLOR_CLASS_MAP,
+    PROGRESSING_STATUS,
+} from './constants'
 import { GitTriggers } from '../../types'
 import LogsRenderer from './LogsRenderer'
 import DeploymentDetailSteps from './DeploymentDetailSteps'
 import { DeploymentHistoryConfigDiff } from './DeploymentHistoryConfigDiff'
 import { GitChanges, Scroller } from './History.components'
 import Artifacts from './Artifacts'
-import { statusColor as colorMap, DeploymentStageType, EMPTY_STATE_STATUS, PULSATING_STATUS_MAP } from '../../constants'
+import { DeploymentStageType, EMPTY_STATE_STATUS } from '../../constants'
 import { ConfirmationModal, ConfirmationModalVariantType } from '../ConfirmationModal'
-import { getWorkerPodBaseUrl, sanitizeWorkflowExecutionStages } from './utils'
+import { FAILED_WORKFLOW_STAGE_STATUS_MAP, getWorkerPodBaseUrl, sanitizeWorkflowExecutionStages } from './utils'
 import './cicdHistory.scss'
 
 const Finished = React.memo(({ status, finishedOn, artifact, type, executionInfo }: FinishedType): JSX.Element => {
@@ -134,7 +141,12 @@ const WorkerStatus = React.memo(
         return (
             <div className="display-grid trigger-details__grid py-4">
                 <div className="flexbox dc__content-center">
-                    <ICLines className="icon-dim-20 dc__no-shrink scn-7" />
+                    {/* TODO: Ask if not started needs to be catered */}
+                    {FAILED_WORKFLOW_STAGE_STATUS_MAP[podStatus] ? (
+                        <ICWarningY5 className="icon-dim-20 dc__no-shrink" />
+                    ) : (
+                        <ICLines className="icon-dim-20 dc__no-shrink scn-7" />
+                    )}
                 </div>
 
                 <div className="flexbox-col">
@@ -439,12 +451,37 @@ const renderDetailsSuccessIconBlock = () => (
     </>
 )
 
+const NonProgressingStatus = React.memo(
+    ({ status }: { status: string }): JSX.Element => (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle
+                cx="10"
+                cy="10"
+                r="5"
+                fill={colorMap[status] || 'var(--N500'}
+                stroke={colorMap[status] || 'var(--N500'}
+                strokeOpacity="0.3"
+                strokeWidth="10"
+            />
+            <path d="M10 0L10 5" stroke="var(--N700)" />
+        </svg>
+    ),
+)
+
+const CurrentStatusIcon = React.memo(({ status }: { status: string }): JSX.Element => {
+    if (status === WorkflowStageStatusType.RUNNING || PULSATING_STATUS_MAP[status]) {
+        return <ICPulsateStatus />
+    }
+
+    return <NonProgressingStatus status={status.toLowerCase()} />
+})
+
 const TriggerDetailsStatusIcon = React.memo(
     ({
         status,
         renderDeploymentHistoryTriggerMetaText,
         triggerMetadata,
-        executionStartedOn,
+        executionInfo,
     }: TriggerDetailsStatusIconType): JSX.Element => (
         <div className="flexbox-col">
             {renderDetailsSuccessIconBlock()}
@@ -459,23 +496,12 @@ const TriggerDetailsStatusIcon = React.memo(
                 </>
             )}
 
-            {executionStartedOn && renderDetailsSuccessIconBlock()}
+            {executionInfo?.executionStartedOn && renderDetailsSuccessIconBlock()}
 
-            {PULSATING_STATUS_MAP[status] ? (
-                <ICPulsateStatus />
+            {executionInfo ? (
+                <CurrentStatusIcon status={executionInfo.currentStatus} />
             ) : (
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle
-                        cx="10"
-                        cy="10"
-                        r="5"
-                        fill={colorMap[status]}
-                        stroke={colorMap[status]}
-                        strokeOpacity="0.3"
-                        strokeWidth="10"
-                    />
-                    <path d="M10 0L10 5" stroke="var(--N700)" />
-                </svg>
+                <CurrentStatusIcon status={status} />
             )}
         </div>
     ),
@@ -517,7 +543,7 @@ export const TriggerDetails = React.memo(
                             status={status?.toLowerCase()}
                             renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
                             triggerMetadata={triggerMetadata}
-                            executionStartedOn={executionInfo?.executionStartedOn}
+                            executionInfo={executionInfo}
                         />
                     </div>
                     <div className="trigger-details__summary flexbox-col flex-grow-1 lh-20">

src/Shared/Components/CICDHistory/constants.tsx

@@ -15,6 +15,7 @@
  */
 
 import { multiSelectStyles } from '../../../Common/MultiSelectCustomization'
+import { WorkflowStageStatusType } from './types'
 
 export const HISTORY_LABEL = {
     APPLICATION: 'Application',
@@ -82,3 +83,51 @@ export const MANIFEST_STATUS_HEADERS = ['KIND', 'NAME', 'SYNC STATUS', 'MESSAGE'
 export const LOGS_STAGE_IDENTIFIER = 'STAGE_INFO'
 
 export const LOGS_STAGE_STREAM_SEPARATOR = '|'
+
+export const statusColor = {
+    suspended: 'var(--Y500)',
+    unknown: 'var(--N700)',
+    queued: 'var(--N700)',
+    degraded: 'var(--R500)',
+    healthy: 'var(--G500)',
+    notdeployed: 'var(--N500)',
+    missing: 'var(--N700)',
+    progressing: 'var(--O500)',
+    initiating: 'var(--O500)',
+    starting: 'var(--O500)',
+    succeeded: 'var(--G500)',
+    running: 'var(--O500)',
+    failed: 'var(--R500)',
+    error: 'var(--R500)',
+    cancelled: 'var(--R500)',
+    aborted: 'var(--R500)',
+    timedout: 'var(--R500)',
+    unabletofetch: 'var(--R500)',
+    hibernating: 'var(--N700)',
+    [WorkflowStageStatusType.NOT_STARTED.toLowerCase()]: 'var(--N500)',
+    [WorkflowStageStatusType.TIMEOUT.toLowerCase()]: 'var(--R500)',
+}
+
+export const PULSATING_STATUS_MAP: { [key in keyof typeof statusColor | WorkflowStageStatusType.RUNNING]?: boolean } = {
+    progressing: true,
+    initiating: true,
+    starting: true,
+    running: true,
+    [WorkflowStageStatusType.RUNNING.toLowerCase()]: true,
+}
+
+export const TERMINAL_STATUS_COLOR_CLASS_MAP = {
+    [TERMINAL_STATUS_MAP.SUCCEEDED]: 'cg-5',
+    [TERMINAL_STATUS_MAP.HEALTHY]: 'cg-5',
+    [TERMINAL_STATUS_MAP.FAILED]: 'cr-5',
+    [TERMINAL_STATUS_MAP.CANCELLED]: 'cr-5',
+    [TERMINAL_STATUS_MAP.ERROR]: 'cr-5',
+}
+
+export const PROGRESSING_STATUS = {
+    [TERMINAL_STATUS_MAP.RUNNING]: 'running',
+    [TERMINAL_STATUS_MAP.PROGRESSING]: 'progressing',
+    [TERMINAL_STATUS_MAP.STARTING]: 'starting',
+    [TERMINAL_STATUS_MAP.INITIATING]: 'initiating',
+    [TERMINAL_STATUS_MAP.QUEUED]: 'queued',
+}

src/Shared/Components/CICDHistory/index.tsx

@@ -30,3 +30,4 @@ export { default as LogsRenderer } from './LogsRenderer'
 export * from './DeploymentHistoryConfigDiff'
 export * from './CiPipelineSourceConfig'
 export * from './StatusFilterButtonComponent'
+export { statusColor } from './constants'

src/Shared/Components/CICDHistory/types.tsx

@@ -39,7 +39,6 @@ import {
     ResourceVersionType,
     TargetPlatformsDTO,
 } from '../../types'
-import { TERMINAL_STATUS_MAP } from './constants'
 import { TargetPlatformBadgeListProps } from '../TargetPlatforms'
 
 export enum HistoryComponentType {
@@ -356,9 +355,9 @@ export type FinishedType = { artifact: string; type: HistoryComponentType } & (
 )
 
 export interface TriggerDetailsStatusIconType
-    extends Pick<TriggerDetailsType, 'renderDeploymentHistoryTriggerMetaText' | 'triggerMetadata'>,
-        Pick<ExecutionInfoType, 'executionStartedOn'> {
+    extends Pick<TriggerDetailsType, 'renderDeploymentHistoryTriggerMetaText' | 'triggerMetadata'> {
     status: string
+    executionInfo: ExecutionInfoType
 }
 
 export interface SyncStageResourceDetail {
@@ -394,22 +393,6 @@ export interface DeploymentStatusDetailsResponse extends ResponseType {
     result?: DeploymentStatusDetailsType
 }
 
-export const TERMINAL_STATUS_COLOR_CLASS_MAP = {
-    [TERMINAL_STATUS_MAP.SUCCEEDED]: 'cg-5',
-    [TERMINAL_STATUS_MAP.HEALTHY]: 'cg-5',
-    [TERMINAL_STATUS_MAP.FAILED]: 'cr-5',
-    [TERMINAL_STATUS_MAP.CANCELLED]: 'cr-5',
-    [TERMINAL_STATUS_MAP.ERROR]: 'cr-5',
-}
-
-export const PROGRESSING_STATUS = {
-    [TERMINAL_STATUS_MAP.RUNNING]: 'running',
-    [TERMINAL_STATUS_MAP.PROGRESSING]: 'progressing',
-    [TERMINAL_STATUS_MAP.STARTING]: 'starting',
-    [TERMINAL_STATUS_MAP.INITIATING]: 'initiating',
-    [TERMINAL_STATUS_MAP.QUEUED]: 'queued',
-}
-
 interface DeploymentStatusDetailRow {
     icon: string
     displayText: string

src/Shared/Components/CICDHistory/utils.tsx

@@ -42,7 +42,7 @@ import {
     WorkflowExecutionStageNameType,
 } from './types'
 
-const FAILED_WORKFLOW_STAGE_STATUS_MAP: Record<
+export const FAILED_WORKFLOW_STAGE_STATUS_MAP: Record<
     Extract<
         WorkflowStageStatusType,
         WorkflowStageStatusType.ABORTED | WorkflowStageStatusType.FAILED | WorkflowStageStatusType.TIMEOUT
@@ -245,7 +245,7 @@ const getWorkerInfoFromExecutionStages = (
 export const sanitizeWorkflowExecutionStages = (
     workflowExecutionStages: WorkflowExecutionStagesMapDTO['workflowExecutionStages'],
 ): ExecutionInfoType | null => {
-    if (!workflowExecutionStages) {
+    if (!Object.keys(workflowExecutionStages || {}).length) {
         return null
     }
 

src/Shared/constants.tsx

@@ -387,35 +387,6 @@ export const statusIcon = {
     unabletofetch: 'failed',
 }
 
-export const statusColor = {
-    suspended: 'var(--Y500)',
-    unknown: 'var(--N700)',
-    queued: 'var(--N700)',
-    degraded: 'var(--R500)',
-    healthy: 'var(--G500)',
-    notdeployed: 'var(--N500)',
-    missing: 'var(--N700)',
-    progressing: 'var(--O500)',
-    initiating: 'var(--O500)',
-    starting: 'var(--O500)',
-    succeeded: 'var(--G500)',
-    running: 'var(--O500)',
-    failed: 'var(--R500)',
-    error: 'var(--R500)',
-    cancelled: 'var(--R500)',
-    aborted: 'var(--R500)',
-    timedout: 'var(--R500)',
-    unabletofetch: 'var(--R500)',
-    hibernating: 'var(--N700)',
-}
-
-export const PULSATING_STATUS_MAP: { [key in keyof typeof statusColor]?: boolean } = {
-    progressing: true,
-    initiating: true,
-    starting: true,
-    running: true,
-}
-
 export const APP_STATUS_HEADERS = ['KIND', 'NAME', 'STATUS', 'MESSAGE']
 
 export const MATERIAL_EXCLUDE_TIPPY_TEXT =