feat: ai debug mode

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.22.0-beta-4",
+    "version": "1.22.0-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Constants.ts

@@ -80,6 +80,8 @@ export const URLS = {
     APP_DEPLOYMNENT_HISTORY: 'deployments',
     APP_DETAILS: 'details',
     APP_DETAILS_K8: 'k8s-resources', // for V2
+    EXTERNAL_ARGO_APP: 'eaa',
+    EXTERNAL_FLUX_APP: 'external-flux',
     DETAILS: '/details',
     CD_DETAILS: 'cd-details',
     APP_TRIGGER: 'trigger',

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -20,6 +20,7 @@ import { getAIAnalyticsEvents } from '@Common/Helper'
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 import { getAppDetailsURL } from '@Shared/Helpers'
+import { MainContext, useMainContext } from '@Shared/Providers'
 
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { DeploymentStatusDetailBreakdown } from '../CICDHistory'
@@ -86,7 +87,10 @@ export const AppStatusBody = ({
     deploymentStatusDetailsBreakdownData,
     selectedTab,
     debugWithAIButton: ExplainWithAIButton,
+    handleClose,
 }: AppStatusBodyProps) => {
+    const { aiAgentContext } = useMainContext()
+
     const appStatus = appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus
 
     const getAppStatusInfoCardItems = (): (Omit<ComponentProps<typeof InfoCardItem>, 'isLast'> & { id: string })[] => {
@@ -101,6 +105,32 @@ export const AppStatusBody = ({
         )
         const debugObject = `${debugNode?.kind}/${debugNode?.name}`
 
+        const intelligenceConfig: MainContext['intelligenceConfig'] = {
+            clusterId: appDetails.clusterId,
+            metadata: {
+                ...(debugNode ? { object: debugObject } : { message }),
+                namespace: appDetails.namespace,
+                status: debugNode?.health?.status ?? appStatus,
+            },
+            prompt: `Debug ${message || 'error'} ${debugNode ? `of ${debugObject}` : ''} in ${appDetails.namespace}`,
+            analyticsCategory: getAIAnalyticsEvents('APP_STATUS', appDetails.appType),
+        }
+
+        // Have to add this to handle case of devtron-stack manager and software distribution hub.
+        const debugAgentContext = aiAgentContext
+            ? ({
+                  ...aiAgentContext,
+                  prompt: `Why is application '${appDetails.appName}' of '${appDetails.environmentName}' env ${appStatus}?`,
+                  data: {
+                      ...aiAgentContext.data,
+                      ...(debugNode ? { debugNodeKind: debugNode.kind, debugNodeName: debugNode.name } : {}),
+                      ...(message ? { debugError: message } : {}),
+                      namespace: appDetails.namespace,
+                      status: debugNode?.health?.status ?? appStatus,
+                  },
+              } as MainContext['debugAgentContext'])
+            : null
+
         return [
             {
                 id: 'app-status-row',
@@ -112,19 +142,13 @@ export const AppStatusBody = ({
                         envId={appDetails.environmentId}
                         actionItem={
                             ExplainWithAIButton &&
+                            debugAgentContext &&
                             appStatus?.toLowerCase() !== StatusType.HEALTHY.toLowerCase() &&
                             (debugNode || message) ? (
                                 <ExplainWithAIButton
-                                    intelligenceConfig={{
-                                        clusterId: appDetails.clusterId,
-                                        metadata: {
-                                            ...(debugNode ? { object: debugObject } : { message }),
-                                            namespace: appDetails.namespace,
-                                            status: debugNode?.health?.status ?? appStatus,
-                                        },
-                                        prompt: `Debug ${message || 'error'} ${debugNode ? `of ${debugObject}` : ''} in ${appDetails.namespace}`,
-                                        analyticsCategory: getAIAnalyticsEvents('APP_STATUS', appDetails.appType),
-                                    }}
+                                    intelligenceConfig={intelligenceConfig}
+                                    debugAgentContext={debugAgentContext}
+                                    onClick={handleClose}
                                 />
                             ) : null
                         }

src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx

@@ -315,6 +315,7 @@ const AppStatusModal = ({
                     deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                     selectedTab={selectedTab}
                     debugWithAIButton={debugWithAIButton}
+                    handleClose={handleClose}
                 />
 
                 {type === 'stack-manager' && (

src/Shared/Components/AppStatusModal/types.ts

@@ -17,6 +17,7 @@
 import { FunctionComponent, PropsWithChildren, ReactNode } from 'react'
 
 import { APIOptions, DeploymentAppTypes } from '@Common/Types'
+import { MainContext } from '@Shared/Providers'
 import {
     AppDetails,
     ConfigDriftModalProps,
@@ -38,7 +39,11 @@ export type AppStatusModalProps = {
     processVirtualEnvironmentDeploymentData: (
         data?: DeploymentStatusDetailsType,
     ) => DeploymentStatusDetailsBreakdownDataType
-    debugWithAIButton: FunctionComponent<{ intelligenceConfig: IntelligenceConfig }>
+    debugWithAIButton: FunctionComponent<{
+        intelligenceConfig: IntelligenceConfig
+        debugAgentContext: MainContext['debugAgentContext']
+        onClick?: () => void
+    }>
 } & (
     | {
           type: 'release'
@@ -59,7 +64,7 @@ export type AppStatusModalProps = {
 )
 
 export interface AppStatusBodyProps
-    extends Required<Pick<AppStatusModalProps, 'appDetails' | 'type' | 'debugWithAIButton'>> {
+    extends Required<Pick<AppStatusModalProps, 'appDetails' | 'type' | 'debugWithAIButton' | 'handleClose'>> {
     handleShowConfigDriftModal: () => void
     selectedTab: AppStatusModalTabType
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType

src/Shared/Providers/MainContextProvider/types.ts

@@ -56,26 +56,61 @@ export enum AIAgentContextSourceType {
     RESOURCE_BROWSER_CLUSTER = 'resource-browser-cluster',
 }
 
+export type AIAgentAppType =
+    | 'devtronApp'
+    | 'devtronHelmChart'
+    | 'externalHelmChart'
+    | 'externalArgoApp'
+    | 'externalFluxApp'
+
+type AIAgentAppDataMasterType = {
+    appId: number | string
+    appName: string
+    envId: number
+    envName: string
+    clusterId: number
+    namespace: string
+    appType: AIAgentAppType
+    fluxAppDeploymentType: string
+}
+
+type AIAgentAppDataType<TAppType extends AIAgentAppType, TRequiredFields extends keyof AIAgentAppDataMasterType> = Pick<
+    AIAgentAppDataMasterType,
+    TRequiredFields
+> & {
+    [K in Exclude<keyof AIAgentAppDataMasterType, TRequiredFields | 'appType'>]?: never
+} & {
+    appType: TAppType
+}
+
 export type AIAgentContextType =
     | {
           source: AIAgentContextSourceType.APP_DETAILS
-          data: {
-              appId: number
-              envId: number
-              appName: string
-              envName: string
-              clusterId: number
-              appType: 'devtronApp' | 'devtronHelmChart'
-          }
+          data:
+              | AIAgentAppDataType<
+                    'devtronApp' | 'devtronHelmChart',
+                    'appId' | 'appName' | 'envId' | 'envName' | 'clusterId'
+                >
+              | AIAgentAppDataType<'externalHelmChart', 'appId' | 'appName' | 'clusterId' | 'namespace'>
+              | AIAgentAppDataType<'externalArgoApp', 'appName' | 'clusterId' | 'namespace'>
+              | (AIAgentAppDataType<
+                    'externalFluxApp',
+                    'appName' | 'clusterId' | 'namespace' | 'fluxAppDeploymentType'
+                > &
+                    Record<string, unknown>)
       }
     | {
           source: AIAgentContextSourceType.RESOURCE_BROWSER_CLUSTER
           data: {
               clusterId: number
               clusterName: string
-          }
+          } & Record<string, unknown>
       }
 
+export type DebugAgentContextType = AIAgentContextType & {
+    prompt?: string
+}
+
 export interface TempAppWindowConfig {
     /** Whether the temporary window is open */
     open: boolean
@@ -139,6 +174,8 @@ type CommonMainContextProps = {
     setLicenseData: Dispatch<SetStateAction<DevtronLicenseInfo>>
     canFetchHelmAppStatus: boolean
     setIntelligenceConfig: Dispatch<SetStateAction<IntelligenceConfig>>
+    debugAgentContext: DebugAgentContextType | null
+    setDebugAgentContext: (aiAgentContext: DebugAgentContextType | null) => void
     setAIAgentContext: (aiAgentContext: AIAgentContextType) => void
     setSidePanelConfig: Dispatch<SetStateAction<SidePanelConfig>>
 } & Pick<EnvironmentDataValuesDTO, 'isResourceRecommendationEnabled'>

src/Shared/types.ts

@@ -1327,7 +1327,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
 
 export interface IntelligenceConfig {
     clusterId: number
-    metadata: Record<string, string>
+    metadata: Record<string, string | number>
     prompt: string
     analyticsCategory: string
 }

src/index.ts

@@ -187,6 +187,7 @@ export interface customEnv {
      * @default false
      */
     FEATURE_STORAGE_ENABLE?: boolean
+    FEATURE_ATHENA_DEBUG_MODE_ENABLE?: boolean
 }
 declare global {
     interface Window {