refactor(kube): events datatable react migration [EE-6450] (#11583)

Co-authored-by: testa113 <testa113>

app/react/kubernetes/applications/DetailsView/ApplicationDetailsView.tsx

@@ -8,7 +8,7 @@ import { Tab, WidgetTabs, findSelectedTabIndex } from '@@/Widget/WidgetTabs';
 import { Icon } from '@@/Icon';
 import { Badge } from '@@/Badge';
 
-import { EventsDatatable } from '../../components/KubernetesEventsDatatable';
+import { EventsDatatable } from '../../components/EventsDatatable';
 
 import {
   PlacementsDatatable,

app/react/kubernetes/applications/DetailsView/ApplicationEventsDatatable.tsx

@@ -2,6 +2,7 @@ import { useCurrentStateAndParams } from '@uirouter/react';
 import { useMemo } from 'react';
 
 import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { useTableState } from '@@/datatables/useTableState';
 
@@ -10,9 +11,9 @@ import {
   useApplicationPods,
   useApplicationServices,
 } from '../application.queries';
-import { EventsDatatable } from '../../components/KubernetesEventsDatatable';
-
-import { useNamespaceEventsQuery } from './useNamespaceEventsQuery';
+import { EventsDatatable } from '../../components/EventsDatatable';
+import { useEvents } from '../../queries/useEvents';
+import { AppKind } from '../types';
 
 const storageKey = 'k8sAppEventsDatatable';
 const settingsStore = createStore(storageKey, { id: 'Date', desc: true });
@@ -23,41 +24,73 @@ export function ApplicationEventsDatatable() {
     params: {
       namespace,
       name,
-      'resource-type': resourceType,
+      'resource-type': appKind,
       endpointId: environmentId,
     },
   } = useCurrentStateAndParams();
 
+  const { relatedEvents, isInitialLoading } = useApplicationEvents(
+    environmentId,
+    namespace,
+    name,
+    appKind,
+    {
+      autoRefreshRate: tableState.autoRefreshRate,
+    }
+  );
+
+  return (
+    <EventsDatatable
+      dataset={relatedEvents}
+      tableState={tableState}
+      isLoading={isInitialLoading}
+      data-cy="k8sAppDetail-eventsTable"
+      noWidget
+    />
+  );
+}
+
+export function useApplicationEvents(
+  environmentId: EnvironmentId,
+  namespace: string,
+  name: string,
+  appKind?: AppKind,
+  options?: { autoRefreshRate?: number; yaml?: boolean }
+) {
   const { data: application, ...applicationQuery } = useApplication(
     environmentId,
     namespace,
     name,
-    resourceType
+    appKind
   );
-  const { data: services, ...servicesQuery } = useApplicationServices(
+  const servicesQuery = useApplicationServices(
     environmentId,
     namespace,
     name,
     application
   );
-  const { data: pods, ...podsQuery } = useApplicationPods(
+  const podsQuery = useApplicationPods(
     environmentId,
     namespace,
     name,
     application
   );
-  const { data: events, ...eventsQuery } = useNamespaceEventsQuery(
-    environmentId,
+
+  const { data: events, ...eventsQuery } = useEvents(environmentId, {
     namespace,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
+    queryOptions: {
+      autoRefreshRate: options?.autoRefreshRate
+        ? options.autoRefreshRate * 1000
+        : undefined,
+    },
+  });
 
   // related events are events that have the application id, or the id of a service or pod from the application
   const relatedEvents = useMemo(() => {
-    const serviceIds = services?.map((service) => service?.metadata?.uid);
-    const podIds = pods?.map((pod) => pod?.metadata?.uid);
+    const serviceIds = servicesQuery.data?.map(
+      (service) => service?.metadata?.uid
+    );
+    const podIds = podsQuery.data?.map((pod) => pod?.metadata?.uid);
     return (
       events?.filter(
         (event) =>
@@ -66,20 +99,13 @@ export function ApplicationEventsDatatable() {
           podIds?.includes(event.involvedObject.uid)
       ) || []
     );
-  }, [application?.metadata?.uid, events, pods, services]);
+  }, [application?.metadata?.uid, events, podsQuery.data, servicesQuery.data]);
 
-  return (
-    <EventsDatatable
-      dataset={relatedEvents}
-      tableState={tableState}
-      isLoading={
-        applicationQuery.isLoading ||
-        eventsQuery.isLoading ||
-        servicesQuery.isLoading ||
-        podsQuery.isLoading
-      }
-      data-cy="k8sAppDetail-eventsTable"
-      noWidget
-    />
-  );
+  const isInitialLoading =
+    applicationQuery.isInitialLoading ||
+    servicesQuery.isInitialLoading ||
+    podsQuery.isInitialLoading ||
+    eventsQuery.isInitialLoading;
+
+  return { relatedEvents, isInitialLoading };
 }

app/react/kubernetes/applications/DetailsView/useApplicationEventsTableData.tsx

@@ -10,8 +10,7 @@ import {
   useApplicationPods,
   useApplicationServices,
 } from '../application.queries';
-
-import { useNamespaceEventsQuery } from './useNamespaceEventsQuery';
+import { useEvents } from '../../queries/useEvents';
 
 const storageKey = 'k8sAppEventsDatatable';
 const settingsStore = createStore(storageKey, { id: 'Date', desc: true });
@@ -49,13 +48,12 @@ export function useApplicationEventsTableData() {
     name,
     application
   );
-  const { data: events, ...eventsQuery } = useNamespaceEventsQuery(
-    environmentId,
+  const { data: events, ...eventsQuery } = useEvents(environmentId, {
     namespace,
-    {
+    queryOptions: {
       autoRefreshRate: appEventsTableState.autoRefreshRate * 1000,
-    }
-  );
+    },
+  });
 
   // related events are events that have the application id, or the id of a service or pod from the application
   const appEventsData = useMemo(() => {

app/react/kubernetes/applications/DetailsView/useNamespaceEventsQuery.ts

@@ -1,53 +0,0 @@
-import { EventList } from 'kubernetes-types/core/v1';
-import { useQuery } from '@tanstack/react-query';
-
-import { EnvironmentId } from '@/react/portainer/environments/types';
-import axios from '@/portainer/services/axios';
-import { withError } from '@/react-tools/react-query';
-
-import { parseKubernetesAxiosError } from '../../axiosError';
-
-async function getNamespaceEvents(
-  environmentId: EnvironmentId,
-  namespace: string,
-  labelSelector?: string
-) {
-  try {
-    const { data } = await axios.get<EventList>(
-      `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/events`,
-      {
-        params: {
-          labelSelector,
-        },
-      }
-    );
-    return data.items;
-  } catch (e) {
-    throw parseKubernetesAxiosError(e, 'Unable to retrieve events');
-  }
-}
-
-export function useNamespaceEventsQuery(
-  environmentId: EnvironmentId,
-  namespace: string,
-  options?: { autoRefreshRate?: number },
-  labelSelector?: string
-) {
-  return useQuery(
-    [
-      'environments',
-      environmentId,
-      'kubernetes',
-      'events',
-      namespace,
-      labelSelector,
-    ],
-    () => getNamespaceEvents(environmentId, namespace, labelSelector),
-    {
-      ...withError('Unable to retrieve events'),
-      refetchInterval() {
-        return options?.autoRefreshRate ?? false;
-      },
-    }
-  );
-}