Display effective search time range in sidebar

Graylog2 · Jul 14, 2023 · 825dc14 · 825dc14
1 parent 475a968
commit 825dc14
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 13 deletions.
diff --git a/...ce/src/views/components/searchbar/time-range-filter/time-range-picker/TimeRangePicker.tsx b/...ce/src/views/components/searchbar/time-range-filter/time-range-picker/TimeRangePicker.tsx
@@ -30,7 +30,7 @@ import type {
   RelativeTimeRange,
 } from 'views/logic/queries/Query';
 import type { SearchBarFormValues } from 'views/Constants';
-import { isTypeRelative } from 'views/typeGuards/timeRange';
+import { isTimeRange, isTypeRelative } from 'views/typeGuards/timeRange';
 import { normalizeIfAllMessagesRange } from 'views/logic/queries/NormalizeTimeRange';
 import validateTimeRange from 'views/components/TimeRangeValidation';
 import type { DateTimeFormats, DateTime } from 'util/DateTime';
@@ -236,7 +236,7 @@ const TimeRangePicker = ({
               <Form>
                 <Row>
                   <Col md={12}>
-                    {showAddToQuickListButton && (
+                    {showAddToQuickListButton && isTimeRange(nextTimeRange) && (
                       <IfPermitted permissions="clusterconfigentry:edit">
                         <TimeRangeAddToQuickListButton />
                       </IfPermitted>

diff --git a/graylog2-web-interface/src/views/components/sidebar/description/SearchResultOverview.tsx b/graylog2-web-interface/src/views/components/sidebar/description/SearchResultOverview.tsx
@@ -17,25 +17,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import numeral from 'numeral';
+import isEmpty from 'lodash/isEmpty';
+import styled from 'styled-components';
 
 import { Timestamp } from 'components/common';
+import type { AbsoluteTimeRange } from 'views/logic/queries/Query';
+import IfSearch from 'views/components/search/IfSearch';
+import useGlobalOverride from 'views/hooks/useGlobalOverride';
+import useViewType from 'views/hooks/useViewType';
+import View from 'views/logic/views/View';
+
+const EffectiveTimeRangeTable = styled.table`
+  margin-bottom: 5px;
+
+  td:first-child {
+    padding-right: 10px;
+  }
+`;
 
 type Props = {
   results: {
     timestamp?: string,
     duration?: number,
+    effectiveTimerange: AbsoluteTimeRange
   },
 };
 
-const SearchResultOverview = ({ results: { timestamp, duration } }: Props) => {
-  if (!timestamp || !duration) {
+const SearchResultOverview = ({ results }: Props) => {
+  const { timerange: globalOverrideTimeRange } = useGlobalOverride() ?? {};
+  const viewType = useViewType();
+
+  console.log(globalOverrideTimeRange);
+
+  if (isEmpty(results)) {
     return <i>No query executed yet.</i>;
   }
 
+  const { timestamp, duration, effectiveTimerange } = results;
+
   return (
-    <span>
-      Query executed in {numeral(duration).format('0,0')}ms at <Timestamp dateTime={timestamp} />.
-    </span>
+    <>
+      <p>
+        Query executed in:<br />
+        {numeral(duration).format('0,0')}ms at <Timestamp dateTime={timestamp} />.
+      </p>
+      <p>
+        Effective time range:<br />
+        {(viewType === View.Type.Dashboard && !globalOverrideTimeRange) ? <i>Varies per widget</i>
+          : (
+            <EffectiveTimeRangeTable>
+              <tbody>
+                <tr>
+                  <td>From</td>
+                  <td><Timestamp dateTime={effectiveTimerange.from} format="complete" /></td>
+                </tr>
+                <tr>
+                  <td>To</td>
+                  <td><Timestamp dateTime={effectiveTimerange.to} format="complete" /></td>
+                </tr>
+              </tbody>
+            </EffectiveTimeRangeTable>
+          )}
+      </p>
+    </>
   );
 };
 

diff --git a/graylog2-web-interface/src/views/components/sidebar/description/ViewDescription.tsx b/graylog2-web-interface/src/views/components/sidebar/description/ViewDescription.tsx
@@ -37,15 +37,14 @@ const ViewDescription = ({ results }: Props) => {
   const isAdHocSearch = !viewMetadata.id;
   const viewType = useViewType();
   const viewTypeLabel = viewType ? ViewTypeLabel({ type: viewType }) : '';
+
   const resultsSection = (
     <>
       <SectionSubheadline>
         Execution
       </SectionSubheadline>
-      <p>
 
-        <SearchResultOverview results={results} />
-      </p>
+      <SearchResultOverview results={results} />
     </>
   );
 

diff --git a/graylog2-web-interface/src/views/logic/QueryResult.ts b/graylog2-web-interface/src/views/logic/QueryResult.ts
@@ -18,7 +18,7 @@ import mapValues from 'lodash/mapValues';
 
 import type { MessageResult, SearchTypeResults } from 'views/types';
 import searchTypeDefinition from 'views/logic/SearchType';
-import type { TimeRange } from 'views/logic/queries/Query';
+import type { AbsoluteTimeRange } from 'views/logic/queries/Query';
 
 import type { SearchErrorResponse } from './SearchError';
 import SearchError from './SearchError';
@@ -50,15 +50,15 @@ type State = {
   errors: Array<SearchError>,
   duration: number,
   timestamp: string,
-  effectiveTimerange: TimeRange,
+  effectiveTimerange: AbsoluteTimeRange,
   searchTypes: SearchTypeResults,
 };
 
 type QueryResultResponse = {
   execution_stats: {
     duration: number,
     timestamp: string,
-    effective_timerange: TimeRange,
+    effective_timerange: AbsoluteTimeRange,
   },
   query: any,
   errors: Array<SearchErrorResponse>,