Feat/add refresh buton to events page

changelog/unreleased/issue-20881.toml

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

changelog/unreleased/pr-20831.toml

@@ -0,0 +1,5 @@
+type = "a"
+message = "Add auto refresh to events page"
+
+issues = ["graylog-plugin-enterprise#8661"]
+pulls = ["20896"]

graylog2-web-interface/src/components/common/CommonRefreshControls.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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 { styled } from 'styled-components';
+
+import { ProgressAnimation, Icon, Spinner, HoverForHelp } from 'components/common/index';
+import { Button, DropdownButton, MenuItem, ButtonGroup } from 'components/bootstrap';
+import ReadableDuration from 'components/common/ReadableDuration';
+import useAutoRefresh from 'views/hooks/useAutoRefresh';
+import { durationToMS } from 'views/hooks/useDefaultIntervalForRefresh';
+
+const FlexibleButtonGroup = styled(ButtonGroup)`
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  > .btn-group {
+    .btn:first-child {
+      max-width: 100%;
+    }
+  }
+`;
+
+const ButtonLabel = () => {
+  const { refreshConfig } = useAutoRefresh();
+
+  if (!refreshConfig?.enabled) {
+    return <>Not updating</>;
+  }
+
+  return (
+    <>
+      Every <ReadableDuration duration={refreshConfig.interval} />
+    </>
+  );
+};
+
+type Props = {
+  disable: boolean,
+  intervalOptions: Array<[string, string]>,
+  isLoadingMinimumInterval: boolean,
+  minimumRefreshInterval: string,
+  defaultInterval: string,
+  onSelectInterval?: (interval: string) => void,
+  onToggle?: (enabled: boolean) => void,
+  onEnable?: () => void,
+  onDisable?: () => void,
+  humanName: string,
+}
+
+const CommonRefreshControls = ({ humanName, disable, onToggle = null, onEnable = null, onDisable = null, intervalOptions, onSelectInterval = null, isLoadingMinimumInterval, minimumRefreshInterval, defaultInterval }: Props) => {
+  const { refreshConfig, startAutoRefresh, stopAutoRefresh, animationId } = useAutoRefresh();
+
+  const selectInterval = useCallback((interval: string) => {
+    startAutoRefresh(durationToMS(interval));
+
+    if (typeof onSelectInterval === 'function') {
+      onSelectInterval(interval);
+    }
+  }, [onSelectInterval, startAutoRefresh]);
+
+  const toggleEnable = useCallback(() => {
+    if (!defaultInterval && !refreshConfig?.interval) {
+      return;
+    }
+
+    if (typeof onToggle === 'function') {
+      onToggle(!refreshConfig?.enabled);
+    }
+
+    if (refreshConfig?.enabled) {
+      stopAutoRefresh();
+
+      if (typeof onDisable === 'function') {
+        onDisable();
+      }
+    } else {
+      startAutoRefresh(refreshConfig?.interval ?? durationToMS(defaultInterval));
+
+      if (typeof onEnable === 'function') {
+        onEnable();
+      }
+    }
+  }, [defaultInterval, onDisable, onEnable, onToggle, refreshConfig?.enabled, refreshConfig?.interval, startAutoRefresh, stopAutoRefresh]);
+
+  return (
+    <FlexibleButtonGroup aria-label={`Refresh ${humanName} Controls`}>
+      {(refreshConfig?.enabled && animationId) && (
+        <ProgressAnimation key={`${refreshConfig.interval}-${animationId}`}
+                           $animationDuration={refreshConfig.interval}
+                           $increase={false} />
+      )}
+
+      <Button onClick={toggleEnable}
+              title={refreshConfig?.enabled ? 'Pause Refresh' : 'Start Refresh'}
+              disabled={disable || isLoadingMinimumInterval || !defaultInterval}>
+        <Icon name={refreshConfig?.enabled ? 'pause' : 'update'} />
+      </Button>
+
+      <DropdownButton title={<ButtonLabel />}
+                      disabled={disable}
+                      id="refresh-options-dropdown">
+        {isLoadingMinimumInterval && <Spinner />}
+        {!isLoadingMinimumInterval && intervalOptions.map(([interval, label]) => {
+          const isBelowMinimum = durationToMS(interval) < durationToMS(minimumRefreshInterval);
+
+          return (
+            <MenuItem key={`RefreshControls-${label}`}
+                      onClick={() => selectInterval(interval)}
+                      disabled={isBelowMinimum}>
+              {label}
+              {isBelowMinimum && (
+                <HoverForHelp displayLeftMargin>
+                  Interval of <ReadableDuration duration={interval} /> ({interval}) is below configured minimum interval
+                  of <ReadableDuration duration={minimumRefreshInterval} /> ({minimumRefreshInterval}).
+                </HoverForHelp>
+              )}
+            </MenuItem>
+          );
+        })}
+      </DropdownButton>
+    </FlexibleButtonGroup>
+  );
+};
+
+export default CommonRefreshControls;

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

@@ -0,0 +1,168 @@
+/*
+ * 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 type Immutable from 'immutable';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+import isEmpty from 'lodash/isEmpty';
+
+import { isPermitted } from 'util/PermissionsMixin';
+import type { ColumnRenderers } from 'components/common/EntityDataTable';
+import EventTypeLabel from 'components/events/events/EventTypeLabel';
+import { Link } from 'components/common/router';
+import Routes from 'routing/Routes';
+import type { Event } from 'components/events/events/types';
+import PriorityName from 'components/events/events/PriorityName';
+import usePluginEntities from 'hooks/usePluginEntities';
+import EventFields from 'components/events/events/EventFields';
+import { MarkdownPreview } from 'components/common/MarkdownEditor';
+import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections';
+import type { EventsAdditionalData } from 'components/events/fetchEvents';
+import useMetaDataContext from 'components/common/EntityDataTable/hooks/useMetaDataContext';
+import { Timestamp } from 'components/common';
+
+const EventDefinitionRenderer = ({ eventDefinitionId, permissions }: { eventDefinitionId: string, permissions: Immutable.List<string> }) => {
+  const { meta: { context: eventsContext } } = useMetaDataContext<EventsAdditionalData>();
+  const eventDefinitionContext = eventsContext?.event_definitions?.[eventDefinitionId];
+
+  if (!eventDefinitionContext) {
+    return <em>{eventDefinitionId}</em>;
+  }
+
+  return (
+    <>{isPermitted(permissions,
+      `eventdefinitions:edit:${eventDefinitionContext.id}`)
+      ? <Link to={Routes.ALERTS.DEFINITIONS.edit(eventDefinitionContext.id)}>{eventDefinitionContext.title}</Link>
+      : eventDefinitionContext.title}
+    </>
+  );
+};
+
+const EventDefinitionTypeRenderer = ({ type }: { type: unknown }) => {
+  const eventDefinitionTypes = usePluginEntities('eventDefinitionTypes');
+  const plugin = useMemo(() => {
+    if (type === undefined) {
+      return null;
+    }
+
+    return eventDefinitionTypes.find((edt) => edt.type === type);
+  }, [eventDefinitionTypes, type]);
+
+  return <>{(plugin && plugin.displayName) || type}</>;
+};
+
+const PriorityRenderer = ({ priority }: { priority: number }) => <PriorityName priority={priority} />;
+
+const FieldsRenderer = ({ fields }: { fields: Record<string, string> }) => (
+  isEmpty(fields)
+    ? <em>No additional Fields added to this Event.</em>
+    : <EventFields fields={fields} />
+);
+
+const GroupByFieldsRenderer = ({ groupByFields }: {groupByFields: Record<string, string> }) => (
+  isEmpty(groupByFields)
+    ? <em>No group-by fields on this Event.</em>
+    : <EventFields fields={groupByFields} />
+);
+
+const RemediationStepRenderer = ({ eventDefinitionId }: { eventDefinitionId: string }) => {
+  const { meta: { context: eventsContext } } = useMetaDataContext<EventsAdditionalData>();
+  const eventDefinitionContext = eventsContext?.event_definitions?.[eventDefinitionId];
+
+  return (
+    eventDefinitionContext?.remediation_steps ? (
+      <MarkdownPreview show
+                       withFullView
+                       noBorder
+                       noBackground
+                       value={eventDefinitionContext.remediation_steps} />
+    ) : (
+      <em>No remediation steps</em>
+    )
+  );
+};
+
+const StyledDiv = styled.div`
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const MessageRenderer = ({ message, eventId }: { message: string, eventId: string }) => {
+  const { toggleSection } = useExpandedSections();
+
+  const toggleExtraSection = () => toggleSection(eventId, 'restFieldsExpandedSection');
+
+  return <StyledDiv onClick={toggleExtraSection}>{message}</StyledDiv>;
+};
+
+const TimeRangeRenderer = ({ eventData }: { eventData: Event}) => eventData.timerange_start && eventData.timerange_end && (
+<div>
+  <Timestamp dateTime={eventData.timerange_start} />
+      &ensp;&mdash;&ensp;
+  <Timestamp dateTime={eventData.timerange_end} />
+</div>
+);
+
+const customColumnRenderers = (permissions: Immutable.List<string>): ColumnRenderers<Event> => ({
+  attributes: {
+    message: {
+      minWidth: 300,
+      renderCell: (_message: string, event) => <MessageRenderer message={_message} eventId={event.id} />,
+    },
+    key: {
+      renderCell: (_key: string) => <span>{_key || <em>No Key set for this Event.</em>}</span>,
+      staticWidth: 200,
+    },
+    id: {
+      staticWidth: 300,
+    },
+    alert: {
+      renderCell: (_alert: boolean) => <EventTypeLabel isAlert={_alert} />,
+      staticWidth: 100,
+    },
+    event_definition_id: {
+      renderCell: (_eventDefinitionId: string) => <EventDefinitionRenderer permissions={permissions} eventDefinitionId={_eventDefinitionId} />,
+    },
+    priority: {
+      renderCell: (_priority: number) => <PriorityRenderer priority={_priority} />,
+      staticWidth: 100,
+    },
+    event_definition_type: {
+      renderCell: (_type) => <EventDefinitionTypeRenderer type={_type} />,
+      staticWidth: 200,
+    },
+    fields: {
+      renderCell: (_fields: Record<string, string>) => <FieldsRenderer fields={_fields} />,
+      staticWidth: 400,
+    },
+    group_by_fields: {
+      renderCell: (groupByFields: Record<string, string>) => <GroupByFieldsRenderer groupByFields={groupByFields} />,
+      staticWidth: 400,
+    },
+    remediation_steps: {
+      renderCell: (_, event: Event) => <RemediationStepRenderer eventDefinitionId={event.event_definition_id} />,
+    },
+    timerange_start: {
+      renderCell: (_, event: Event) => <TimeRangeRenderer eventData={event} />,
+    },
+  },
+});
+
+export default customColumnRenderers;