Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution][Detection Page] Status filter refactor #107249

Merged
merged 9 commits into from
Aug 10, 2021
Merged

[Security Solution][Detection Page] Status filter refactor #107249

merged 9 commits into from
Aug 10, 2021

Conversation

dplumlee
Copy link
Contributor

@dplumlee dplumlee commented Jul 29, 2021 •
edited
Loading

Summary

Related to the RAC updates

Moves the status filter from the alerts table to the top of the page and has it control the data displayed in the alerts histogram as well

Screenshots

Screen Shot 2021-08-04 at 5 44 07 PM

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@dplumlee dplumlee added release_note:enhancement v8.0.0 Team:Detections and Resp Security Detection Response Team Feature:Detection Alerts Security Solution Detection Alerts Feature Feature:RAC label obsolete v7.15.0 labels Jul 29, 2021
@dplumlee dplumlee self-assigned this Jul 29, 2021
@peluja1012 peluja1012 added the Theme: rac label obsolete label Jul 29, 2021
@dplumlee dplumlee requested a review from machadoum July 29, 2021 22:56
@dplumlee dplumlee force-pushed the status-filter-remodel branch 2 times, most recently from 7b736d0 to 206895d Compare August 4, 2021 21:46
@dplumlee dplumlee marked this pull request as ready for review August 4, 2021 21:47
@dplumlee dplumlee requested a review from a team as a code owner August 4, 2021 21:47
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detections-response (Team:Detections and Resp)

machadoum
machadoum approved these changes Aug 5, 2021
View reviewed changes
Copy link
Member

@machadoum machadoum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Nice work! 🎉 🍾

...ns/security_solution/public/detections/components/alerts_table/alerts_filter_group/index.tsx Outdated Show resolved Hide resolved
This was referenced Aug 9, 2021
Closed
Closed
@dplumlee dplumlee force-pushed the status-filter-remodel branch from a2c0458 to d33c233 Compare August 9, 2021 19:00
@dplumlee dplumlee added the auto-backport Deprecated - use backport:version if exact versions are needed label Aug 9, 2021
@dplumlee dplumlee enabled auto-merge (squash) August 9, 2021 20:51
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
securitySolution 6.5MB 6.5MB +3.1KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @dplumlee

@dplumlee dplumlee merged commit 6b29ca1 into elastic:master Aug 10, 2021
@kibanamachine kibanamachine mentioned this pull request Aug 10, 2021
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Aug 10, 2021
@dplumlee @kibanamachine
[Security Solution][Detection Page] Status filter refactor (elastic#1…
97c15ca 
…07249)
@kibanamachine
Copy link
Contributor

💚 Backport successful

Status Branch Result
✅ 7.x

This backport PR will be merged automatically after passing CI.

@dplumlee dplumlee deleted the status-filter-remodel branch August 10, 2021 03:29
kibanamachine added a commit that referenced this pull request Aug 10, 2021
@kibanamachine @dplumlee
[7.x] [Security Solution][Detection Page] Status filter refactor (#10…
0b21c67 
…7249) (#107995)

* [Security Solution][Detection Page] Status filter refactor (#107249)

* fixes merge conflicts

Co-authored-by: Davis Plumlee <[email protected]>
Co-authored-by: Davis Plumlee <[email protected]>
@michaelolo24 michaelolo24 mentioned this pull request Aug 11, 2021
Closed
48 tasks
@spong spong mentioned this pull request Aug 11, 2021
Closed
@FrankHassanabad FrankHassanabad mentioned this pull request Aug 12, 2021
Merged
1 task
FrankHassanabad added a commit that referenced this pull request Aug 12, 2021
@FrankHassanabad
Uses the transient for the styled component to avoid React stack trac…
e072409 
…es (#108435)

## Summary

When running the tests for detections like so:

```sh
node scripts/jest.js x-pack/plugins/security_solution/public/detections
```

We see two stack traces come up:
```sh
 PASS  x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx (51.663 s)
  ● Console

    console.error
      Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in button (created by EuiButtonEmpty)
          in EuiButtonEmpty (created by EuiFilterButton)
          in EuiFilterButton (created by Styled(EuiFilterButton))
          in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent)
          in div (created by EuiFilterGroup)
          in EuiFilterGroup (created by Styled(EuiFilterGroup))
          in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent)
          in AlertsTableFilterGroupComponent (created by DetectionEnginePageComponent)
          in div (created by Display)
          in Display (created by DetectionEnginePageComponent)
          in div (created by Wrapper)
          in Wrapper (created by SecuritySolutionPageWrapperComponent)
          in SecuritySolutionPageWrapperComponent (created by DetectionEnginePageComponent)
          in div (created by styled.div)
          in styled.div (created by DetectionEnginePageComponent)
          in DetectionEnginePageComponent (created by ConnectFunction)
          in ConnectFunction
          in Router
          in Provider (created by App)
          in App (created by ErrorBoundary)
          in ErrorBoundary (created by DragDropContext)
          in DragDropContext (created by TestProvidersComponent)
          in ThemeProvider (created by TestProvidersComponent)
          in Provider (created by TestProvidersComponent)
          in Provider
          in Unknown (created by TestProvidersComponent)
          in PseudoLocaleWrapper (created by I18nProvider)
          in IntlProvider (created by I18nProvider)
          in I18nProvider (created by TestProvidersComponent)
          in TestProvidersComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5)


 PASS  x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx (54.841 s)
  ● Console

    console.error
      Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in button (created by EuiButtonEmpty)
          in EuiButtonEmpty (created by EuiFilterButton)
          in EuiFilterButton (created by Styled(EuiFilterButton))
          in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent)
          in div (created by EuiFilterGroup)
          in EuiFilterGroup (created by Styled(EuiFilterGroup))
          in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent)
          in AlertsTableFilterGroupComponent (created by RuleDetailsPageComponent)
          in div (created by Wrapper)
          in Wrapper (created by SecuritySolutionPageWrapperComponent)
          in SecuritySolutionPageWrapperComponent (created by RuleDetailsPageComponent)
          in div (created by styled.div)
          in styled.div (created by RuleDetailsPageComponent)
          in RuleDetailsPageComponent (created by ConnectFunction)
          in ConnectFunction
          in Router
          in Provider (created by App)
          in App (created by ErrorBoundary)
          in ErrorBoundary (created by DragDropContext)
          in DragDropContext (created by TestProvidersComponent)
          in ThemeProvider (created by TestProvidersComponent)
          in Provider (created by TestProvidersComponent)
          in Provider
          in Unknown (created by TestProvidersComponent)
          in PseudoLocaleWrapper (created by I18nProvider)
          in IntlProvider (created by I18nProvider)
          in I18nProvider (created by TestProvidersComponent)
          in TestProvidersComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:9478:3)
```

This is because it looks like we should be using transient variables for styled per [here](https://styled-components.com/docs/api#transient-props)

This was introduced from this [PR](#107249)

### Checklist

- [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Aug 12, 2021
@FrankHassanabad @kibanamachine
Uses the transient for the styled component to avoid React stack trac…
2de447a 
…es (elastic#108435)

## Summary

When running the tests for detections like so:

```sh
node scripts/jest.js x-pack/plugins/security_solution/public/detections
```

We see two stack traces come up:
```sh
 PASS  x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx (51.663 s)
  ● Console

    console.error
      Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in button (created by EuiButtonEmpty)
          in EuiButtonEmpty (created by EuiFilterButton)
          in EuiFilterButton (created by Styled(EuiFilterButton))
          in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent)
          in div (created by EuiFilterGroup)
          in EuiFilterGroup (created by Styled(EuiFilterGroup))
          in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent)
          in AlertsTableFilterGroupComponent (created by DetectionEnginePageComponent)
          in div (created by Display)
          in Display (created by DetectionEnginePageComponent)
          in div (created by Wrapper)
          in Wrapper (created by SecuritySolutionPageWrapperComponent)
          in SecuritySolutionPageWrapperComponent (created by DetectionEnginePageComponent)
          in div (created by styled.div)
          in styled.div (created by DetectionEnginePageComponent)
          in DetectionEnginePageComponent (created by ConnectFunction)
          in ConnectFunction
          in Router
          in Provider (created by App)
          in App (created by ErrorBoundary)
          in ErrorBoundary (created by DragDropContext)
          in DragDropContext (created by TestProvidersComponent)
          in ThemeProvider (created by TestProvidersComponent)
          in Provider (created by TestProvidersComponent)
          in Provider
          in Unknown (created by TestProvidersComponent)
          in PseudoLocaleWrapper (created by I18nProvider)
          in IntlProvider (created by I18nProvider)
          in I18nProvider (created by TestProvidersComponent)
          in TestProvidersComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5)


 PASS  x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx (54.841 s)
  ● Console

    console.error
      Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in button (created by EuiButtonEmpty)
          in EuiButtonEmpty (created by EuiFilterButton)
          in EuiFilterButton (created by Styled(EuiFilterButton))
          in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent)
          in div (created by EuiFilterGroup)
          in EuiFilterGroup (created by Styled(EuiFilterGroup))
          in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent)
          in AlertsTableFilterGroupComponent (created by RuleDetailsPageComponent)
          in div (created by Wrapper)
          in Wrapper (created by SecuritySolutionPageWrapperComponent)
          in SecuritySolutionPageWrapperComponent (created by RuleDetailsPageComponent)
          in div (created by styled.div)
          in styled.div (created by RuleDetailsPageComponent)
          in RuleDetailsPageComponent (created by ConnectFunction)
          in ConnectFunction
          in Router
          in Provider (created by App)
          in App (created by ErrorBoundary)
          in ErrorBoundary (created by DragDropContext)
          in DragDropContext (created by TestProvidersComponent)
          in ThemeProvider (created by TestProvidersComponent)
          in Provider (created by TestProvidersComponent)
          in Provider
          in Unknown (created by TestProvidersComponent)
          in PseudoLocaleWrapper (created by I18nProvider)
          in IntlProvider (created by I18nProvider)
          in I18nProvider (created by TestProvidersComponent)
          in TestProvidersComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:9478:3)
```

This is because it looks like we should be using transient variables for styled per [here](https://styled-components.com/docs/api#transient-props)

This was introduced from this [PR](elastic#107249)

### Checklist

- [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
kibanamachine added a commit that referenced this pull request Aug 12, 2021
@kibanamachine @FrankHassanabad
Uses the transient for the styled component to avoid React stack trac…
f38ba1f 
…es (#108435) (#108455)

## Summary

When running the tests for detections like so:

```sh
node scripts/jest.js x-pack/plugins/security_solution/public/detections
```

We see two stack traces come up:
```sh
 PASS  x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx (51.663 s)
  ● Console

    console.error
      Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in button (created by EuiButtonEmpty)
          in EuiButtonEmpty (created by EuiFilterButton)
          in EuiFilterButton (created by Styled(EuiFilterButton))
          in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent)
          in div (created by EuiFilterGroup)
          in EuiFilterGroup (created by Styled(EuiFilterGroup))
          in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent)
          in AlertsTableFilterGroupComponent (created by DetectionEnginePageComponent)
          in div (created by Display)
          in Display (created by DetectionEnginePageComponent)
          in div (created by Wrapper)
          in Wrapper (created by SecuritySolutionPageWrapperComponent)
          in SecuritySolutionPageWrapperComponent (created by DetectionEnginePageComponent)
          in div (created by styled.div)
          in styled.div (created by DetectionEnginePageComponent)
          in DetectionEnginePageComponent (created by ConnectFunction)
          in ConnectFunction
          in Router
          in Provider (created by App)
          in App (created by ErrorBoundary)
          in ErrorBoundary (created by DragDropContext)
          in DragDropContext (created by TestProvidersComponent)
          in ThemeProvider (created by TestProvidersComponent)
          in Provider (created by TestProvidersComponent)
          in Provider
          in Unknown (created by TestProvidersComponent)
          in PseudoLocaleWrapper (created by I18nProvider)
          in IntlProvider (created by I18nProvider)
          in I18nProvider (created by TestProvidersComponent)
          in TestProvidersComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5)


 PASS  x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx (54.841 s)
  ● Console

    console.error
      Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in button (created by EuiButtonEmpty)
          in EuiButtonEmpty (created by EuiFilterButton)
          in EuiFilterButton (created by Styled(EuiFilterButton))
          in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent)
          in div (created by EuiFilterGroup)
          in EuiFilterGroup (created by Styled(EuiFilterGroup))
          in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent)
          in AlertsTableFilterGroupComponent (created by RuleDetailsPageComponent)
          in div (created by Wrapper)
          in Wrapper (created by SecuritySolutionPageWrapperComponent)
          in SecuritySolutionPageWrapperComponent (created by RuleDetailsPageComponent)
          in div (created by styled.div)
          in styled.div (created by RuleDetailsPageComponent)
          in RuleDetailsPageComponent (created by ConnectFunction)
          in ConnectFunction
          in Router
          in Provider (created by App)
          in App (created by ErrorBoundary)
          in ErrorBoundary (created by DragDropContext)
          in DragDropContext (created by TestProvidersComponent)
          in ThemeProvider (created by TestProvidersComponent)
          in Provider (created by TestProvidersComponent)
          in Provider
          in Unknown (created by TestProvidersComponent)
          in PseudoLocaleWrapper (created by I18nProvider)
          in IntlProvider (created by I18nProvider)
          in I18nProvider (created by TestProvidersComponent)
          in TestProvidersComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:9478:3)
```

This is because it looks like we should be using transient variables for styled per [here](https://styled-components.com/docs/api#transient-props)

This was introduced from this [PR](#107249)

### Checklist

- [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

Co-authored-by: Frank Hassanabad <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@machadoum machadoum machadoum approved these changes

Assignees

@dplumlee dplumlee

Labels
auto-backport Deprecated - use backport:version if exact versions are needed Feature:Detection Alerts Security Solution Detection Alerts Feature Feature:RAC label obsolete release_note:enhancement Team:Detections and Resp Security Detection Response Team Theme: rac label obsolete v7.15.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@dplumlee @elasticmachine @kibanamachine @machadoum @peluja1012