Skip to content

Commit 030587f

Browse files
AbhishekA1509AbhishekA1509
committed
refactor: remove unused refetchDeploymentStatus prop and related loading state management
1 parent ba36288 commit 030587f

File tree

10 files changed

+56
-94
lines changed

10 files changed

+56
-94
lines changed

‎src/components/app/details/appDetails/AppDetails.tsx

Lines changed: 25 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -271,14 +271,11 @@ const Details: React.FC<DetailsType> = ({
271271

272272
const [loadingDetails, setLoadingDetails] = useState(true)
273273
const [loadingResourceTree, setLoadingResourceTree] = useState(true)
274-
// State to track the loading state for the timeline data when the detailed status modal opens
275-
const [isInitialTimelineDataLoading, setIsInitialTimelineDataLoading] = useState(true)
276274
const [errorsList, setErrorsList] = useState<ErrorItem[]>([])
277275
const appDetailsRef = useRef(null)
278276
const appDetailsRequestRef = useRef(null)
279277
const pollResourceTreeRef = useRef(true)
280278
const appDetailsAbortRef = useRef<AbortController>(null)
281-
const shouldFetchTimelineRef = useRef(false)
282279

283280
const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
284281
useState<DeploymentStatusDetailsBreakdownDataType>({
@@ -298,16 +295,6 @@ const Details: React.FC<DetailsType> = ({
298295
[appDetails],
299296
)
300297

301-
useEffect(() => {
302-
const isModalOpen = location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)
303-
// Reset the loading state when the modal is closed
304-
if (shouldFetchTimelineRef.current && !isModalOpen) {
305-
setIsInitialTimelineDataLoading(true)
306-
}
307-
// The timeline should be fetched by default if the modal is open
308-
shouldFetchTimelineRef.current = isModalOpen
309-
}, [location.search])
310-
311298
const clearDeploymentStatusTimer = useCallback((): void => {
312299
if (deploymentStatusTimer) {
313300
clearTimeout(deploymentStatusTimer)
@@ -343,30 +330,15 @@ const Details: React.FC<DetailsType> = ({
343330
],
344331
)
345332

346-
// This is called only when timeline modal is open
347-
const getDeploymentDetailStepsData = useCallback(
348-
(showTimeline?: boolean): void => {
349-
const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
350-
351-
// Deployments status details for Devtron apps
352-
getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline)
353-
.then((deploymentStatusDetailRes) => {
354-
processDeploymentStatusData(deploymentStatusDetailRes.result)
355-
// Update the loading status if the modal is open
356-
if (shouldFetchTimeline) {
357-
setIsInitialTimelineDataLoading(false)
358-
}
359-
})
360-
.catch(noop)
361-
},
362-
[
363-
params.appId,
364-
params.envId,
365-
shouldFetchTimelineRef.current,
366-
getDeploymentStatusDetail,
367-
processDeploymentStatusData,
368-
],
369-
)
333+
// This method is called in case of gitops based deployment for polling
334+
const getDeploymentDetailStepsData = useCallback((): void => {
335+
// Deployments status details for Devtron apps
336+
getDeploymentStatusDetail(params.appId, params.envId)
337+
.then((deploymentStatusDetailRes) => {
338+
processDeploymentStatusData(deploymentStatusDetailRes.result)
339+
})
340+
.catch(noop)
341+
}, [params.appId, params.envId, getDeploymentStatusDetail, processDeploymentStatusData])
370342

371343
function clearPollingInterval() {
372344
if (appDetailsIntervalID) {
@@ -472,29 +444,21 @@ const Details: React.FC<DetailsType> = ({
472444
isIsolatedEnv: boolean,
473445
triggerIdToFetch?: number,
474446
) {
475-
const shouldFetchTimeline = shouldFetchTimelineRef.current
476-
477447
// triggerIdToFetch represents the wfrId to fetch for any specific deployment
478-
getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline, triggerIdToFetch?.toString())
448+
getDeploymentStatusDetail(params.appId, params.envId, triggerIdToFetch?.toString())
479449
.then((deploymentStatusDetailRes) => {
480450
if (deploymentStatusDetailRes.result) {
481451
// Timelines are not applicable for helm deployments and air gapped envs
482452
if (deploymentAppType === DeploymentAppTypes.HELM || isIsolatedEnv) {
483-
setDeploymentStatusDetailsBreakdownData({
484-
...deploymentStatusDetailsBreakdownData,
485-
deploymentStatus:
486-
DEPLOYMENT_STATUS[deploymentStatusDetailRes.result.wfrStatus?.toUpperCase()],
487-
// TODO: Need to confirm while review why we parse progressing to in progress?
488-
deploymentTriggerTime: deploymentStatusDetailRes.result.deploymentStartedOn,
489-
deploymentEndTime: deploymentStatusDetailRes.result.deploymentFinishedOn,
490-
triggeredBy: deploymentStatusDetailRes.result.triggeredBy,
491-
})
453+
const processedDeploymentStatusData =
454+
isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
455+
? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes.result)
456+
: processDeploymentStatusDetailsData(deploymentStatusDetailRes.result)
457+
458+
setDeploymentStatusDetailsBreakdownData(processedDeploymentStatusData)
492459
} else {
493460
processDeploymentStatusData(deploymentStatusDetailRes.result)
494461
}
495-
if (shouldFetchTimeline) {
496-
setIsInitialTimelineDataLoading(false)
497-
}
498462
}
499463
})
500464
.catch(noop)
@@ -724,6 +688,13 @@ const Details: React.FC<DetailsType> = ({
724688
isDeploymentBlocked={isDeploymentBlocked}
725689
/>
726690
)
691+
692+
const handleUpdateDeploymentStatusDetailsBreakdownData = (
693+
updatedTimelines: DeploymentStatusDetailsBreakdownDataType,
694+
) => {
695+
setDeploymentStatusDetailsBreakdownData(updatedTimelines)
696+
}
697+
727698
const isDeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
728699
return (
729700
<>
@@ -744,7 +715,6 @@ const Details: React.FC<DetailsType> = ({
744715
setRotateModal={setRotateModal}
745716
loadingDetails={loadingDetails}
746717
loadingResourceTree={loadingResourceTree}
747-
refetchDeploymentStatus={getDeploymentDetailStepsData}
748718
toggleIssuesModal={toggleIssuesModal}
749719
envId={appDetails?.environmentId}
750720
ciArtifactId={appDetails?.ciArtifactId}
@@ -792,8 +762,8 @@ const Details: React.FC<DetailsType> = ({
792762
initialTab={
793763
detailedStatus ? AppStatusModalTabType.APP_STATUS : AppStatusModalTabType.DEPLOYMENT_STATUS
794764
}
795-
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
796-
isDeploymentTimelineLoading={isInitialTimelineDataLoading}
765+
processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
766+
handleUpdateDeploymentStatusDetailsBreakdownData={handleUpdateDeploymentStatusDetailsBreakdownData}
797767
/>
798768
)}
799769
{location.search.includes('deployment-window-status') && DeploymentWindowStatusModal && (
@@ -941,7 +911,6 @@ const AppDetail = ({ detailsType, filteredResourceIds }: AppDetailProps) => {
941911
appDetails={null}
942912
environments={envList}
943913
environment={environment}
944-
refetchDeploymentStatus={noop}
945914
isAppView={isAppView}
946915
/>
947916
</div>

‎src/components/app/details/appDetails/DeploymentStatusCard.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const DeploymentStatusCard = ({
3333
cardLoading,
3434
hideDetails,
3535
isVirtualEnvironment,
36-
refetchDeploymentStatus,
3736
}: DeploymentStatusCardType) => {
3837
const history = useHistory()
3938

@@ -105,7 +104,6 @@ const DeploymentStatusCard = ({
105104
const onClickLastDeploymentStatus = (e) => {
106105
if (!hideDetails) {
107106
showDeploymentDetailedStatus(e)
108-
refetchDeploymentStatus(true)
109107
}
110108
}
111109

‎src/components/app/details/appDetails/SourceInfo.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ export const SourceInfo = ({
7575
loadingResourceTree = false,
7676
isVirtualEnvironment,
7777
setRotateModal = null,
78-
refetchDeploymentStatus,
7978
toggleIssuesModal,
8079
envId,
8180
ciArtifactId,
@@ -407,7 +406,6 @@ export const SourceInfo = ({
407406
appDetails?.deploymentAppType === DeploymentAppTypes.HELM || isIsolatedEnv
408407
}
409408
isVirtualEnvironment={isVirtualEnvironment}
410-
refetchDeploymentStatus={refetchDeploymentStatus}
411409
/>
412410
{appDetails?.dataSource !== 'EXTERNAL' && (
413411
<DeployedCommitCard

‎src/components/app/details/appDetails/appDetails.service.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ export function deleteArgoCDAppWithNonCascade(
8484
export function getDeploymentStatusDetail(
8585
appId: string,
8686
envId: string,
87-
showTimeline: boolean,
8887
triggerId?: string,
8988
isHelmApps?: boolean,
9089
installedAppVersionHistoryId?: number,
@@ -96,7 +95,7 @@ export function getDeploymentStatusDetail(
9695
appendUrl = Routes.DEPLOYMENT_STATUS
9796
}
9897
return get(
99-
`${appendUrl}/${appId}/${envId}${`?showTimeline=${showTimeline}`}${triggerId ? `&wfrId=${triggerId}` : ``}${installedAppVersionHistoryId ? `&installedAppVersionHistoryId=${installedAppVersionHistoryId}` : ''}`,
98+
`${appendUrl}/${appId}/${envId}${`?showTimeline=${false}`}${triggerId ? `&wfrId=${triggerId}` : ``}${installedAppVersionHistoryId ? `&installedAppVersionHistoryId=${installedAppVersionHistoryId}` : ''}`,
10099
)
101100
}
102101

‎src/components/app/details/appDetails/appDetails.type.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,6 @@ export interface DeploymentStatusCardType {
190190
hideDetails?: boolean
191191
triggeredBy?: string
192192
isVirtualEnvironment?: boolean
193-
refetchDeploymentStatus: (showTimeline?: boolean) => void
194193
}
195194

196195
export interface IssuesCardType {

‎src/components/app/types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -580,7 +580,6 @@ export interface SourceInfoType extends Pick<DetailsType, 'isAppView'>, Partial<
580580
loadingResourceTree?: boolean
581581
isVirtualEnvironment?: boolean
582582
setRotateModal?: React.Dispatch<React.SetStateAction<boolean>>
583-
refetchDeploymentStatus: (showTimeline?: boolean) => void
584583
toggleIssuesModal?: React.Dispatch<React.SetStateAction<boolean>>
585584
envId?: number | string
586585
ciArtifactId?: number

‎src/components/v2/appDetails/AppDetails.component.tsx

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,6 @@ const AppDetailsComponent = ({
7070
const isVirtualEnv = useRef(appDetails?.isVirtualEnvironment)
7171
const location = useLocation()
7272
const history = useHistory()
73-
// State to track the loading state for the timeline data when the detailed status modal opens
74-
const [isInitialTimelineDataLoading, setIsInitialTimelineDataLoading] = useState(true)
75-
const shouldFetchTimelineRef = useRef(false)
7673
const isGitOps = appDetails?.deploymentAppType === DeploymentAppTypes.GITOPS
7774
const isManifestDownload = appDetails?.deploymentAppType === DeploymentAppTypes.MANIFEST_DOWNLOAD
7875

@@ -89,33 +86,20 @@ const AppDetailsComponent = ({
8986
getSaveTelemetry(params.appId).catch(noop)
9087
}
9188
}, [])
92-
useEffect(() => {
93-
const isModalOpen = location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)
94-
// Reset the loading state when the modal is closed
95-
if (shouldFetchTimelineRef.current && !isModalOpen) {
96-
setIsInitialTimelineDataLoading(true)
97-
}
98-
// The timeline should be fetched by default if the modal is open
99-
shouldFetchTimelineRef.current = isModalOpen
100-
}, [location.search])
10189

10290
const clearDeploymentStatusTimer = (): void => {
10391
if (deploymentStatusTimer) {
10492
clearTimeout(deploymentStatusTimer)
10593
}
10694
}
10795

108-
const getDeploymentDetailStepsData = (showTimeline?: boolean): void => {
109-
const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
110-
96+
const getDeploymentDetailStepsData = (): void => {
97+
// TODO: Ask why are we not sending wfrId in the request in case of virtual environment?
11198
// Deployments status details for Helm apps
112-
getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline, '', true)
99+
getDeploymentStatusDetail(params.appId, params.envId, '', true)
113100
.then((deploymentStatusDetailRes) => {
114101
// eslint-disable-next-line @typescript-eslint/no-use-before-define
115102
processDeploymentStatusData(deploymentStatusDetailRes.result)
116-
if (shouldFetchTimeline) {
117-
setIsInitialTimelineDataLoading(false)
118-
}
119103
})
120104
.catch(noop)
121105
}
@@ -157,6 +141,12 @@ const AppDetailsComponent = ({
157141
})
158142
}
159143

144+
const handleUpdateDeploymentStatusDetailsBreakdownData = (
145+
updatedTimelineData: typeof deploymentStatusDetailsBreakdownData,
146+
) => {
147+
setDeploymentStatusDetailsBreakdownData(updatedTimelineData)
148+
}
149+
160150
const renderHelmAppDetails = (): JSX.Element => {
161151
if (isVirtualEnv.current && VirtualAppDetailsEmptyState) {
162152
return <VirtualAppDetailsEmptyState environmentName={appDetails.environmentName} />
@@ -213,7 +203,9 @@ const AppDetailsComponent = ({
213203
loadingResourceTree={loadingResourceTree || !appDetails?.appType}
214204
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
215205
isVirtualEnvironment={isVirtualEnv.current}
216-
refetchDeploymentStatus={getDeploymentDetailStepsData}
206+
handleUpdateDeploymentStatusDetailsBreakdownData={
207+
handleUpdateDeploymentStatusDetailsBreakdownData
208+
}
217209
/>
218210
)}
219211
</div>
@@ -242,10 +234,11 @@ const AppDetailsComponent = ({
242234
appDetails={appDetails}
243235
isConfigDriftEnabled={false}
244236
configDriftModal={null}
245-
// TODO: Test virtual environment deployment data
246-
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
247-
isDeploymentTimelineLoading={isInitialTimelineDataLoading}
248237
initialTab={AppStatusModalTabType.DEPLOYMENT_STATUS}
238+
processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
239+
handleUpdateDeploymentStatusDetailsBreakdownData={
240+
handleUpdateDeploymentStatusDetailsBreakdownData
241+
}
249242
/>
250243
)}
251244
</div>

‎src/components/v2/appDetails/sourceInfo/environment.type.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface EnvironmentStatusComponentType {
2929
loadingResourceTree: boolean
3030
deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
3131
isVirtualEnvironment?: boolean
32-
refetchDeploymentStatus: (showTimeline?: boolean) => void
32+
handleUpdateDeploymentStatusDetailsBreakdownData: (data: DeploymentStatusDetailsBreakdownDataType) => void
3333
}
3434
export interface AppEnvironment extends BaseAppEnvironmentType {
3535
isSelected?: boolean

‎src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import { useMemo, useState } from 'react'
1818
import './environmentStatus.scss'
1919
import IndexStore from '../../index.store'
20-
import { DEPLOYMENT_STATUS_QUERY_PARAM, URLS } from '../../../../../config'
20+
import { URLS } from '../../../../../config'
2121
import { AppType } from '../../appDetails.type'
2222
import { useSharedState } from '../../../utils/useSharedState'
2323
import { useRouteMatch, useHistory, useParams } from 'react-router-dom'
@@ -44,13 +44,18 @@ import SecurityVulnerabilityCard from '../../../../app/details/appDetails/Securi
4444

4545
const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
4646
const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', false, 'function')
47+
const processVirtualEnvironmentDeploymentData = importComponentFromFELibrary(
48+
'processVirtualEnvironmentDeploymentData',
49+
null,
50+
'function',
51+
)
4752

4853
const EnvironmentStatusComponent = ({
4954
loadingDetails,
5055
loadingResourceTree,
5156
deploymentStatusDetailsBreakdownData,
5257
isVirtualEnvironment,
53-
refetchDeploymentStatus,
58+
handleUpdateDeploymentStatusDetailsBreakdownData,
5459
}: EnvironmentStatusComponentType) => {
5560
const [appDetails] = useSharedState(IndexStore.getAppDetails(), IndexStore.getAppDetailsObservable())
5661
const [showAppStatusDetail, setShowAppStatusDetail] = useState(false)
@@ -151,7 +156,6 @@ const EnvironmentStatusComponent = ({
151156
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
152157
cardLoading={cardLoading}
153158
hideDetails={false}
154-
refetchDeploymentStatus={refetchDeploymentStatus}
155159
isVirtualEnvironment={isVirtualEnvironment}
156160
/>
157161
)
@@ -208,9 +212,10 @@ const EnvironmentStatusComponent = ({
208212
appDetails={appDetails}
209213
isConfigDriftEnabled={false}
210214
configDriftModal={null}
211-
// TODO: Confirm
212-
deploymentStatusDetailsBreakdownData={null}
213215
initialTab={AppStatusModalTabType.APP_STATUS}
216+
handleUpdateDeploymentStatusDetailsBreakdownData={handleUpdateDeploymentStatusDetailsBreakdownData}
217+
processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
218+
214219
/>
215220
)}
216221
{showIssuesModal && (

‎src/components/v2/devtronStackManager/DevtronStackManager.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
useMainContext,
2525
AppStatusModal,
2626
AppStatusModalTabType,
27+
noop,
2728
} from '@devtron-labs/devtron-fe-common-lib'
2829
import { ModuleNameMap, SERVER_MODE, URLS } from '../../../config'
2930
import { ErrorBoundary, useInterval } from '../../common'
@@ -586,8 +587,9 @@ export default function DevtronStackManager({
586587
appDetails={appDetails}
587588
isConfigDriftEnabled={false}
588589
configDriftModal={null}
589-
deploymentStatusDetailsBreakdownData={null}
590590
initialTab={AppStatusModalTabType.APP_STATUS}
591+
processVirtualEnvironmentDeploymentData={noop}
592+
handleUpdateDeploymentStatusDetailsBreakdownData={noop}
591593
/>
592594
)}
593595
</ErrorBoundary>

0 commit comments

Comments
 (0)