mirror of https://github.com/grafana/grafana
Alerting: List v2 empty states (#105616)
* Add empty state handling for GMA rules * Add handing empty states for Grafana and Datasource rules * Update translations, fix lint errors * Add empty state translation * WIP layout update * implement hover styles * update pagination * fix list item indent * clean up actions part 1 * only apply text fill to v2 list view * add missing returnTo for rule viewer * fix list styles for list view * i18n * update bulk actions to regular folder actions for list v2 * fix a few tests * simplify paginated loaders for new list view * i18n * more UI feedback * fix test * comment --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>pull/105711/head
Konrad Lalik
2 days ago
committed by
GitHub
parent
e38e07ec60
commit
0c9ca20bc5
@ -0,0 +1,18 @@ |
||||
import { useTranslate } from '@grafana/i18n'; |
||||
import { Button } from '@grafana/ui'; |
||||
|
||||
interface LazyPaginationProps { |
||||
loadMore: () => void; |
||||
disabled?: boolean; |
||||
} |
||||
|
||||
export function LazyPagination({ loadMore, disabled = false }: LazyPaginationProps) { |
||||
const { t } = useTranslate(); |
||||
const label = t('alerting.rule-list.pagination.next-page', 'Show more…'); |
||||
|
||||
return ( |
||||
<Button aria-label={label} fill="text" size="sm" variant="secondary" onClick={loadMore} disabled={disabled}> |
||||
{label} |
||||
</Button> |
||||
); |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
import { useState } from 'react'; |
||||
import { useEffectOnce } from 'react-use'; |
||||
|
||||
import { PromRuleGroupDTO } from 'app/types/unified-alerting-dto'; |
||||
|
||||
import { isLoading as isLoadingState, isUninitialized as isUninitializedState, useAsync } from '../../hooks/useAsync'; |
||||
|
||||
/** |
||||
* Provides pagination functionality for rule groups with lazy loading. |
||||
* Instead of loading all groups at once, it uses a generator to fetch them in batches as needed, |
||||
* which helps with performance when dealing with large numbers of rules. |
||||
* |
||||
* @param groupsGenerator - An async generator that yields rule groups in batches |
||||
* @param pageSize - Number of groups to display per page |
||||
* @returns Groups loaded so far and controls for navigating through rule groups |
||||
*/ |
||||
export function useLazyLoadPrometheusGroups<TGroup extends PromRuleGroupDTO>( |
||||
groupsGenerator: AsyncIterator<TGroup>, |
||||
pageSize: number |
||||
) { |
||||
const [groups, setGroups] = useState<TGroup[]>([]); |
||||
const [hasMoreGroups, setHasMoreGroups] = useState<boolean>(true); |
||||
|
||||
const [{ execute: fetchMoreGroups }, groupsRequestState] = useAsync(async () => { |
||||
let done = false; |
||||
const currentGroups: TGroup[] = []; |
||||
|
||||
while (currentGroups.length < pageSize) { |
||||
const generatorResult = await groupsGenerator.next(); |
||||
if (generatorResult.done) { |
||||
done = true; |
||||
break; |
||||
} |
||||
const group = generatorResult.value; |
||||
currentGroups.push(group); |
||||
} |
||||
|
||||
if (done) { |
||||
setHasMoreGroups(false); |
||||
} |
||||
|
||||
setGroups((groups) => groups.concat(currentGroups)); |
||||
}); |
||||
|
||||
// make sure we only load the initial group exactly once
|
||||
useEffectOnce(() => { |
||||
fetchMoreGroups(); |
||||
}); |
||||
|
||||
const isLoading = isLoadingState(groupsRequestState); |
||||
const isUninitialized = isUninitializedState(groupsRequestState); |
||||
|
||||
return { |
||||
isLoading, |
||||
groups, |
||||
hasMoreGroups: !isUninitialized && hasMoreGroups, |
||||
fetchMoreGroups, |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue