-
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
Add a configuration setting for default "Rows Per Page" setting in Management #56406
Comments
Pinging @elastic/kibana-design (Team:Design) |
Pinging @elastic/kibana-app (Team:KibanaApp) |
This would be great |
And the same for "Open search" screen for opening a saved search in Discovery would be great. 10 is just way too small. |
Just went looking in Kibana Advanced Settings for this exact thing. That seems like a logical location to me for a place to set this option. |
Still no such setting? |
Bump, this makes huge sense for log analysis... |
Stumbled about this enhancement request and ask politely for it. This is in my opinion a default feature any software should have. |
@elastic/shared-ux / @clintandrewhall is this something you would be interested in? |
There's already an advanced setting called something like "Saved objects per page" however none of the management views seem to use it. Either we need to push on the respective owners to update to use this setting, or perhaps Shared UX could create a simple wrapping component around EuiBasicTable/EuiInMemoryTable to ensure the setting is utilized. |
Perhaps this is something shared-ux could 'own' where 'own' means 'make simple, notify kibana app owners, and track progress' |
Why is this still not a feature? Constantly having the update the Rows per page steals hours of my time. 😭 |
This missing feature would greatly improve usability of Kibana. havint to reset this value EVRY time the page reloads makes searching and usability very limited. |
Is this really still an open item?! What do we have to do to expose this as a setting in the UI? |
Pinging @elastic/appex-sharedux (Team:SharedUX) |
Pinging @elastic/platform-deployment-management (Team:Deployment Management) |
In stack management, there are multiple different As at 8.7, Visualize and Dashboards use 10, 20, 50 and have 20 as the default. Stack Management uses a variety of the following, almost always with a default 10. Where possible (unless there are strong reasons not to) it seems sensible that we should try to align. Until we have alignment on "Rows per page", then it will be difficult to implement this as a global advanced setting. |
I would go so far as to say standardize on 10, 25,50,100 |
Yes, 25 seems to be sensible. 10 is just way too low. And again this should persist for some time, maybe even persist to the account so one does not have to keep on setting it on every page load. Frankly, it's always a test of my patience 😐 |
I think in Kibana we should rely on EUI's defaults values for |
Let's double check the EUI default is intentional. I can't actually see anywhere we use 50 as the default value (but I've not checked exhaustively). And 20 / 25 feels better for a single page as we generally have a bit of padding in lists. As clarification, my suggestions are given with the intent of standardising lists of things in Management e.g. lists of indices, transforms, data views, templates. I do not mean to suggest we apply the same to tables of data e.g. Discover, data previews |
👋 Hi, EUI team here. So unfortunately (sorry to be the bearer of bad news), the default for the standalone That requirement is in place so that consumers can respond to/set Also, even if EUI changed its API so that So... now that we've established the breadth of work needed, my strong suggestion would be to handle this at Kibana's app-ex/shared-ux level, not at EUI's (since there's no shortcut and every Kibana table/datagrid implementation will need to be tweaked in any case). My suggestion would be similar to what Caroline already mentioned above:
I'd suggest either a component that handles pagination internally for all apps, e.g. |
Ideally, IMO, there would be no pagination and pagination settings at all, where possible. Instead there would be "infinite scroll", i.e. as user scrolls to the bottom and there are more results - the new items are seamlessly loaded or maybe already available in the cache. It would be nicer for the user and way simpler code for Kibana to maintain. |
I would like to avoid infinite scrolling, at least as a broad implementation/replacement for pagination. Happy to discuss that further, but it would involve some bigger changes for the experience of these pages. In hopes of summarizing a few things here:
Let me know if those are incorrect or have differing opinions. |
Sounds fantastic! Cant happen soon enough!
…On Fri, Apr 28, 2023, 7:55 PM Michael DeFazio ***@***.***> wrote:
I would like to avoid infinite scrolling, at least as a broad
implementation/replacement for pagination. Happy to discuss that further,
but it would involve some bigger changes for the experience of these pages.
In hopes of summarizing a few things here:
- Sounds like we're in agreement that we would like a set standard for
page count options. The preference would be to remove 10, and instead go
for [25, 50, 100].
- To handle this, it's best to create a Shared UX owned wrapper,
rather than have each team manage their own implementation of the
pageSize.
- This wrapper would be applied to Management pages only. Broader use
can be considered separately.
- This array of options (and the default), should be available as a
setting for the space.
- We should be saving the pageSize selection in localStorage so it
persists for a user.
Let me know if those are incorrect or have differing opinions.
—
Reply to this email directly, view it on GitHub
<#56406 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AK426OG6YBI3HMTJBX5JMPDXDOO2XANCNFSM4KNZKVWA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
Waited 3+ years for this. Gonna be a game changer 😁
|
> Pre-req for #56406 ## Summary We've had a long-standing problem in Kibana around our use of React context, particularly with EUI and i18n. There hasn't existed an idempotent context structure, and that has lead to a lot of unexpected results, (e.g. missing translations, inconsistent dark mode, excess context providers, etc). The biggest change coming from this PR is knowing exactly which provider to use in a particular use case. This means, for example, `ReactDOM.render` calls won't be missing `i18n` or `theme` due to a missing context. It also allows consumers to use `darkMode` without having to read the `uiSetting` themselves, instead allowing the context to do it for them. We also haven't been honoring the intended [`EuiProvider` API](https://eui.elastic.co/#/utilities/provider#theming-and-global-styles)... in some cases we've been creating and re-creating the Emotion caches, often by copy/paste of the cache code. We've also been nesting `EuiThemeProvider` contexts unnecessarily-- thinking we need to render a theme provider in an isolated component-- which renders an additional `span` element into the DOM. This PR attempts to address this inconsistency by creating a set of context providers divided by use case: ![diagram](https://github.com/elastic/kibana/assets/297604/e01c6296-1b7a-4639-ae96-946866950efe) ### `KibanaRootContextProvider` A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application. It's provided as a package for specific use cases, (e.g. the `RenderingService`, cases where we replace the entire page content, Storybook, testing, etc), but not intended for plugins. ### `KibanaRenderContextProvider` A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`). ### `KibanaThemeContextProvider` A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly. ### (deprecated) `KibanaStyledComponentsThemeProvider` A styled components theme provider for Kibana. This package is supplied for compatibility with legacy code, but should not be used in new code. ## Deprecation strategy This PR does *not* change any use of context by consumers. It maps the existing contexts in `kibanaReact` to the new contexts, (along with the loose API). This means that we won't have completely fixed all of our dark mode issues yet. But this is necessary to keep this PR focused on the change, rather than drawing in a lot of teams to review individual uses. We should, however, see an immediate performance improvement in the UI from the reduction in `EuiProvider` calls. ## Open questions - [ ] Does it make sense to expose a `useTheme` hook from `@kbn/react-kibana-context-theme` to replace `useEuiTheme`? ## Next steps - [ ] Update deprecated uses to new contexts. - [ ] Audit and update calls to `ReactDOM.render`. - [ ] Add ESLint rule to warn for use of EUI contexts. - [ ] Delete code from `kibanaReact`.
Having this simple but big improvement would be very helpful. |
> Pre-req for elastic#56406 ## Summary We've had a long-standing problem in Kibana around our use of React context, particularly with EUI and i18n. There hasn't existed an idempotent context structure, and that has lead to a lot of unexpected results, (e.g. missing translations, inconsistent dark mode, excess context providers, etc). The biggest change coming from this PR is knowing exactly which provider to use in a particular use case. This means, for example, `ReactDOM.render` calls won't be missing `i18n` or `theme` due to a missing context. It also allows consumers to use `darkMode` without having to read the `uiSetting` themselves, instead allowing the context to do it for them. We also haven't been honoring the intended [`EuiProvider` API](https://eui.elastic.co/#/utilities/provider#theming-and-global-styles)... in some cases we've been creating and re-creating the Emotion caches, often by copy/paste of the cache code. We've also been nesting `EuiThemeProvider` contexts unnecessarily-- thinking we need to render a theme provider in an isolated component-- which renders an additional `span` element into the DOM. This PR attempts to address this inconsistency by creating a set of context providers divided by use case: ![diagram](https://github.com/elastic/kibana/assets/297604/e01c6296-1b7a-4639-ae96-946866950efe) ### `KibanaRootContextProvider` A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application. It's provided as a package for specific use cases, (e.g. the `RenderingService`, cases where we replace the entire page content, Storybook, testing, etc), but not intended for plugins. ### `KibanaRenderContextProvider` A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`). ### `KibanaThemeContextProvider` A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly. ### (deprecated) `KibanaStyledComponentsThemeProvider` A styled components theme provider for Kibana. This package is supplied for compatibility with legacy code, but should not be used in new code. ## Deprecation strategy This PR does *not* change any use of context by consumers. It maps the existing contexts in `kibanaReact` to the new contexts, (along with the loose API). This means that we won't have completely fixed all of our dark mode issues yet. But this is necessary to keep this PR focused on the change, rather than drawing in a lot of teams to review individual uses. We should, however, see an immediate performance improvement in the UI from the reduction in `EuiProvider` calls. ## Open questions - [ ] Does it make sense to expose a `useTheme` hook from `@kbn/react-kibana-context-theme` to replace `useEuiTheme`? ## Next steps - [ ] Update deprecated uses to new contexts. - [ ] Audit and update calls to `ReactDOM.render`. - [ ] Add ESLint rule to warn for use of EUI contexts. - [ ] Delete code from `kibanaReact`.
`v86.0.0`⏩`v87.1.0`⚠️ The biggest set of type changes in this PR come from the breaking change that makes `pageSize` and `pageSizeOptions` now optional props for `EuiBasicTable.pagination`, `EuiInMemoryTable.pagination` and `EuiDataGrid.pagination`. This caused several other components that were cloning EUI's pagination type to start throwing type warnings about `pageSize` being optional. Where I came across these errors, I modified the extended types to require `pageSize`. These types and their usages may end up changing again in any case once the Shared UX team looks into #56406. --- ## [`87.1.0`](https://github.com/elastic/eui/tree/v87.1.0) - Updated the underlying library powering `EuiAutoSizer`. This primarily affects typing around the `disableHeight` and `disableWidth` props ([#6798](elastic/eui#6798)) - Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and `EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter typing ([#6798](elastic/eui#6798)) - Updated `EuiDatePickerRange` to support `compressed` display ([#7058](elastic/eui#7058)) - Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop ([#7061](elastic/eui#7061)) - Added a new `panelMinWidth` prop to `EuiInputPopover` ([#7071](elastic/eui#7071)) - Added a new `inputPopoverProps` prop for `EuiRange`s and `EuiDualRange`s with `showInput="inputWithPopover"` set ([#7082](elastic/eui#7082)) **Bug fixes** - Fixed `EuiToolTip` overriding instead of merging its `aria-describedby` tooltip ID with any existing `aria-describedby`s ([#7055](elastic/eui#7055)) - Fixed `EuiSuperDatePicker`'s `compressed` display ([#7058](elastic/eui#7058)) - Fixed `EuiAccordion` to remove tabbable children from sequential keyboard navigation when the accordion is closed ([#7064](elastic/eui#7064)) - Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs ([#7065](elastic/eui#7065)) **Accessibility** - Removed the default `dialog` role and `tabIndex` from push `EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual accessibility management. ([#7065](elastic/eui#7065)) ## [`87.0.0`](https://github.com/elastic/eui/tree/v87.0.0) - Added beta `componentDefaults` prop to `EuiProvider`, which will allow configuring certain default props globally. This list of components and defaults is still under consideration. ([#6923](elastic/eui#6923)) - `EuiPortal`'s `insert` prop can now be configured globally via `EuiProvider.componentDefaults` ([#6941](elastic/eui#6941)) - `EuiFocusTrap`'s `crossFrame` and `gapMode` props can now be configured globally via `EuiProvider.componentDefaults` ([#6942](elastic/eui#6942)) - `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and `showPerPageOptions` props can now be configured globally via `EuiProvider.componentDefaults` ([#6951](elastic/eui#6951)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid` now allow `pagination.pageSize` to be undefined. If undefined, `pageSize` defaults to `EuiTablePagination`'s `itemsPerPage` component default. ([#6993](elastic/eui#6993)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid`'s `pagination.pageSizeOptions` will now fall back to `EuiTablePagination`'s `itemsPerPageOptions` component default. ([#6993](elastic/eui#6993)) - Updated `EuiHeaderLinks`'s `gutterSize` spacings ([#7005](elastic/eui#7005)) - Updated `EuiHeaderAlert`'s stacking styles ([#7005](elastic/eui#7005)) - Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips. ([#7018](elastic/eui#7018)) - Updated `EuiBreadcrumbs` to support breadcrumbs that toggle popovers via `popoverContent` and `popoverProps` ([#7031](elastic/eui#7031)) - Improved the contrast ratio of disabled titles within `EuiSteps` and `EuiStepsHorizontal` to meet WCAG AA guidelines. ([#7032](elastic/eui#7032)) - Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a more clear visual indication of the current step ([#7048](elastic/eui#7048)) **Bug fixes** - Single uses of `<EuiHeaderSectionItem side="right" />` now align right as expected without needing a previous `side="left"` sibling. ([#7005](elastic/eui#7005)) - `EuiPageTemplate` now correctly displays `panelled={true}` ([#7044](elastic/eui#7044)) **Breaking changes** - `EuiTablePagination`'s default `itemsPerPage` is now `10` (was previously `50`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - `EuiTablePagination`'s default `itemsPerPageOptions` is now `[10, 25, 50]` (was previously `[10, 20, 50, 100]`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - Removed `border` prop from `EuiHeaderSectionItem` (unused since Amsterdam theme) ([#7005](elastic/eui#7005)) - Removed `borders` object configuration from `EuiHeader.sections` ([#7005](elastic/eui#7005)) **CSS-in-JS conversions** - Converted `EuiHeaderAlert` to Emotion; Removed unused `.euiHeaderAlert__dismiss` CSS ([#7005](elastic/eui#7005)) - Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and `EuiHeaderSectionItemButton` to Emotion ([#7005](elastic/eui#7005)) - Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed `$euiHeaderLinksGutterSizes` Sass variables ([#7005](elastic/eui#7005)) - Removed `$euiHeaderBackgroundColor` Sass variable; use `$euiColorEmptyShade` instead ([#7005](elastic/eui#7005)) - Removed `$euiHeaderChildSize` Sass variable; use `$euiSizeXXL` instead ([#7005](elastic/eui#7005)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>
…186997) Addresses #56406 ## Summary This PR is part of my June 2024 On-week project. It adds functionality for persisting table page size (rows per page) and sorting in EUI tables. When a user changes the size or sort, the new values are saved in local storage, so that when the user navigates out of the page and comes back, the page size and sort will be the same. In this PR, the functionality is added to the following tables: - Ingest Pipelines - Index Management - all tables (indices, data streams, index templates, component templates, enrich policies) - ILM policies https://github.com/elastic/kibana/assets/59341489/08b0c004-65a1-4a58-b8fb-99010e1c3248 <!-- ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
In #186997 we introduced a SharedUX package that allows tables in Kibana to store user preferences for 'Rows per page' and sort criteria in local storage (for each table). This functionality has been added to the tables in Index Management, Ingest Pipelines, and Index Lifecycle Policies. I'll leave it to @elastic/appex-sharedux to decide how to proceed with this issue, including whether to extend this functionality to additional tables in Stack Management, some of which are owned by different teams. |
Adding this to SharedUX planned work for next quarter. Remaining scope:
|
Note from convo with @sebelga : Target for 8.17FF, persist user settings in local storage per table. Get as many tables done as possible. |
Describe the feature:
The "Rows Per Page" option for any management screen is constantly reset to just 10 rows, which is often inadequate. A preference option to set the row count would avoid constantly having to adjust this setting over and over again. At a minimum, the option should persist for a specific page during a session.
Describe a specific use case for the feature:
Avoiding repetitive actions that impede use of management screens. It's a minor paper cut but it is something I find myself doing constantly.
The text was updated successfully, but these errors were encountered: