fix: move computation of logs calculation from index to name+timestamp

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.7",
+    "version": "0.1.7-beta-6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -78,3 +78,5 @@ export const LOGS_RETRY_COUNT = 3
 export const DEPLOYMENT_STATUS_QUERY_PARAM = 'deployment-status'
 
 export const MANIFEST_STATUS_HEADERS = ['KIND', 'NAME', 'SYNC STATUS', 'MESSAGE']
+
+export const LOGS_STAGE_IDENTIFIER = 'STAGE_INFO'

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -672,6 +672,23 @@ export interface TriggerHistoryFilterCriteriaProps {
     showCurrentReleaseDeployments: boolean
 }
 
+export enum StageStatusType {
+    SUCCESS = 'Success',
+    FAILURE = 'Failure',
+}
+
+export interface StageInfoDTO {
+    stage: string
+    startTime: string
+    endTime?: string
+    status: StageStatusType
+}
+
+export interface StageDetailType extends Pick<StageInfoDTO, 'stage' | 'startTime' | 'endTime' | 'status'> {
+    logs: string[]
+    isOpen: boolean
+}
+
 export type TriggerHistoryFilterCriteriaType = `${string}|${string}|${string}`[]
 export const terminalStatus = new Set(['error', 'healthy', 'succeeded', 'cancelled', 'failed', 'aborted'])
 export const statusSet = new Set(['starting', 'running', 'pending'])

src/Shared/Components/CICDHistory/constants.tsx

@@ -19,6 +19,7 @@ import {
     DeploymentHistoryResultObject,
     DeploymentHistory,
     TriggerHistoryFilterCriteriaType,
+    StageStatusType,
 } from './types'
 import { ResourceKindType } from '../../types'
 import { ReactComponent as Close } from '../../../Assets/Icon/ic-close.svg'
@@ -28,6 +29,8 @@ import { ReactComponent as Error } from '../../../Assets/Icon/ic-error-exclamati
 import { ReactComponent as Timer } from '../../../Assets/Icon/ic-timer.svg'
 import { ReactComponent as Disconnect } from '../../../Assets/Icon/ic-disconnected.svg'
 import { ReactComponent as TimeOut } from '../../../Assets/Icon/ic-timeout-red.svg'
+import { ReactComponent as ICCheck } from '../../../Assets/Icon/ic-check.svg'
+import { ReactComponent as ICInProgress } from '../../../Assets/Icon/ic-in-progress.svg'
 
 export const getTriggerHistoryFilterCriteria = ({
     appId,
@@ -123,3 +126,14 @@ export const renderIcon = (iconState: string): JSX.Element => {
             return <Timer className="icon-dim-20 timer-icon" />
     }
 }
+
+export const getStageStatusIcon = (status: StageStatusType): JSX.Element => {
+    switch (status) {
+        case StageStatusType.SUCCESS:
+            return <ICCheck className="dc__no-shrink icon-dim-16 scg-5" />
+        case StageStatusType.FAILURE:
+            return <Close className="dc__no-shrink icon-dim-16 fcr-5" />
+        default:
+            return <ICInProgress className="dc__no-shrink icon-dim-16 ic-in-progress-orange" />
+    }
+}

src/Shared/Components/CICDHistory/types.tsx

@@ -17,6 +17,7 @@
 /* eslint-disable no-param-reassign */
 import { useEffect, useRef, useState, ReactElement } from 'react'
 import Tippy from '@tippyjs/react'
+import moment from 'moment'
 import { handleUTCTime, mapByKey, MaterialInfo, shallowEqual, SortingOrder } from '../Common'
 import {
     AggregationKeys,
@@ -707,3 +708,16 @@ export const decode = (data, isEncoded: boolean = false) =>
             agg[curr.key] = curr.value
             return agg
         }, {})
+
+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)
+    if (seconds < 60) {
+        return `${seconds}s`
+    }
+    if (minutes < 60) {
+        return `${minutes}m ${seconds % 60}s`
+    }
+    return `${hours}h ${minutes % 60}m ${seconds % 60}s`
+}