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

Co-authored-by: testa113 <testa113>

app/react/kubernetes/components/EventsDatatable/EventsDatatable.tsx

@@ -0,0 +1,51 @@
+import { Event } from 'kubernetes-types/core/v1';
+import { History } from 'lucide-react';
+
+import { IndexOptional } from '@/react/kubernetes/configs/types';
+import { TableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { TableState } from '@@/datatables/useTableState';
+
+import { columns } from './columns';
+
+type Props = {
+  dataset: Event[];
+  tableState: TableState<TableSettings>;
+  isLoading: boolean;
+  'data-cy': string;
+  noWidget?: boolean;
+};
+
+export function EventsDatatable({
+  dataset,
+  tableState,
+  isLoading,
+  'data-cy': dataCy,
+  noWidget,
+}: Props) {
+  return (
+    <Datatable<IndexOptional<Event>>
+      dataset={dataset}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={isLoading}
+      emptyContentLabel="No event available."
+      title="Events"
+      titleIcon={History}
+      getRowId={(row) => row.metadata?.uid || ''}
+      disableSelect
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={(value) => tableState.setAutoRefreshRate(value)}
+          />
+        </TableSettingsMenu>
+      )}
+      data-cy={dataCy}
+      noWidget={noWidget}
+    />
+  );
+}

app/react/kubernetes/components/EventsDatatable/ResourceEventsDatatable.tsx

@@ -0,0 +1,53 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { useEvents } from '@/react/kubernetes/queries/useEvents';
+import { EventsDatatable } from '@/react/kubernetes/components/EventsDatatable';
+
+type Props = {
+  storageKey: string;
+  /** if undefined, all resources for the namespace (or cluster are returned) */
+  resourceId?: string;
+  /** if undefined, events are fetched for the cluster */
+  namespace?: string;
+};
+
+/** ResourceEventsDatatable returns the EventsDatatable for all events that relate to a specific resource id */
+export function ResourceEventsDatatable({
+  storageKey,
+  resourceId,
+  namespace,
+}: Props) {
+  const tableState = useKubeStore(storageKey, {
+    id: 'Date',
+    desc: true,
+  });
+
+  const {
+    params: { endpointId },
+  } = useCurrentStateAndParams();
+
+  const params = resourceId
+    ? { fieldSelector: `involvedObject.uid=${resourceId}` }
+    : {};
+  const resourceEventsQuery = useEvents(endpointId, {
+    namespace,
+    params,
+    queryOptions: {
+      autoRefreshRate: tableState.autoRefreshRate
+        ? tableState.autoRefreshRate * 1000
+        : undefined,
+    },
+  });
+  const nodeEvents = resourceEventsQuery.data || [];
+
+  return (
+    <EventsDatatable
+      dataset={nodeEvents}
+      tableState={tableState}
+      isLoading={resourceEventsQuery.isLoading}
+      data-cy="k8sNodeDetail-eventsTable"
+      noWidget
+    />
+  );
+}

app/react/kubernetes/components/EventsDatatable/columns/date.tsx

@@ -0,0 +1,11 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const date = columnHelper.accessor(
+  (event) => formatDate(event.lastTimestamp || event.eventTime),
+  {
+    header: 'Date',
+    id: 'Date',
+  }
+);

app/react/kubernetes/components/EventsDatatable/columns/eventType.tsx

@@ -0,0 +1,21 @@
+import { Badge, BadgeType } from '@@/Badge';
+
+import { columnHelper } from './helper';
+
+export const eventType = columnHelper.accessor('type', {
+  header: 'Type',
+  cell: ({ getValue }) => (
+    <Badge type={getBadgeColor(getValue())}>{getValue()}</Badge>
+  ),
+});
+
+function getBadgeColor(status?: string): BadgeType {
+  switch (status?.toLowerCase()) {
+    case 'normal':
+      return 'info';
+    case 'warning':
+      return 'warn';
+    default:
+      return 'danger';
+  }
+}

app/react/kubernetes/components/EventsDatatable/columns/helper.ts

@@ -0,0 +1,4 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { Event } from 'kubernetes-types/core/v1';
+
+export const columnHelper = createColumnHelper<Event>();

app/react/kubernetes/components/EventsDatatable/columns/index.ts

@@ -0,0 +1,6 @@
+import { date } from './date';
+import { kind } from './kind';
+import { eventType } from './eventType';
+import { message } from './message';
+
+export const columns = [date, kind, eventType, message];

app/react/kubernetes/components/EventsDatatable/columns/kind.tsx

@@ -0,0 +1,8 @@
+import { columnHelper } from './helper';
+
+export const kind = columnHelper.accessor(
+  (event) => event.involvedObject.kind,
+  {
+    header: 'Kind',
+  }
+);

app/react/kubernetes/components/EventsDatatable/columns/message.tsx

@@ -0,0 +1,5 @@
+import { columnHelper } from './helper';
+
+export const message = columnHelper.accessor('message', {
+  header: 'Message',
+});

app/react/kubernetes/components/EventsDatatable/index.ts

@@ -0,0 +1 @@
+export { EventsDatatable } from './EventsDatatable';