Skip to content

Commit 2552880

Browse files
committed
fix: Refactor LogStageAccordion component to improve performance and readability
1 parent 82ffd5d commit 2552880

File tree

4 files changed

+27
-23
lines changed

4 files changed

+27
-23
lines changed

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import DOMPurify from 'dompurify'
2-
import { ZERO_TIME_STRING } from '@Common/Constants'
32
import { getTimeDifference } from '@Shared/Helpers'
43
import { LogStageAccordionProps } from './types'
54
import { getStageStatusIcon } from './utils'
@@ -47,9 +46,7 @@ const LogStageAccordion = ({
4746
</div>
4847
</div>
4948

50-
{endTime !== ZERO_TIME_STRING && (
51-
<span className="cn-0 fs-13 fw-4 lh-20">{getTimeDifference(startTime, endTime)}</span>
52-
)}
49+
{!!endTime && <span className="cn-0 fs-13 fw-4 lh-20">{getTimeDifference(startTime, endTime)}</span>}
5350
</button>
5451

5552
{isOpen &&

src/Shared/Components/CICDHistory/LogsRenderer.tsx

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,17 @@ import {
2626
DOCUMENTATION,
2727
ROUTES,
2828
SearchBar,
29-
ZERO_TIME_STRING,
3029
useUrlFilters,
3130
stopPropagation,
3231
} from '../../../Common'
3332
import LogStageAccordion from './LogStageAccordion'
34-
import { EVENT_STREAM_EVENTS_MAP, LOGS_RETRY_COUNT, LOGS_STAGE_IDENTIFIER, POD_STATUS } from './constants'
33+
import {
34+
EVENT_STREAM_EVENTS_MAP,
35+
LOGS_RETRY_COUNT,
36+
LOGS_STAGE_IDENTIFIER,
37+
LOGS_STAGE_STREAM_SEPARATOR,
38+
POD_STATUS,
39+
} from './constants'
3540
import {
3641
CreateMarkupReturnType,
3742
DeploymentHistoryBaseParamsType,
@@ -271,9 +276,11 @@ export const LogsRenderer = ({
271276
return streamDataList.reduce((acc, streamItem: string, index) => {
272277
if (streamItem.startsWith(LOGS_STAGE_IDENTIFIER)) {
273278
try {
274-
const { stage, startTime, endTime, status }: StageInfoDTO = JSON.parse(streamItem.split('|')[1])
279+
const { stage, startTime, endTime, status }: StageInfoDTO = JSON.parse(
280+
streamItem.split(LOGS_STAGE_STREAM_SEPARATOR)[1],
281+
)
275282
const existingStage = acc.find((item) => item.stage === stage && item.startTime === startTime)
276-
const previousExistingStage = previousStageMap[stage]?.[startTime]
283+
const previousExistingStage = previousStageMap[stage]?.[startTime] ?? ({} as StageDetailType)
277284

278285
if (existingStage) {
279286
// Would update the existing stage with new endTime
@@ -282,14 +289,14 @@ export const LogsRenderer = ({
282289
existingStage.isOpen = getIsStageOpen(
283290
status,
284291
previousExistingStage?.isOpen,
285-
!!searchKeyStatusMap[stage]?.[startTime],
292+
!!searchKeyStatusMap[stage][startTime],
286293
!!targetSearchKey,
287294
)
288295
} else {
289296
acc.push({
290297
stage: stage || `Untitled stage ${index + 1}`,
291-
startTime: startTime || ZERO_TIME_STRING,
292-
endTime: endTime || ZERO_TIME_STRING,
298+
startTime: startTime || '',
299+
endTime: endTime || '',
293300
// Would be defining the state when we receive the end status, otherwise it is loading and would be open
294301
isOpen: true,
295302
status: StageStatusType.PROGRESSING,
@@ -298,15 +305,7 @@ export const LogsRenderer = ({
298305
}
299306
return acc
300307
} catch (e) {
301-
acc.push({
302-
stage: `Untitled stage ${index + 1}`,
303-
startTime: ZERO_TIME_STRING,
304-
endTime: ZERO_TIME_STRING,
305-
isOpen: false,
306-
logs: [],
307-
// Can not set status as FAILURE, as we will append latest logs to last stage
308-
status: StageStatusType.PROGRESSING,
309-
})
308+
// In case of error would not create
310309
return acc
311310
}
312311
}
@@ -347,8 +346,7 @@ export const LogsRenderer = ({
347346
setStageList(newStageList)
348347
// NOTE: Not adding searchKey as dependency since on mount we would already have searchKey
349348
// And for other cases we would use handleSearchEnter
350-
// TODO: Check if stringifying the streamDataList is required
351-
}, [JSON.stringify(streamDataList)])
349+
}, [streamDataList])
352350

353351
const handleSearchEnter = (searchText: string) => {
354352
handleSearch(searchText)
@@ -383,6 +381,7 @@ export const LogsRenderer = ({
383381
>
384382
<div
385383
className="flexbox pl-12 logs-renderer__search-bar logs-renderer__filters-border-bottom dc__position-sticky dc__top-0 dc__zi-1"
384+
// Doing this since we have binded 'f' with full screen and SearchVar has not exposed event on search, so on pressing f it goes to full screen
386385
onKeyDown={stopPropagation}
387386
style={{
388387
backgroundColor: '#0C1021',

src/Shared/Components/CICDHistory/constants.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,5 @@ export const DEPLOYMENT_STATUS_QUERY_PARAM = 'deployment-status'
8080
export const MANIFEST_STATUS_HEADERS = ['KIND', 'NAME', 'SYNC STATUS', 'MESSAGE']
8181

8282
export const LOGS_STAGE_IDENTIFIER = 'STAGE_INFO'
83+
84+
export const LOGS_STAGE_STREAM_SEPARATOR = '|'

src/Shared/Helpers.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
import { useEffect, useRef, useState, ReactElement } from 'react'
1919
import Tippy from '@tippyjs/react'
2020
import moment from 'moment'
21-
import { handleUTCTime, mapByKey, MaterialInfo, shallowEqual, SortingOrder } from '../Common'
21+
import { handleUTCTime, mapByKey, MaterialInfo, shallowEqual, SortingOrder, ZERO_TIME_STRING } from '../Common'
2222
import {
2323
AggregationKeys,
2424
GitTriggers,
@@ -709,7 +709,13 @@ export const decode = (data, isEncoded: boolean = false) =>
709709
return agg
710710
}, {})
711711

712+
export const isTimeStringAvailable = (time: string): boolean => !!time && time !== ZERO_TIME_STRING
713+
712714
export const getTimeDifference = (startTime: string, endTime: string): string => {
715+
if (!isTimeStringAvailable(startTime) || !isTimeStringAvailable(endTime)) {
716+
return '-'
717+
}
718+
713719
const seconds = moment(endTime).diff(moment(startTime), 'seconds')
714720
const minutes = moment(endTime).diff(moment(startTime), 'minutes') % 60
715721
const hours = moment(endTime).diff(moment(startTime), 'hours', true).toFixed(2)

0 commit comments

Comments
 (0)