feat(helm): helm actions [r8s-259] (#715)

Co-authored-by: James Player <james.player@portainer.io>
Co-authored-by: Cara Ryan <cara.ryan@portainer.io>
Co-authored-by: stevensbkang <skan070@gmail.com>

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

@@ -1,5 +1,6 @@
 import { Event } from 'kubernetes-types/core/v1';
 import { History } from 'lucide-react';
+import { ReactNode } from 'react';
 
 import { IndexOptional } from '@/react/kubernetes/configs/types';
 import { TableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
@@ -16,6 +17,8 @@ type Props = {
   isLoading: boolean;
   'data-cy': string;
   noWidget?: boolean;
+  title?: ReactNode;
+  titleIcon?: ReactNode;
 };
 
 export function EventsDatatable({
@@ -24,6 +27,8 @@ export function EventsDatatable({
   isLoading,
   'data-cy': dataCy,
   noWidget,
+  title = 'Events',
+  titleIcon = History,
 }: Props) {
   return (
     <Datatable<IndexOptional<Event>>
@@ -31,8 +36,8 @@ export function EventsDatatable({
       columns={columns}
       settingsManager={tableState}
       isLoading={isLoading}
-      title="Events"
-      titleIcon={History}
+      title={title}
+      titleIcon={titleIcon}
       getRowId={(row) => row.metadata?.uid || ''}
       disableSelect
       renderTableSettings={() => (

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

@@ -1,4 +1,8 @@
+import { Row } from '@tanstack/react-table';
+import { Event } from 'kubernetes-types/core/v1';
+
 import { Badge, BadgeType } from '@@/Badge';
+import { filterHOC } from '@@/datatables/Filter';
 
 import { columnHelper } from './helper';
 
@@ -7,6 +11,14 @@ export const eventType = columnHelper.accessor('type', {
   cell: ({ getValue }) => (
     <Badge type={getBadgeColor(getValue())}>{getValue()}</Badge>
   ),
+
+  meta: {
+    filter: filterHOC('Filter by event type'),
+  },
+  enableColumnFilter: true,
+  filterFn: (row: Row<Event>, _: string, filterValue: string[]) =>
+    filterValue.length === 0 ||
+    (!!row.original.type && filterValue.includes(row.original.type)),
 });
 
 function getBadgeColor(status?: string): BadgeType {

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

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

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

@@ -1,8 +1,21 @@
+import { Row } from '@tanstack/react-table';
+import { Event } from 'kubernetes-types/core/v1';
+
+import { filterHOC } from '@@/datatables/Filter';
+
 import { columnHelper } from './helper';
 
 export const kind = columnHelper.accessor(
   (event) => event.involvedObject.kind,
   {
     header: 'Kind',
+    meta: {
+      filter: filterHOC('Filter by kind'),
+    },
+    enableColumnFilter: true,
+    filterFn: (row: Row<Event>, _: string, filterValue: string[]) =>
+      filterValue.length === 0 ||
+      (!!row.original.involvedObject.kind &&
+        filterValue.includes(row.original.involvedObject.kind)),
   }
 );

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

@@ -0,0 +1,16 @@
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (event) => event.involvedObject.name ?? '-',
+  {
+    header: 'Name',
+    cell: ({ getValue }) => {
+      const name = getValue();
+      return (
+        <span title={name} className="ellipsis max-w-sm">
+          {name}
+        </span>
+      );
+    },
+  }
+);