Merge pull request #2700 from devtron-labs/feat/retain-env-context

arunjaindev · web-flow · commit f702d1d83b8e · 2025-05-13T15:44:06.000+05:30
feat: retain env context throughout app details
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts
@@ -218,6 +218,7 @@ export interface EnvConfigurationsNavProps extends Required<Pick<AppConfigProps,
     isCMSecretLocked?: boolean
     hideEnvSelector?: boolean
     appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
+    shouldSetEnvInContext?: boolean
 }
 
 export interface EnvConfigRouteParams {
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx
@@ -172,6 +172,7 @@ export const AppNavigation = () => {
                         isCMSecretLocked={!isUnlocked.workflowEditor}
                         appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                         isTemplateView={isTemplateView}
+                        shouldSetEnvInContext={!isTemplateView && !isJobView}
                     />
                 )}
             </Route>
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
@@ -42,6 +42,7 @@ import { ReactComponent as ICArrowsLeftRight } from '@Icons/ic-arrows-left-right
 import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
 import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
 import { ReactComponent as ICLocked } from '@Icons/ic-locked.svg'
+import { useAppContext } from '@Components/common'
 import { DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE } from '@Config/constants'
 import { URLS } from '@Config/routes'
 import { ResourceConfigState } from '@Pages/Applications/DevtronApps/service.types'
@@ -306,15 +307,23 @@ export const EnvConfigurationsNav = ({
     compareWithURL,
     appOrEnvIdToResourceApprovalConfigurationMap,
     isTemplateView,
+    shouldSetEnvInContext = false,
 }: EnvConfigurationsNavProps) => {
     const history = useHistory()
     const { isSuperAdmin } = useMainContext()
+    const { setEnvironmentId } = useAppContext()
     const { pathname } = useLocation()
     const { path, params } = useRouteMatch<EnvConfigRouteParams>()
 
     const { envId, resourceType } = params
     const parsedResourceId = +params[paramToCheck]
 
+    useEffect(() => {
+        if (shouldSetEnvInContext && envId && !Number.isNaN(+envId)) {
+            setEnvironmentId(+envId)
+        }
+    }, [envId, shouldSetEnvInContext])
+
     const { isLoading } = envConfig
     const resourceData =
         resourceList.find((resource) => resource.id === parsedResourceId) ||
diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx
@@ -840,7 +840,6 @@ const AppDetail = ({ detailsType, filteredResourceIds }: AppDetailProps) => {
                 replace(newUrl)
                 return
             }
-            setEnvironmentId(null)
             return
         }
 
@@ -857,7 +856,7 @@ const AppDetail = ({ detailsType, filteredResourceIds }: AppDetailProps) => {
         if (!params.envId || !params.appId) {
             return
         }
-        // Setting environmentId in app context only in cse of app details and not env details
+        // Setting environmentId in app context only in case of app details and not env details
         if (isAppView) {
             setEnvironmentId(Number(params.envId))
         }
diff --git a/src/components/app/details/cdDetails/CDDetails.tsx b/src/components/app/details/cdDetails/CDDetails.tsx
@@ -64,7 +64,7 @@ export default function CDDetails({ filteredEnvIds }: { filteredEnvIds: string }
         triggerId: string
         pipelineId: string
     }>()
-    const { currentAppName } = useAppContext()
+    const { currentAppName, environmentId, setEnvironmentId } = useAppContext()
     const [pagination, setPagination] = useState<{ offset: number; size: number }>({ offset: 0, size: 20 })
     const [hasMore, setHasMore] = useState<boolean>(false)
     const [hasMoreLoading, setHasMoreLoading] = useState<boolean>(false)
@@ -161,8 +161,12 @@ export default function CDDetails({ filteredEnvIds }: { filteredEnvIds: string }
 
     //Result Typing to be fixed here
     useEffect(() => {
+        if (!envId && environmentId) {
+            replace(generatePath(path, { envId: environmentId, appId }))
+            return
+        }
         if (result) {
-            if (result[1]) {
+            if (result[1] && pipelineId) {
                 setDeploymentAppType(
                     result[1]['value']?.pipelines?.find((pipeline) => pipeline.id === Number(pipelineId))
                         ?.deploymentAppType,
@@ -179,6 +183,7 @@ export default function CDDetails({ filteredEnvIds }: { filteredEnvIds: string }
                     })
                 setSelectedEnv(_selectedEnvironment)
             }
+            setEnvironmentId(+envId)
         }
 
         return () => {
@@ -187,7 +192,7 @@ export default function CDDetails({ filteredEnvIds }: { filteredEnvIds: string }
             setHasMore(false)
             setFetchTriggerIdData(null)
         }
-    }, [envId])
+    }, [envId, result, pipelineId])
 
     useEffect(() => {
         if (result) {
@@ -196,6 +201,7 @@ export default function CDDetails({ filteredEnvIds }: { filteredEnvIds: string }
                 (pipeline) => pipeline.id === Number(pipelineId),
             )?.deploymentAppType
             const cdPipelinesMap = mapByKey(pipelines, 'environmentId')
+
             let _selectedEnvironment
             let isEnvDeleted = false
             const filteredEnvMap = filteredEnvIds?.split(',').reduce((agg, curr) => agg.set(+curr, true), new Map())
@@ -222,9 +228,11 @@ export default function CDDetails({ filteredEnvIds }: { filteredEnvIds: string }
                 (envOptions.length === 1 && !envId && !isEnvDeleted) ||
                 (envId && envOptions.length && !_selectedEnvironment)
             ) {
+                setEnvironmentId(+envOptions[0].value)
                 replace(generatePath(path, { appId, envId: envOptions[0].value, pipelineId: envOptions[0].pipelineId }))
             } else if (envId && !pipelineId && _selectedEnvironment) {
                 // Update the pipeline id when the selected environment is available and pipeline id is not available
+                setEnvironmentId(_selectedEnvironment.environmentId)
                 replace(
                     generatePath(path, {
                         appId,
diff --git a/src/components/app/details/main.tsx b/src/components/app/details/main.tsx
@@ -405,7 +405,15 @@ export default function AppDetailsPage() {
                         <Route
                             path={`${path}/${URLS.APP_DEPLOYMENT_METRICS}/:envId(\\d+)?`}
                             render={(props) => {
-                                return <DeploymentMetrics {...props} filteredEnvIds={_filteredEnvIds} />
+                                const envId = props.match.params.envId
+                                const match = {
+                                    ...props.match,
+                                    params: {
+                                        appId: appId,
+                                        envId: envId,
+                                    },
+                                }
+                                return <DeploymentMetrics {...props} match={match} filteredEnvIds={_filteredEnvIds} />
                             }}
                         />
                         <Route
diff --git a/src/components/app/details/metrics/DeploymentMetrics.tsx b/src/components/app/details/metrics/DeploymentMetrics.tsx
@@ -14,50 +14,55 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import React, { Component, useEffect } from 'react'
+import ReactGA from 'react-ga4'
+import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom'
+import Tippy from '@tippyjs/react'
+import moment from 'moment'
+import { Bar, BarChart, Label, Legend, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+
 import {
-    showError,
-    Progressing,
+    EMPTY_STATE_STATUS,
     ErrorScreenManager,
     GenericEmptyState,
+    Progressing,
     SelectPicker,
+    showError,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { generatePath } from 'react-router-dom'
-import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Legend, Label, ReferenceLine } from 'recharts'
-import moment from 'moment'
-import Tippy from '@tippyjs/react'
-import ReactGA from 'react-ga4'
-import { getDeploymentMetrics } from './deploymentMetrics.service'
-import { DatePicker } from '../../../common'
+
+import { ReactComponent as Success } from '@Icons/appstatus/healthy.svg'
+import { ReactComponent as Fail } from '@Icons/ic-error-exclamation.svg'
+import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
+import { ReactComponent as Deploy } from '@Icons/ic-nav-rocket.svg'
+
+import AppNotDeployed from '@Images/app-not-deployed.svg'
+import SelectEnvImage from '@Images/ic-empty-dep-metrics@2x.png'
 import { ViewType } from '../../../../config'
-import { DeploymentTable } from './DeploymentTable'
 import { getAppOtherEnvironmentMin } from '../../../../services/service'
-import { DeploymentTableModal } from './DeploymentTableModal'
+import { DatePicker, useAppContext } from '../../../common'
 import { BenchmarkModal } from './BenchmarkModal'
+import { getDeploymentMetrics } from './deploymentMetrics.service'
+import { DeploymentMetricsProps, DeploymentMetricsState } from './deploymentMetrics.types'
 import {
     BenchmarkLine,
+    EliteCategoryMessage,
+    FailureLegendEmptyState,
+    FrequencyTooltip,
     frequencyXAxisLabel,
+    getGALabel,
+    LeadTimeTooltip,
     leadTimeXAxisLabel,
     recoveryTimeLabel,
+    RecoveryTimeTooltip,
     ReferenceLineLegend,
     renderCategoryTag,
-    FrequencyTooltip,
-    RecoveryTimeTooltip,
-    LeadTimeTooltip,
-    EliteCategoryMessage,
-    FailureLegendEmptyState,
 } from './deploymentMetrics.util'
-import AppNotDeployed from '../../../../assets/img/app-not-deployed.svg'
-import SelectEnvImage from '../../../../assets/img/ic-empty-dep-metrics@2x.png'
-import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
-import { ReactComponent as Deploy } from '@Icons/ic-nav-rocket.svg'
-import { ReactComponent as Success } from '@Icons/appstatus/healthy.svg'
-import { ReactComponent as Fail } from '@Icons/ic-error-exclamation.svg'
+import { DeploymentTable } from './DeploymentTable'
+import { DeploymentTableModal } from './DeploymentTableModal'
+
 import './deploymentMetrics.scss'
-import { DeploymentMetricsProps, DeploymentMetricsState } from './deploymentMetrics.types'
-import { EMPTY_STATE_STATUS } from '../../../../config/constantMessaging'
 
-export default class DeploymentMetrics extends Component<DeploymentMetricsProps, DeploymentMetricsState> {
+class DeploymentMetricsComponent extends Component<DeploymentMetricsProps, DeploymentMetricsState> {
     constructor(props) {
         super(props)
 
@@ -93,7 +98,6 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
                 endDate: undefined,
             },
             deploymentTableView: ViewType.FORM,
-            filteredEnvironment: [],
         }
         this.handleDatesChange = this.handleDatesChange.bind(this)
         this.handleFocusChange = this.handleFocusChange.bind(this)
@@ -181,7 +185,6 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
                     allEnv.length && prevEnvId && (prevEnvId !== this.props.match.params.envId || !isEnvExist)
                 this.setState({
                     environments: allEnv,
-                    filteredEnvironment: allEnv,
                     view: this.props.match.params.envId || redirectToNewUrl ? ViewType.LOADING : ViewType.FORM,
                 })
                 if (redirectToNewUrl) {
@@ -234,7 +237,7 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
         ReactGA.event({
             category: 'Deployment Metrics',
             action: 'Deployment Status Filter Clicked',
-            label: this.getGALabel(event.target.value),
+            label: getGALabel(event.target.value),
         })
         this.setState({ statusFilter: Number(event.target.value), deploymentTableView: ViewType.LOADING }, () => {
             setTimeout(() => {
@@ -243,19 +246,6 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
         })
     }
 
-    getGALabel(statusFilter) {
-        switch (Number(statusFilter)) {
-            case -1:
-                return 'All'
-            case 0:
-                return 'Success'
-            case 1:
-                return 'Failed'
-            default:
-                return ''
-        }
-    }
-
     renderInputs() {
         return (
             <div className="deployment-metrics__inputs bg__primary">
@@ -269,11 +259,11 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
                         onChange={(selected) => {
                             this.handleEnvironmentChange(selected)
                         }}
-                        options={this.state.filteredEnvironment.sort((a, b) => (a.label > b.label ? 1 : -1))}
+                        options={this.state.environments}
                     />
                 </div>
                 <div className="dc__align-right ">
-                    {this.props.match.params.envId ? (
+                    {this.state.selectedEnvironment ? (
                         <DatePicker
                             startDate={this.state.startDate}
                             endDate={this.state.endDate}
@@ -631,21 +621,22 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
         if (this.state.view === ViewType.FORM && this.state.environments.length === 0) {
             return this.renderNoEnvironmentView()
         }
-        if (this.state.view === ViewType.FORM && !this.props.match.params.envId) {
+        if (this.state.view === ViewType.FORM && (!this.props.match.params.envId || !(this.state.environments ?? []).find((env) => env.value === +this.props.match.params.envId))) {
             return this.renderSelectEnvironmentView()
         }
         if (this.state.view === ViewType.FORM && this.state.frequencyAndLeadTimeGraph.length === 0) {
             return this.renderEmptyState()
         }
 
-        let deploymentTableRows = this.state.rows
-        if (this.state.statusFilter > -1) {
-            deploymentTableRows = deploymentTableRows.filter((row) => {
-                if (row.releaseStatus === this.state.statusFilter) {
-                    return row
-                }
-            })
-        }
+        const deploymentTableRows =
+            this.state.statusFilter > -1
+                ? this.state.rows.filter((row) => {
+                      if (row.releaseStatus === this.state.statusFilter) {
+                          return row
+                      }
+                  })
+                : this.state.rows
+
         return (
             <div>
                 {this.renderGraphs()}
@@ -703,7 +694,27 @@ export default class DeploymentMetrics extends Component<DeploymentMetricsProps,
     }
 }
 
-export interface FrequencyGraphLegendProps {
+const DeploymentMetrics = (props: DeploymentMetricsProps) => {
+    const { appId, envId } = useParams<{ appId: string; envId: string }>()
+    const { environmentId, setEnvironmentId } = useAppContext()
+    const { path } = useRouteMatch()
+    const { replace } = useHistory()
+
+    useEffect(() => {
+        if (envId && +envId !== environmentId) {
+            setEnvironmentId(+envId)
+        }
+        if (!envId && environmentId) {
+            replace(generatePath(path, { appId, envId: environmentId }))
+        }
+    }, [envId])
+
+    return <DeploymentMetricsComponent {...props} />
+}
+
+export default DeploymentMetrics
+
+interface FrequencyGraphLegendProps {
     noFailures: boolean
     label: string
     frequency: string
@@ -713,7 +724,7 @@ export interface FrequencyGraphLegendProps {
     setFrequencyMetric: (...args) => void
     setFailureMetric: (...args) => void
 }
-export class FrequencyGraphLegend extends React.Component<FrequencyGraphLegendProps, {}> {
+class FrequencyGraphLegend extends React.Component<FrequencyGraphLegendProps, {}> {
     render() {
         return (
             <div className="graph-legend">
@@ -789,15 +800,15 @@ export class FrequencyGraphLegend extends React.Component<FrequencyGraphLegendPr
     }
 }
 
-export interface RecoveryAndLeadTimeGraphLegendProps {
+interface RecoveryAndLeadTimeGraphLegendProps {
     noFailures: boolean
     valueLabel: string
     label: string
     tooltipText: string
     benchmark: undefined | any
     setMetric: (...args) => void
 }
-export class RecoveryAndLeadTimeGraphLegend extends React.Component<RecoveryAndLeadTimeGraphLegendProps, {}> {
+class RecoveryAndLeadTimeGraphLegend extends React.Component<RecoveryAndLeadTimeGraphLegendProps, {}> {
     render() {
         if (this.props.noFailures) {
             return (
diff --git a/src/components/app/details/metrics/deploymentMetrics.types.ts b/src/components/app/details/metrics/deploymentMetrics.types.ts
@@ -96,5 +96,4 @@ export interface DeploymentMetricsState {
         endDate: undefined | Moment
     }
     deploymentTableView: string
-    filteredEnvironment: Array<Environment>
 }
diff --git a/src/components/app/details/metrics/deploymentMetrics.util.tsx b/src/components/app/details/metrics/deploymentMetrics.util.tsx
@@ -216,3 +216,16 @@ export function getTimeperiod(timeInDays: number) {
     const timeInMinutes = 24 * 60 * (1 / timeInDays)
     return createTimestamp(timeInMinutes)
 }
+
+export const getGALabel = (statusFilter) => {
+    switch (Number(statusFilter)) {
+        case -1:
+            return 'All'
+        case 0:
+            return 'Success'
+        case 1:
+            return 'Failed'
+        default:
+            return ''
+    }
+}
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
diff --git a/src/components/login/constants.ts b/src/components/login/constants.ts
diff --git a/src/components/login/login.scss b/src/components/login/login.scss

Original file line number	Diff line number	Diff line change
`@@ -218,6 +218,7 @@ export interface EnvConfigurationsNavProps extends Required<Pick<AppConfigProps,`
`218`	`218`	`isCMSecretLocked?: boolean`
`219`	`219`	`hideEnvSelector?: boolean`
`220`	`220`	`appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']`
	`221`	`+ shouldSetEnvInContext?: boolean`
`221`	`222`	`}`
`222`	`223`
`223`	`224`	`export interface EnvConfigRouteParams {`
Original file line number	Diff line number	Diff line change
`@@ -840,7 +840,6 @@ const AppDetail = ({ detailsType, filteredResourceIds }: AppDetailProps) => {`
`840`	`840`	`replace(newUrl)`
`841`	`841`	`return`
`842`	`842`	`}`
`843`		`- setEnvironmentId(null)`
`844`	`843`	`return`
`845`	`844`	`}`
`846`	`845`
`@@ -857,7 +856,7 @@ const AppDetail = ({ detailsType, filteredResourceIds }: AppDetailProps) => {`
`857`	`856`	`if (!params.envId \|\| !params.appId) {`
`858`	`857`	`return`
`859`	`858`	`}`
`860`		`- // Setting environmentId in app context only in cse of app details and not env details`
	`859`	`+ // Setting environmentId in app context only in case of app details and not env details`
`861`	`860`	`if (isAppView) {`
`862`	`861`	`setEnvironmentId(Number(params.envId))`
`863`	`862`	`}`
Original file line number	Diff line number	Diff line change
`@@ -96,5 +96,4 @@ export interface DeploymentMetricsState {`
`96`	`96`	`endDate: undefined \| Moment`
`97`	`97`	`}`
`98`	`98`	`deploymentTableView: string`
`99`		`- filteredEnvironment: Array<Environment>`
`100`	`99`	`}`