feat: enhance job status handling and improve UI feedback for waiting states

Author: AbhishekA1509

src/Common/AppStatus/AppStatus.tsx

@@ -15,11 +15,13 @@
  */
 
 import Tippy from '@tippyjs/react'
+import { WorkflowStatusEnum } from '@Shared/types'
+import { renderProgressingTriggerIcon } from '@Shared/Components'
 import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
-import { ReactComponent as InfoIcon } from '../../Assets/Icon/ic-info-outlined.svg'
+import { ReactComponent as InfoIcon } from '@Icons/ic-info-outlined.svg'
 import { StatusConstants, YET_TO_RUN } from './constants'
 import { AppStatusType } from './types'
-import { triggerStatus } from './utils'
+import { parseJobStatus, triggerStatus } from './utils'
 
 export default function AppStatus({
     appStatus,
@@ -31,6 +33,8 @@ export default function AppStatus({
     let status = appStatus
     if (isDeploymentStatus) {
         status = triggerStatus(appStatus)
+    } else if (isJobView) {
+        status = parseJobStatus(appStatus)
     }
     const appStatusLowerCase = status?.toLowerCase()
     const isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower
@@ -52,6 +56,10 @@ export default function AppStatus({
     const iconClass = getIconClass()
 
     const renderIcon = () => {
+        if (isJobView && appStatus === WorkflowStatusEnum.WAITING_TO_START) {
+            return renderProgressingTriggerIcon()
+        }
+
         if (iconClass) {
             return iconClass === 'failed' || iconClass === 'error' ? (
                 <ICErrorCross className="icon-dim-16 dc__no-shrink ic-error-cross-red" />

src/Common/AppStatus/utils.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { WorkflowStatusEnum } from '@Shared/types'
 import { TIMELINE_STATUS } from '../../Shared/constants'
 
 export const triggerStatus = (triggerDetailStatus: string): string => {
@@ -29,3 +30,11 @@ export const triggerStatus = (triggerDetailStatus: string): string => {
     }
     return triggerDetailStatus
 }
+
+export const parseJobStatus = (status: string): string => {
+    if (status === WorkflowStatusEnum.WAITING_TO_START) {
+        return 'Waiting to start'
+    }
+
+    return status
+}

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -153,14 +153,20 @@ const Artifacts = ({
         buildId: string
     }>()
 
+    const lowerCaseStatus = status.toLowerCase()
+
     async function handleArtifact() {
         await handleDownload({
             downloadUrl: downloadArtifactUrl,
             fileName: `${buildId || triggerId}.zip`,
         })
     }
 
-    if (status.toLowerCase() === TERMINAL_STATUS_MAP.RUNNING || status.toLowerCase() === TERMINAL_STATUS_MAP.STARTING) {
+    if (
+        lowerCaseStatus === TERMINAL_STATUS_MAP.RUNNING ||
+        lowerCaseStatus === TERMINAL_STATUS_MAP.STARTING ||
+        lowerCaseStatus === TERMINAL_STATUS_MAP.WAITING_TO_START
+    ) {
         return <CIProgressView />
     }
     // If artifactId is not 0 image info is shown, if isArtifactUploaded is true reports are shown
@@ -170,9 +176,10 @@ const Artifacts = ({
     // NOTE: This means there are no reports and no image artifacts i.e. empty state
     if (!isArtifactUploaded && !artifactId) {
         if (
-            status.toLowerCase() === TERMINAL_STATUS_MAP.FAILED ||
-            status.toLowerCase() === TERMINAL_STATUS_MAP.CANCELLED ||
-            status.toLowerCase() === TERMINAL_STATUS_MAP.ERROR
+            lowerCaseStatus === TERMINAL_STATUS_MAP.FAILED ||
+            lowerCaseStatus === TERMINAL_STATUS_MAP.CANCELLED ||
+            lowerCaseStatus === TERMINAL_STATUS_MAP.ERROR ||
+            lowerCaseStatus === TERMINAL_STATUS_MAP.TIMED_OUT
         ) {
             return (
                 <GenericEmptyState
@@ -190,7 +197,7 @@ const Artifacts = ({
             )
         }
 
-        if (status.toLowerCase() === TERMINAL_STATUS_MAP.SUCCEEDED) {
+        if (lowerCaseStatus === TERMINAL_STATUS_MAP.SUCCEEDED) {
             return (
                 <GenericEmptyState
                     title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsFound}

src/Shared/Components/CICDHistory/constants.tsx

@@ -55,7 +55,8 @@ export const TERMINAL_STATUS_MAP = {
     ERROR: 'error',
     CANCELLED: 'cancelled',
     UNABLE_TO_FETCH: 'unabletofetch',
-    TIMED_OUT: 'timedout',
+    TIMED_OUT: WorkflowStatusEnum.TIMED_OUT.toLowerCase(),
+    WAITING_TO_START: WorkflowStatusEnum.WAITING_TO_START.toLowerCase(),
 }
 
 export const EVENT_STREAM_EVENTS_MAP = {
@@ -99,6 +100,7 @@ export const statusColor = {
     initiating: 'var(--O500)',
     starting: 'var(--O500)',
     [WorkflowStatusEnum.WAITING_TO_START.toLowerCase()]: 'var(--O500)',
+    [WorkflowStatusEnum.TIMED_OUT.toLowerCase()]: 'var(--R500)',
     succeeded: 'var(--G500)',
     running: 'var(--O500)',
     failed: 'var(--R500)',
@@ -141,10 +143,12 @@ export const TERMINAL_STATUS_COLOR_CLASS_MAP = {
     [TERMINAL_STATUS_MAP.FAILED]: 'cr-5',
     [TERMINAL_STATUS_MAP.CANCELLED]: 'cr-5',
     [TERMINAL_STATUS_MAP.ERROR]: 'cr-5',
+    [TERMINAL_STATUS_MAP.TIMED_OUT]: 'cr-5',
+    [TERMINAL_STATUS_MAP.WAITING_TO_START]: 'co-5',
 } as const
 
 export const PROGRESSING_STATUS = {
-    [WorkflowStatusEnum.WAITING_TO_START.toLowerCase()]: 'running',
+    [TERMINAL_STATUS_MAP.WAITING_TO_START]: 'running',
     [TERMINAL_STATUS_MAP.RUNNING]: 'running',
     [TERMINAL_STATUS_MAP.PROGRESSING]: 'progressing',
     [TERMINAL_STATUS_MAP.STARTING]: 'starting',

src/Shared/Components/CICDHistory/utils.tsx

@@ -162,7 +162,7 @@ const renderAbortedTriggerIcon = (): JSX.Element => <ICAborted className="icon-d
 const renderFailedTriggerIcon = (baseClass: string = 'icon-dim-20'): JSX.Element => (
     <ICErrorCross className={`${baseClass} dc__no-shrink ic-error-cross-red`} />
 )
-const renderProgressingTriggerIcon = (baseClass: string = 'icon-dim-20'): JSX.Element => (
+export const renderProgressingTriggerIcon = (baseClass: string = 'icon-dim-20'): JSX.Element => (
     <ICInProgress className={`${baseClass} dc__no-shrink ic-in-progress-orange`} />
 )
 const renderSuccessTriggerIcon = (baseClass: string = 'icon-dim-20'): JSX.Element => (
@@ -193,13 +193,14 @@ export const getTriggerStatusIcon = (triggerDetailStatus: string): JSX.Element =
 
         case TERMINAL_STATUS_MAP.FAILED:
         case TERMINAL_STATUS_MAP.ERROR:
+        case TERMINAL_STATUS_MAP.TIMED_OUT:
             return renderFailedTriggerIcon()
 
         case TERMINAL_STATUS_MAP.RUNNING:
         case TERMINAL_STATUS_MAP.PROGRESSING:
         case TERMINAL_STATUS_MAP.STARTING:
         case TERMINAL_STATUS_MAP.INITIATING:
-        case WorkflowStatusEnum.WAITING_TO_START.toLowerCase():
+        case TERMINAL_STATUS_MAP.WAITING_TO_START:
             return renderProgressingTriggerIcon()
 
         case TERMINAL_STATUS_MAP.SUCCEEDED:

src/Shared/types.ts

@@ -940,6 +940,7 @@ export enum WorkflowStatusEnum {
     RUNNING = 'Running',
     PROGRESSING = 'Progressing',
     WAITING_TO_START = 'WaitingToStart',
+    TIMED_OUT = 'TimedOut',
     CANCELLED = 'CANCELLED',
 }