feat: add ai chat bot

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.20.6-pre-47",
+    "version": "1.20.6-pre-48",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/API/CoreAPI.ts

@@ -55,6 +55,9 @@ class CoreAPI {
             method: type,
             signal,
             body: data ? JSON.stringify(data) : undefined,
+            headers: {
+                'Content-Type': 'application/json',
+            },
         }
         // eslint-disable-next-line dot-notation
         options['credentials'] = 'include' as RequestCredentials

src/Common/API/reactQueryHooks.ts

@@ -16,6 +16,9 @@
 
 import {
     QueryKey,
+    useInfiniteQuery as rqUseInfiniteQuery,
+    UseInfiniteQueryOptions,
+    UseInfiniteQueryResult,
     useMutation as rqUseMutation,
     UseMutationOptions,
     UseMutationResult,
@@ -46,4 +49,19 @@ export const useMutation = <TData = unknown, TVariables = void, TContext = unkno
     options: UseMutationOptions<ResponseType<TData>, ServerErrors, TVariables, TContext>,
 ): UseMutationResult<ResponseType<TData>, ServerErrors, TVariables, TContext> => rqUseMutation(options)
 
+export const useInfiniteQuery = <
+    TQueryFnData = unknown,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    WrapWithResponseType extends boolean = true,
+>(
+    options: UseInfiniteQueryOptions<
+        WrapWithResponseType extends true ? ResponseType<TQueryFnData> : TQueryFnData,
+        ServerErrors,
+        TData,
+        WrapWithResponseType extends true ? ResponseType<TQueryFnData> : TQueryFnData,
+        TQueryKey
+    >,
+): UseInfiniteQueryResult<TData, ServerErrors> => rqUseInfiniteQuery(options)
+
 export { useQueryClient }

src/Common/Constants.ts

@@ -64,7 +64,6 @@ const DATA_PROTECTION_ROOT = '/data-protection-management'
 const DATA_PROTECTION_BACKUP_AND_SCHEDULE =
     `${DATA_PROTECTION_ROOT}/backup-and-schedule/:view(${Object.values(BackupAndScheduleListViewEnum).join('|')})` as const
 const GLOBAL_CONFIG_ROOT = '/global-configuration'
-const AI_RECOMMENDATIONS_ROOT = '/ai-recommendations'
 
 export const URLS = {
     LOGIN: '/login',
@@ -116,6 +115,7 @@ export const URLS = {
     INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/chart-store/discover`,
     INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/resource-browser`,
     INFRASTRUCTURE_MANAGEMENT_RESOURCE_WATCHER: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/resource-watcher`,
+    INFRASTRUCTURE_MANAGEMENT_AUDIT_LOGS: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/audit-logs`,
     // SOFTWARE RELEASE MANAGEMENT
     SOFTWARE_RELEASE_MANAGEMENT: SOFTWARE_RELEASE_MANAGEMENT_ROOT,
     // COST VISIBILITY
@@ -136,6 +136,7 @@ export const URLS = {
     // AUTOMATION AND ENABLEMENT
     AUTOMATION_AND_ENABLEMENT: AUTOMATION_AND_ENABLEMENT_ROOT,
     AUTOMATION_AND_ENABLEMENT_JOB: `${AUTOMATION_AND_ENABLEMENT_ROOT}/job`,
+    AUTOMATION_ENABLEMENT_RUNBOOKS: `${AUTOMATION_AND_ENABLEMENT_ROOT}/runbooks`,
     // DATA PROTECTION
     DATA_PROTECTION: DATA_PROTECTION_ROOT,
     DATA_PROTECTION_OVERVIEW: `${DATA_PROTECTION_ROOT}/overview`,
@@ -150,9 +151,6 @@ export const URLS = {
     GLOBAL_CONFIG_DOCKER: `${GLOBAL_CONFIG_ROOT}/docker`,
     GLOBAL_CONFIG_EDIT_CLUSTER: `${GLOBAL_CONFIG_ROOT}/cluster-env/edit/:clusterId`,
     PERMISSION_GROUPS: `${GLOBAL_CONFIG_ROOT}/auth/groups`,
-    // AI RECOMMENDATIONS
-    AI_RECOMMENDATIONS: AI_RECOMMENDATIONS_ROOT,
-    AI_RECOMMENDATIONS_OVERVIEW: `${AI_RECOMMENDATIONS_ROOT}/overview`,
     EXTERNAL_APPS: 'ea',
 } as const
 

src/Shared/Components/Charts/types.ts

@@ -130,9 +130,7 @@ export type ChartProps = {
         placement?: TooltipProps['placement']
         datasetValueFormatter?: (value: number) => string | number
     }
-    /** A title for x axis */
     xScaleTitle?: string
-    /** A title for y axis */
     yScaleTitle?: string
 } & TypeAndDatasetsType
 

src/Shared/Components/DocLink/constants.ts

@@ -116,7 +116,8 @@ export const DOCUMENTATION = {
     GLOBAL_CONFIG_SSO_LOGIN_MICROSOFT: 'global-configurations/authorization/sso-login/microsoft',
     GLOBAL_CONFIG_PULL_IMAGE_DIGEST: 'global-configurations/pull-image-digest',
     GLOBAL_CONFIG_TAGS: 'getting-started/global-configurations/tags-policy',
-
+    // TODO: Replace with correct Url
+    SAMPLE_RUNBOOK_LINK: 'https://docs.devtron.ai/user-guide/ai-recommendations/runbook#add-runbook-spec',
     // Software Release Management
     SOFTWARE_DISTRIBUTION_HUB: 'usage/software-distribution-hub',
     RELEASE_TRACKS: 'usage/software-distribution-hub/release-hub#creating-release-tracks-and-versions',

src/Shared/Components/Header/PageHeader.tsx

@@ -29,6 +29,7 @@ import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import { ImageWithFallback } from '../ImageWithFallback'
 import { InfoIconTippy } from '../InfoIconTippy'
+import { NOTIFICATIONS_TEMP_WINDOW_TITLE } from './constants'
 import { HelpButton } from './HelpButton'
 import { IframePromoButton } from './IframePromoButton'
 import { ProfileMenu } from './ProfileMenu'
@@ -51,8 +52,16 @@ const PageHeader = ({
     tippyProps,
     closeIcon,
 }: PageHeaderType) => {
-    const { setLoginCount, setShowGettingStartedCard, setSidePanelConfig, sidePanelConfig, tempAppWindowConfig } =
-        useMainContext()
+    const {
+        setLoginCount,
+        setShowGettingStartedCard,
+        setSidePanelConfig,
+        sidePanelConfig,
+        tempAppWindowConfig,
+        AIRecommendations,
+        setTempAppWindowConfig,
+        isSuperAdmin,
+    } = useMainContext()
     const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
 
     const {
@@ -137,6 +146,19 @@ const PageHeader = ({
         setSidePanelConfig((prev) => ({ ...prev, state: SidePanelTab.ASK_DEVTRON }))
     }
 
+    const handleNotificationsButtonClick = () => {
+        handleAnalyticsEvent({
+            category: 'AI',
+            action: `NOTIFICATIONS_AI_RECOMMENDATIONS`,
+        })
+
+        setTempAppWindowConfig({
+            open: true,
+            title: NOTIFICATIONS_TEMP_WINDOW_TITLE,
+            component: <AIRecommendations />,
+        })
+    }
+
     const renderLogoutHelpSection = () => (
         <>
             {window._env_?.FEATURE_ASK_DEVTRON_EXPERT &&
@@ -153,6 +175,20 @@ const PageHeader = ({
                         </button>
                     </Tooltip>
                 )}
+
+            {AIRecommendations && isSuperAdmin && tempAppWindowConfig.title !== NOTIFICATIONS_TEMP_WINDOW_TITLE && (
+                <Button
+                    dataTestId="recommendations-notifications-button"
+                    style={ButtonStyleType.neutral}
+                    variant={ButtonVariantType.borderLess}
+                    icon={<Icon name="ic-bell" color={null} />}
+                    ariaLabel="Open AI Recommendations Notifications"
+                    size={ComponentSizeType.medium}
+                    onClick={handleNotificationsButtonClick}
+                    showAriaLabelInTippy={false}
+                />
+            )}
+
             <HelpButton
                 serverInfo={currentServerInfo.serverInfo}
                 fetchingServerInfo={currentServerInfo.fetchingServerInfo}

src/Shared/Components/Header/constants.ts

@@ -108,3 +108,5 @@ export const ENTERPRISE_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['optio
         startIcon: { name: 'ic-megaphone-right' },
     },
 ]
+
+export const NOTIFICATIONS_TEMP_WINDOW_TITLE = 'Notifications'