Implement first version of new aggregation controls, including support for metric configuration.

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

@@ -214,6 +214,7 @@ type Props = {
   optionRenderer?: (option: Option) => React.ReactElement,
   options: Array<Option>,
   placeholder: string,
+  ref?: React.Ref<React.ComponentType>,
   size?: 'normal' | 'small',
   theme: DefaultTheme,
   value?: Object | Array<Object> | null | undefined,
@@ -293,6 +294,7 @@ class Select extends React.Component<Props, State> {
      */
     value: PropTypes.oneOfType([
       PropTypes.string,
+      PropTypes.number,
       PropTypes.object,
       PropTypes.arrayOf(PropTypes.object),
     ]),

graylog2-web-interface/src/views/components/WidgetQueryControls.test.tsx

@@ -17,14 +17,15 @@
 import * as React from 'react';
 import { render, fireEvent, waitFor } from 'wrappedTestingLibrary';
 import WrappingContainer from 'WrappingContainer';
+import MockStore from 'helpers/mocking/StoreMock';
 
 import { GlobalOverrideActions } from 'views/stores/GlobalOverrideStore';
 import SearchActions from 'views/actions/SearchActions';
-import { DEFAULT_TIMERANGE } from 'views/Constants';
 import GlobalOverride from 'views/logic/search/GlobalOverride';
+import Widget from 'views/logic/widgets/Widget';
 
 import WidgetQueryControls from './WidgetQueryControls';
-import SearchBarForm from './searchbar/SearchBarForm';
+import WidgetContext from './contexts/WidgetContext';
 
 jest.mock('views/stores/WidgetStore', () => ({
   WidgetActions: {
@@ -42,7 +43,15 @@ jest.mock('views/actions/SearchActions', () => ({
   refresh: jest.fn(() => Promise.resolve()),
 }));
 
-jest.mock('stores/connect', () => (x) => x);
+jest.mock('stores/connect', () => {
+  const originalModule = jest.requireActual('stores/connect');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    default: (x) => x,
+  };
+});
 
 jest.mock('moment', () => {
   const mockMoment = jest.requireActual('moment');
@@ -52,6 +61,15 @@ jest.mock('moment', () => {
 
 jest.mock('views/components/searchbar/QueryInput', () => () => <span>Query Input</span>);
 
+jest.mock('views/stores/SearchConfigStore', () => ({
+  SearchConfigStore: MockStore(['getInitialState', () => ({
+    searchesClusterConfig: {
+      relative_timerange_options: { P1D: 'Search in last day', PT0S: 'Search in all messages' },
+      query_time_range_limit: 'PT0S',
+    },
+  })]),
+}));
+
 describe('WidgetQueryControls', () => {
   beforeEach(() => { jest.clearAllMocks(); });
 
@@ -67,15 +85,17 @@ describe('WidgetQueryControls', () => {
 
   const emptyGlobalOverride = {};
   const globalOverrideWithQuery = { query: { type: 'elasticsearch', query_string: 'source:foo' } };
+  const widget = Widget.builder()
+    .id('deadbeef')
+    .type('dummy')
+    .config({})
+    .build();
 
   const Wrapper = ({ children }: { children: React.ReactNode }) => (
     <WrappingContainer>
-      <SearchBarForm initialValues={{ timerange: DEFAULT_TIMERANGE, queryString: '', streams: [] }}
-                     limitDuration={0}
-                     onSubmit={() => {}}
-                     validateOnMount={false}>
+      <WidgetContext.Provider value={widget}>
         {children}
-      </SearchBarForm>
+      </WidgetContext.Provider>
     </WrappingContainer>
   );
 

graylog2-web-interface/src/views/components/WidgetQueryControls.tsx

@@ -16,9 +16,16 @@
  */
 import * as React from 'react';
 import styled from 'styled-components';
-import { Field, useFormikContext } from 'formik';
-
-import connect from 'stores/connect';
+import { Field } from 'formik';
+import moment from 'moment';
+import { useContext } from 'react';
+
+import connect, { useStore } from 'stores/connect';
+import { createElasticsearchQueryString } from 'views/logic/queries/Query';
+import Widget from 'views/logic/widgets/Widget';
+import { WidgetActions } from 'views/stores/WidgetStore';
+import { DEFAULT_TIMERANGE } from 'views/Constants';
+import { SearchConfigStore } from 'views/stores/SearchConfigStore';
 import { Col, Row } from 'components/graylog';
 import { Icon } from 'components/common';
 import DocumentationLink from 'components/support/DocumentationLink';
@@ -29,12 +36,13 @@ import { StreamsStore } from 'views/stores/StreamsStore';
 import { GlobalOverrideActions, GlobalOverrideStore } from 'views/stores/GlobalOverrideStore';
 import GlobalOverride from 'views/logic/search/GlobalOverride';
 import SearchActions from 'views/actions/SearchActions';
-import type { SearchBarFormValues } from 'views/Constants';
+import WidgetContext from 'views/components/contexts/WidgetContext';
 
 import TimeRangeInput from './searchbar/TimeRangeInput';
 import StreamsFilter from './searchbar/StreamsFilter';
 import SearchButton from './searchbar/SearchButton';
 import QueryInput from './searchbar/AsyncQueryInput';
+import SearchBarForm from './searchbar/SearchBarForm';
 
 type Props = {
   availableStreams: Array<any>,
@@ -68,6 +76,17 @@ const ResetFilterButton = styled(Button)`
 
 const _resetOverride = () => GlobalOverrideActions.reset().then(SearchActions.refresh);
 
+const _onSubmit = (values, widget: Widget) => {
+  const { timerange, streams, queryString } = values;
+  const newWidget = widget.toBuilder()
+    .timerange(timerange)
+    .query(createElasticsearchQueryString(queryString))
+    .streams(streams)
+    .build();
+
+  return WidgetActions.update(widget.id, newWidget);
+};
+
 const ResetOverrideHint = () => (
   <CenteredBox>
     These controls are disabled, because a filter is applied to all widgets.{' '}
@@ -76,62 +95,75 @@ const ResetOverrideHint = () => (
 );
 
 const WidgetQueryControls = ({ availableStreams, globalOverride }: Props) => {
+  const widget = useContext(WidgetContext);
+  const config = useStore(SearchConfigStore, ({ searchesClusterConfig }) => searchesClusterConfig);
+  const limitDuration = moment.duration(config?.query_time_range_limit).asSeconds() ?? 0;
+  const { streams } = widget;
+  const timerange = widget.timerange ?? DEFAULT_TIMERANGE;
+  const { query_string: queryString } = widget.query ?? createElasticsearchQueryString('');
+
   const isGloballyOverridden: boolean = globalOverride !== undefined
     && globalOverride !== null
     && (globalOverride.query !== undefined || globalOverride.timerange !== undefined);
   const Wrapper = isGloballyOverridden ? BlurredWrapper : React.Fragment;
-  const { dirty, isValid, isSubmitting, handleSubmit, values, setFieldValue } = useFormikContext<SearchBarFormValues>();
 
   return (
     <>
       {isGloballyOverridden && <ResetOverrideHint />}
-      <Wrapper>
-        <TopRow>
-          <Col md={4}>
-            <TimeRangeInput disabled={isGloballyOverridden}
-                            onChange={(nextTimeRange) => setFieldValue('timerange', nextTimeRange)}
-                            value={values?.timerange}
-                            hasErrorOnMount={!isValid} />
-          </Col>
-
-          <Col md={8}>
-            <Field name="streams">
-              {({ field: { name, value, onChange } }) => (
-                <StreamsFilter value={value}
-                               disabled={isGloballyOverridden}
-                               streams={availableStreams}
-                               onChange={(newStreams) => onChange({ target: { value: newStreams, name } })} />
-              )}
-            </Field>
-          </Col>
-        </TopRow>
-
-        <Row className="no-bm">
-          <Col md={12}>
-            <div className="pull-right search-help">
-              <DocumentationLink page={DocsHelper.PAGES.SEARCH_QUERY_LANGUAGE}
-                                 title="Search query syntax documentation"
-                                 text={<Icon name="lightbulb" type="regular" />} />
-            </div>
-            <SearchButton disabled={isGloballyOverridden || isSubmitting || !isValid}
-                          dirty={dirty} />
-
-            <Field name="queryString">
-              {({ field: { name, value, onChange } }) => (
-                <QueryInput value={value}
-                            disabled={isGloballyOverridden}
-                            placeholder={'Type your search query here and press enter. E.g.: ("not found" AND http) OR http_response_code:[400 TO 404]'}
-                            onChange={(newQuery) => {
-                              onChange({ target: { value: newQuery, name } });
-
-                              return Promise.resolve(newQuery);
-                            }}
-                            onExecute={handleSubmit as () => void} />
-              )}
-            </Field>
-          </Col>
-        </Row>
-      </Wrapper>
+      <SearchBarForm initialValues={{ timerange, streams, queryString }}
+                     limitDuration={limitDuration}
+                     onSubmit={(values) => _onSubmit(values, widget)}
+                     validateOnMount={false}>
+        {({ dirty, isValid, isSubmitting, handleSubmit, values, setFieldValue }) => (
+          <Wrapper>
+            <TopRow>
+              <Col md={4}>
+                <TimeRangeInput disabled={isGloballyOverridden}
+                                onChange={(nextTimeRange) => setFieldValue('timerange', nextTimeRange)}
+                                value={values?.timerange}
+                                hasErrorOnMount={!isValid} />
+              </Col>
+
+              <Col md={8}>
+                <Field name="streams">
+                  {({ field: { name, value, onChange } }) => (
+                    <StreamsFilter value={value}
+                                   disabled={isGloballyOverridden}
+                                   streams={availableStreams}
+                                   onChange={(newStreams) => onChange({ target: { value: newStreams, name } })} />
+                  )}
+                </Field>
+              </Col>
+            </TopRow>
+
+            <Row className="no-bm">
+              <Col md={12}>
+                <div className="pull-right search-help">
+                  <DocumentationLink page={DocsHelper.PAGES.SEARCH_QUERY_LANGUAGE}
+                                     title="Search query syntax documentation"
+                                     text={<Icon name="lightbulb" type="regular" />} />
+                </div>
+                <SearchButton disabled={isGloballyOverridden || isSubmitting || !isValid}
+                              dirty={dirty} />
+
+                <Field name="queryString">
+                  {({ field: { name, value, onChange } }) => (
+                    <QueryInput value={value}
+                                disabled={isGloballyOverridden}
+                                placeholder={'Type your search query here and press enter. E.g.: ("not found" AND http) OR http_response_code:[400 TO 404]'}
+                                onChange={(newQuery) => {
+                                  onChange({ target: { value: newQuery, name } });
+
+                                  return Promise.resolve(newQuery);
+                                }}
+                                onExecute={handleSubmit as () => void} />
+                  )}
+                </Field>
+              </Col>
+            </Row>
+          </Wrapper>
+        )}
+      </SearchBarForm>
     </>
   );
 };

graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.test.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 from 'react';
+import { render, screen } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
+
+import AggregationElementSelect from './AggregationElementSelect';
+import type { AggregationElement } from './aggregationElements/AggregationElementType';
+
+const aggregationElements: Array<AggregationElement> = [
+  {
+    title: 'Metric',
+    key: 'metric',
+    order: 1,
+    allowCreate: () => true,
+    onCreate: () => {},
+    component: () => <div />,
+  },
+  {
+    title: 'Sort',
+    key: 'sort',
+    order: 1,
+    allowCreate: () => false,
+    onCreate: () => {},
+    component: () => <div />,
+  },
+];
+
+describe('AggregationElementSelect', () => {
+  it('should select an aggregation element', async () => {
+    const onElementCreateMock = jest.fn();
+
+    render(<AggregationElementSelect onElementCreate={onElementCreateMock}
+                                     formValues={{ metrics: [] }}
+                                     aggregationElements={aggregationElements} />);
+
+    const aggregationElementSelect = screen.getByLabelText('Select an element to add ...');
+
+    await selectEvent.openMenu(aggregationElementSelect);
+    await selectEvent.select(aggregationElementSelect, 'Metric');
+
+    expect(onElementCreateMock).toHaveBeenCalledTimes(1);
+    expect(onElementCreateMock).toHaveBeenCalledWith('metric');
+  });
+
+  it('should not list already configured aggregation elements which can not be configured multiple times', async () => {
+    render(<AggregationElementSelect onElementCreate={() => {}}
+                                     formValues={{ metrics: [] }}
+                                     aggregationElements={aggregationElements} />);
+
+    const aggregationElementSelect = screen.getByLabelText('Select an element to add ...');
+
+    await selectEvent.openMenu(aggregationElementSelect);
+
+    expect(screen.queryByText('Sort')).not.toBeInTheDocument();
+    expect(screen.getByText('Metric')).toBeInTheDocument();
+  });
+});