IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: improve FolderPicker and Evaluation Group Select for Huge lists (#61221)

Browse Source 
* Add AsyncVirtualizedSelect component in grafana-ui

* Slice FolderPicker results to 1k and virtualize list using AsyncVirtualizedSelect

* Group list in alert form: Use AsyncSelect and slice results to 1000

* Virtualize and slice always in FolderPicker: set default sliceResults value and let consumers change this value

* Always slice results in FolderPicker

* Limit folder results setting the limit in the api call instead slicing in the FE

* Remove warning about the limit in the Select label
This commit is contained in:
Sonia Aguilar
2023-01-12 11:45:03 +01:00
committed by GitHub
parent 9400ccf478
commit f2d4e24710
6 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/core/components/Select/FolderPicker.tsx
View File

@@ -5,7 +5,7 @@ import { useAsync } from 'react-use';
import { AppEvents, SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2, ActionMeta, AsyncSelect, Input, InputActionMeta } from '@grafana/ui';
import { useStyles2, ActionMeta, Input, InputActionMeta, AsyncVirtualizedSelect } from '@grafana/ui';
import appEvents from 'app/core/app_events';
import { t } from 'app/core/internationalization';
import { contextSrv } from 'app/core/services/context_srv';
@@ -90,7 +90,8 @@ export function FolderPicker(props: Props) {
const getOptions = useCallback(
async (query: string) => {
const searchHits = await searchFolders(query, permissionLevel, accessControlMetadata);
const options: Array<SelectableValue<string>> = mapSearchHitsToOptions(searchHits, filter);
const resultsAfterMapAndFilter = mapSearchHitsToOptions(searchHits, filter);
const options: Array<SelectableValue<string>> = resultsAfterMapAndFilter;
const hasAccess =
contextSrv.hasAccess(AccessControlAction.DashboardsWrite, contextSrv.isEditor) ||
@@ -322,7 +323,7 @@ export function FolderPicker(props: Props) {
return (
<div data-testid={selectors.components.FolderPicker.containerV2}>
<FolderWarningWhenSearching />
<AsyncSelect
<AsyncVirtualizedSelect
inputId={inputId}
aria-label={selectors.components.FolderPicker.input}
loadingMessage={t('folder-picker.loading', 'Loading folders...')}