From 9f7c4e45e56f0a02638e725fab57a84089520513 Mon Sep 17 00:00:00 2001
From: Linus Pahl <linus@graylog.com>
Date: Mon, 22 Mar 2021 13:39:42 +0100
Subject: [PATCH] Implement first version of new aggregation controls,
 including support for metric configuration. (#10281)

* Creating basic `AggregationWizard` component.

* Creating basic components for aggregation attribute configuration.

* Rename aggregation attribute to aggregation action.

* Improve aggregation actions structure and expandability.

* Fixing typo.

* Fixing headline font size and `AggregationWizard` props.

* Creating test for `AggregationActionSelect`.

* Creating test for `ActionConfigurationContainer`.

* Creating test for `AggregationWizard`.

* Clearing `AggregationActionSelect` value after selection an action.

* Renaming aggregation action properties label to title and value to key.

* Reverting `AggregationWizard` usage in views bindings.

* Fixing linter warnings.

* List aggregation action in `AggregationActionSelect` if it can be configured multiple times.

* Renaming aggregation action to aggregation element.

* Do not add new section for an already configured aggregation action.

* Removing no longer needed `createDefault` series method.

* Changing order of configured aggregation elements.

* Always display configured aggregation elements in correct order.

* Updating `AggregationElementSelect.test`.`

* Creating `WidgetConfigForm`.

* Moving `SearchBarForm` from `EditWidgetFrame` to `WidgetQueryControls`.

* Rename `MetricConfiguration` to `MetricsConfiguration`.

* Creating basic metric form with function and field select.

* Enable widget configuration update for metrics.

* Providing correct initial values for metrics configuration form.

* Removing no longer needed aggregation wizard state by using `WidgetConfigForm` only.

* Updating type definition of `SeriesConfig` value and constructor.

* Splitting up `AggregationWizard` in multiple components.

* Migrating `AggregationFunctionsStore` to ts.

* Importing aggregation functions for metrics configuration directly from `AggregationFunctionsStore`.

* Reverting `Series` and `SeriesConfiguration` constructor type definition changes.

* Fixing type imports

* Only display aggregation element configuraion container if form has related values.

* Validating metric functions, triggering manual validation on initial mount.

* Validate form on change/on mount.

* Switching from field-level to form-level validation.

* Handling percentile parameter for `percentile` function.

* Do not include metrics errors in validation result if empty.

* Include name field for metric.

* Include placeholder for name field.

* Fixing vertical scrolling of aggregation elements column in aggregation wizard.

(cherry picked from commit 0efd3b222bcd41b198c92fbcd637152f7f948652)

* Styling fixes

* Removing section headlines to save vertical space.

* Fixing horizontal scrolling of element configuration containers by adjusting bootstrap elements padding.

The negative row / form-group margin caused the horizontal scroll bar.

* Creating one file for each aggregation element.

* Fixing types.

* Fixing types.

* Replacing aggregation element properties `isConfigured` and `multipleUse` with `allowCreate`.

* Defining theme color for element separator.

* Reducing element container padding.

* Fixing `allowCreate` usage.

* Providing form values as a prop for `AggregationElementSelect` to simplify testing.

* Updating `AggregationElementSelect.test`.

* Udpating `MetricsConfiguration.test`.

* Adding missing key in `MetricsConfiguration`.

* Extend PropType definition for common `Select` value with number.

* Extending `AgggregationWizard.test` with tests for metrics element.

* Fixing linter warnings

* Updating `WidgetQueryControls.test` regarding `SearchBarForm` addition.

* Implement `ElementConfigurationSection` for `MetricsConfiguration` which separates each section of the metrics element configuration.

* Test configuration of metric with multiple functions.

* Creating separate file for metric element tests.

* Fixing linter warnings.

* Reimplementing type definition for `Widget.tsx` config prop.

* Fixing import path.

Co-authored-by: Dennis Oelkers <dennis@graylog.com>
---
 .../src/components/common/Select.tsx          |   2 +
 .../components/WidgetQueryControls.test.tsx   |  36 ++-
 .../views/components/WidgetQueryControls.tsx  | 136 ++++++----
 .../AggregationElementSelect.test.tsx         |  72 ++++++
 .../AggregationElementSelect.tsx              |  61 +++++
 .../AggregationWizard.test.tsx                |  98 ++++++++
 .../aggregationwizard/AggregationWizard.tsx   | 144 +++++++++++
 .../ElementsConfiguration.tsx                 |  79 ++++++
 .../aggregationwizard/WidgetConfigForm.tsx    |  63 +++++
 .../AggregationWizard.metric.test.tsx         | 232 ++++++++++++++++++
 .../AggregationElementType.ts                 |  35 +++
 .../aggregationElements/GroupByElement.ts     |  29 +++
 .../aggregationElements/MetricElement.ts      | 109 ++++++++
 .../aggregationElements/SortElement.ts        |  32 +++
 .../VisualizationElement.ts                   |  32 +++
 .../aggregationElements/index.ts              |  28 +++
 .../ElementConfigurationContainer.test.tsx    |  76 ++++++
 .../ElementConfigurationContainer.tsx         |  86 +++++++
 .../ElementConfigurationSection.tsx           |  40 +++
 .../GroupByConfiguration.tsx                  |  35 +++
 .../elementConfiguration/Metric.tsx           | 117 +++++++++
 .../MetricsConfiguration.tsx                  |  57 +++++
 .../SortConfiguration.tsx                     |  35 +++
 .../VisualizationConfiguration.tsx            |  35 +++
 .../views/components/common/EditableTitle.tsx |   1 -
 .../components/widgets/EditWidgetFrame.tsx    |  72 ++----
 .../widgets/SaveOrCancelButtons.tsx           |  27 +-
 .../src/views/components/widgets/Widget.tsx   |   2 +-
 .../views/components/widgets/WidgetHeader.css |   2 +-
 .../views/logic/aggregationbuilder/Series.ts  |  11 +-
 .../logic/aggregationbuilder/SeriesConfig.ts  |   4 +-
 ...sStore.js => AggregationFunctionsStore.ts} |   9 +-
 32 files changed, 1657 insertions(+), 140 deletions(-)
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.test.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.test.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/ElementsConfiguration.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/WidgetConfigForm.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/__tests__/AggregationWizard.metric.test.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/AggregationElementType.ts
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/GroupByElement.ts
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/MetricElement.ts
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/SortElement.ts
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/VisualizationElement.ts
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/index.ts
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.test.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationSection.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/GroupByConfiguration.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/Metric.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/MetricsConfiguration.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/SortConfiguration.tsx
 create mode 100644 graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/VisualizationConfiguration.tsx
 rename graylog2-web-interface/src/views/stores/{AggregationFunctionsStore.js => AggregationFunctionsStore.ts} (82%)

diff --git a/graylog2-web-interface/src/components/common/Select.tsx b/graylog2-web-interface/src/components/common/Select.tsx
index 298bdf485c14..cf67f2e81632 100644
--- a/graylog2-web-interface/src/components/common/Select.tsx
+++ b/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),
     ]),
diff --git a/graylog2-web-interface/src/views/components/WidgetQueryControls.test.tsx b/graylog2-web-interface/src/views/components/WidgetQueryControls.test.tsx
index 72466e56a016..5e533fe00954 100644
--- a/graylog2-web-interface/src/views/components/WidgetQueryControls.test.tsx
+++ b/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>
   );
 
diff --git a/graylog2-web-interface/src/views/components/WidgetQueryControls.tsx b/graylog2-web-interface/src/views/components/WidgetQueryControls.tsx
index 74c1ec71f6b2..60acadd753e3 100644
--- a/graylog2-web-interface/src/views/components/WidgetQueryControls.tsx
+++ b/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>
     </>
   );
 };
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.test.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.test.tsx
new file mode 100644
index 000000000000..57c5bb0d93f2
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.tsx
new file mode 100644
index 000000000000..482456665995
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationElementSelect.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { useRef } from 'react';
+
+import { Select } from 'components/common';
+
+import type { AggregationElement } from './aggregationElements/AggregationElementType';
+import type { WidgetConfigFormValues } from './WidgetConfigForm';
+
+const _getOptions = (aggregationElements: Array<AggregationElement>, formValues: WidgetConfigFormValues) => {
+  return aggregationElements.reduce((availableElements, aggregationElement) => {
+    if (!aggregationElement.allowCreate(formValues)) {
+      return availableElements;
+    }
+
+    availableElements.push({ value: aggregationElement.key, label: aggregationElement.title });
+
+    return availableElements;
+  }, []);
+};
+
+type Props = {
+  aggregationElements: Array<AggregationElement>,
+  formValues: WidgetConfigFormValues,
+  onElementCreate: (elementKey: string) => void,
+}
+
+const AggregationElementSelect = ({ aggregationElements, onElementCreate, formValues }: Props) => {
+  const selectRef = useRef(null);
+  const options = _getOptions(aggregationElements, formValues);
+
+  const _onSelect = (elementKey: string) => {
+    selectRef.current.clearValue();
+    onElementCreate(elementKey);
+  };
+
+  return (
+    <Select options={options}
+            onChange={_onSelect}
+            ref={selectRef}
+            placeholder="Select an element to add ..."
+            aria-label="Select an element to add ..." />
+  );
+};
+
+export default AggregationElementSelect;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.test.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.test.tsx
new file mode 100644
index 000000000000..dd2631e63c83
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 * as Immutable from 'immutable';
+import { render, screen, waitFor, within } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
+import { simpleFields, simpleQueryFields } from 'fixtures/fields';
+
+import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+import DataTable from 'views/components/datatable/DataTable';
+import FieldTypesContext from 'views/components/contexts/FieldTypesContext';
+
+import AggregationWizard from './AggregationWizard';
+
+const widgetConfig = AggregationWidgetConfig
+  .builder()
+  .visualization(DataTable.type)
+  .build();
+
+jest.mock('views/stores/AggregationFunctionsStore', () => ({
+  getInitialState: jest.fn(() => ({ count: { type: 'count' }, min: { type: 'min' }, max: { type: 'max' }, percentile: { type: 'percentile' } })),
+  listen: jest.fn(),
+}));
+
+const fieldTypes = { all: simpleFields(), queryFields: simpleQueryFields('queryId') };
+
+describe('AggregationWizard', () => {
+  const renderSUT = (props = {}) => render(
+    <FieldTypesContext.Provider value={fieldTypes}>
+      <AggregationWizard onChange={() => {}}
+                         config={widgetConfig}
+                         editing
+                         id="widget-id"
+                         type="AGGREGATION"
+                         fields={Immutable.List([])}
+                         {...props}>
+        The Visualization
+      </AggregationWizard>
+    </FieldTypesContext.Provider>,
+  );
+
+  it('should render visualization passed as children', () => {
+    renderSUT();
+
+    expect(screen.getByText('The Visualization')).toBeInTheDocument();
+  });
+
+  it('should list available aggregation elements in element select', async () => {
+    const config = AggregationWidgetConfig
+      .builder()
+      .visualization(DataTable.type)
+      .build();
+
+    renderSUT({ config });
+
+    const addElementSection = await screen.findByTestId('add-element-section');
+    const aggregationElementSelect = screen.getByLabelText('Select an element to add ...');
+    const notConfiguredElements = [
+      'Metric',
+      'Group By',
+      'Sort',
+    ];
+
+    await selectEvent.openMenu(aggregationElementSelect);
+
+    notConfiguredElements.forEach((elementTitle) => {
+      expect(within(addElementSection).getByText(elementTitle)).toBeInTheDocument();
+    });
+  });
+
+  it('should display newly selected aggregation element', async () => {
+    renderSUT();
+
+    const aggregationElementSelect = screen.getByLabelText('Select an element to add ...');
+    const configureElementsSection = screen.getByTestId('configure-elements-section');
+
+    expect(within(configureElementsSection).queryByText('Metric')).not.toBeInTheDocument();
+
+    await selectEvent.openMenu(aggregationElementSelect);
+    await selectEvent.select(aggregationElementSelect, 'Metric');
+
+    await waitFor(() => expect(within(configureElementsSection).getByText('Metric')).toBeInTheDocument());
+  });
+});
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.tsx
new file mode 100644
index 000000000000..3f9632ded0a5
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/AggregationWizard.tsx
@@ -0,0 +1,144 @@
+/*
+ * 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 styled from 'styled-components';
+import { EditWidgetComponentProps } from 'views/types';
+
+import { ButtonToolbar } from 'components/graylog';
+import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+import Button from 'components/graylog/Button';
+
+import WidgetConfigForm, { WidgetConfigFormValues } from './WidgetConfigForm';
+import AggregationElementSelect from './AggregationElementSelect';
+import ElementsConfiguration from './ElementsConfiguration';
+import aggregationElements from './aggregationElements';
+
+const aggregationElementsByKey = Object.fromEntries(aggregationElements.map((element) => ([element.key, element])));
+
+const _initialFormValues = (config: AggregationWidgetConfig) => {
+  return aggregationElements.reduce((formValues, element) => ({
+    ...formValues,
+    ...(element.fromConfig ? element.fromConfig(config) : {}),
+  }), {});
+};
+
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+`;
+
+const Controls = styled.div`
+  height: 100%;
+  min-width: 300px;
+  max-width: 500px;
+  flex: 1;
+  overflow-y: auto;
+`;
+
+const Visualization = styled.div`
+  height: 100%;
+  flex: 3;
+`;
+
+const Section = styled.div`
+  margin-bottom: 10px;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const _onElementCreate = (
+  elementKey: string,
+  values: WidgetConfigFormValues,
+  setValues: (formValues: WidgetConfigFormValues) => void,
+) => {
+  setValues({
+    ...values,
+    [elementKey]: [
+      ...(values[elementKey] ?? []),
+      {},
+    ],
+  });
+};
+
+const _onSubmit = (formValues: WidgetConfigFormValues, onConfigChange: (newConfig: AggregationWidgetConfig) => void) => {
+  const toConfigByKey = Object.fromEntries(aggregationElements.map(({ key, toConfig }) => [key, toConfig]));
+
+  const newConfig = Object.keys(formValues).map((key) => {
+    const toConfig = toConfigByKey[key] ?? ((_values, prevConfig) => prevConfig);
+
+    if (!toConfig) {
+      throw new Error(`Aggregation element with key ${key} is missing toConfig.`);
+    }
+
+    return toConfig;
+  }).reduce((prevConfig, toConfig) => toConfig(formValues, prevConfig), AggregationWidgetConfig.builder().build());
+
+  onConfigChange(newConfig);
+};
+
+const validateForm = (formValues: WidgetConfigFormValues) => {
+  const elementValidations = aggregationElements.map((element) => element.validate ?? (() => ({})));
+
+  const elementValidationResults = elementValidations.map((validate) => validate(formValues));
+
+  return elementValidationResults.reduce((prev, cur) => ({ ...prev, ...cur }), {});
+};
+
+const StyledButtonToolbar = styled(ButtonToolbar)`
+  margin-top: 5px;
+`;
+
+const AggregationWizard = ({ onChange, config, children }: EditWidgetComponentProps<AggregationWidgetConfig>) => {
+  const initialFormValues = _initialFormValues(config);
+
+  return (
+    <Wrapper>
+      <Controls>
+        <WidgetConfigForm onSubmit={(formValues: WidgetConfigFormValues) => _onSubmit(formValues, onChange)}
+                          initialValues={initialFormValues}
+                          validate={validateForm}>
+          {({ isValid, dirty, values, setValues }) => (
+            <>
+              <Section data-testid="add-element-section">
+                <AggregationElementSelect onElementCreate={(elementKey) => _onElementCreate(elementKey, values, setValues)}
+                                          aggregationElements={aggregationElements}
+                                          formValues={values} />
+              </Section>
+              <Section data-testid="configure-elements-section">
+                <ElementsConfiguration aggregationElementsByKey={aggregationElementsByKey}
+                                       config={config}
+                                       onConfigChange={onChange} />
+                {dirty && (
+                  <StyledButtonToolbar>
+                    <Button bsStyle="primary" className="pull-right" type="submit" disabled={!isValid}>Apply Changes</Button>
+                  </StyledButtonToolbar>
+                )}
+              </Section>
+            </>
+          )}
+        </WidgetConfigForm>
+      </Controls>
+      <Visualization>
+        {children}
+      </Visualization>
+    </Wrapper>
+  );
+};
+
+export default AggregationWizard;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/ElementsConfiguration.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/ElementsConfiguration.tsx
new file mode 100644
index 000000000000..7553b5b87a73
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/ElementsConfiguration.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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 { useFormikContext } from 'formik';
+import AggregationWidgetConfig from 'src/views/logic/aggregationbuilder/AggregationWidgetConfig';
+import { isEmpty } from 'lodash';
+
+import ElementConfigurationContainer from './elementConfiguration/ElementConfigurationContainer';
+import type { AggregationElement } from './aggregationElements/AggregationElementType';
+import type { WidgetConfigFormValues } from './WidgetConfigForm';
+
+const _sortConfiguredElements = (
+  values: WidgetConfigFormValues,
+  aggregationElementsByKey: { [elementKey: string]: AggregationElement },
+) => Object.entries(values).sort(
+  ([elementKey1], [elementKey2]) => (
+    aggregationElementsByKey[elementKey1].order - aggregationElementsByKey[elementKey2].order
+  ),
+);
+type Props = {
+  aggregationElementsByKey: { [elementKey: string]: AggregationElement }
+  config: AggregationWidgetConfig,
+  onConfigChange: (config: AggregationWidgetConfig) => void,
+}
+
+const ElementsConfiguration = ({ aggregationElementsByKey, config, onConfigChange }: Props) => {
+  const { values, setValues } = useFormikContext<WidgetConfigFormValues>();
+
+  const _onDeleteElement = (aggregationElement) => {
+    if (typeof aggregationElement.onDeleteAll !== 'function') {
+      return;
+    }
+
+    setValues(aggregationElement.onDeleteAll(values));
+  };
+
+  return (
+    <div>
+      {_sortConfiguredElements(values, aggregationElementsByKey).map(([elementKey, elementFormValues]) => {
+        if (isEmpty(elementFormValues)) {
+          return null;
+        }
+
+        const aggregationElement = aggregationElementsByKey[elementKey];
+
+        if (!aggregationElement) {
+          throw new Error(`Aggregation element with key ${elementKey} is missing but configured for this widget.`);
+        }
+
+        const AggregationElementComponent = aggregationElement.component;
+
+        return (
+          <ElementConfigurationContainer isPermanentElement={aggregationElement.onDeleteAll === undefined}
+                                         title={aggregationElement.title}
+                                         onDeleteAll={() => _onDeleteElement(aggregationElement)}
+                                         key={aggregationElement.key}>
+            <AggregationElementComponent config={config} onConfigChange={onConfigChange} />
+          </ElementConfigurationContainer>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ElementsConfiguration;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/WidgetConfigForm.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/WidgetConfigForm.tsx
new file mode 100644
index 000000000000..589a59c243a7
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/WidgetConfigForm.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { Form, Formik, FormikProps } from 'formik';
+
+export type MetricFormValues = {
+  function: string,
+  field: string | undefined,
+  name?: string | undefined,
+  percentile?: number | undefined,
+};
+
+export type GroupByFormValues = {};
+
+export type VisualizationFormValues = {};
+
+export type SortFormValues = {}
+export interface WidgetConfigFormValues {
+  metrics?: Array<MetricFormValues>,
+  groupBy?: Array<GroupByFormValues>,
+  visualization?: VisualizationFormValues,
+  sort?: SortFormValues,
+}
+
+type Props = {
+  children: ((props: FormikProps<WidgetConfigFormValues>) => React.ReactNode) | React.ReactNode,
+  initialValues: WidgetConfigFormValues,
+  onSubmit: (formValues: WidgetConfigFormValues) => void,
+  validate: (formValues: WidgetConfigFormValues) => { [key: string]: string },
+}
+
+const WidgetConfigForm = ({ children, onSubmit, initialValues, validate }: Props) => {
+  return (
+    <Formik<WidgetConfigFormValues> initialValues={initialValues}
+                                    validate={validate}
+                                    enableReinitialize
+                                    validateOnChange
+                                    validateOnMount
+                                    onSubmit={onSubmit}>
+      {(...args) => (
+        <Form className="form form-horizontal">
+          {typeof children === 'function' ? children(...args) : children}
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default WidgetConfigForm;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/__tests__/AggregationWizard.metric.test.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/__tests__/AggregationWizard.metric.test.tsx
new file mode 100644
index 000000000000..9d42eaec9227
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/__tests__/AggregationWizard.metric.test.tsx
@@ -0,0 +1,232 @@
+/*
+ * 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 * as Immutable from 'immutable';
+import { act, fireEvent, render, screen, waitFor } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
+import userEvent from '@testing-library/user-event';
+
+import FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
+import SeriesConfig from 'views/logic/aggregationbuilder/SeriesConfig';
+import Series from 'views/logic/aggregationbuilder/Series';
+import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+import DataTable from 'views/components/datatable/DataTable';
+import FieldTypesContext from 'views/components/contexts/FieldTypesContext';
+import FieldType from 'views/logic/fieldtypes/FieldType';
+
+import AggregationWizard from '../AggregationWizard';
+
+const widgetConfig = AggregationWidgetConfig
+  .builder()
+  .visualization(DataTable.type)
+  .build();
+
+const fieldType = new FieldType('field_type', ['numeric'], []);
+const fieldTypeMapping1 = new FieldTypeMapping('took_ms', fieldType);
+const fieldTypeMapping2 = new FieldTypeMapping('http_method', fieldType);
+const fields = Immutable.List([fieldTypeMapping1, fieldTypeMapping2]);
+const fieldTypes = { all: fields, queryFields: Immutable.Map({ queryId: fields }) };
+
+jest.mock('views/stores/AggregationFunctionsStore', () => ({
+  getInitialState: jest.fn(() => ({ count: { type: 'count' }, min: { type: 'min' }, max: { type: 'max' }, percentile: { type: 'percentile' } })),
+  listen: jest.fn(),
+}));
+
+describe('AggregationWizard', () => {
+  const renderSUT = (props = {}) => render(
+    <FieldTypesContext.Provider value={fieldTypes}>
+      <AggregationWizard onChange={() => {}}
+                         config={widgetConfig}
+                         editing
+                         id="widget-id"
+                         type="AGGREGATION"
+                         fields={Immutable.List([])}
+                         {...props}>
+        The Visualization
+      </AggregationWizard>
+    </FieldTypesContext.Provider>,
+  );
+
+  it('should require metric function when adding a metric element', async () => {
+    renderSUT();
+
+    const aggregationElementSelect = screen.getByLabelText('Select an element to add ...');
+
+    await selectEvent.openMenu(aggregationElementSelect);
+    await selectEvent.select(aggregationElementSelect, 'Metric');
+
+    await waitFor(() => expect(screen.getByText('Function is required.')).toBeInTheDocument());
+  });
+
+  it('should require metric field when metric function is not count', async () => {
+    renderSUT();
+
+    const aggregationElementSelect = screen.getByLabelText('Select an element to add ...');
+
+    await selectEvent.openMenu(aggregationElementSelect);
+    await selectEvent.select(aggregationElementSelect, 'Metric');
+
+    const functionSelect = await screen.findByLabelText('Select a function');
+    await selectEvent.openMenu(functionSelect);
+    await selectEvent.select(functionSelect, 'min');
+
+    await waitFor(() => expect(screen.getByText('Field is required for function min.')).toBeInTheDocument());
+  });
+
+  it('should not require metric field when metric function count', async () => {
+    const config = AggregationWidgetConfig
+      .builder()
+      .series([Series.create('count')])
+      .build();
+    renderSUT({ config });
+
+    await waitFor(() => expect(screen.queryByText('Field is required for function min.')).not.toBeInTheDocument());
+  });
+
+  it('should display metric form with values from config', async () => {
+    const updatedSeriesConfig = SeriesConfig.empty().toBuilder().name('Metric name').build();
+    const config = AggregationWidgetConfig
+      .builder()
+      .visualization(DataTable.type)
+      .series([Series.create('max', 'took_ms').toBuilder().config(updatedSeriesConfig).build()])
+      .build();
+
+    renderSUT({ config });
+
+    await screen.findByDisplayValue('Metric name');
+
+    expect(screen.getByDisplayValue('took_ms')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('max')).toBeInTheDocument();
+  });
+
+  it('should update config with updated metric', async () => {
+    const onChangeMock = jest.fn();
+    const config = AggregationWidgetConfig
+      .builder()
+      .series([Series.create('count')])
+      .build();
+
+    renderSUT({ config, onChange: onChangeMock });
+
+    const nameInput = await screen.findByLabelText('Name');
+    const functionSelect = screen.getByLabelText('Select a function');
+    const fieldSelect = screen.getByLabelText('Select a field');
+
+    userEvent.type(nameInput, 'New name');
+
+    await act(async () => {
+      await selectEvent.openMenu(functionSelect);
+      await selectEvent.select(functionSelect, 'count');
+      await selectEvent.openMenu(fieldSelect);
+      await selectEvent.select(fieldSelect, 'http_method');
+    });
+
+    const applyButton = await screen.findByRole('button', { name: 'Apply Changes' });
+    fireEvent.click(applyButton);
+
+    const updatedSeriesConfig = SeriesConfig.empty().toBuilder().name('New name').build();
+    const updatedConfig = AggregationWidgetConfig
+      .builder()
+      .series([Series.create('count', 'http_method').toBuilder().config(updatedSeriesConfig).build()])
+      .build();
+
+    await waitFor(() => expect(onChangeMock).toHaveBeenCalledTimes(1));
+
+    expect(onChangeMock).toHaveBeenCalledWith(updatedConfig);
+  });
+
+  it('should update config with percentile metric function', async () => {
+    const onChangeMock = jest.fn();
+    const config = AggregationWidgetConfig
+      .builder()
+      .series([Series.create('count')])
+      .build();
+
+    renderSUT({ config, onChange: onChangeMock });
+
+    const functionSelect = screen.getByLabelText('Select a function');
+    const fieldSelect = screen.getByLabelText('Select a field');
+
+    await act(async () => {
+      await selectEvent.openMenu(functionSelect);
+      await selectEvent.select(functionSelect, 'percentile');
+      await selectEvent.openMenu(fieldSelect);
+      await selectEvent.select(fieldSelect, 'http_method');
+    });
+
+    const percentileInput = await screen.findByLabelText('Select percentile');
+
+    expect(screen.getByText('Percentile is required.')).toBeInTheDocument();
+
+    await selectEvent.openMenu(percentileInput);
+    await selectEvent.select(percentileInput, '50');
+
+    const applyButton = await screen.findByRole('button', { name: 'Apply Changes' });
+    fireEvent.click(applyButton);
+
+    const updatedConfig = AggregationWidgetConfig
+      .builder()
+      .series([Series.create('percentile', 'http_method', 50.0)])
+      .build();
+
+    await waitFor(() => expect(onChangeMock).toHaveBeenCalledTimes(1));
+
+    expect(onChangeMock).toHaveBeenCalledWith(updatedConfig);
+  });
+
+  it('should configure metric with multiple functions', async () => {
+    const onChangeMock = jest.fn();
+    const config = AggregationWidgetConfig
+      .builder()
+      .series([Series.create('max', 'took_ms')])
+      .build();
+    renderSUT({ config, onChange: onChangeMock });
+
+    const addMetricButton = await screen.findByRole('button', { name: 'Add a Metric' });
+    fireEvent.click(addMetricButton);
+
+    await waitFor(() => expect(screen.getAllByLabelText('Select a function')).toHaveLength(2));
+    const newNameInput = screen.getAllByLabelText('Name')[1];
+    const newFunctionSelect = screen.getAllByLabelText('Select a function')[1];
+    const newFieldSelect = screen.getAllByLabelText('Select a field')[1];
+
+    userEvent.type(newNameInput, 'New function');
+
+    await act(async () => {
+      await selectEvent.openMenu(newFunctionSelect);
+      await selectEvent.select(newFunctionSelect, 'min');
+      await selectEvent.openMenu(newFieldSelect);
+      await selectEvent.select(newFieldSelect, 'http_method');
+    });
+
+    const applyButton = await screen.findByRole('button', { name: 'Apply Changes' });
+    fireEvent.click(applyButton);
+
+    const updatedConfig = config.toBuilder()
+      .series([
+        Series.create('max', 'took_ms'),
+        Series.create('min', 'http_method').toBuilder()
+          .config(SeriesConfig.empty().toBuilder().name('New function').build())
+          .build(),
+      ])
+      .build();
+
+    await waitFor(() => expect(onChangeMock).toHaveBeenCalledTimes(1));
+
+    expect(onChangeMock).toHaveBeenCalledWith(updatedConfig);
+  });
+});
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/AggregationElementType.ts b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/AggregationElementType.ts
new file mode 100644
index 000000000000..fd678922b8be
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/AggregationElementType.ts
@@ -0,0 +1,35 @@
+/*
+ * 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 AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+
+import type { WidgetConfigFormValues } from '../WidgetConfigForm';
+
+export type AggregationElement = {
+  title: string,
+  key: string,
+  allowCreate: (formValues: WidgetConfigFormValues) => boolean,
+  order: number,
+  toConfig?: (formValues: WidgetConfigFormValues, currentConfig: AggregationWidgetConfig) => AggregationWidgetConfig,
+  fromConfig?: (config: AggregationWidgetConfig) => Partial<WidgetConfigFormValues>,
+  onCreate?: () => void,
+  onDeleteAll?: (formValues: WidgetConfigFormValues) => WidgetConfigFormValues,
+  component: React.ComponentType<{
+    config: AggregationWidgetConfig,
+    onConfigChange: (newConfig: AggregationWidgetConfig) => void
+  }>,
+  validate?: (formValues: WidgetConfigFormValues) => { [key: string]: string },
+}
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/GroupByElement.ts b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/GroupByElement.ts
new file mode 100644
index 000000000000..16f7ac80d405
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/GroupByElement.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { AggregationElement } from './AggregationElementType';
+
+import GroupByConfiguration from '../elementConfiguration/GroupByConfiguration';
+
+const GroupByElement: AggregationElement = {
+  title: 'Group By',
+  key: 'groupBy',
+  order: 1,
+  allowCreate: () => true,
+  component: GroupByConfiguration,
+};
+
+export default GroupByElement;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/MetricElement.ts b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/MetricElement.ts
new file mode 100644
index 000000000000..cab9e6746e0b
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/MetricElement.ts
@@ -0,0 +1,109 @@
+/*
+ * 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 AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+import Series, { parseSeries } from 'views/logic/aggregationbuilder/Series';
+import SeriesConfig from 'views/logic/aggregationbuilder/SeriesConfig';
+
+import type { AggregationElement } from './AggregationElementType';
+
+import MetricsConfiguration from '../elementConfiguration/MetricsConfiguration';
+import { WidgetConfigFormValues, MetricFormValues } from '../WidgetConfigForm';
+
+type MetricError = {
+  function?: string,
+  field?: string,
+  percentile?: string,
+};
+
+const hasErrors = <T extends {}>(errors: Array<T>): boolean => {
+  return errors.filter((error) => Object.keys(error).length > 0).length > 0;
+};
+
+const validateMetrics = (values: WidgetConfigFormValues) => {
+  const errors = {};
+
+  if (!values.metrics) {
+    return errors;
+  }
+
+  const metricsErrors = values.metrics.map((metric) => {
+    const metricError: MetricError = {};
+
+    if (!metric.function) {
+      metricError.function = 'Function is required.';
+    }
+
+    const isFieldRequired = metric.function && metric.function !== 'count';
+
+    if (isFieldRequired && !metric.field) {
+      metricError.field = `Field is required for function ${metric.function}.`;
+    }
+
+    if (metric.function === 'percentile' && !metric.percentile) {
+      metricError.percentile = 'Percentile is required.';
+    }
+
+    return metricError;
+  });
+
+  return hasErrors(metricsErrors) ? { metrics: metricsErrors } : {};
+};
+
+const metricsToSeries = (formMetrics: Array<MetricFormValues>) => formMetrics
+  .map((metric) => Series.create(metric.function, metric.field, metric.percentile)
+    .toBuilder()
+    .config(SeriesConfig.empty().toBuilder().name(metric.name).build())
+    .build());
+
+const seriesToMetrics = (series: Array<Series>) => series.map((s: Series) => {
+  const { type: func, field, percentile } = parseSeries(s.function) ?? {};
+
+  const metric = {
+    function: func,
+    field,
+    name: s.config?.name,
+  };
+
+  if (percentile) {
+    const parsedPercentile = Number.parseFloat(percentile);
+
+    return {
+      ...metric,
+      percentile: parsedPercentile,
+    };
+  }
+
+  return metric;
+});
+
+const MetricElement: AggregationElement = {
+  title: 'Metric',
+  key: 'metrics',
+  order: 2,
+  allowCreate: () => true,
+  fromConfig: (providedConfig: AggregationWidgetConfig) => ({
+    metrics: seriesToMetrics(providedConfig.series),
+  }),
+  toConfig: (formValues: WidgetConfigFormValues, currentConfig: AggregationWidgetConfig) => currentConfig
+    .toBuilder()
+    .series(metricsToSeries(formValues.metrics))
+    .build(),
+  component: MetricsConfiguration,
+  validate: validateMetrics,
+};
+
+export default MetricElement;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/SortElement.ts b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/SortElement.ts
new file mode 100644
index 000000000000..53f3d4f876da
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/SortElement.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { isEmpty } from 'lodash';
+
+import type { AggregationElement } from './AggregationElementType';
+
+import SortConfiguration from '../elementConfiguration/SortConfiguration';
+import { WidgetConfigFormValues } from '../WidgetConfigForm';
+
+const SortElement: AggregationElement = {
+  title: 'Sort',
+  key: 'sort',
+  order: 3,
+  allowCreate: (formValues: WidgetConfigFormValues) => isEmpty(formValues.sort),
+  component: SortConfiguration,
+};
+
+export default SortElement;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/VisualizationElement.ts b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/VisualizationElement.ts
new file mode 100644
index 000000000000..21b90ee37db0
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/VisualizationElement.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { isEmpty } from 'lodash';
+
+import type { AggregationElement } from './AggregationElementType';
+
+import VisualizationConfiguration from '../elementConfiguration/VisualizationConfiguration';
+import { WidgetConfigFormValues } from '../WidgetConfigForm';
+
+const VisualizationElement: AggregationElement = {
+  title: 'Visualization',
+  key: 'visualization',
+  order: 4,
+  allowCreate: (formValues: WidgetConfigFormValues) => isEmpty(formValues.visualization),
+  component: VisualizationConfiguration,
+};
+
+export default VisualizationElement;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/index.ts b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/index.ts
new file mode 100644
index 000000000000..b193096939bc
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/aggregationElements/index.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 MetricElement from './MetricElement';
+import VisualizationElement from './VisualizationElement';
+import SortElement from './SortElement';
+import GroupByElement from './GroupByElement';
+
+export default [
+  VisualizationElement,
+  MetricElement,
+  SortElement,
+  GroupByElement,
+];
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.test.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.test.tsx
new file mode 100644
index 000000000000..99418a0c02e3
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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 { fireEvent, render, screen } from 'wrappedTestingLibrary';
+
+import ElementConfigurationContainer from './ElementConfigurationContainer';
+
+describe('ElementConfigurationContainer', () => {
+  it('should render elements passed as children', () => {
+    render(
+      <ElementConfigurationContainer isPermanentElement={false}
+                                     onDeleteAll={() => {}}
+                                     title="Aggregation Element Title">
+        Children of Dune
+      </ElementConfigurationContainer>,
+    );
+
+    expect(screen.getByText('Children of Dune')).toBeInTheDocument();
+  });
+
+  it('should render title', () => {
+    render(
+      <ElementConfigurationContainer isPermanentElement={false}
+                                     onDeleteAll={() => {}}
+                                     title="Aggregation Element Title">
+        Children of Dune
+      </ElementConfigurationContainer>,
+    );
+
+    expect(screen.getByText('Aggregation Element Title')).toBeInTheDocument();
+  });
+
+  it('should call on delete when clicking delete icon', async () => {
+    const onDeleteAllMock = jest.fn();
+
+    render(
+      <ElementConfigurationContainer isPermanentElement={false}
+                                     onDeleteAll={onDeleteAllMock}
+                                     title="Aggregation Element Title">
+        Children of Dune
+      </ElementConfigurationContainer>,
+    );
+
+    const deleteButton = screen.getByTitle('Remove Aggregation Element Title');
+
+    fireEvent.click(deleteButton);
+
+    expect(onDeleteAllMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not display delete icon if element is permanent', async () => {
+    render(
+      <ElementConfigurationContainer isPermanentElement
+                                     onDeleteAll={() => {}}
+                                     title="Aggregation Element Title">
+        Children of Dune
+      </ElementConfigurationContainer>,
+    );
+
+    expect(screen.queryByTitle('Remove Aggregation Element Title')).not.toBeInTheDocument();
+  });
+});
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.tsx
new file mode 100644
index 000000000000..610a5e966744
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationContainer.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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 styled, { css } from 'styled-components';
+
+import IconButton from 'components/common/IconButton';
+
+const Wrapper = styled.div(({ theme }) => css`
+  background-color: ${theme.colors.variant.lightest.default};
+  border: 1px solid ${theme.colors.variant.lighter.default};
+  padding: 6px;
+  border-radius: 6px;
+  margin-bottom: 10px;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  div[class^="col-"] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .form-group {
+    margin: 0 0 5px 0;
+  }
+
+  .control-label {
+    padding-left: 0;
+    padding-right: 5px;
+    font-weight: normal;
+    text-align: left;
+  }
+`);
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+`;
+
+type Props = {
+  children: React.ReactNode,
+  isPermanentElement: boolean,
+  onDeleteAll: () => void
+  title: string,
+}
+
+const ElementConfigurationContainer = ({
+  children,
+  isPermanentElement,
+  onDeleteAll,
+  title,
+}: Props) => {
+  return (
+    <Wrapper>
+      <Header>
+        <div>{title}</div>
+        <div>
+          {!isPermanentElement && (
+            <IconButton title={`Remove ${title}`} name="trash" onClick={onDeleteAll} />
+          )}
+        </div>
+      </Header>
+      <div>
+        {children}
+      </div>
+    </Wrapper>
+  );
+};
+
+export default ElementConfigurationContainer;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationSection.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationSection.tsx
new file mode 100644
index 000000000000..2716da91e373
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/ElementConfigurationSection.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 styled, { css } from 'styled-components';
+
+const SectionContainer = styled.div(({ theme }) => css`
+  border-bottom: 1px solid ${theme.colors.variant.lighter.default};
+  margin-bottom: 5px;
+
+  :last-of-type {
+    border-bottom: 0;
+    margin-bottom: 0;
+  }
+`);
+
+type Props = {
+  children: React.ReactNode,
+}
+
+const ElementConfigurationSection = ({ children }: Props) => (
+  <SectionContainer>
+    {children}
+  </SectionContainer>
+);
+
+export default ElementConfigurationSection;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/GroupByConfiguration.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/GroupByConfiguration.tsx
new file mode 100644
index 000000000000..dcea2599e91e
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/GroupByConfiguration.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+
+type Props = {
+  config: AggregationWidgetConfig,
+  onConfigChange: (newConfig: AggregationWidgetConfig) => void
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const GroupByConfiguration = ({ config, onConfigChange }: Props) => {
+  return (
+    <>
+      Configuration Elements
+    </>
+  );
+};
+
+export default GroupByConfiguration;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/Metric.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/Metric.tsx
new file mode 100644
index 000000000000..a54ca0810303
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/Metric.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 { useContext } from 'react';
+import { Field, useFormikContext } from 'formik';
+
+import { defaultCompare } from 'views/logic/DefaultCompare';
+import FieldTypesContext from 'views/components/contexts/FieldTypesContext';
+import { Input } from 'components/bootstrap';
+import Select from 'components/common/Select';
+import { useStore } from 'stores/connect';
+import AggregationFunctionsStore from 'views/stores/AggregationFunctionsStore';
+import { WidgetConfigFormValues } from 'views/components/aggregationwizard/WidgetConfigForm';
+import FormikInput from 'components/common/FormikInput';
+
+type Props = {
+  index: number,
+}
+
+const sortByLabel = ({ label: label1 }: { label: string }, { label: label2 }: { label: string }) => defaultCompare(label1, label2);
+
+const percentileOptions = [25.0, 50.0, 75.0, 90.0, 95.0, 99.0].map((value) => ({ label: value, value }));
+
+const Metric = ({ index }: Props) => {
+  const functions = useStore(AggregationFunctionsStore);
+  const fieldTypes = useContext(FieldTypesContext);
+  const fieldTypeOptions = fieldTypes.all.map((fieldType) => ({ label: fieldType.name, value: fieldType.name })).toArray().sort(sortByLabel);
+  const functionOptions = Object.values(functions).map(({ type }) => ({ label: type, value: type })).sort(sortByLabel);
+
+  const { values } = useFormikContext<WidgetConfigFormValues>();
+  const currentFunction = values.metrics[index].function;
+
+  const isFieldRequired = currentFunction !== 'count';
+
+  const isPercentile = currentFunction === 'percentile';
+
+  return (
+    <>
+      <FormikInput id="name"
+                   label="Name"
+                   placeholder="Specify optional name"
+                   name={`metrics.${index}.name`}
+                   labelClassName="col-sm-3"
+                   wrapperClassName="col-sm-9" />
+
+      <Field name={`metrics.${index}.function`}>
+        {({ field: { name, value, onChange }, meta: { error } }) => (
+          <Input id="function-select"
+                 label="Function"
+                 error={error}
+                 labelClassName="col-sm-3"
+                 wrapperClassName="col-sm-9">
+            <Select options={functionOptions}
+                    clearable={false}
+                    name={name}
+                    value={value}
+                    aria-label="Select a function"
+                    onChange={(newValue) => {
+                      onChange({ target: { name, value: newValue } });
+                    }} />
+          </Input>
+        )}
+      </Field>
+
+      <Field name={`metrics.${index}.field`}>
+        {({ field: { name, value, onChange }, meta: { error } }) => (
+          <Input id="field-select"
+                 label="Field"
+                 error={error}
+                 labelClassName="col-sm-3"
+                 wrapperClassName="col-sm-9">
+            <Select options={fieldTypeOptions}
+                    clearable={!isFieldRequired}
+                    name={name}
+                    value={value}
+                    aria-label="Select a field"
+                    onChange={(newValue) => onChange({ target: { name, value: newValue } })} />
+          </Input>
+        )}
+      </Field>
+      {isPercentile && (
+        <Field name={`metrics.${index}.percentile`}>
+          {({ field: { name, value, onChange }, meta: { error } }) => (
+            <Input id="percentile-select"
+                   label="Percentile"
+                   error={error}
+                   labelClassName="col-sm-3"
+                   wrapperClassName="col-sm-9">
+              <Select options={percentileOptions}
+                      clearable={false}
+                      name={name}
+                      value={value}
+                      aria-label="Select percentile"
+                      onChange={(newValue) => onChange({ target: { name, value: newValue } })} />
+            </Input>
+          )}
+        </Field>
+      )}
+    </>
+  );
+};
+
+export default Metric;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/MetricsConfiguration.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/MetricsConfiguration.tsx
new file mode 100644
index 000000000000..6a496416fb89
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/MetricsConfiguration.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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 { useFormikContext, FieldArray } from 'formik';
+
+import { Button, ButtonToolbar } from 'components/graylog';
+
+import ElementConfigurationSection from './ElementConfigurationSection';
+import Metric from './Metric';
+
+import { WidgetConfigFormValues } from '../WidgetConfigForm';
+
+const MetricsConfiguration = () => {
+  const { values } = useFormikContext<WidgetConfigFormValues>();
+  const { metrics } = values;
+
+  return (
+    <>
+      <FieldArray name="metrics"
+                  render={(arrayHelpers) => (
+                    <>
+                      <div>
+                        {metrics.map((metric, index) => {
+                          return (
+                          // eslint-disable-next-line react/no-array-index-key
+                            <ElementConfigurationSection key={`metrics-${index}`}>
+                              <Metric index={index} />
+                            </ElementConfigurationSection>
+                          );
+                        })}
+                      </div>
+                      <ButtonToolbar>
+                        <Button className="pull-right" bsSize="small" type="button" onClick={() => arrayHelpers.push({})}>
+                          Add a Metric
+                        </Button>
+                      </ButtonToolbar>
+                    </>
+                  )} />
+    </>
+  );
+};
+
+export default MetricsConfiguration;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/SortConfiguration.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/SortConfiguration.tsx
new file mode 100644
index 000000000000..e817f948556e
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/SortConfiguration.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+
+type Props = {
+  config: AggregationWidgetConfig,
+  onConfigChange: (newConfig: AggregationWidgetConfig) => void
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const SortConfiguration = ({ config, onConfigChange }: Props) => {
+  return (
+    <>
+      Configuration Elements
+    </>
+  );
+};
+
+export default SortConfiguration;
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/VisualizationConfiguration.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/VisualizationConfiguration.tsx
new file mode 100644
index 000000000000..be88ac8446b7
--- /dev/null
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/elementConfiguration/VisualizationConfiguration.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+
+type Props = {
+  config: AggregationWidgetConfig,
+  onConfigChange: (newConfig: AggregationWidgetConfig) => void
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const VisualizationConfiguration = ({ config, onConfigChange }: Props) => {
+  return (
+    <>
+      Configuration Elements
+    </>
+  );
+};
+
+export default VisualizationConfiguration;
diff --git a/graylog2-web-interface/src/views/components/common/EditableTitle.tsx b/graylog2-web-interface/src/views/components/common/EditableTitle.tsx
index 983ae9e6f9ef..0bf24a0f9634 100644
--- a/graylog2-web-interface/src/views/components/common/EditableTitle.tsx
+++ b/graylog2-web-interface/src/views/components/common/EditableTitle.tsx
@@ -22,7 +22,6 @@ import styles from './EditableTitle.css';
 
 const StyledStaticSpan = styled.span(({ theme }) => css`
   border: 1px solid ${theme.colors.global.contentBackground};
-  padding: 2px 3px;
   font-size: ${theme.fonts.size.large};
   display: inline-block;
 `);
diff --git a/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx b/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx
index 22423f744fc0..6614e858132b 100644
--- a/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx
@@ -18,23 +18,15 @@ import * as React from 'react';
 import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import moment from 'moment';
 
-import { useStore } from 'stores/connect';
 import Spinner from 'components/common/Spinner';
 import WidgetContext from 'views/components/contexts/WidgetContext';
 import QueryEditModeContext from 'views/components/contexts/QueryEditModeContext';
-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 WidgetQueryControls from '../WidgetQueryControls';
 import IfDashboard from '../dashboard/IfDashboard';
 import HeaderElements from '../HeaderElements';
 import WidgetOverrideElements from '../WidgetOverrideElements';
-import SearchBarForm from '../searchbar/SearchBarForm';
 
 const Container = styled.div`
   display: grid;
@@ -77,58 +69,34 @@ type Props = {
   children: Array<React.ReactNode>,
 };
 
-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 EditWidgetFrame = ({ children }: Props) => {
-  const config = useStore(SearchConfigStore, ({ searchesClusterConfig }) => searchesClusterConfig);
-
   const widget = useContext(WidgetContext);
 
   if (!widget) {
     return <Spinner text="Loading widget ..." />;
   }
 
-  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 _onSubmit = (values) => onSubmit(values, widget);
-
   return (
-    <SearchBarForm initialValues={{ timerange, streams, queryString }}
-                   limitDuration={limitDuration}
-                   onSubmit={_onSubmit}
-                   validateOnMount={false}>
-      <Container>
-        <IfDashboard>
-          <QueryControls>
-            <QueryEditModeContext.Provider value="widget">
-              <HeaderElements />
-              <WidgetQueryControls />
-            </QueryEditModeContext.Provider>
-          </QueryControls>
-        </IfDashboard>
-        <Visualization>
-          <div role="presentation" style={{ height: '100%' }}>
-            <WidgetOverrideElements>
-              {children[0]}
-            </WidgetOverrideElements>
-          </div>
-        </Visualization>
-        <Footer>
-          {children[1]}
-        </Footer>
-      </Container>
-    </SearchBarForm>
+    <Container>
+      <IfDashboard>
+        <QueryControls>
+          <QueryEditModeContext.Provider value="widget">
+            <HeaderElements />
+            <WidgetQueryControls />
+          </QueryEditModeContext.Provider>
+        </QueryControls>
+      </IfDashboard>
+      <Visualization>
+        <div role="presentation" style={{ height: '100%' }}>
+          <WidgetOverrideElements>
+            {children[0]}
+          </WidgetOverrideElements>
+        </div>
+      </Visualization>
+      <Footer>
+        {children[1]}
+      </Footer>
+    </Container>
   );
 };
 
diff --git a/graylog2-web-interface/src/views/components/widgets/SaveOrCancelButtons.tsx b/graylog2-web-interface/src/views/components/widgets/SaveOrCancelButtons.tsx
index d04647cf5b11..c8c3773757aa 100644
--- a/graylog2-web-interface/src/views/components/widgets/SaveOrCancelButtons.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/SaveOrCancelButtons.tsx
@@ -15,32 +15,19 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { useCallback } from 'react';
-import { useFormikContext } from 'formik';
 
 import { Button, ButtonToolbar } from 'components/graylog';
 
 type Props = {
   onCancel: () => void,
-  onFinish: (...args: any[]) => void,
+  onFinish: () => void,
 };
 
-const SaveOrCancelButtons = ({ onFinish, onCancel }: Props) => {
-  const { handleSubmit, dirty } = useFormikContext();
-  const _onFinish = useCallback((...args) => {
-    if (handleSubmit && dirty) {
-      handleSubmit();
-    }
-
-    return onFinish(...args);
-  }, [onFinish, handleSubmit, dirty]);
-
-  return (
-    <ButtonToolbar className="pull-right">
-      <Button onClick={_onFinish} bsStyle="primary">Save</Button>
-      <Button onClick={onCancel}>Cancel</Button>
-    </ButtonToolbar>
-  );
-};
+const SaveOrCancelButtons = ({ onFinish, onCancel }: Props) => (
+  <ButtonToolbar className="pull-right">
+    <Button onClick={onFinish} bsStyle="primary">Save</Button>
+    <Button onClick={onCancel}>Cancel</Button>
+  </ButtonToolbar>
+);
 
 export default SaveOrCancelButtons;
diff --git a/graylog2-web-interface/src/views/components/widgets/Widget.tsx b/graylog2-web-interface/src/views/components/widgets/Widget.tsx
index dfd93cd3f2e3..b7a603a20059 100644
--- a/graylog2-web-interface/src/views/components/widgets/Widget.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/Widget.tsx
@@ -18,6 +18,7 @@ import * as React from 'react';
 import * as Immutable from 'immutable';
 import PropTypes from 'prop-types';
 
+import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
 import connect from 'stores/connect';
 import { widgetDefinition } from 'views/logic/Widgets';
 import { WidgetActions } from 'views/stores/WidgetStore';
@@ -28,7 +29,6 @@ import { RefreshActions } from 'views/stores/RefreshStore';
 import FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
 import WidgetModel from 'views/logic/widgets/Widget';
 import WidgetPosition from 'views/logic/widgets/WidgetPosition';
-import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
 import type { FieldTypeMappingsList } from 'views/stores/FieldTypesStore';
 import type { Rows } from 'views/logic/searchtypes/pivot/PivotHandler';
 import type { AbsoluteTimeRange } from 'views/logic/queries/Query';
diff --git a/graylog2-web-interface/src/views/components/widgets/WidgetHeader.css b/graylog2-web-interface/src/views/components/widgets/WidgetHeader.css
index 2f71bb5dae8b..99ebb5fbc7e7 100644
--- a/graylog2-web-interface/src/views/components/widgets/WidgetHeader.css
+++ b/graylog2-web-interface/src/views/components/widgets/WidgetHeader.css
@@ -5,7 +5,7 @@
     -ms-grid-row: 1;
     font-size: 1.125rem; /* theme.fonts.size.large */
     text-overflow: ellipsis;
-    /* Usign paddding instead of margin / grid-gap because of IE11 grid compatibility */
+    /* Using padding instead of margin / grid-gap because of IE11 grid compatibility */
     padding-bottom: 5px;
 }
 
diff --git a/graylog2-web-interface/src/views/logic/aggregationbuilder/Series.ts b/graylog2-web-interface/src/views/logic/aggregationbuilder/Series.ts
index 0d100b28285d..10cf57e0736d 100644
--- a/graylog2-web-interface/src/views/logic/aggregationbuilder/Series.ts
+++ b/graylog2-web-interface/src/views/logic/aggregationbuilder/Series.ts
@@ -75,7 +75,7 @@ export const parseSeries = (s: string) => {
 };
 
 export default class Series {
-  _value: InternalState;
+  private readonly _value: InternalState;
 
   constructor(func: string, config: SeriesConfig = SeriesConfig.empty()) {
     this._value = { function: func, config };
@@ -118,6 +118,13 @@ export default class Series {
       .build();
   }
 
+  static create(func: string, field?: string, parameter?: string | number) {
+    const optionalParameter = parameter ? `,${parameter}` : '';
+    const functionWithField = `${func}(${field ?? ''}${optionalParameter})`;
+
+    return Series.forFunction(functionWithField);
+  }
+
   toBuilder() {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     return new Builder(Immutable.Map(this._value));
@@ -127,7 +134,7 @@ export default class Series {
 type BuilderState = Immutable.Map<string, any>;
 
 class Builder {
-  value: BuilderState;
+  private readonly value: BuilderState;
 
   constructor(value: BuilderState = Immutable.Map()) {
     this.value = value;
diff --git a/graylog2-web-interface/src/views/logic/aggregationbuilder/SeriesConfig.ts b/graylog2-web-interface/src/views/logic/aggregationbuilder/SeriesConfig.ts
index 4d0c3f708e7f..b716c182bc8a 100644
--- a/graylog2-web-interface/src/views/logic/aggregationbuilder/SeriesConfig.ts
+++ b/graylog2-web-interface/src/views/logic/aggregationbuilder/SeriesConfig.ts
@@ -25,7 +25,7 @@ type InternalState = {
 };
 
 export default class SeriesConfig {
-  _value: InternalState;
+  private readonly _value: InternalState;
 
   constructor(name: string | undefined | null) {
     this._value = { name };
@@ -60,7 +60,7 @@ export default class SeriesConfig {
 type BuilderState = Immutable.Map<string, any>;
 
 class Builder {
-  value: BuilderState;
+  private readonly value: BuilderState;
 
   constructor(value: BuilderState = Immutable.Map()) {
     this.value = value;
diff --git a/graylog2-web-interface/src/views/stores/AggregationFunctionsStore.js b/graylog2-web-interface/src/views/stores/AggregationFunctionsStore.ts
similarity index 82%
rename from graylog2-web-interface/src/views/stores/AggregationFunctionsStore.js
rename to graylog2-web-interface/src/views/stores/AggregationFunctionsStore.ts
index e25e590ff204..5bcc7e1ae741 100644
--- a/graylog2-web-interface/src/views/stores/AggregationFunctionsStore.js
+++ b/graylog2-web-interface/src/views/stores/AggregationFunctionsStore.ts
@@ -19,10 +19,15 @@ import Reflux from 'reflux';
 import * as URLUtils from 'util/URLUtils';
 import fetch from 'logic/rest/FetchProvider';
 import { singletonStore } from 'views/logic/singleton';
+import { Store } from 'stores/StoreTypes';
 
 const functionsUrl = URLUtils.qualifyUrl('/views/functions');
 
-export default singletonStore(
+type AggregationFunctionsStoreState = {
+  [functionName: string]: { type: string } | undefined,
+}
+
+const AggregationFunctionsStore: Store<AggregationFunctionsStoreState> = singletonStore(
   'views.AggregationFunctions',
   () => Reflux.createStore({
     init() {
@@ -47,3 +52,5 @@ export default singletonStore(
     },
   }),
 );
+
+export default AggregationFunctionsStore;