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

linuspahl · 2021-03-18T13:42:02Z

Please note: We need to merge #10212 first.

Motivation and Context

To make better use of the space we have in the aggregation builder edit component, we created a new layout which displays the controls on the left side of the aggregation. The new implementation displays only the configured aggregation elements.

Description

We created a new component AggregationWizard which contains the new controls and the visualization.
- We did not set the editComponent in views/bindings to not break the widget configuration.
- if you want to test the new layout, please define the AggregationWizard as the editComponent for aggregations.
  import AggregationWizard from 'views/components/aggregationwizard/AggregationWizard';
- Once we've deleted the old AggregationControls we can rename the AggregationWizard to AggregationControls.
All aggregation elements are part of the aggregationWizard/aggregationElements directory, in the future we will include them in the views/bindings.
We created an AggregationActionSelect which is only listing not configured actions.
We created an ActionConfigurationContainer which displays the title of an action
We implemented the required logic and components to configure metrics.

Fixes: #9737

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (non-breaking change)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.

dennisoelkers

Looks good, works great! 🎉

…figured multiple times.

…justing bootstrap elements padding. The negative row / form-group margin caused the horizontal scroll bar.

…Use` with `allowCreate`.

…plify testing.

…ich separates each section of the metrics element configuration.

…t 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 0efd3b2) * 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>

linuspahl added the search label Mar 18, 2021

linuspahl requested a review from dennisoelkers March 18, 2021 13:42

dennisoelkers approved these changes Mar 19, 2021

View reviewed changes

linuspahl mentioned this pull request Mar 19, 2021

Support configuration of group by / row & column pivots in new aggregation controls. #10293

Merged

6 tasks

linuspahl added 26 commits March 22, 2021 11:33

Creating basic AggregationWizard component.

ea3d5b8

Creating basic components for aggregation attribute configuration.

e316666

Rename aggregation attribute to aggregation action.

40513a8

Improve aggregation actions structure and expandability.

a582e48

Fixing typo.

4631576

Fixing headline font size and AggregationWizard props.

cdcaddd

Creating test for AggregationActionSelect.

3737a6a

Creating test for ActionConfigurationContainer.

2bbc462

Creating test for AggregationWizard.

5d55afb

Clearing AggregationActionSelect value after selection an action.

d4faddb

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

4c45202

Reverting AggregationWizard usage in views bindings.

d9bdc61

Fixing linter warnings.

b69e575

List aggregation action in AggregationActionSelect if it can be con…

f6e4b42

…figured multiple times.

Renaming aggregation action to aggregation element.

4c2d08e

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

9ab826a

Removing no longer needed createDefault series method.

9b7baa5

Changing order of configured aggregation elements.

465e30a

Always display configured aggregation elements in correct order.

41fa08f

Updating AggregationElementSelect.test.`

4ac3736

Creating WidgetConfigForm.

0a1f8bf

Moving SearchBarForm from EditWidgetFrame to WidgetQueryControls.

a3eee78

Rename MetricConfiguration to MetricsConfiguration.

602f72e

Creating basic metric form with function and field select.

4b7a698

Enable widget configuration update for metrics.

bc05ecf

Providing correct initial values for metrics configuration form.

125588f

dennisoelkers and others added 23 commits March 22, 2021 11:33

Removing section headlines to save vertical space.

d1c8603

Fixing horizontal scrolling of element configuration containers by ad…

bf32d7f

…justing bootstrap elements padding. The negative row / form-group margin caused the horizontal scroll bar.

Creating one file for each aggregation element.

eb688fc

Fixing types.

dc11e4e

Fixing types.

0620a7a

Replacing aggregation element properties isConfigured and `multiple…

3494885

…Use` with `allowCreate`.

Defining theme color for element separator.

6a75259

Reducing element container padding.

acd6127

Fixing allowCreate usage.

cfa8f71

Providing form values as a prop for AggregationElementSelect to sim…

3217cef

…plify testing.

Updating AggregationElementSelect.test.

28ce5d0

Udpating MetricsConfiguration.test.

1bf0f9c

Adding missing key in MetricsConfiguration.

797fd72

Extend PropType definition for common Select value with number.

a3cfe9f

Extending AgggregationWizard.test with tests for metrics element.

bf3eb35

Fixing linter warnings

2c776ed

Updating WidgetQueryControls.test regarding SearchBarForm addition.

50ac44a

Implement ElementConfigurationSection for MetricsConfiguration wh…

f4745cb

…ich separates each section of the metrics element configuration.

Test configuration of metric with multiple functions.

4444aa1

Creating separate file for metric element tests.

d044dce

Fixing linter warnings.

e0268a6

Reimplementing type definition for Widget.tsx config prop.

77aade5

Fixing import path.

c450d95

dennisoelkers force-pushed the widget-aggregation-wizard-forms branch from c89778f to c450d95 Compare March 22, 2021 10:33

dennisoelkers merged commit 9f7c4e4 into master Mar 22, 2021

dennisoelkers deleted the widget-aggregation-wizard-forms branch March 22, 2021 12:39

This was referenced Mar 25, 2021

Aggregation Builder: Implement Metrics Actions #9738

Closed

Aggregation Builder: Implement validation for actions #9743

Closed

dennisoelkers mentioned this pull request Aug 19, 2021

Aggregation builder config popovers stack up #7392

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

linuspahl commented Mar 18, 2021 •

edited by dennisoelkers

Loading

dennisoelkers left a comment

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

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

Conversation

linuspahl commented Mar 18, 2021 • edited by dennisoelkers Loading

Motivation and Context

Description

Types of changes

Checklist:

dennisoelkers left a comment

Choose a reason for hiding this comment

linuspahl commented Mar 18, 2021 •

edited by dennisoelkers

Loading