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: Alert list performance improvements (#56247)

Browse Source 
Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
This commit is contained in:
Konrad Lalik
2022-10-11 16:24:01 +02:00
committed by GitHub
parent 8627b2131f
commit 5ddf7b85df
8 changed files with 130 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
View File

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React, { FC } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { LoadingPlaceholder, Pagination, useStyles2 } from '@grafana/ui';
import { LoadingPlaceholder, Pagination, Spinner, useStyles2 } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { CombinedRuleNamespace } from 'app/types/unified-alerting';
@@ -26,9 +26,13 @@ export const GrafanaRules: FC<Props> = ({ namespaces, expandAll }) => {
const styles = useStyles2(getStyles);
const [queryParams] = useQueryParams();
const { loading } = useUnifiedAlertingSelector(
(state) => state.promRules[GRAFANA_RULES_SOURCE_NAME] || initialAsyncRequestState
);
const { prom, ruler } = useUnifiedAlertingSelector((state) => ({
prom: state.promRules[GRAFANA_RULES_SOURCE_NAME] || initialAsyncRequestState,
ruler: state.rulerRules[GRAFANA_RULES_SOURCE_NAME] || initialAsyncRequestState,
}));
const loading = prom.loading || ruler.loading;
const hasResult = !!prom.result || !!ruler.result;
const wantsGroupedView = queryParams['view'] === 'grouped';
const namespacesFormat = wantsGroupedView ? namespaces : flattenGrafanaManagedRules(namespaces);
@@ -57,7 +61,8 @@ export const GrafanaRules: FC<Props> = ({ namespaces, expandAll }) => {
viewMode={wantsGroupedView ? 'grouped' : 'list'}
/>
))}
{namespacesFormat?.length === 0 && <p>No rules found.</p>}
{hasResult && namespacesFormat?.length === 0 && <p>No rules found.</p>}
{!hasResult && loading && <Spinner size={24} className={styles.spinner} />}
<Pagination
className={styles.pagination}
currentPage={page}
@@ -80,5 +85,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
margin-bottom: ${theme.spacing(4)};
`,
spinner: css`
text-align: center;
padding: ${theme.spacing(2)};
`,
pagination: getPaginationStyles(theme),
});