refactor(app): app events datatable [EE-5355] (#10024)

app/kubernetes/react/components/index.ts

@@ -15,6 +15,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
 import {
   ApplicationSummaryWidget,
   ApplicationDetailsWidget,
+  ApplicationEventsDatatable,
 } from '@/react/kubernetes/applications/DetailsView';
 import { withUserProvider } from '@/react/test-utils/withUserProvider';
 import { withFormValidation } from '@/react-tools/withFormValidation';
@@ -109,9 +110,21 @@ export const ngModule = angular
       []
     )
   )
+  .component(
+    'applicationEventsDatatable',
+    r2a(
+      withUIRouter(
+        withReactQuery(withUserProvider(ApplicationEventsDatatable))
+      ),
+      []
+    )
+  )
   .component(
     'kubernetesApplicationPlacementsDatatable',
-    r2a(withCurrentUser(PlacementsDatatable), ['dataset', 'onRefresh'])
+    r2a(withUIRouter(withCurrentUser(PlacementsDatatable)), [
+      'dataset',
+      'onRefresh',
+    ])
   );
 
 export const componentsModule = ngModule.name;

app/kubernetes/views/applications/edit/application.html

@@ -56,16 +56,7 @@
                   {{ ctrl.state.eventWarningCount }} warning(s)
                 </div>
               </uib-tab-heading>
-              <kubernetes-events-datatable
+              <application-events-datatable />
-                title-text="Events"
-                title-icon="history"
-                dataset="ctrl.events"
-                table-key="kubernetes.application.events"
-                order-by="Date"
-                reverse-order="true"
-                loading="ctrl.state.eventsLoading"
-                refresh-callback="ctrl.getEvents"
-              ></kubernetes-events-datatable>
             </uib-tab>
 
             <uib-tab index="3" ng-if="ctrl.application.Yaml" select="ctrl.showEditor()" classes="btn-sm">

app/react/components/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
-type BadgeType = 'success' | 'danger' | 'warn' | 'info';
+export type BadgeType = 'success' | 'danger' | 'warn' | 'info';
 
 export interface Props {
   type?: BadgeType;

app/react/components/Badge/index.ts

@@ -1 +1,2 @@
 export { Badge } from './Badge';
+export type { BadgeType } from './Badge';

app/react/components/datatables/ExpandableDatatableRow.tsx

@@ -24,7 +24,7 @@ export function ExpandableDatatableTableRow<D extends Record<string, unknown>>({
         cells={cells}
         onClick={expandOnClick ? () => row.toggleExpanded() : undefined}
       />
-      {row.getIsExpanded() && (
+      {row.getIsExpanded() && row.getCanExpand() && (
         <tr>
           {!disableSelect && <td />}
           <td colSpan={disableSelect ? cells.length : cells.length - 1}>

app/react/components/datatables/expand-column.tsx

@@ -9,7 +9,7 @@ export function buildExpandColumn<
   return {
     id: 'expand',
     header: ({ table }) => {
-      const hasExpandableItems = table.getExpandedRowModel().rows.length > 0;
+      const hasExpandableItems = table.getCanSomeRowsExpand();
 
       return (
         hasExpandableItems && (

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

@@ -0,0 +1,85 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { useMemo } from 'react';
+
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+
+import { useTableState } from '@@/datatables/useTableState';
+
+import {
+  useApplication,
+  useApplicationPods,
+  useApplicationServices,
+} from '../application.queries';
+import { EventsDatatable } from '../../components/KubernetesEventsDatatable';
+
+import { useNamespaceEventsQuery } from './useNamespaceEventsQuery';
+
+const storageKey = 'k8sAppEventsDatatable';
+const settingsStore = createStore(storageKey, { id: 'Date', desc: true });
+
+export function ApplicationEventsDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
+  const {
+    params: {
+      namespace,
+      name,
+      'resource-type': resourceType,
+      endpointId: environmentId,
+    },
+  } = useCurrentStateAndParams();
+
+  const { data: application, ...applicationQuery } = useApplication(
+    environmentId,
+    namespace,
+    name,
+    resourceType
+  );
+  const { data: services, ...servicesQuery } = useApplicationServices(
+    environmentId,
+    namespace,
+    name,
+    application
+  );
+  const { data: pods, ...podsQuery } = useApplicationPods(
+    environmentId,
+    namespace,
+    name,
+    application
+  );
+  const { data: events, ...eventsQuery } = useNamespaceEventsQuery(
+    environmentId,
+    namespace,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+
+  // 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);
+    return (
+      events?.filter(
+        (event) =>
+          event.involvedObject.uid === application?.metadata?.uid ||
+          serviceIds?.includes(event.involvedObject.uid) ||
+          podIds?.includes(event.involvedObject.uid)
+      ) || []
+    );
+  }, [application?.metadata?.uid, events, pods, services]);
+
+  return (
+    <EventsDatatable
+      dataset={relatedEvents}
+      tableState={tableState}
+      isLoading={
+        applicationQuery.isLoading ||
+        eventsQuery.isLoading ||
+        servicesQuery.isLoading ||
+        podsQuery.isLoading
+      }
+      data-cy="k8sAppDetail-eventsTable"
+      noWidget
+    />
+  );
+}

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

@@ -1,2 +1,3 @@
 export { ApplicationSummaryWidget } from './ApplicationSummaryWidget';
 export { ApplicationDetailsWidget } from './ApplicationDetailsWidget/ApplicationDetailsWidget';
+export { ApplicationEventsDatatable } from './ApplicationEventsDatatable';

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

@@ -0,0 +1,51 @@
+import { EventList } from 'kubernetes-types/core/v1';
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withError } from '@/react-tools/react-query';
+
+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 parseAxiosError(e as Error, '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;
+      },
+    }
+  );
+}

app/react/kubernetes/applications/ItemView/PlacementsDatatable/columns/status.tsx

@@ -5,7 +5,9 @@ import { Icon } from '@@/Icon';
 import { columnHelper } from './helper';
 
 export const status = columnHelper.accessor('AcceptsApplication', {
+  header: '',
   id: 'status',
+  enableSorting: false,
   cell: ({ getValue }) => {
     const acceptsApplication = getValue();
     return (

app/react/kubernetes/components/KubernetesEventsDatatable/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/KubernetesEventsDatatable/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/KubernetesEventsDatatable/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/KubernetesEventsDatatable/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/KubernetesEventsDatatable/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/KubernetesEventsDatatable/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/KubernetesEventsDatatable/columns/message.tsx

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

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

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

app/react/kubernetes/datatables/default-kube-datatable-store.ts

@@ -5,9 +5,16 @@ import {
   TableSettings,
 } from './DefaultDatatableSettings';
 
-export function createStore(storageKey: string) {
+export function createStore(
-  return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
+  storageKey: string,
-    ...refreshableSettings(set),
+  initialSortBy: string | { id: string; desc: boolean } = 'name'
-    ...systemResourcesSettings(set),
+) {
-  }));
+  return createPersistedStore<TableSettings>(
+    storageKey,
+    initialSortBy,
+    (set) => ({
+      ...refreshableSettings(set),
+      ...systemResourcesSettings(set),
+    })
+  );
 }