feat: show <1s for milliseconds stage diff

Author: AbhishekA1509

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -28,6 +28,14 @@ const LogStageAccordion = ({
         }
     }
 
+    const getFormattedTimeDifference = (): string => {
+        const timeDifference = getTimeDifference(startTime, endTime)
+        if (timeDifference === '0s') {
+            return '< 1s'
+        }
+        return timeDifference
+    }
+
     return (
         <div className="flexbox-col dc__gap-8">
             <button
@@ -50,7 +58,7 @@ const LogStageAccordion = ({
                     </div>
                 </div>
 
-                {!!endTime && <span className="cn-0 fs-13 fw-4 lh-20">{getTimeDifference(startTime, endTime)}</span>}
+                {!!endTime && <span className="cn-0 fs-13 fw-4 lh-20">{getFormattedTimeDifference()}</span>}
             </button>
 
             {isOpen && (

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -256,6 +256,9 @@ export const LogsRenderer = ({
         return lastActionState
     }
 
+    const areEventsProgressing =
+        triggerDetails.podStatus === POD_STATUS.PENDING || !!(eventSource && eventSource.readyState <= 1)
+
     /**
      * If initially parsedLogs are empty, and initialStatus is Success then would set opened as false on each
      * If initialStatus is not success and initial parsedLogs are empty then would set opened as false on each except the last
@@ -297,19 +300,23 @@ export const LogsRenderer = ({
                             !!targetSearchKey,
                         )
                     } else {
+                        const derivedStatus: StageStatusType = areEventsProgressing
+                            ? StageStatusType.PROGRESSING
+                            : StageStatusType.FAILURE
+
                         acc.push({
                             stage: stage || `Untitled stage ${index + 1}`,
                             startTime: startTime || '',
                             endTime: endTime || '',
                             // Would be defining the state when we receive the end status, otherwise it is loading and would be open
                             isOpen: getIsStageOpen(
-                                StageStatusType.PROGRESSING,
+                                derivedStatus,
                                 previousExistingStage.isOpen,
                                 // Wont be present in case of start stage since no logs are present yet
                                 !!searchKeyStatusMap[stage]?.[startTime],
                                 !!targetSearchKey,
                             ),
-                            status: StageStatusType.PROGRESSING,
+                            status: derivedStatus,
                             logs: [],
                         })
                     }
@@ -363,7 +370,7 @@ export const LogsRenderer = ({
         setStageList(newStageList)
         // NOTE: Not adding searchKey as dependency since on mount we would already have searchKey
         // And for other cases we would use handleSearchEnter
-    }, [streamDataList])
+    }, [streamDataList, areEventsProgressing])
 
     const handleSearchEnter = (searchText: string) => {
         handleSearch(searchText)
@@ -383,9 +390,6 @@ export const LogsRenderer = ({
         setStageList(newLogs)
     }
 
-    const areEventsProgressing =
-        triggerDetails.podStatus === POD_STATUS.PENDING || (eventSource && eventSource.readyState <= 1)
-
     const renderLogs = () => {
         if (areStagesAvailable) {
             return (

src/Shared/Helpers.tsx

@@ -717,13 +717,16 @@ export const getTimeDifference = (startTime: string, endTime: string): string =>
     }
 
     const seconds = moment(endTime).diff(moment(startTime), 'seconds')
-    const minutes = moment(endTime).diff(moment(startTime), 'minutes') % 60
-    const hours = moment(endTime).diff(moment(startTime), 'hours', true).toFixed(2)
+    const minutes = moment(endTime).diff(moment(startTime), 'minutes')
+    const hours = moment(endTime).diff(moment(startTime), 'hours')
+
     if (seconds < 60) {
         return `${seconds}s`
     }
     if (minutes < 60) {
         return `${minutes}m ${seconds % 60}s`
     }
-    return `${hours}h ${minutes % 60}m ${seconds % 60}s`
+    const leftOverMinutes = minutes - hours * 60
+    const leftOverSeconds = seconds - minutes * 60
+    return `${hours}h ${leftOverMinutes}m ${leftOverSeconds}s`
 }