Skip to content

Commit 4819cfb

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #2703 from devtron-labs/feat/deployment-status-modal
feat: deployment status modal
2 parents 8a3cbd1 + ea06dfe commit 4819cfb

File tree

19 files changed

+276
-592
lines changed

19 files changed

+276
-592
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.13.0-pre-5",
7+
"@devtron-labs/devtron-fe-common-lib": "1.13.0-pre-6",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

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

Lines changed: 45 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,14 @@ import {
2121
ACTION_STATE,
2222
aggregateNodes,
2323
AppStatusModal,
24+
AppStatusModalTabType,
2425
ArtifactInfoModal,
2526
Button,
2627
DeploymentAppTypes,
28+
DeploymentStatusDetailsBreakdownDataType,
29+
DeploymentStatusDetailsType,
2730
GenericEmptyState,
31+
getAppDetailsURL,
2832
getAppsInfoForEnv,
2933
getIsRequestAborted,
3034
MODAL_TYPE,
@@ -47,12 +51,9 @@ import noGroups from '@Images/[email protected]'
4751

4852
import {
4953
DEFAULT_STATUS,
50-
DEFAULT_STATUS_TEXT,
5154
DEPLOYMENT_STATUS,
5255
DEPLOYMENT_STATUS_QUERY_PARAM,
5356
DOCUMENTATION,
54-
getAppDetailsURL,
55-
HELM_DEPLOYMENT_STATUS_TEXT,
5657
RESOURCES_NOT_FOUND,
5758
} from '../../../../config'
5859
import { APP_DETAILS, ERROR_EMPTY_SCREEN } from '../../../../config/constantMessaging'
@@ -80,15 +81,12 @@ import { getDeploymentStatusDetail } from './appDetails.service'
8081
import {
8182
AppDetailProps,
8283
DeletedAppComponentType,
83-
DeploymentStatusDetailsBreakdownDataType,
84-
DeploymentStatusDetailsType,
8584
DetailsType,
8685
ErrorItem,
8786
HibernationModalTypes,
8887
} from './appDetails.type'
8988
import AppDetailsCDButton from './AppDetailsCDButton'
9089
import { AppMetrics } from './AppMetrics'
91-
import DeploymentStatusDetailModal from './DeploymentStatusDetailModal'
9290
import HibernateModal from './HibernateModal'
9391
import IssuesListingModal from './IssuesListingModal'
9492
import { SourceInfo } from './SourceInfo'
@@ -208,11 +206,11 @@ const Details: React.FC<DetailsType> = ({
208206
}) => {
209207
const params = useParams<{ appId: string; envId: string }>()
210208
const location = useLocation()
209+
const { replace } = useHistory()
211210

212211
const appDetailsFromIndexStore = IndexStore.getAppDetails()
213212

214-
// fixme: the state is not being set anywhere and just being drilled down
215-
const [detailedStatus, toggleDetailedStatus] = useState<boolean>(false)
213+
const [showAppStatusModal, setShowAppStatusModal] = useState<boolean>(false)
216214
const [resourceTreeFetchTimeOut, setResourceTreeFetchTimeOut] = useState<boolean>(false)
217215
const [urlInfo, setUrlInfo] = useState<boolean>(false)
218216
const [hibernateConfirmationModal, setHibernateConfirmationModal] = useState<HibernationModalTypes>(null)
@@ -235,22 +233,18 @@ const Details: React.FC<DetailsType> = ({
235233

236234
const [loadingDetails, setLoadingDetails] = useState(true)
237235
const [loadingResourceTree, setLoadingResourceTree] = useState(true)
238-
// State to track the loading state for the timeline data when the detailed status modal opens
239-
const [isInitialTimelineDataLoading, setIsInitialTimelineDataLoading] = useState(true)
240236
const [errorsList, setErrorsList] = useState<ErrorItem[]>([])
241237
const appDetailsRef = useRef(null)
242238
const appDetailsRequestRef = useRef(null)
243239
const pollResourceTreeRef = useRef(true)
244240
const appDetailsAbortRef = useRef<AbortController>(null)
245-
const shouldFetchTimelineRef = useRef(false)
246241

247242
const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
248243
useState<DeploymentStatusDetailsBreakdownDataType>({
249244
...(isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
250245
? processVirtualEnvironmentDeploymentData()
251246
: processDeploymentStatusDetailsData()),
252247
deploymentStatus: DEFAULT_STATUS,
253-
deploymentStatusText: DEFAULT_STATUS_TEXT,
254248
})
255249
const isConfigDriftEnabled: boolean = window._env_.FEATURE_CONFIG_DRIFT_ENABLE && !!ConfigDriftModal
256250
const isExternalToolAvailable: boolean =
@@ -263,16 +257,6 @@ const Details: React.FC<DetailsType> = ({
263257
[appDetails],
264258
)
265259

266-
useEffect(() => {
267-
const isModalOpen = location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)
268-
// Reset the loading state when the modal is closed
269-
if (shouldFetchTimelineRef.current && !isModalOpen) {
270-
setIsInitialTimelineDataLoading(true)
271-
}
272-
// The timeline should be fetched by default if the modal is open
273-
shouldFetchTimelineRef.current = isModalOpen
274-
}, [location.search])
275-
276260
const clearDeploymentStatusTimer = useCallback((): void => {
277261
if (deploymentStatusTimer) {
278262
clearTimeout(deploymentStatusTimer)
@@ -308,30 +292,14 @@ const Details: React.FC<DetailsType> = ({
308292
],
309293
)
310294

311-
// This is called only when timeline modal is open
312-
const getDeploymentDetailStepsData = useCallback(
313-
(showTimeline?: boolean): void => {
314-
const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
315-
316-
// Deployments status details for Devtron apps
317-
getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline)
318-
.then((deploymentStatusDetailRes) => {
319-
processDeploymentStatusData(deploymentStatusDetailRes.result)
320-
// Update the loading status if the modal is open
321-
if (shouldFetchTimeline) {
322-
setIsInitialTimelineDataLoading(false)
323-
}
324-
})
325-
.catch(noop)
326-
},
327-
[
328-
params.appId,
329-
params.envId,
330-
shouldFetchTimelineRef.current,
331-
getDeploymentStatusDetail,
332-
processDeploymentStatusData,
333-
],
334-
)
295+
const getDeploymentDetailStepsData = useCallback((): void => {
296+
// Deployments status details for Devtron apps
297+
getDeploymentStatusDetail(params.appId, params.envId)
298+
.then((deploymentStatusDetailRes) => {
299+
processDeploymentStatusData(deploymentStatusDetailRes.result)
300+
})
301+
.catch(noop)
302+
}, [params.appId, params.envId, getDeploymentStatusDetail, processDeploymentStatusData])
335303

336304
function clearPollingInterval() {
337305
if (appDetailsIntervalID) {
@@ -437,32 +405,21 @@ const Details: React.FC<DetailsType> = ({
437405
isIsolatedEnv: boolean,
438406
triggerIdToFetch?: number,
439407
) {
440-
const shouldFetchTimeline = shouldFetchTimelineRef.current
441-
442408
// triggerIdToFetch represents the wfrId to fetch for any specific deployment
443-
getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline, triggerIdToFetch?.toString())
409+
getDeploymentStatusDetail(params.appId, params.envId, triggerIdToFetch?.toString())
444410
.then((deploymentStatusDetailRes) => {
445411
if (deploymentStatusDetailRes.result) {
446412
// Timelines are not applicable for helm deployments and air gapped envs
447413
if (deploymentAppType === DeploymentAppTypes.HELM || isIsolatedEnv) {
448-
setDeploymentStatusDetailsBreakdownData({
449-
...deploymentStatusDetailsBreakdownData,
450-
deploymentStatus:
451-
DEPLOYMENT_STATUS[deploymentStatusDetailRes.result.wfrStatus?.toUpperCase()],
452-
deploymentStatusText:
453-
deploymentStatusDetailRes.result.wfrStatus === HELM_DEPLOYMENT_STATUS_TEXT.PROGRESSING
454-
? HELM_DEPLOYMENT_STATUS_TEXT.INPROGRESS
455-
: deploymentStatusDetailRes.result.wfrStatus,
456-
deploymentTriggerTime: deploymentStatusDetailRes.result.deploymentStartedOn,
457-
deploymentEndTime: deploymentStatusDetailRes.result.deploymentFinishedOn,
458-
triggeredBy: deploymentStatusDetailRes.result.triggeredBy,
459-
})
414+
const processedDeploymentStatusData =
415+
isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
416+
? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes.result)
417+
: processDeploymentStatusDetailsData(deploymentStatusDetailRes.result)
418+
419+
setDeploymentStatusDetailsBreakdownData(processedDeploymentStatusData)
460420
} else {
461421
processDeploymentStatusData(deploymentStatusDetailRes.result)
462422
}
463-
if (shouldFetchTimeline) {
464-
setIsInitialTimelineDataLoading(false)
465-
}
466423
}
467424
})
468425
.catch(noop)
@@ -553,12 +510,20 @@ const Details: React.FC<DetailsType> = ({
553510
}
554511
}
555512

556-
const hideAppDetailsStatus = (): void => {
557-
toggleDetailedStatus(false)
513+
const handleCloseAppStatusModal = (): void => {
514+
if (showAppStatusModal) {
515+
setShowAppStatusModal(false)
516+
}
517+
518+
if (location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)) {
519+
replace({
520+
search: '',
521+
})
522+
}
558523
}
559524

560525
const showApplicationDetailedModal = (): void => {
561-
toggleDetailedStatus(true)
526+
setShowAppStatusModal(true)
562527
}
563528

564529
const renderAppDetailsCDButton = () =>
@@ -684,6 +649,11 @@ const Details: React.FC<DetailsType> = ({
684649
isDeploymentBlocked={isDeploymentBlocked}
685650
/>
686651
)
652+
653+
const updateDeploymentStatusDetailsBreakdownData = (updatedTimelines: DeploymentStatusDetailsBreakdownDataType) => {
654+
setDeploymentStatusDetailsBreakdownData(updatedTimelines)
655+
}
656+
687657
const isDeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
688658
return (
689659
<>
@@ -692,7 +662,7 @@ const Details: React.FC<DetailsType> = ({
692662
>
693663
<SourceInfo
694664
appDetails={appDetails}
695-
setDetailed={toggleDetailedStatus}
665+
setDetailed={setShowAppStatusModal}
696666
environment={environment}
697667
isAppView={isAppView}
698668
environments={environments}
@@ -704,7 +674,6 @@ const Details: React.FC<DetailsType> = ({
704674
setRotateModal={setRotateModal}
705675
loadingDetails={loadingDetails}
706676
loadingResourceTree={loadingResourceTree}
707-
refetchDeploymentStatus={getDeploymentDetailStepsData}
708677
toggleIssuesModal={toggleIssuesModal}
709678
envId={appDetails?.environmentId}
710679
ciArtifactId={appDetails?.ciArtifactId}
@@ -741,26 +710,22 @@ const Details: React.FC<DetailsType> = ({
741710
) : (
742711
renderAppDetails()
743712
)}
744-
{detailedStatus && (
713+
{(showAppStatusModal || (appDetails && location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM))) && (
745714
<AppStatusModal
746715
titleSegments={[appDetailsFromIndexStore.appName, appDetailsFromIndexStore.environmentName]}
747-
handleClose={hideAppDetailsStatus}
716+
handleClose={handleCloseAppStatusModal}
748717
type="devtron-app"
749718
appDetails={appDetailsFromIndexStore}
750719
isConfigDriftEnabled={isConfigDriftEnabled}
751720
configDriftModal={ConfigDriftModal}
721+
initialTab={
722+
showAppStatusModal ? AppStatusModalTabType.APP_STATUS : AppStatusModalTabType.DEPLOYMENT_STATUS
723+
}
724+
processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
725+
updateDeploymentStatusDetailsBreakdownData={updateDeploymentStatusDetailsBreakdownData}
752726
debugWithAIButton={ExplainWithAIButton}
753727
/>
754728
)}
755-
{location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM) && (
756-
<DeploymentStatusDetailModal
757-
appName={appDetails?.appName}
758-
environmentName={appDetails?.environmentName}
759-
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
760-
isVirtualEnvironment={isVirtualEnvRef.current}
761-
isLoading={isInitialTimelineDataLoading}
762-
/>
763-
)}
764729
{location.search.includes('deployment-window-status') && DeploymentWindowStatusModal && (
765730
<DeploymentWindowStatusModal envId={params.envId} appId={params.appId} />
766731
)}
@@ -910,7 +875,6 @@ const AppDetail = ({ detailsType, filteredResourceIds }: AppDetailProps) => {
910875
appDetails={null}
911876
environments={envList}
912877
environment={environment}
913-
refetchDeploymentStatus={noop}
914878
isAppView={isAppView}
915879
/>
916880
</div>

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

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ import React from 'react'
1818
import { useHistory } from 'react-router-dom'
1919
import Tippy from '@tippyjs/react'
2020

21+
import { DEPLOYMENT_STATUS_TEXT_MAP, PROGRESSING_DEPLOYMENT_STATUS } from '@devtron-labs/devtron-fe-common-lib'
22+
2123
import { ReactComponent as CD } from '../../../../assets/icons/ic-CD.svg'
2224
import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
2325
import { ReactComponent as Rocket } from '../../../../assets/icons/ic-paper-rocket.svg'
24-
import { DEPLOYMENT_STATUS, DEPLOYMENT_STATUS_QUERY_PARAM } from '../../../../config'
26+
import { DEPLOYMENT_STATUS_QUERY_PARAM } from '../../../../config'
2527
import { DeploymentStatusCardType } from './appDetails.type'
2628
import LoadingCard from './LoadingCard'
2729
import { validateMomentDate } from './utils'
@@ -31,7 +33,6 @@ const DeploymentStatusCard = ({
3133
cardLoading,
3234
hideDetails,
3335
isVirtualEnvironment,
34-
refetchDeploymentStatus,
3536
}: DeploymentStatusCardType) => {
3637
const history = useHistory()
3738

@@ -41,16 +42,9 @@ const DeploymentStatusCard = ({
4142
search: DEPLOYMENT_STATUS_QUERY_PARAM,
4243
})
4344
}
44-
const ProgressingStateList: string[] = [
45-
DEPLOYMENT_STATUS.INPROGRESS,
46-
DEPLOYMENT_STATUS.PROGRESSING,
47-
DEPLOYMENT_STATUS.STARTING,
48-
DEPLOYMENT_STATUS.INITIATING,
49-
DEPLOYMENT_STATUS.CHECKING,
50-
]
45+
5146
const renderDeploymentStatus = () => {
52-
const { triggeredBy, deploymentStatus, deploymentTriggerTime, deploymentStatusText } =
53-
deploymentStatusDetailsBreakdownData
47+
const { triggeredBy, deploymentStatus, deploymentTriggerTime } = deploymentStatusDetailsBreakdownData
5448
return (
5549
<>
5650
<div className="app-details-info-card__top-container flex">
@@ -73,10 +67,10 @@ const DeploymentStatusCard = ({
7367
<span
7468
data-testid="deployment-status-name"
7569
className={`app-summary__status-name fs-13 mr-8 fw-6 f-${deploymentStatus?.toLowerCase()} ${
76-
ProgressingStateList.includes(deploymentStatus) ? 'dc__loading-dots' : ''
70+
PROGRESSING_DEPLOYMENT_STATUS.includes(deploymentStatus) ? 'dc__loading-dots' : ''
7771
}`}
7872
>
79-
{deploymentStatusText}
73+
{DEPLOYMENT_STATUS_TEXT_MAP[deploymentStatus] || deploymentStatus}
8074
</span>
8175
</div>
8276
</div>
@@ -110,7 +104,6 @@ const DeploymentStatusCard = ({
110104
const onClickLastDeploymentStatus = (e) => {
111105
if (!hideDetails) {
112106
showDeploymentDetailedStatus(e)
113-
refetchDeploymentStatus(true)
114107
}
115108
}
116109

0 commit comments

Comments
 (0)