frontend: Add event for list, detail and objectEvent

Signed-off-by: ashu8192 <[email protected]>

frontend/src/components/common/ObjectEventList.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { KubeObject } from '../../lib/k8s/cluster';
 import Event, { KubeEvent } from '../../lib/k8s/event';
-import { localeDate, timeAgo } from '../../lib/util';
+import { dispatchHeadlampEvent, localeDate, timeAgo } from '../../lib/util';
+import { HeadlampEventType } from '../../redux/eventCallbackSlice';
 import { HoverInfoLabel, SectionBox, SimpleTable } from '../common';
 import ShowHideLabel from './ShowHideLabel';
 
@@ -13,6 +14,12 @@ export interface ObjectEventListProps {
 export default function ObjectEventList(props: ObjectEventListProps) {
   const [events, setEvents] = useState([]);
 
+  useEffect(() => {
+    if (events) {
+      dispatchHeadlampEvent({ type: HeadlampEventType.OBJECT_EVENT, data: events });
+    }
+  }, [events]);
+
   async function fetchEvents() {
     const events = await Event.objectEvents(props.object);
     setEvents(events);

frontend/src/components/common/Resource/MainInfoSection/MainInfoSection.tsx

@@ -1,10 +1,12 @@
 import Paper from '@mui/material/Paper';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { KubeObject } from '../../../../lib/k8s/cluster';
 import { createRouteURL } from '../../../../lib/router';
+import { dispatchHeadlampEvent } from '../../../../lib/util';
 import { HeaderAction } from '../../../../redux/actionButtonsSlice';
+import { HeadlampEventType } from '../../../../redux/eventCallbackSlice';
 import Loader from '../../../common/Loader';
 import { HeaderStyleProps } from '../../../common/SectionHeader';
 import { NameValueTableRow } from '../../../common/SimpleTable';
@@ -58,6 +60,16 @@ export function MainInfoSection(props: MainInfoSectionProps) {
     }
   }
 
+  useEffect(() => {
+    dispatchHeadlampEvent({
+      type: HeadlampEventType.DETAILS_VIEW_LOADED,
+      data: {
+        title: resource?.jsonData.kind,
+        resource: resource,
+      },
+    });
+  }, [resource]);
+
   return (
     <SectionBox
       aria-busy={resource === null}

frontend/src/components/common/Resource/Resource.tsx

@@ -29,6 +29,8 @@ import {
 import Pod, { KubePod, KubeVolume } from '../../../lib/k8s/pod';
 import { createRouteURL, RouteURLProps } from '../../../lib/router';
 import { getThemeName } from '../../../lib/themes';
+import { dispatchHeadlampEvent } from '../../../lib/util';
+import { HeadlampEventType } from '../../../redux/eventCallbackSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
 import { useHasPreviousRoute } from '../../App/RouteSwitcher';
 import { SectionBox } from '../../common/SectionBox';
@@ -134,6 +136,18 @@ export function DetailsGrid(props: DetailsGridProps) {
   const [item, error] = resourceType.useGet(name, namespace);
   const prevItemRef = React.useRef<{ uid?: string; version?: string; error?: ApiError }>({});
 
+  React.useEffect(() => {
+    if (item) {
+      dispatchHeadlampEvent({
+        type: HeadlampEventType.DETAILS_VIEW_LOADED,
+        data: {
+          title: item?.jsonData.kind,
+          resource: item,
+        },
+      });
+    }
+  }, [item]);
+
   React.useEffect(() => {
     // We cannot call this callback more than once on each version of the item, in order to avoid
     // infinite loops.

frontend/src/components/common/Resource/ResourceTable.tsx

@@ -3,7 +3,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import helpers from '../../../helpers';
 import { KubeObject } from '../../../lib/k8s/cluster';
-import { useFilterFunc } from '../../../lib/util';
+import { dispatchHeadlampEvent, useFilterFunc } from '../../../lib/util';
+import { HeadlampEventType } from '../../../redux/eventCallbackSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
 import { useSettings } from '../../App/Settings/hook';
 import { DateLabel } from '../Label';
@@ -102,6 +103,13 @@ function TableFromResourceClass(props: ResourceTableFromResourceClassProps) {
   // throttle the update of the table to once per second
   const throttledItems = useThrottle(items, 1000);
 
+  useEffect(() => {
+    dispatchHeadlampEvent({
+      type: HeadlampEventType.LIST_VIEW_LOADED,
+      data: { title: resourceClass.pluralName, items },
+    });
+  }, [items]);
+
   return (
     <Table
       errorMessage={resourceClass.getErrorMessage(error)}
@@ -132,6 +140,13 @@ function Table(props: ResourceTableProps) {
     !!id ? helpers.loadTableSettings(id) : []
   );
 
+  if (otherProps.data) {
+    dispatchHeadlampEvent({
+      type: HeadlampEventType.LIST_VIEW_LOADED,
+      data: { title: id?.replace('headlamp-', ''), items: otherProps.data },
+    });
+  }
+
   const [resourceCols, cols, sortingColumn] = useMemo(() => {
     let sortingColumn = defaultSortingColumn;
 

frontend/src/redux/eventCallbackSlice.ts

@@ -17,6 +17,9 @@ export enum HeadlampEventType {
   CREATE_BUTTON = 'create-button',
   PLUGIN_LOADING_ERROR = 'plugin-loading-error',
   PLUGINS_LOADED = 'plugins-loaded',
+  DETAILS_VIEW_LOADED = 'details-view-loaded',
+  LIST_VIEW_LOADED = 'list-view-loaded',
+  OBJECT_EVENT = 'object-event',
 }
 
 export type HeadlampEvent = {