Skip to content

Commit 03f918e

Browse files
AbhishekA1509AbhishekA1509
committed
refactor: remove DeploymentStatusDetailModal and update AppStatusModal integration
1 parent 91d5fb1 commit 03f918e

File tree

8 files changed

+45
-208
lines changed

8 files changed

+45
-208
lines changed

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
ACTION_STATE,
2222
aggregateNodes,
2323
AppStatusModal,
24+
AppStatusModalTabType,
2425
ArtifactInfoModal,
2526
Button,
2627
ButtonComponentType,
@@ -91,7 +92,6 @@ import {
9192
} from './appDetails.type'
9293
import AppDetailsCDButton from './AppDetailsCDButton'
9394
import { AppMetrics } from './AppMetrics'
94-
import DeploymentStatusDetailModal from './DeploymentStatusDetailModal'
9595
import HibernateModal from './HibernateModal'
9696
import IssuesListingModal from './IssuesListingModal'
9797
import { SourceInfo } from './SourceInfo'
@@ -245,6 +245,7 @@ const Details: React.FC<DetailsType> = ({
245245
}) => {
246246
const params = useParams<{ appId: string; envId: string }>()
247247
const location = useLocation()
248+
const { replace } = useHistory()
248249

249250
const appDetailsFromIndexStore = IndexStore.getAppDetails()
250251

@@ -591,7 +592,15 @@ const Details: React.FC<DetailsType> = ({
591592
}
592593

593594
const hideAppDetailsStatus = (): void => {
594-
toggleDetailedStatus(false)
595+
if (detailedStatus) {
596+
toggleDetailedStatus(false)
597+
}
598+
599+
if (location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)) {
600+
replace({
601+
search: '',
602+
})
603+
}
595604
}
596605

597606
const showApplicationDetailedModal = (): void => {
@@ -778,22 +787,18 @@ const Details: React.FC<DetailsType> = ({
778787
) : (
779788
renderAppDetails()
780789
)}
781-
{detailedStatus && (
790+
{(detailedStatus || location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)) && (
782791
<AppStatusModal
783792
titleSegments={[appDetailsFromIndexStore.appName, appDetailsFromIndexStore.environmentName]}
784793
handleClose={hideAppDetailsStatus}
785794
type="devtron-app"
786795
appDetails={appDetailsFromIndexStore}
787796
isConfigDriftEnabled={isConfigDriftEnabled}
788797
configDriftModal={ConfigDriftModal}
789-
/>
790-
)}
791-
{location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM) && (
792-
<DeploymentStatusDetailModal
793-
appName={appDetails?.appName}
794-
environmentName={appDetails?.environmentName}
798+
initialTab={
799+
detailedStatus ? AppStatusModalTabType.APP_STATUS : AppStatusModalTabType.DEPLOYMENT_STATUS
800+
}
795801
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
796-
isVirtualEnvironment={isVirtualEnvRef.current}
797802
isLoading={isInitialTimelineDataLoading}
798803
/>
799804
)}

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

Lines changed: 0 additions & 117 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const SourceInfo = ({
183183
>
184184
<div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
185185
{/* TODO: verify what appType needs to be passed */}
186-
<DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} appType={null} />
186+
<DeploymentTypeIcon deploymentAppType={appDetails.deploymentAppType} appType={null} />
187187
</div>
188188
</Tooltip>
189189
)}

‎src/components/app/details/appDetails/appDetails.scss

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1365,65 +1365,6 @@ table.resource-tree {
13651365
}
13661366
}
13671367

1368-
.deployment-status-breakdown-container,
1369-
.deployment-approval-container {
1370-
.vertical-connector {
1371-
border-left: 1px solid var(--N300);
1372-
height: 15px;
1373-
position: relative;
1374-
left: 18px;
1375-
width: 5px;
1376-
}
1377-
.deployment-status-breakdown-row {
1378-
display: flex;
1379-
align-items: center;
1380-
justify-content: left;
1381-
1382-
&.border-collapse {
1383-
border-radius: 4px 4px 0 0;
1384-
}
1385-
}
1386-
1387-
.pulse-highlight {
1388-
width: 12px;
1389-
height: 12px;
1390-
border: solid 4px var(--O200);
1391-
background-color: var(--O500);
1392-
position: relative;
1393-
top: 5px;
1394-
right: -5px;
1395-
border-radius: 50%;
1396-
animation-name: pulse;
1397-
animation-duration: 2s;
1398-
animation-iteration-count: infinite;
1399-
animation-timing-function: linear;
1400-
}
1401-
1402-
.green-tick {
1403-
path {
1404-
stroke: var(--G500);
1405-
}
1406-
}
1407-
1408-
.app-status-row {
1409-
display: grid;
1410-
grid-template-columns: 150px 200px 150px auto;
1411-
grid-column-gap: 16px;
1412-
}
1413-
.resource-list {
1414-
.app-status-row {
1415-
&:hover {
1416-
background-color: var(--bg-secondary);
1417-
}
1418-
}
1419-
}
1420-
1421-
.detail-tab_border {
1422-
border-radius: 0 0 4px 4px;
1423-
border-top: 0;
1424-
}
1425-
}
1426-
14271368
.deployment-approval-container + .deployment-status-breakdown-container {
14281369
padding-top: 0px;
14291370
}

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -125,17 +125,6 @@ export interface DeploymentStatusDetailsBreakdownDataType {
125125
}
126126
}
127127

128-
export interface DeploymentStatusDetailModalType {
129-
appName: string
130-
environmentName: string
131-
deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
132-
isVirtualEnvironment: boolean
133-
/**
134-
* Loading state for the timeline data
135-
*/
136-
isLoading: boolean
137-
}
138-
139128
export interface ModuleConfigResponse extends ResponseType {
140129
result?: {
141130
enabled: boolean

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

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@
1515
*/
1616

1717
import { useEffect, useRef, useState } from 'react'
18-
import { useLocation, useParams } from 'react-router-dom'
18+
import { useHistory, useLocation, useParams } from 'react-router-dom'
1919

2020
import {
21+
AppStatusModal,
22+
AppStatusModalTabType,
2123
DeploymentAppTypes,
2224
noop,
2325
processDeploymentStatusDetailsData,
@@ -32,7 +34,6 @@ import {
3234
DeploymentStatusDetailsBreakdownDataType,
3335
DeploymentStatusDetailsType,
3436
} from '../../app/details/appDetails/appDetails.type'
35-
import DeploymentStatusDetailModal from '../../app/details/appDetails/DeploymentStatusDetailModal'
3637
import { importComponentFromFELibrary } from '../../common'
3738
import { AppLevelExternalLinks } from '../../externalLinks/ExternalLinks.component'
3839
import { useSharedState } from '../utils/useSharedState'
@@ -70,8 +71,7 @@ const AppDetailsComponent = ({
7071
const [appDetails] = useSharedState(IndexStore.getAppDetails(), IndexStore.getAppDetailsObservable())
7172
const isVirtualEnv = useRef(appDetails?.isVirtualEnvironment)
7273
const location = useLocation()
73-
const deploymentModalShownRef = useRef(null)
74-
deploymentModalShownRef.current = location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)
74+
const history = useHistory()
7575
// State to track the loading state for the timeline data when the detailed status modal opens
7676
const [isInitialTimelineDataLoading, setIsInitialTimelineDataLoading] = useState(true)
7777
const shouldFetchTimelineRef = useRef(false)
@@ -154,6 +154,12 @@ const AppDetailsComponent = ({
154154
setDeploymentStatusDetailsBreakdownData(processedDeploymentStatusDetailsData)
155155
}
156156

157+
const handleCloseDeploymentStatusModal = () => {
158+
history.replace({
159+
search: '',
160+
})
161+
}
162+
157163
const renderHelmAppDetails = (): JSX.Element => {
158164
if (isVirtualEnv.current && VirtualAppDetailsEmptyState) {
159165
return <VirtualAppDetailsEmptyState environmentName={appDetails.environmentName} />
@@ -231,12 +237,18 @@ const AppDetailsComponent = ({
231237
)}
232238

233239
{location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM) && (
234-
<DeploymentStatusDetailModal
235-
appName={appDetails.appName}
236-
environmentName={appDetails.environmentName}
240+
<AppStatusModal
241+
type="other-apps"
242+
titleSegments={[appDetails?.appName, appDetails?.environmentName || appDetails?.namespace]}
243+
handleClose={handleCloseDeploymentStatusModal}
244+
// TODO: Check appDetails.deploymentAppDeleteRequest
245+
appDetails={appDetails}
246+
isConfigDriftEnabled={false}
247+
configDriftModal={null}
248+
// TODO: Test virtual environment deployment data
237249
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
238-
isVirtualEnvironment={isVirtualEnv.current}
239250
isLoading={isInitialTimelineDataLoading}
251+
initialTab={AppStatusModalTabType.DEPLOYMENT_STATUS}
240252
/>
241253
)}
242254
</div>

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

Lines changed: 6 additions & 2 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 { URLS } from '../../../../../config'
20+
import { DEPLOYMENT_STATUS_QUERY_PARAM, URLS } from '../../../../../config'
2121
import { AppType } from '../../appDetails.type'
2222
import { useSharedState } from '../../../utils/useSharedState'
2323
import { useRouteMatch, useHistory, useParams } from 'react-router-dom'
@@ -26,6 +26,7 @@ import { getInstalledChartNotesDetail } from '../../appDetails.api'
2626
import { importComponentFromFELibrary } from '../../../../common'
2727
import {
2828
AppStatusModal,
29+
AppStatusModalTabType,
2930
DeploymentAppTypes,
3031
useAsync,
3132
} from '@devtron-labs/devtron-fe-common-lib'
@@ -198,15 +199,18 @@ const EnvironmentStatusComponent = ({
198199
)}
199200
{showAppStatusDetail && (
200201
<AppStatusModal
202+
type="other-apps"
201203
titleSegments={[
202204
appDetails?.appName,
203205
appDetails?.environmentName || appDetails?.namespace,
204206
]}
205207
handleClose={handleCloseAppStatusModal}
206-
type="other-apps"
207208
appDetails={appDetails}
208209
isConfigDriftEnabled={false}
209210
configDriftModal={null}
211+
// TODO: Confirm
212+
deploymentStatusDetailsBreakdownData={null}
213+
initialTab={AppStatusModalTabType.APP_STATUS}
210214
/>
211215
)}
212216
{showIssuesModal && (

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
DevtronProgressing,
2424
useMainContext,
2525
AppStatusModal,
26+
AppStatusModalTabType,
2627
} from '@devtron-labs/devtron-fe-common-lib'
2728
import { ModuleNameMap, SERVER_MODE, URLS } from '../../../config'
2829
import { ErrorBoundary, useInterval } from '../../common'
@@ -585,6 +586,8 @@ export default function DevtronStackManager({
585586
appDetails={appDetails}
586587
isConfigDriftEnabled={false}
587588
configDriftModal={null}
589+
deploymentStatusDetailsBreakdownData={null}
590+
initialTab={AppStatusModalTabType.APP_STATUS}
588591
/>
589592
)}
590593
</ErrorBoundary>

0 commit comments

Comments
 (0)