-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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.
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
[RAC] [TGrid] Implements sorting in the TGrid
#107495
[RAC] [TGrid] Implements sorting in the TGrid
#107495
Conversation
Pinging @elastic/security-solution (Team: SecuritySolution) |
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Per our conversation:
- Remove the tooltips from the column headings
- Add in search to the column modifier popover
- Add in toggles to the column modifier popover
- Keep the EuiDataGrid column functionality consistent with the default setup. So Hide column from a column heading will simply toggle it off within the column list. Also note the label change in the button (
1 column hidden
) - Unchecking the box in the Field selector will remove the field from the column popover (and grid if shown)
- Toggling a field from the document table in the flyout will be the same as checking the box in the Field selector.
fd6f8da
to
bba66a4
Compare
Thanks @mdefazio and @paulewing for the conversation and feedback! Would you be willing to verify the changes shown in the animated gif below? |
Just to confirm some things I don't see in the gif:
Is the empty state of this table also for this PR? Seems like we need a view where if I click |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
✅ Yes, the hidden field still stays checked in the Fields browser. The following animated gif provides an example:
✅ The Hide all / Show all buttons, and the
The following animated gif demonstrates the
✅ Yes, the column search works, as shown in the animated gif below:
The empty state of the table, as described in #106585 is not implemented in this PR, however the team discussed that issue with @asnehalb in our sync today, and we agreed @michaelolo24 will be reaching out to you re: prioritizing the feedback in the meta issue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
UI updates LGTM! Thanks for working through these!
I will discuss the priority of the empty state of this along with the other Alert table UI updates. Thanks!
This PR implements sorting in the `TGrid`, per the animated gifs below: ![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif) _Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_ ![security-solution-sorting](https://user-images.githubusercontent.com/4459398/127961574-00639d4d-762c-4529-bc43-6851d98728da.gif) _Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_ * Sorting is disabled for non-aggregatble fields * This PR resolves the `Sort [Object Object]` TODO described [here](elastic#106199 (comment)) * This PR restores the column header tooltips where the TGrid is used in the Security Solution * The `Hide column` action now hides the selected column. Users may re-add hidden columns via the `Fields` browser @mdefazio, please note this behavior differs slightly from the following request in elastic#106585 : > Include toggles on column modifier popover to allow for show/hide option (And the field menu would only be for what is available in the column list) See [EUI Docs examples](https://elastic.github.io/eui/#/tabular-content/data-grid) for expected behavior The behavior is different because, if the `Hide column` action only interacted with the toggles in the column modifier popover, users would have to (re) locate the field in the `Fields` browser, and then uncheck it, to _actually_ remove the column. To allow users to remove columns in a single step, and to avoid confusion, toggles are **not** included in the column modifier popover. To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, `` cc @mdefazio
bba66a4
to
cf5a46a
Compare
💛 Build succeeded, but was flaky
Test FailuresKibana Pipeline / general / Chrome X-Pack UI Functional Tests.x-pack/test/functional/apps/observability/feature_controls/observability_security·ts.ObservabilityApp feature controls observability security feature controls observability cases all privileges allows a case to be createdStandard Out
Stack Trace
Metrics [docs]Module Count
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
💔 Backport failed
To backport manually run: |
It appears that a few PRs merged ahead of this one are still being backported, which prevents the |
## Summary This PR implements sorting in the `TGrid`, per the animated gifs below: ![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif) _Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_ ![security-solution-sorting](https://user-images.githubusercontent.com/4459398/128050301-0ea9ccbc-7896-46ef-96da-17b5b6d2e34b.gif) _Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_ ## Details * Sorting is disabled for non-aggregatble fields * This PR resolves the `Sort [Object Object]` TODO described [here](#106199 (comment)) * ~This PR restores the column header tooltips where the TGrid is used in the Security Solution~ ## Desk testing To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ``` cc @mdefazio
## Summary This PR implements sorting in the `TGrid`, per the animated gifs below: ![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif) _Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_ ![security-solution-sorting](https://user-images.githubusercontent.com/4459398/128050301-0ea9ccbc-7896-46ef-96da-17b5b6d2e34b.gif) _Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_ ## Details * Sorting is disabled for non-aggregatble fields * This PR resolves the `Sort [Object Object]` TODO described [here](elastic#106199 (comment)) * ~This PR restores the column header tooltips where the TGrid is used in the Security Solution~ ## Desk testing To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ``` cc @mdefazio
Summary
This PR implements sorting in the
TGrid
, per the animated gifs below:Above: Sorting in Observability, via
EuiDataGrid
's sort popoverAbove: Sorting and hiding columns in the Security Solution via
EuiDataGrid
's column header actionsDetails
Sort [Object Object]
TODO described hereThis PR restores the column header tooltips where the TGrid is used in the Security SolutionDesk testing
To desk test this PR, you must enable feature flags in the Observability and Security Solution:
Observability > Alerts
page, add the following settings toconfig/kibana.dev.yml
:x-pack/plugins/security_solution/common/experimental_features.ts
and in theallowedExperimentalValues
section set:cc @mdefazio