Alerting: Memoize labels suggestions calculation (#76972)

This commit is contained in:
Konrad Lalik
2023-10-27 14:38:52 +02:00
committed by GitHub
parent 25b30aeb6d
commit 214535c1a9

View File

@@ -1,5 +1,4 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { flattenDeep, compact } from 'lodash';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { FieldArrayMethodProps, useFieldArray, useFormContext } from 'react-hook-form'; import { FieldArrayMethodProps, useFieldArray, useFormContext } from 'react-hook-form';
@@ -18,7 +17,6 @@ import {
LoadingPlaceholder, LoadingPlaceholder,
} from '@grafana/ui'; } from '@grafana/ui';
import { useDispatch } from 'app/types'; import { useDispatch } from 'app/types';
import { RulerRuleGroupDTO } from 'app/types/unified-alerting-dto';
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector'; import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
import { fetchRulerRulesIfNotFetchedYet } from '../../state/actions'; import { fetchRulerRulesIfNotFetchedYet } from '../../state/actions';
@@ -30,7 +28,7 @@ interface Props {
dataSourceName?: string | null; dataSourceName?: string | null;
} }
const useGetCustomLabels = (dataSourceName: string): { loading: boolean; labelsByKey: Record<string, string[]> } => { const useGetCustomLabels = (dataSourceName: string): { loading: boolean; labelsByKey: Record<string, Set<string>> } => {
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
@@ -38,33 +36,45 @@ const useGetCustomLabels = (dataSourceName: string): { loading: boolean; labelsB
}, [dispatch, dataSourceName]); }, [dispatch, dataSourceName]);
const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules); const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
const rulerRequest = rulerRuleRequests[dataSourceName]; const rulerRequest = rulerRuleRequests[dataSourceName];
const result = rulerRequest?.result || {}; const labelsByKeyResult = useMemo<Record<string, Set<string>>>(() => {
const labelsByKey: Record<string, Set<string>> = {};
//store all labels in a flat array and remove empty values const rulerRulesConfig = rulerRequest?.result;
const labels = compact( if (!rulerRulesConfig) {
flattenDeep( return labelsByKey;
Object.keys(result).map((ruleGroupKey) => }
result[ruleGroupKey].map((ruleItem: RulerRuleGroupDTO) => ruleItem.rules.map((item) => item.labels))
)
)
);
const labelsByKey: Record<string, string[]> = {}; const allRules = Object.values(rulerRulesConfig)
.flatMap((groups) => groups)
.flatMap((group) => group.rules);
labels.forEach((label: Record<string, string>) => { allRules.forEach((rule) => {
Object.entries(label).forEach(([key, value]) => { if (rule.labels) {
labelsByKey[key] = [...new Set([...(labelsByKey[key] || []), value])]; Object.entries(rule.labels).forEach(([key, value]) => {
if (!value) {
return;
}
const labelEntry = labelsByKey[key];
if (labelEntry) {
labelEntry.add(value);
} else {
labelsByKey[key] = new Set([value]);
}
});
}
}); });
});
return { loading: rulerRequest?.loading, labelsByKey }; return labelsByKey;
}, [rulerRequest]);
return { loading: rulerRequest?.loading, labelsByKey: labelsByKeyResult };
}; };
function mapLabelsToOptions(items: string[] = []): Array<SelectableValue<string>> { function mapLabelsToOptions(items: Iterable<string> = []): Array<SelectableValue<string>> {
return items.map((item) => ({ label: item, value: item })); return Array.from(items, (item) => ({ label: item, value: item }));
} }
const RemoveButton: FC<{ const RemoveButton: FC<{