Events page refactoring with entity data table usage (#20831)

changelog/unreleased/issue-20881.toml

@@ -0,0 +1,5 @@
+type = "a"
+message = "Implement common entity data table with sorting and filtering for events page"
+
+issues = ["20881"]
+pulls = ["20831", "graylog-plugin-enterprise#9020"]

graylog2-web-interface/src/components/events/Constants.ts

@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import type { Sort, Attribute } from 'stores/PaginationTypes';
+
+export const EVENTS_ENTITY_TABLE_ID = 'events';
+
+export const detailsAttributes: Array<Attribute> = [
+  {
+    id: 'id',
+    title: 'ID',
+    type: 'STRING',
+    sortable: true,
+  },
+  {
+    id: 'priority',
+    title: 'Priority',
+    type: 'STRING',
+    sortable: true,
+    searchable: false,
+  },
+  {
+    id: 'timestamp',
+    title: 'Timestamp',
+    type: 'DATE',
+    sortable: true,
+    filterable: true,
+  },
+  {
+    id: 'event_definition_id',
+    title: 'Event Definition',
+    type: 'STRING',
+    sortable: false,
+    searchable: false,
+  },
+  {
+    id: 'event_definition_type',
+    title: 'Event Definition Type',
+    type: 'STRING',
+    sortable: true,
+  },
+  {
+    id: 'remediation_steps',
+    title: 'Remediation Steps',
+    sortable: false,
+  },
+  {
+    id: 'timerange_start',
+    title: 'Aggregation time range',
+  },
+  {
+    id: 'key',
+    title: 'Key',
+    type: 'STRING',
+    sortable: true,
+    searchable: false,
+  },
+  {
+    id: 'fields',
+    title: 'Additional Fields',
+    type: 'STRING',
+    sortable: false,
+  },
+  {
+    id: 'group_by_fields',
+    title: 'Group-By Fields',
+    sortable: false,
+  },
+];
+export const additionalAttributes: Array<Attribute> = [
+  {
+    id: 'message',
+    title: 'Description',
+    type: 'STRING',
+    sortable: false,
+    searchable: false,
+  },
+  {
+    id: 'alert',
+    title: 'Type',
+    type: 'BOOLEAN',
+    sortable: true,
+    filterable: true,
+    filter_options: [{ value: 'false', title: 'Event' }, { value: 'true', title: 'Alert' }],
+  },
+  ...detailsAttributes,
+];
+
+export const eventsTableElements = {
+  defaultLayout: {
+    entityTableId: EVENTS_ENTITY_TABLE_ID,
+    defaultPageSize: 20,
+    defaultSort: { attributeId: 'timestamp', direction: 'desc' } as Sort,
+    defaultDisplayedAttributes: [
+      'priority',
+      'message',
+      'key',
+      'alert',
+      'event_definition_id',
+      'event_definition_type',
+      'timestamp',
+    ],
+  },
+  columnOrder: [
+    'message',
+    'id',
+    'priority',
+    'key',
+    'alert',
+    'event_definition_id',
+    'event_definition_type',
+    'timestamp',
+    'fields',
+    'group_by_fields',
+    'remediation_steps',
+    'timerange_start',
+  ],
+};

graylog2-web-interface/src/components/events/EventsEntityTable.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useCallback } from 'react';
+
+import useTableElements from 'components/events/events/hooks/useTableComponents';
+import { eventsTableElements } from 'components/events/Constants';
+import PaginatedEntityTable from 'components/common/PaginatedEntityTable';
+import FilterValueRenderers from 'components/events/FilterValueRenderers';
+import fetchEvents, { keyFn } from 'components/events/fetchEvents';
+import type { SearchParams } from 'stores/PaginationTypes';
+import type { Event, EventsAdditionalData } from 'components/events/events/types';
+import useQuery from 'routing/useQuery';
+import useColumnRenderers from 'components/events/events/ColumnRenderers';
+
+import QueryHelper from '../common/QueryHelper';
+
+const EventsEntityTable = () => {
+  const { stream_id: streamId } = useQuery();
+
+  const columnRenderers = useColumnRenderers();
+  const _fetchEvents = useCallback((searchParams: SearchParams) => fetchEvents(searchParams, streamId as string), [streamId]);
+  const { entityActions, expandedSections } = useTableElements({ defaultLayout: eventsTableElements.defaultLayout });
+
+  return (
+    <PaginatedEntityTable<Event, EventsAdditionalData> humanName="events"
+                                                       columnsOrder={eventsTableElements.columnOrder}
+                                                       queryHelpComponent={<QueryHelper entityName="events" />}
+                                                       entityActions={entityActions}
+                                                       tableLayout={eventsTableElements.defaultLayout}
+                                                       fetchEntities={_fetchEvents}
+                                                       keyFn={keyFn}
+                                                       actionsCellWidth={110}
+                                                       expandedSectionsRenderer={expandedSections}
+                                                       entityAttributesAreCamelCase={false}
+                                                       filterValueRenderers={FilterValueRenderers}
+                                                       columnRenderers={columnRenderers} />
+  );
+};
+
+export default EventsEntityTable;

graylog2-web-interface/src/components/events/ExpandedSection.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useMemo } from 'react';
+
+import useTableLayout from 'components/common/EntityDataTable/hooks/useTableLayout';
+import { useTableFetchContext } from 'components/common/PaginatedEntityTable';
+import type { Attribute } from 'stores/PaginationTypes';
+import type { Event, EventsAdditionalData } from 'components/events/events/types';
+import useMetaDataContext from 'components/common/EntityDataTable/hooks/useMetaDataContext';
+import EventDetailsTable from 'components/events/events/EventDetailsTable';
+
+type Props = {
+  defaultLayout: Parameters<typeof useTableLayout>[0],
+  event: Event,
+}
+
+const ExpandedSection = ({ defaultLayout, event }: Props) => {
+  const { meta } = useMetaDataContext<EventsAdditionalData>();
+  const { layoutConfig: { displayedAttributes }, isInitialLoading } = useTableLayout(defaultLayout);
+  const { attributes } = useTableFetchContext();
+
+  const nonDisplayedAttributes = useMemo(() => {
+    if (isInitialLoading) return [];
+
+    const displayedAttributesSet = new Set(displayedAttributes);
+
+    return attributes.filter(({ id }) => !displayedAttributesSet.has(id)).map(({ id, title }: Attribute) => ({ id, title }));
+  }, [attributes, displayedAttributes, isInitialLoading]);
+
+  if (!nonDisplayedAttributes.length) return <em>No further details</em>;
+
+  return <EventDetailsTable attributesList={nonDisplayedAttributes} event={event} meta={meta} />;
+};
+
+export default ExpandedSection;

graylog2-web-interface/src/components/events/FilterValueRenderers.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+
+import EventTypeLabel from 'components/events/events/EventTypeLabel';
+
+const FilterValueRenderers = {
+  alert: (value: 'true' | 'false') => (
+    <EventTypeLabel isAlert={value === 'true'} />
+  ),
+};
+
+export default FilterValueRenderers;