Merge pull request #2827 from devtron-labs/fix/events-explain

fix: events explain button not visible

Author: arunjaindev

src/components/ResourceBrowser/ResourceBrowser.service.tsx

@@ -36,12 +36,15 @@ import {
     getClusterListMinWithInstalledClusters,
     getClusterListWithInstalledClusters,
 } from '@Components/ClusterNodes/clusterNodes.service'
+import { importComponentFromFELibrary } from '@Components/common'
 
 import { Routes } from '../../config'
 import { SIDEBAR_KEYS } from './Constants'
 import { ClusterDetailBaseParams, GetResourceDataType, NodeRowDetail } from './Types'
 import { parseNodeList, removeDefaultForStorageClass } from './Utils'
 
+const ExplainWithAIButton = importComponentFromFELibrary('ExplainWithAIButton', null, 'function')
+
 export const namespaceListByClusterId = async (clusterId: string) => {
     const response = await get<string[]>(`${Routes.CLUSTER_NAMESPACE}/${clusterId}`)
 
@@ -136,8 +139,11 @@ export const getResourceData = async ({
                 ? removeDefaultForStorageClass(response.result.data)
                 : response.result.data
 
+        const isEventList = selectedResource.gvk.Kind === Nodes.Event
+
         return {
             ...response.result,
+            headers: [...response.result.headers, ...(isEventList && ExplainWithAIButton ? ['explainButton'] : [])],
             data: data.map((entry, index) => ({
                 ...entry,
                 id: `${idPrefix}${index}`,

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -186,11 +186,13 @@ export const K8SResourceList = ({
                 (header) =>
                     ({
                         field: isNodeListing ? NODE_LIST_HEADERS_TO_KEY_MAP[header] : header,
-                        label: header === 'type' && isEventListing ? '' : header,
+                        label: (header === 'type' || header === 'explainButton') && isEventListing ? '' : header,
                         size: getColumnSize(header, isEventListing),
                         CellComponent: K8sResourceListTableCellComponent,
                         comparator: getColumnComparator(header, isEventListing),
-                        isSortable: !isEventListing || (header !== 'message' && header !== 'type'),
+                        isSortable:
+                            !isEventListing ||
+                            (header !== 'message' && header !== 'type' && header !== 'explainButton'),
                         horizontallySticky:
                             header === 'name' || (isEventListing && (header === 'message' || header === 'type')),
                     }) as TableColumnType,

src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx

@@ -27,7 +27,7 @@ import { AddEnvironmentFormPrefilledInfoType } from '@Pages/GlobalConfigurations
 import { ClusterEnvironmentDrawer } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer'
 import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/constants'
 
-import { AI_BUTTON_CONFIG_MAP, K8S_EMPTY_GROUP } from '../Constants'
+import { AI_BUTTON_CONFIG_MAP, EVENT_LIST, K8S_EMPTY_GROUP } from '../Constants'
 import { ClusterDetailBaseParams } from '../Types'
 import { getRenderInvolvedObjectButton, getRenderNodeButton, renderResourceValue } from '../Utils'
 import NodeActionsMenu from './NodeActionsMenu'
@@ -201,6 +201,16 @@ const K8sResourceListTableCellComponent = ({
         )
     }
 
+    const eventDetails = {
+        message: resourceData.message as string,
+        namespace: resourceData.namespace as string,
+        object: resourceData[EVENT_LIST.dataKeys.involvedObject] as string,
+        source: resourceData.source as string,
+        count: resourceData.count as number,
+        age: resourceData.age as string,
+        lastSeen: resourceData[EVENT_LIST.dataKeys.lastSeen] as string,
+    }
+
     return (
         <>
             {columnName === 'name' ? (
@@ -296,6 +306,19 @@ const K8sResourceListTableCellComponent = ({
                                 </Tooltip>
                             </>
                         )}
+                        {ExplainWithAIButton &&
+                            columnName === 'explainButton' &&
+                            isEventListing &&
+                            resourceData.type === 'Warning' && (
+                                <ExplainWithAIButton
+                                    intelligenceConfig={{
+                                        clusterId,
+                                        metadata: eventDetails,
+                                        prompt: JSON.stringify(eventDetails),
+                                        analyticsCategory: getAIAnalyticsEvents('RB_RESOURCE'),
+                                    }}
+                                />
+                            )}
                         <span>
                             {columnName === 'restarts' && Number(resourceData.restarts) !== 0 && PodRestartIcon && (
                                 <PodRestartIcon

src/components/ResourceBrowser/ResourceList/utils.tsx

@@ -270,6 +270,8 @@ export const getColumnSize = (field: string, isEventListing: boolean) => {
                     startWidth: 140,
                 },
             }
+        case 'explainButton':
+            return { fixed: 80 }
         default:
             return {
                 range: {