[Security Solution] - remove styled-components and cleanup for event viewer and data table components#206523
Merged
PhilippeOberti merged 3 commits intoelastic:mainfrom Jan 15, 2025
Conversation
PhilippeOberti
added
release_note:skip
Contributor
|
Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations) |
elastic-vault-github-plugin-prod
bot
requested a review
from a team
as a code owner
janmonschke
reviewed
Jan 14, 2025
Contributor
There was a problem hiding this comment.
false is the default value for stripes, this line can be removed
Suggested change
| stripes: false, |
janmonschke
reviewed
Jan 14, 2025
x-pack/solutions/security/packages/data_table/components/data_table/index.tsx
Outdated
Show resolved
Hide resolved
janmonschke
reviewed
Jan 14, 2025
Contributor
There was a problem hiding this comment.
Do we know that the user has crud for alerts at this point?
Contributor
Author
There was a problem hiding this comment.
so I believe this code could actually be even further cleaned up. Currently the only bulk action that we have in the Host, User and Network Events tabs is investigate in timeline, which is not CRUD only. The 4th place where this component is used is the Rule preview, and there aren't any checkboxes to even show the bulk action dropdown.
This code is so messy/out of date it really need to be cleaned up further... I believe this is from the old usage of this component on the alerts page, which had way more bulk actions
I think we're safe with the hardcoded hasCrudPermissions: true for now. I don't feel like cleaning more as part of this PR, unless you think I should?
Contributor
There was a problem hiding this comment.
I'm worried that this will result in weird effects in combination with my timeline privileges PR. But it seems like this PR will merge first and I will be able to tackle that in my PR then.
Contributor
Author
There was a problem hiding this comment.
I looked at this file is actually not changed in your PR. It seems that there is a single file that will overlap, and thankfully on my end I'm just changing a single property name. No lines should be in conflict!
janmonschke
reviewed
Jan 14, 2025
Contributor
Author
There was a problem hiding this comment.
see my answer #206523 (comment) and let me know if you're ok with it!
lgestc
approved these changes
Jan 14, 2025
jbudz
approved these changes
Jan 14, 2025
Contributor
jbudz
left a comment
jbudz
left a comment
There was a problem hiding this comment.
packages/kbn-babel-preset/styled_components_files.js LGTM
PhilippeOberti
force-pushed
the
styled-components-1
branch
from
9cbf22c to
76a2053
Compare
Contributor
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
|
Merged
1 task
PhilippeOberti
added a commit
that referenced
this pull request
Jan 15, 2025
…ne header actions (#206694) ## Summary Similar to [this previous PR](#206523), this PR originally aimed at replacing the usages styled-components with @emotion/react in the security_solution/public/common/components/header_actions folder. I quickly realized that a lot of props and event components were actually not used at all, so a cleanup was welcome. Absolutely no UI or behavior logic changes should be introduced by this PR. This PR will impact the tables in timeline, and the markdown use in osquery. The biggest code cleanup are: - removing a couple of components related to the header actions used in timeline - removing random unused translations, constants or helper functions #### Timeline query, correlation and pinned tabs    ### Checklist - [x] [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
Contributor
|
Starting backport for target branches: 8.x https://github.com/elastic/kibana/actions/runs/12791407289 |
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jan 15, 2025
…viewer and data table components (elastic#206523) ## Summary This PR originally aimed at replacing the usages `styled-components` with `@emotion/react` in the `security_solution/public/common/components/events_viewer` folder. I quickly realized removing some of these would require a small refactor. This lead to making a few more changes, as many properties were actually unused so a cleanup was welcome. Only 2 small UI changes are introduced in this PR: - the inspect icon on the top right corner of the tables are now always visible instead of only visible on hover. I'm aware that this is a different behavior from the alerts table in the alerts page, but we also have other tables (like the one on threat intelligence page) where the icon is always shown. Waiting on @codearos for confirmation here - the `Grid view` and `Additional filters` button are reversed due to the simplification of the code No other UI changes are introduced. No behavior logic has been changed either. The biggest code cleanup are: - removal of a bunch of unused properties and logic - deletion of the RightTopMenu component: it was used in both `StatefulEventsViewerComponent` and `getPersistentControlsHook` but none of the internal logic was overlapping. I don't know how we got there but its current implementation was overly complex and completely unnecessary... #### Alerts page  #### Rule creation page  #### Host/User/Network events tab  #### Host session view tab  ### Checklist - [x] [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: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 7087891)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jan 15, 2025
…event viewer and data table components (#206523) (#206807) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] - remove styled-components and cleanup for event viewer and data table components (#206523)](#206523) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-01-15T15:18:19Z","message":"[Security Solution] - remove styled-components and cleanup for event viewer and data table components (#206523)\n\n## Summary\r\n\r\nThis PR originally aimed at replacing the usages `styled-components`\r\nwith `@emotion/react` in the\r\n`security_solution/public/common/components/events_viewer` folder. I\r\nquickly realized removing some of these would require a small refactor.\r\nThis lead to making a few more changes, as many properties were actually\r\nunused so a cleanup was welcome.\r\n\r\nOnly 2 small UI changes are introduced in this PR:\r\n- the inspect icon on the top right corner of the tables are now always\r\nvisible instead of only visible on hover. I'm aware that this is a\r\ndifferent behavior from the alerts table in the alerts page, but we also\r\nhave other tables (like the one on threat intelligence page) where the\r\nicon is always shown. Waiting on @codearos for confirmation here\r\n- the `Grid view` and `Additional filters` button are reversed due to\r\nthe simplification of the code\r\n\r\nNo other UI changes are introduced. No behavior logic has been changed\r\neither.\r\n\r\nThe biggest code cleanup are:\r\n- removal of a bunch of unused properties and logic\r\n- deletion of the RightTopMenu component: it was used in both\r\n`StatefulEventsViewerComponent` and `getPersistentControlsHook` but none\r\nof the internal logic was overlapping. I don't know how we got there but\r\nits current implementation was overly complex and completely\r\nunnecessary...\r\n\r\n#### Alerts page\r\n\r\n\r\n\r\n#### Rule creation page\r\n\r\n\r\n\r\n#### Host/User/Network events tab\r\n\r\n\r\n\r\n#### Host session view tab\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"708789102ffd94c3615e03bc719f1134c4d855f6","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0"],"title":"[Security Solution] - remove styled-components and cleanup for event viewer and data table components","number":206523,"url":"https://github.com/elastic/kibana/pull/206523","mergeCommit":{"message":"[Security Solution] - remove styled-components and cleanup for event viewer and data table components (#206523)\n\n## Summary\r\n\r\nThis PR originally aimed at replacing the usages `styled-components`\r\nwith `@emotion/react` in the\r\n`security_solution/public/common/components/events_viewer` folder. I\r\nquickly realized removing some of these would require a small refactor.\r\nThis lead to making a few more changes, as many properties were actually\r\nunused so a cleanup was welcome.\r\n\r\nOnly 2 small UI changes are introduced in this PR:\r\n- the inspect icon on the top right corner of the tables are now always\r\nvisible instead of only visible on hover. I'm aware that this is a\r\ndifferent behavior from the alerts table in the alerts page, but we also\r\nhave other tables (like the one on threat intelligence page) where the\r\nicon is always shown. Waiting on @codearos for confirmation here\r\n- the `Grid view` and `Additional filters` button are reversed due to\r\nthe simplification of the code\r\n\r\nNo other UI changes are introduced. No behavior logic has been changed\r\neither.\r\n\r\nThe biggest code cleanup are:\r\n- removal of a bunch of unused properties and logic\r\n- deletion of the RightTopMenu component: it was used in both\r\n`StatefulEventsViewerComponent` and `getPersistentControlsHook` but none\r\nof the internal logic was overlapping. I don't know how we got there but\r\nits current implementation was overly complex and completely\r\nunnecessary...\r\n\r\n#### Alerts page\r\n\r\n\r\n\r\n#### Rule creation page\r\n\r\n\r\n\r\n#### Host/User/Network events tab\r\n\r\n\r\n\r\n#### Host session view tab\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"708789102ffd94c3615e03bc719f1134c4d855f6"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/206523","number":206523,"mergeCommit":{"message":"[Security Solution] - remove styled-components and cleanup for event viewer and data table components (#206523)\n\n## Summary\r\n\r\nThis PR originally aimed at replacing the usages `styled-components`\r\nwith `@emotion/react` in the\r\n`security_solution/public/common/components/events_viewer` folder. I\r\nquickly realized removing some of these would require a small refactor.\r\nThis lead to making a few more changes, as many properties were actually\r\nunused so a cleanup was welcome.\r\n\r\nOnly 2 small UI changes are introduced in this PR:\r\n- the inspect icon on the top right corner of the tables are now always\r\nvisible instead of only visible on hover. I'm aware that this is a\r\ndifferent behavior from the alerts table in the alerts page, but we also\r\nhave other tables (like the one on threat intelligence page) where the\r\nicon is always shown. Waiting on @codearos for confirmation here\r\n- the `Grid view` and `Additional filters` button are reversed due to\r\nthe simplification of the code\r\n\r\nNo other UI changes are introduced. No behavior logic has been changed\r\neither.\r\n\r\nThe biggest code cleanup are:\r\n- removal of a bunch of unused properties and logic\r\n- deletion of the RightTopMenu component: it was used in both\r\n`StatefulEventsViewerComponent` and `getPersistentControlsHook` but none\r\nof the internal logic was overlapping. I don't know how we got there but\r\nits current implementation was overly complex and completely\r\nunnecessary...\r\n\r\n#### Alerts page\r\n\r\n\r\n\r\n#### Rule creation page\r\n\r\n\r\n\r\n#### Host/User/Network events tab\r\n\r\n\r\n\r\n#### Host session view tab\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"708789102ffd94c3615e03bc719f1134c4d855f6"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>
PhilippeOberti
added a commit
to PhilippeOberti/kibana
that referenced
this pull request
Jan 15, 2025
…ne header actions (elastic#206694) ## Summary Similar to [this previous PR](elastic#206523), this PR originally aimed at replacing the usages styled-components with @emotion/react in the security_solution/public/common/components/header_actions folder. I quickly realized that a lot of props and event components were actually not used at all, so a cleanup was welcome. Absolutely no UI or behavior logic changes should be introduced by this PR. This PR will impact the tables in timeline, and the markdown use in osquery. The biggest code cleanup are: - removing a couple of components related to the header actions used in timeline - removing random unused translations, constants or helper functions #### Timeline query, correlation and pinned tabs    ### Checklist - [x] [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 (cherry picked from commit d9b9425) # Conflicts: # packages/kbn-babel-preset/styled_components_files.js
PhilippeOberti
added a commit
that referenced
this pull request
Jan 15, 2025
…timeline header actions (#206694) (#206830) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] - remove styled-components and cleanup for timeline header actions (#206694)](#206694) <!--- Backport version: 8.9.8 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-01-15T15:14:28Z","message":"[Security Solution] - remove styled-components and cleanup for timeline header actions (#206694)\n\n## Summary\r\n\r\nSimilar to [this previous\r\nPR](#206523), this PR originally\r\naimed at replacing the usages styled-components with @emotion/react in\r\nthe security_solution/public/common/components/header_actions folder. I\r\nquickly realized that a lot of props and event components were actually\r\nnot used at all, so a cleanup was welcome.\r\n\r\nAbsolutely no UI or behavior logic changes should be introduced by this\r\nPR.\r\n\r\nThis PR will impact the tables in timeline, and the markdown use in\r\nosquery.\r\n\r\nThe biggest code cleanup are:\r\n- removing a couple of components related to the header actions used in\r\ntimeline\r\n- removing random unused translations, constants or helper functions\r\n\r\n#### Timeline query, correlation and pinned tabs\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"d9b942537250184e3d802f96ae0a5ed221ad6e38","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0"],"number":206694,"url":"https://github.com/elastic/kibana/pull/206694","mergeCommit":{"message":"[Security Solution] - remove styled-components and cleanup for timeline header actions (#206694)\n\n## Summary\r\n\r\nSimilar to [this previous\r\nPR](#206523), this PR originally\r\naimed at replacing the usages styled-components with @emotion/react in\r\nthe security_solution/public/common/components/header_actions folder. I\r\nquickly realized that a lot of props and event components were actually\r\nnot used at all, so a cleanup was welcome.\r\n\r\nAbsolutely no UI or behavior logic changes should be introduced by this\r\nPR.\r\n\r\nThis PR will impact the tables in timeline, and the markdown use in\r\nosquery.\r\n\r\nThe biggest code cleanup are:\r\n- removing a couple of components related to the header actions used in\r\ntimeline\r\n- removing random unused translations, constants or helper functions\r\n\r\n#### Timeline query, correlation and pinned tabs\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"d9b942537250184e3d802f96ae0a5ed221ad6e38"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/206694","number":206694,"mergeCommit":{"message":"[Security Solution] - remove styled-components and cleanup for timeline header actions (#206694)\n\n## Summary\r\n\r\nSimilar to [this previous\r\nPR](#206523), this PR originally\r\naimed at replacing the usages styled-components with @emotion/react in\r\nthe security_solution/public/common/components/header_actions folder. I\r\nquickly realized that a lot of props and event components were actually\r\nnot used at all, so a cleanup was welcome.\r\n\r\nAbsolutely no UI or behavior logic changes should be introduced by this\r\nPR.\r\n\r\nThis PR will impact the tables in timeline, and the markdown use in\r\nosquery.\r\n\r\nThe biggest code cleanup are:\r\n- removing a couple of components related to the header actions used in\r\ntimeline\r\n- removing random unused translations, constants or helper functions\r\n\r\n#### Timeline query, correlation and pinned tabs\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"d9b942537250184e3d802f96ae0a5ed221ad6e38"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
viduni94
pushed a commit
to viduni94/kibana
that referenced
this pull request
Jan 23, 2025
…ne header actions (elastic#206694) ## Summary Similar to [this previous PR](elastic#206523), this PR originally aimed at replacing the usages styled-components with @emotion/react in the security_solution/public/common/components/header_actions folder. I quickly realized that a lot of props and event components were actually not used at all, so a cleanup was welcome. Absolutely no UI or behavior logic changes should be introduced by this PR. This PR will impact the tables in timeline, and the markdown use in osquery. The biggest code cleanup are: - removing a couple of components related to the header actions used in timeline - removing random unused translations, constants or helper functions #### Timeline query, correlation and pinned tabs    ### Checklist - [x] [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
viduni94
pushed a commit
to viduni94/kibana
that referenced
this pull request
Jan 23, 2025
…viewer and data table components (elastic#206523) ## Summary This PR originally aimed at replacing the usages `styled-components` with `@emotion/react` in the `security_solution/public/common/components/events_viewer` folder. I quickly realized removing some of these would require a small refactor. This lead to making a few more changes, as many properties were actually unused so a cleanup was welcome. Only 2 small UI changes are introduced in this PR: - the inspect icon on the top right corner of the tables are now always visible instead of only visible on hover. I'm aware that this is a different behavior from the alerts table in the alerts page, but we also have other tables (like the one on threat intelligence page) where the icon is always shown. Waiting on @codearos for confirmation here - the `Grid view` and `Additional filters` button are reversed due to the simplification of the code No other UI changes are introduced. No behavior logic has been changed either. The biggest code cleanup are: - removal of a bunch of unused properties and logic - deletion of the RightTopMenu component: it was used in both `StatefulEventsViewerComponent` and `getPersistentControlsHook` but none of the internal logic was overlapping. I don't know how we got there but its current implementation was overly complex and completely unnecessary... #### Alerts page  #### Rule creation page  #### Host/User/Network events tab  #### Host session view tab  ### Checklist - [x] [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: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Closed
1 task
rylnd
added a commit
to rylnd/kibana
that referenced
this pull request
Mar 11, 2025
I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing seems to have confirmed this.
rylnd
added a commit
that referenced
this pull request
Mar 12, 2025
## Summary Addresses #213706. I suspect that this stopped working when #206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 12, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd> (cherry picked from commit 01e31ea)
kibanamachine
added a commit
that referenced
this pull request
Mar 12, 2025
…) (#214274) # Backport This will backport the following commits from `main` to `9.0`: - [Alerts table in Rule Preview panel fills container width (#214028)](#214028) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ryland Herrick","email":"ryalnd@gmail.com"},"sourceCommit":{"committedDate":"2025-03-12T19:21:33Z","message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections and Resp","Feature:Detection Rule Preview","backport:prev-minor","backport:prev-major","Team:Detection Engine","v8.18.0","v9.1.0"],"title":"Alerts table in Rule Preview panel fills container width","number":214028,"url":"https://github.com/elastic/kibana/pull/214028","mergeCommit":{"message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214028","number":214028,"mergeCommit":{"message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}}]}] BACKPORT--> Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
kibanamachine
added a commit
that referenced
this pull request
Mar 12, 2025
…) (#214273) # Backport This will backport the following commits from `main` to `8.x`: - [Alerts table in Rule Preview panel fills container width (#214028)](#214028) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ryland Herrick","email":"ryalnd@gmail.com"},"sourceCommit":{"committedDate":"2025-03-12T19:21:33Z","message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections and Resp","Feature:Detection Rule Preview","backport:prev-minor","backport:prev-major","Team:Detection Engine","v8.18.0","v9.1.0"],"title":"Alerts table in Rule Preview panel fills container width","number":214028,"url":"https://github.com/elastic/kibana/pull/214028","mergeCommit":{"message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214028","number":214028,"mergeCommit":{"message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}}]}] BACKPORT--> Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
kibanamachine
added a commit
that referenced
this pull request
Mar 12, 2025
) (#214272) # Backport This will backport the following commits from `main` to `8.18`: - [Alerts table in Rule Preview panel fills container width (#214028)](#214028) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ryland Herrick","email":"ryalnd@gmail.com"},"sourceCommit":{"committedDate":"2025-03-12T19:21:33Z","message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections and Resp","Feature:Detection Rule Preview","backport:prev-minor","backport:prev-major","Team:Detection Engine","v8.18.0","v9.1.0"],"title":"Alerts table in Rule Preview panel fills container width","number":214028,"url":"https://github.com/elastic/kibana/pull/214028","mergeCommit":{"message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214028","number":214028,"mergeCommit":{"message":"Alerts table in Rule Preview panel fills container width (#214028)\n\n## Summary\n\nAddresses https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this stopped working when #206523 removed the\n`FullScreenContainer` from the inner StatefulEventsViewer component;\nthat change combined with the `display:flex` on this parent element\ncaused the table to no longer grow as expected.\n\nLuckily, the fix here was simply not using flexbox on the container.\nSince the table is the only element within this container, I saw no\nreason why flexbox was needed here; testing has confirmed this.\n\n### Screenshot (after fix; see bug for \"before\" image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35 43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}}]}] BACKPORT--> Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this pull request
Mar 22, 2025
) ## Summary Addresses elastic#213706. I suspect that this stopped working when elastic#206523 removed the `FullScreenContainer` from the inner StatefulEventsViewer component; that change combined with the `display:flex` on this parent element caused the table to no longer grow as expected. Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this. ### Screenshot (after fix; see bug for "before" image) <kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM" src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09" /></kbd>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR originally aimed at replacing the usages
styled-componentswith@emotion/reactin thesecurity_solution/public/common/components/events_viewerfolder. I quickly realized removing some of these would require a small refactor. This lead to making a few more changes, as many properties were actually unused so a cleanup was welcome.Only 2 small UI changes are introduced in this PR:
Grid viewandAdditional filtersbutton are reversed due to the simplification of the codeNo other UI changes are introduced. No behavior logic has been changed either.
The biggest code cleanup are:
StatefulEventsViewerComponentandgetPersistentControlsHookbut none of the internal logic was overlapping. I don't know how we got there but its current implementation was overly complex and completely unnecessary...Alerts page
Rule creation page
Host/User/Network events tab
Host session view tab
Checklist