Add pluggable entity table column (#23132)

* add pluggable entity actions hook

* use pluggable entity actions

* add pluggable entity table elements

* add pluggableColumns to dashboard, search, events

* fix linter

* Update graylog2-web-interface/src/components/permissions/types.ts

Co-authored-by: Laura Bergenthal-Grotlüschen <[email protected]>

* Update feature-flag.config

* add pluggable expanded sections to search

---------

Co-authored-by: Laura Bergenthal-Grotlüschen <[email protected]>
Co-authored-by: Mohamed OULD HOCINE <[email protected]>

Author: 3 people

graylog2-server/src/main/resources/org/graylog2/featureflag/feature-flag.config

@@ -101,4 +101,4 @@ show_security_events_in_pedt=off
 show_executive_dashboard_page=off
 
 # Show collections
-collections=on
+collections=off

graylog2-web-interface/src/components/event-definitions/constants.ts

@@ -14,19 +14,50 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import type { Sort } from 'stores/PaginationTypes';
+import type { Attribute, Sort } from 'stores/PaginationTypes';
 
 export const SYSTEM_EVENT_DEFINITION_TYPE = 'system-notifications-v1';
 
-export const DEFAULT_LAYOUT = {
-  entityTableId: 'event_definitions',
-  defaultPageSize: 20,
-  defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
-  defaultDisplayedAttributes: ['title', 'description', 'priority', 'scheduling', 'status', 'matched_at'],
-};
-export const COLUMNS_ORDER = ['title', 'description', 'priority', 'matched_at', 'status', 'scheduling'];
+const getEventDefinitionTableElements = (
+  pluggableAttributes?: {
+    attributeNames?: Array<string>;
+    attributes?: Array<Attribute>;
+  }) => {
+  const defaultLayout = {
+    entityTableId: 'event_definitions',
+    defaultPageSize: 20,
+    defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
+    defaultDisplayedAttributes: [
+      'title',
+      'description',
+      'priority',
+      'scheduling',
+      'status',
+      'matched_at',
+      ...(pluggableAttributes?.attributeNames || []),
+    ],
+  };
+  const columnOrder = [
+    'title',
+    'description',
+    'priority',
+    'matched_at',
+    'status',
+    'scheduling',
+    ...(pluggableAttributes?.attributeNames || []),
+  ];
 
-export const ADDITIONAL_ATTRIBUTES = [
-  { id: 'scheduling', title: 'Scheduling', sortable: false },
-  { id: 'matched_at', title: 'Last Matched', sortable: true },
-];
+  const additionalAttributes = [
+    { id: 'scheduling', title: 'Scheduling', sortable: false },
+    { id: 'matched_at', title: 'Last Matched', sortable: true },
+    ...(pluggableAttributes?.attributes || []),
+  ];
+
+  return {
+    defaultLayout,
+    columnOrder,
+    additionalAttributes,
+  };
+}
+
+export default getEventDefinitionTableElements;

graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionsContainer.tsx

@@ -15,44 +15,48 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
+import { useMemo } from 'react';
 
 import { QueryHelper, RelativeTime, PaginatedEntityTable } from 'components/common';
 import { Link } from 'components/common/router';
 import Routes from 'routing/Routes';
 import FilterValueRenderers from 'components/streams/StreamsOverview/FilterValueRenderers';
 import { keyFn, fetchEventDefinitions } from 'components/event-definitions/hooks/useEventDefinitions';
 import BulkActions from 'components/event-definitions/event-definitions/BulkActions';
+import usePluggableEntityTableElements from 'hooks/usePluggableEntityTableElements';
+import type { ColumnRenderersByAttribute } from 'components/common/EntityDataTable/types';
 
 import EventDefinitionActions from './EventDefinitionActions';
 import SchedulingCell from './SchedulingCell';
 import StatusCell from './StatusCell';
 
 import type { EventDefinition } from '../event-definitions-types';
-import { DEFAULT_LAYOUT, ADDITIONAL_ATTRIBUTES, COLUMNS_ORDER } from '../constants';
+import getEventDefinitionTableElements from '../constants';
 
-const customColumnRenderers = {
+const getCustomColumnRenderers = (pluggableColumnRenderers?: ColumnRenderersByAttribute<EventDefinition>) => ({
   attributes: {
     title: {
-      renderCell: (title: string, eventDefinition) => (
+      renderCell: (title: string, eventDefinition: EventDefinition) => (
         <Link to={Routes.ALERTS.DEFINITIONS.show(eventDefinition.id)}>{title}</Link>
       ),
     },
     matched_at: {
-      renderCell: (_matched_at: string, eventDefinition) =>
+      renderCell: (_matched_at: string, eventDefinition: EventDefinition) =>
         eventDefinition.matched_at ? <RelativeTime dateTime={eventDefinition.matched_at} /> : 'Never',
     },
     scheduling: {
-      renderCell: (_scheduling: string, eventDefinition) => <SchedulingCell definition={eventDefinition} />,
+      renderCell: (_scheduling: string, eventDefinition: EventDefinition) => <SchedulingCell definition={eventDefinition} />,
     },
     status: {
-      renderCell: (_status: string, eventDefinition) => <StatusCell eventDefinition={eventDefinition} />,
+      renderCell: (_status: string, eventDefinition: EventDefinition) => <StatusCell eventDefinition={eventDefinition} />,
       staticWidth: 100,
     },
     priority: {
       staticWidth: 100,
     },
+    ...(pluggableColumnRenderers || {}),
   },
-};
+});
 
 const bulkSelection = {
   actions: <BulkActions />,
@@ -61,21 +65,37 @@ const renderEventDefinitionActions = (listItem: EventDefinition) => (
   <EventDefinitionActions eventDefinition={listItem} />
 );
 
-const EventDefinitionsContainer = () => (
-  <PaginatedEntityTable<EventDefinition>
-    humanName="event definitions"
-    columnsOrder={COLUMNS_ORDER}
-    additionalAttributes={ADDITIONAL_ATTRIBUTES}
-    queryHelpComponent={<QueryHelper entityName="event definition" />}
-    tableLayout={DEFAULT_LAYOUT}
-    fetchEntities={fetchEventDefinitions}
-    entityActions={renderEventDefinitionActions}
-    keyFn={keyFn}
-    entityAttributesAreCamelCase={false}
-    filterValueRenderers={FilterValueRenderers}
-    columnRenderers={customColumnRenderers}
-    bulkSelection={bulkSelection}
-  />
-);
+const EventDefinitionsContainer = () => {
+  const {
+    pluggableColumnRenderers,
+    pluggableAttributes,
+    pluggableExpandedSections
+  } = usePluggableEntityTableElements<EventDefinition>(null, 'event_definition');
+  const { defaultLayout, columnOrder, additionalAttributes } = getEventDefinitionTableElements(pluggableAttributes);
+  const expandedSections = useMemo(
+    () => ({
+      ...pluggableExpandedSections,
+    }),
+    [pluggableExpandedSections],
+  );
+
+  return (
+    <PaginatedEntityTable<EventDefinition>
+      humanName="event definitions"
+      columnsOrder={columnOrder}
+      additionalAttributes={additionalAttributes}
+      queryHelpComponent={<QueryHelper entityName="event definition" />}
+      tableLayout={defaultLayout}
+      fetchEntities={fetchEventDefinitions}
+      entityActions={renderEventDefinitionActions}
+      keyFn={keyFn}
+      entityAttributesAreCamelCase={false}
+      expandedSectionsRenderer={expandedSections}
+      filterValueRenderers={FilterValueRenderers}
+      columnRenderers={getCustomColumnRenderers(pluggableColumnRenderers)}
+      bulkSelection={bulkSelection}
+    />
+  );
+};
 
 export default EventDefinitionsContainer;

graylog2-web-interface/src/components/event-notifications/event-notifications/Constants.ts

@@ -14,13 +14,31 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import type { Sort } from 'stores/PaginationTypes';
+import type { Attribute, Sort } from 'stores/PaginationTypes';
 
-export const DEFAULT_LAYOUT = {
-  entityTableId: 'event_notifications',
-  defaultPageSize: 20,
-  defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
-  defaultDisplayedAttributes: ['title', 'description', 'type', 'created_at'],
-};
+const getEventNotificationTableElements = (
+  pluggableAttributes?: {
+    attributeNames?: Array<string>;
+    attributes?: Array<Attribute>;
+  }) => {
+  const DEFAULT_LAYOUT = {
+    entityTableId: 'event_notifications',
+    defaultPageSize: 20,
+    defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
+    defaultDisplayedAttributes: ['title', 'description', 'type', 'created_at', ...(pluggableAttributes?.attributeNames || [])],
+  };
 
-export const COLUMNS_ORDER = ['title', 'description', 'type', 'created_at'];
+  const COLUMNS_ORDER = ['title', 'description', 'type', 'created_at', ...(pluggableAttributes?.attributeNames || [])];
+
+  const additionalAttributes = [
+    ...(pluggableAttributes?.attributes || []),
+  ];
+
+  return {
+    defaultLayout: DEFAULT_LAYOUT,
+    columnOrder: COLUMNS_ORDER,
+    additionalAttributes,
+  };
+}
+
+export default getEventNotificationTableElements;

graylog2-web-interface/src/components/event-notifications/event-notifications/EventNotificationsContainer.tsx

@@ -21,21 +21,23 @@ import { useQueryClient } from '@tanstack/react-query';
 import type { ColumnRenderers } from 'components/common/EntityDataTable';
 import { QueryHelper, PaginatedEntityTable } from 'components/common';
 import type { EventNotification, TestResults } from 'stores/event-notifications/EventNotificationsStore';
-import { DEFAULT_LAYOUT, COLUMNS_ORDER } from 'components/event-notifications/event-notifications/Constants';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import { getPathnameWithoutId } from 'util/URLUtils';
 import useLocation from 'routing/useLocation';
+import type { ColumnRenderersByAttribute } from 'components/common/EntityDataTable/types';
+import usePluggableEntityTableElements from 'hooks/usePluggableEntityTableElements';
 
 import NotificationConfigTypeCell from './NotificationConfigTypeCell';
 import NotificationTitle from './NotificationTitle';
 import EventNotificationActions from './EventNotificationActions';
 import BulkActions from './BulkActions';
+import getEventNotificationTableElements from './Constants';
 
 import { keyFn, fetchEventNotifications } from '../hooks/useEventNotifications';
 import useNotificationTest from '../hooks/useNotificationTest';
 
-const customColumnRenderers = (testResults: TestResults): ColumnRenderers<EventNotification> => ({
+const customColumnRenderers = (testResults: TestResults, pluggableColumnRenderers?: ColumnRenderersByAttribute<EventNotification>): ColumnRenderers<EventNotification> => ({
   attributes: {
     title: {
       renderCell: (_title: string, notification) => (
@@ -45,14 +47,22 @@ const customColumnRenderers = (testResults: TestResults): ColumnRenderers<EventN
     type: {
       renderCell: (_type: string, notification) => <NotificationConfigTypeCell notification={notification} />,
     },
+    ...(pluggableColumnRenderers || {}),
   },
 });
 
 const EventNotificationsContainer = () => {
   const { isLoadingTest, testResults, getNotificationTest } = useNotificationTest();
   const sendTelemetry = useSendTelemetry();
   const { pathname } = useLocation();
-  const columnRenderers = useMemo(() => customColumnRenderers(testResults), [testResults]);
+  const {
+    pluggableColumnRenderers,
+    pluggableAttributes,
+    pluggableExpandedSections
+  } = usePluggableEntityTableElements<EventNotification>(null, 'notification');
+
+  const { defaultLayout, columnOrder, additionalAttributes } = getEventNotificationTableElements(pluggableAttributes);
+  const columnRenderers = useMemo(() => customColumnRenderers(testResults, pluggableColumnRenderers), [testResults, pluggableColumnRenderers]);
   const queryClient = useQueryClient();
 
   const handleTest = useCallback(
@@ -68,6 +78,12 @@ const EventNotificationsContainer = () => {
     },
     [getNotificationTest, pathname, queryClient, sendTelemetry],
   );
+  const expandedSections = useMemo(
+    () => ({
+      ...pluggableExpandedSections,
+    }),
+    [pluggableExpandedSections],
+  );
 
   const renderEvenNotificationActions = useCallback(
     (listItem: EventNotification) => (
@@ -79,11 +95,13 @@ const EventNotificationsContainer = () => {
   return (
     <PaginatedEntityTable<EventNotification>
       humanName="event notifications"
-      columnsOrder={COLUMNS_ORDER}
+      columnsOrder={columnOrder}
       queryHelpComponent={<QueryHelper entityName="notification" />}
       entityActions={renderEvenNotificationActions}
-      tableLayout={DEFAULT_LAYOUT}
+      tableLayout={defaultLayout}
       fetchEntities={fetchEventNotifications}
+      additionalAttributes={additionalAttributes}
+      expandedSectionsRenderer={expandedSections}
       keyFn={keyFn}
       bulkSelection={{ actions: <BulkActions /> }}
       entityAttributesAreCamelCase

graylog2-web-interface/src/components/permissions/type.ts

@@ -17,6 +17,10 @@
 
 import type React from 'react';
 
+import type { Attribute } from 'stores/PaginationTypes';
+import type { ColumnRenderer, EntityBase, ExpandedSectionRenderer } from 'components/common/EntityDataTable/types';
+import type { EntitySharePayload } from 'actions/permissions/EntityShareActions';
+
 export type ModalHandler = {
   toggle?: () => void;
   onConfirm?: () => void;
@@ -42,8 +46,31 @@ export type EntitySharedAction<T, M> = {
   useCondition?: () => boolean;
 };
 
+export type TableElement<T extends EntityBase> = {
+  attributeName: string;
+  attributes: Array<Attribute>;
+  getColumnRenderer: (entityType: string) => ColumnRenderer<T, unknown>;
+  expandedSection: (entityType: string) => {[sectionName: string]: ExpandedSectionRenderer<T>};
+  tableCellComponent: React.ComponentType<{
+    entityId: string;
+    entityType: string;
+  }>;
+  useCondition: () => true;
+}
+
 declare module 'graylog-web-plugin/plugin' {
   export interface PluginExports {
     'components.shared.entityActions'?: Array<EntitySharedAction<unknown, unknown>>;
+    'components.shared.entityTableElements'?: Array<TableElement<EntityBase>>;
+    'components.collection'?: {
+      AddCollectionFormGroup: React.ComponentType<{
+        entityType?: string;
+        label?: React.ReactElement | string;
+        name?: string;
+        error?: any;
+        value?: Array<string>;
+        onChange: (values: Pick<EntitySharePayload, 'selected_collections'>) => void;
+      }>;
+    };
   }
 }