Alerting: Fix silence drawer being re-rendered when the alert list is refreshed (#99468)

* Fix silence drawer being re-rendered when the alert list is refreshed

* remove unnecessary formValues usage as prop

* remove AlertmanagerProvider in RuleActionsButtonsV2
This commit is contained in:
Sonia Aguilar 2025-01-24 17:03:58 +01:00 committed by GitHub
parent 888965023c
commit 63a89afe00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 32 deletions

View File

@ -7,7 +7,6 @@ import { useDeleteModal } from 'app/features/alerting/unified/components/rule-vi
import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails'; import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails';
import SilenceGrafanaRuleDrawer from 'app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer'; import SilenceGrafanaRuleDrawer from 'app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer';
import { useRulesFilter } from 'app/features/alerting/unified/hooks/useFilteredRules'; import { useRulesFilter } from 'app/features/alerting/unified/hooks/useFilteredRules';
import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';
import { useDispatch } from 'app/types'; import { useDispatch } from 'app/types';
import { CombinedRule, RuleIdentifier, RulesSource } from 'app/types/unified-alerting'; import { CombinedRule, RuleIdentifier, RulesSource } from 'app/types/unified-alerting';
@ -126,9 +125,7 @@ export const RuleActionsButtons = ({ compact, showViewButton, rule, rulesSource
/> />
{deleteModal} {deleteModal}
{isGrafanaAlertingRule(rule.rulerRule) && showSilenceDrawer && ( {isGrafanaAlertingRule(rule.rulerRule) && showSilenceDrawer && (
<AlertmanagerProvider accessType="instance"> <SilenceGrafanaRuleDrawer rulerRule={rule.rulerRule} onClose={() => setShowSilenceDrawer(false)} />
<SilenceGrafanaRuleDrawer rulerRule={rule.rulerRule} onClose={() => setShowSilenceDrawer(false)} />
</AlertmanagerProvider>
)} )}
{redirectToClone?.identifier && ( {redirectToClone?.identifier && (
<RedirectToCloneRule <RedirectToCloneRule

View File

@ -1,9 +1,12 @@
import React from 'react';
import { Drawer, Stack } from '@grafana/ui'; import { Drawer, Stack } from '@grafana/ui';
import { SilencesEditor } from 'app/features/alerting/unified/components/silences/SilencesEditor'; import { SilencesEditor } from 'app/features/alerting/unified/components/silences/SilencesEditor';
import { getDefaultSilenceFormValues } from 'app/features/alerting/unified/components/silences/utils';
import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource'; import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource';
import { RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto'; import { RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto';
import { AlertmanagerProvider } from '../../state/AlertmanagerContext';
type Props = { type Props = {
rulerRule: RulerGrafanaRuleDTO; rulerRule: RulerGrafanaRuleDTO;
onClose: () => void; onClose: () => void;
@ -12,29 +15,33 @@ type Props = {
/** /**
* For a given Grafana managed rule, renders a drawer containing silences editor and Alertmanager selection * For a given Grafana managed rule, renders a drawer containing silences editor and Alertmanager selection
*/ */
const SilenceGrafanaRuleDrawer = ({ rulerRule, onClose }: Props) => { const SilenceGrafanaRuleDrawer = React.memo(
const { uid } = rulerRule.grafana_alert; ({ rulerRule, onClose }: Props) => {
const { uid } = rulerRule.grafana_alert;
const formValues = getDefaultSilenceFormValues(); return (
<Drawer
return ( title="Silence alert rule"
<Drawer subtitle="Configure silences to stop notifications from a particular alert rule."
title="Silence alert rule" onClose={onClose}
subtitle="Configure silences to stop notifications from a particular alert rule." size="md"
onClose={onClose} >
size="md" <Stack direction={'column'}>
> <AlertmanagerProvider accessType="instance">
<Stack direction={'column'}> <SilencesEditor
<SilencesEditor ruleUid={uid}
ruleUid={uid} alertManagerSourceName={GRAFANA_RULES_SOURCE_NAME}
formValues={formValues} onSilenceCreated={onClose}
alertManagerSourceName={GRAFANA_RULES_SOURCE_NAME} onCancel={onClose}
onSilenceCreated={onClose} />
onCancel={onClose} </AlertmanagerProvider>
/> </Stack>
</Stack> </Drawer>
</Drawer> );
); },
}; (prevProps, nextProps) => {
return prevProps.rulerRule.grafana_alert.uid === nextProps.rulerRule.grafana_alert.uid;
}
);
export default SilenceGrafanaRuleDrawer; export default SilenceGrafanaRuleDrawer;

View File

@ -9,7 +9,6 @@ import { RedirectToCloneRule } from 'app/features/alerting/unified/components/ru
import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails'; import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails';
import SilenceGrafanaRuleDrawer from 'app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer'; import SilenceGrafanaRuleDrawer from 'app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer';
import { useRulesFilter } from 'app/features/alerting/unified/hooks/useFilteredRules'; import { useRulesFilter } from 'app/features/alerting/unified/hooks/useFilteredRules';
import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';
import { useDispatch } from 'app/types'; import { useDispatch } from 'app/types';
import { Rule, RuleGroupIdentifierV2, RuleIdentifier } from 'app/types/unified-alerting'; import { Rule, RuleGroupIdentifierV2, RuleIdentifier } from 'app/types/unified-alerting';
import { RulerRuleDTO } from 'app/types/unified-alerting-dto'; import { RulerRuleDTO } from 'app/types/unified-alerting-dto';
@ -93,9 +92,7 @@ export function RuleActionsButtons({ compact, rule, promRule, groupIdentifier }:
/> />
{deleteModal} {deleteModal}
{isGrafanaAlertingRule(rule) && showSilenceDrawer && ( {isGrafanaAlertingRule(rule) && showSilenceDrawer && (
<AlertmanagerProvider accessType="instance"> <SilenceGrafanaRuleDrawer rulerRule={rule} onClose={() => setShowSilenceDrawer(false)} />
<SilenceGrafanaRuleDrawer rulerRule={rule} onClose={() => setShowSilenceDrawer(false)} />
</AlertmanagerProvider>
)} )}
{redirectToClone?.identifier && ( {redirectToClone?.identifier && (
<RedirectToCloneRule <RedirectToCloneRule