Merge pull request #3033 from devtron-labs/feat/ai-context

feat: update AIAgentContext handling across components for improved context management

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.22.0-beta-2",
+        "@devtron-labs/devtron-fe-common-lib": "1.22.0-beta-4",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -15,9 +15,10 @@
  */
 
 import { useEffect, useMemo, useState } from 'react'
-import { Route, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
+import { Route, useHistory, useLocation, useParams } from 'react-router-dom'
 
 import {
+    AIAgentContextSourceType,
     BreadcrumbText,
     DevtronProgressing,
     ErrorScreenManager,
@@ -76,7 +77,6 @@ const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton'
 const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) => {
     const params = useParams<ClusterDetailBaseParams>()
     const { clusterId } = params
-    const { path } = useRouteMatch()
     const location = useLocation()
     const {
         tabs,
@@ -126,20 +126,22 @@ const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) =
 
         return () => {
             setIntelligenceConfig(null)
-            setAIAgentContext(null)
         }
     }, [])
     useEffectAfterMount(() => initTabsBasedOnRole(true), [clusterId])
 
     useEffect(() => {
         setAIAgentContext({
-            path,
-            context: {
-                ...params,
+            source: AIAgentContextSourceType.RESOURCE_BROWSER_CLUSTER,
+            data: {
+                clusterId: +clusterId || undefined,
                 clusterName: selectedCluster.label,
-                search: location.search,
             },
         })
+
+        return () => {
+            setAIAgentContext(null)
+        }
     }, [location.pathname, location.search, selectedCluster.label])
 
     const refreshData = () => {

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

@@ -20,6 +20,7 @@ import { generatePath, Route, useHistory, useLocation, useParams, useRouteMatch
 import {
     ACTION_STATE,
     aggregateNodes,
+    AIAgentContextSourceType,
     AppStatusModal,
     AppStatusModalTabType,
     ArtifactInfoModal,
@@ -216,20 +217,30 @@ const Details: React.FC<DetailsType> = ({
     const params = useParams<{ appId: string; envId: string }>()
     const location = useLocation()
     const { replace, push } = useHistory()
-    const { path, url } = useRouteMatch()
+    const { url } = useRouteMatch()
 
     const { setAIAgentContext } = useMainContext()
 
     useEffect(() => {
-        setAIAgentContext({
-            path,
-            context: {
-                ...params,
-                environmentName: appDetails?.environmentName ?? '',
-                appName: appDetails?.appName ?? '',
-            },
-        })
-    }, [appDetails?.environmentName, appDetails?.appName, url])
+        // This check is here since we don't clear appDetails on env/app change for some reason :/ and this will cause data mismatch
+        if (appDetails?.environmentId === +params.envId && appDetails?.appId === +params.appId) {
+            setAIAgentContext({
+                source: AIAgentContextSourceType.APP_DETAILS,
+                data: {
+                    appId: +params.appId,
+                    envId: +params.envId,
+                    clusterId: appDetails?.clusterId,
+                    envName: appDetails?.environmentName,
+                    appName: appDetails?.appName,
+                    appType: 'devtronApp',
+                },
+            })
+        }
+
+        return () => {
+            setAIAgentContext(null)
+        }
+    }, [appDetails?.environmentName, appDetails?.appName, appDetails?.clusterId, url])
 
     const appDetailsFromIndexStore = IndexStore.getAppDetails()
 

src/components/app/details/main.tsx

@@ -59,30 +59,10 @@ const CIDetails = lazy(() => import('./cIDetails/CIDetails'))
 const AppDetails = lazy(() => import('./appDetails/AppDetails'))
 const CDDetails = lazy(() => import('./cdDetails/CDDetails'))
 
-const AIAgentContextSetterWrapper = ({ children, appName }: PropsWithChildren<{ appName: string }>) => {
-    const { setAIAgentContext } = useMainContext()
-    const params = useParams()
-    const { path, url } = useRouteMatch()
-
-    useEffect(() => {
-        const contextData: Record<string, string> = {
-            ...params,
-        }
-        if (contextData.buildId) {
-            // For build history page
-            contextData['Workflow_id'] = contextData.buildId
-            delete contextData.buildId
-        }
-        setAIAgentContext({ path, context: { appName, ...contextData } })
-    }, [path, url])
-
-    return <>{children}</>
-}
-
 export default function AppDetailsPage() {
     const { path } = useRouteMatch()
     const { appId } = useParams<{ appId }>()
-    const { setIntelligenceConfig, setAIAgentContext } = useMainContext()
+    const { setIntelligenceConfig } = useMainContext()
     const [appName, setAppName] = useState('')
     const [appMetaInfo, setAppMetaInfo] = useState<AppMetaInfo>()
     const [reloadMandatoryProjects, setReloadMandatoryProjects] = useState<boolean>(true)
@@ -159,7 +139,6 @@ export default function AppDetailsPage() {
             setSelectedGroupFilter([])
             setAppListOptions([])
             setIntelligenceConfig(null)
-            setAIAgentContext(null)
         }
     }, [appId])
 
@@ -421,26 +400,18 @@ export default function AppDetailsPage() {
                         </Route>
                         <Route
                             path={`${path}/${URLS.APP_TRIGGER}`}
-                            render={() => (
-                                <AIAgentContextSetterWrapper appName={appName}>
-                                    <TriggerView filteredEnvIds={_filteredEnvIds} />
-                                </AIAgentContextSetterWrapper>
-                            )}
+                            render={() => <TriggerView filteredEnvIds={_filteredEnvIds} />}
                         />
                         <Route path={`${path}/${URLS.APP_CI_DETAILS}/:pipelineId(\\d+)?/:buildId(\\d+)?`}>
-                            <AIAgentContextSetterWrapper appName={appName}>
-                                <CIDetails key={appId} filteredEnvIds={_filteredEnvIds} />
-                            </AIAgentContextSetterWrapper>
+                            <CIDetails key={appId} filteredEnvIds={_filteredEnvIds} />
                         </Route>
                         <Route path={`${path}/${URLS.APP_DEPLOYMENT_METRICS}/:envId(\\d+)?`}>
                             <DeploymentMetrics filteredEnvIds={_filteredEnvIds} />
                         </Route>
                         <Route
                             path={`${path}/${URLS.APP_CD_DETAILS}/:envId(\\d+)?/:pipelineId(\\d+)?/:triggerId(\\d+)?`}
                         >
-                            <AIAgentContextSetterWrapper appName={appName}>
-                                <CDDetails key={appId} filteredEnvIds={_filteredEnvIds} />
-                            </AIAgentContextSetterWrapper>
+                            <CDDetails key={appId} filteredEnvIds={_filteredEnvIds} />
                         </Route>
                         <Route path={`${path}/${CommonURLS.APP_CONFIG}`}>
                             <AppConfig

src/components/v2/index.tsx

@@ -19,11 +19,13 @@ import { Redirect, Route, Switch, useHistory, useLocation, useParams, useRouteMa
 
 import {
     abortPreviousRequests,
+    AIAgentContextSourceType,
     API_STATUS_CODES,
     DetailsProgressing,
     ErrorScreenManager,
     getIsRequestAborted,
     showError,
+    useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { URLS } from '../../config'
@@ -49,6 +51,8 @@ const RouterComponent = () => {
     const { path } = useRouteMatch()
     const location = useLocation()
     const history = useHistory()
+    const { setAIAgentContext } = useMainContext()
+
     const abortControllerRef = useRef<AbortController>(new AbortController())
 
     const [errorResponseCode, setErrorResponseCode] = useState(undefined)
@@ -86,6 +90,7 @@ const RouterComponent = () => {
 
     useEffect(
         () => () => {
+            setAIAgentContext(null)
             abortControllerRef.current.abort()
         },
         [],
@@ -143,6 +148,20 @@ const RouterComponent = () => {
             ...response.result,
             helmReleaseStatus: response.result?.releaseStatus || appDetailsRef.current?.helmReleaseStatus,
         }
+
+        // There is no env change so can handle AIAgentContext here directly instead of useEffect
+        setAIAgentContext({
+            source: AIAgentContextSourceType.APP_DETAILS,
+            data: {
+                appId: +params.appId,
+                envId: +params.envId,
+                clusterId: appDetailsRef.current.clusterId,
+                appName: appDetailsRef.current.appName,
+                envName: appDetailsRef.current.environmentName,
+                appType: 'devtronHelmChart'
+            }
+        })
+
         IndexStore.publishAppDetails(appDetailsRef.current, AppType.DEVTRON_HELM_CHART)
         setErrorResponseCode(undefined)
     }

yarn.lock

@@ -1729,9 +1729,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.22.0-beta-2":
-  version: 1.22.0-beta-2
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.22.0-beta-2"
+"@devtron-labs/devtron-fe-common-lib@npm:1.22.0-beta-4":
+  version: 1.22.0-beta-4
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.22.0-beta-4"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1785,7 +1785,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/01afa9776f529db4280dbfb8aff10d434c46c22447f19297fe75fed00aa805b618f0974f9543388cefb80104e32d1fb72e0972c716a61d2843789edbdf310a73
+  checksum: 10c0/df50e3eb2b7a498824bfe812c1165141ad9c5d55cf52e130f9708a0c9f14b586b50f8fab9baa23d375fe45a8ec72fe7538b8ada01f7358cc047a1db4d6c920a3
   languageName: node
   linkType: hard
 
@@ -5599,7 +5599,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.22.0-beta-2"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.22.0-beta-4"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"