Reduce time range on 'Show received messages' button (#5621)

* Reduce timerange for 'Show received messages' button

The default for a search when clicking on that button
was to search for all messages.
Executing this search can put a significant load on ES/OS and also
can lead to OOM situations.

Instead of searching all messages, we are searching only
messages in the past 5 minutes and the next future hour.

Fixes #5620
Fixes #4533
Fixes #10260

* Changelog

* Use +-26 hours for the time range and fix linter hints

* Use same timerange for Sidecars 'Show Messages' button

* Update changelog

* move recentMessagesTimeRange to util

* Spelling

* Update issue-5620.toml

---------

Co-authored-by: Ousmane Samba <[email protected]>

changelog/unreleased/issue-5620.toml

@@ -0,0 +1,5 @@
+type = "c"
+message = "Shorten time range of show received messages buttons on inputs, forwarder profiles and sidecars."
+
+issues = ["5620"]
+pulls = ["5621"]

graylog2-web-interface/src/components/inputs/InputListItem.jsx

@@ -27,6 +27,7 @@ import { EntityListItem, IfPermitted, LinkToNode, Spinner } from 'components/com
 import { ConfigurationWell } from 'components/configurationforms';
 import PermissionsMixin from 'util/PermissionsMixin';
 import Routes from 'routing/Routes';
+import recentMessagesTimeRange from 'util/TimeRangeHelper';
 import {
   InputForm,
   InputStateBadge,
@@ -116,7 +117,7 @@ const InputListItem = createReactClass({
     if (this.isPermitted(this.props.permissions, ['searches:relative'])) {
       actions.push(
         <LinkContainer key={`received-messages-${this.props.input.id}`}
-                       to={Routes.search(`${queryField}:${this.props.input.id}`, { relative: 0 })}>
+                       to={Routes.search(`${queryField}:${this.props.input.id}`, recentMessagesTimeRange())}>
           <Button onClick={() => {
             sendTelemetry(TELEMETRY_EVENT_TYPE.INPUTS.SHOW_RECEIVED_MESSAGES_CLICKED, {
               app_pathname: getPathnameWithoutId(location.pathname),

graylog2-web-interface/src/components/sidecars/sidecars/SidecarRow.jsx

@@ -25,6 +25,7 @@ import Routes from 'routing/Routes';
 import OperatingSystemIcon from 'components/sidecars/common/OperatingSystemIcon';
 import StatusIndicator from 'components/sidecars/common/StatusIndicator';
 import SidecarStatusEnum from 'logic/sidecar/SidecarStatusEnum';
+import recentMessagesTimeRange from 'util/TimeRangeHelper';
 
 import style from './SidecarRow.css';
 
@@ -75,7 +76,7 @@ class SidecarRow extends React.Component {
             {sidecar.node_name}
           </Link>
         </td>
-        <td>
+        <td aria-label="Status">
           <StatusIndicator status={sidecarStatus.status}
                            message={sidecarStatus.message}
                            id={sidecarStatus.id}
@@ -102,7 +103,7 @@ class SidecarRow extends React.Component {
             <LinkContainer to={`${Routes.SYSTEM.SIDECARS.ADMINISTRATION}?node_id=${sidecar.node_id}`}>
               <Button bsSize="xsmall" bsStyle="info">Manage sidecar</Button>
             </LinkContainer>
-            <LinkContainer to={Routes.search_with_query(`gl2_source_collector:${sidecar.node_id}`, 'relative', { relative: 604800 })}>
+            <LinkContainer to={Routes.search_with_query(`gl2_source_collector:${sidecar.node_id}`, 'absolute', recentMessagesTimeRange())}>
               <Button bsSize="xsmall" bsStyle="info">Show messages</Button>
             </LinkContainer>
           </ButtonToolbar>

graylog2-web-interface/src/util/TimeRangeHelper.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { AbsoluteRangeQueryParameter } from 'views/logic/TimeRange';
+
+/**
+ * Creates an absolute time range that can be used to look up recently received messages.
+ * It accommodates for the eventuality that messages can have timestamps from the future
+ * due to wrong timezone parsing or wrong system clocks.
+ */
+const recentMessagesTimeRange = (): AbsoluteRangeQueryParameter => {
+  const now = Date.now();
+  // The biggest possible time difference on earth is 26 hours.
+  // It's between Kiribati (UTC+14) and the Howland Islands (UTC-12)
+  // So we are going to create an absolute range
+  // from 26 hours in the past to 26 hours into the future.
+  const fromDate = new Date(now - 26 * 60 * 60000).toISOString();
+  const toDate = new Date(now + 26 * 60 * 60000).toISOString();
+
+  return { rangetype: 'absolute', from: fromDate, to: toDate };
+};
+
+export default recentMessagesTimeRange;

graylog2-web-interface/src/views/logic/TimeRange.ts

@@ -31,7 +31,7 @@ type RelativeRangeWithEndQueryParameter = {
 
 type RelativeRangeQueryParameter = RelativeRangeStartOnlyQueryParameter | RelativeRangeWithEndQueryParameter;
 
-type AbsoluteRangeQueryParameter = {
+export type AbsoluteRangeQueryParameter = {
   rangetype: 'absolute',
   from: string,
   to: string,