diff --git a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx index 1381d54e553..0eedd024c73 100644 --- a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx @@ -195,7 +195,7 @@ export const SilencesEditor = ({ silenceId, alertManagerSourceName }: Props) => return (
-
+
{ - const [getAmAlerts, { data: alertManagerAlerts, isLoading: amAlertsIsLoading }] = - alertmanagerApi.endpoints.getAlertmanagerAlerts.useLazyQuery({ pollingInterval: SILENCES_POLL_INTERVAL_MS }); - const [getSilences, { data: silences = [], isLoading, error }] = alertSilencesApi.endpoints.getSilences.useLazyQuery({ - pollingInterval: SILENCES_POLL_INTERVAL_MS, - }); + const { data: alertManagerAlerts, isLoading: amAlertsIsLoading } = + alertmanagerApi.endpoints.getAlertmanagerAlerts.useQuery( + { amSourceName: alertManagerSourceName, filter: { silenced: true, active: true, inhibited: true } }, + { pollingInterval: SILENCES_POLL_INTERVAL_MS } + ); + + const { + data: silences = [], + isLoading, + error, + } = alertSilencesApi.endpoints.getSilences.useQuery( + { datasourceUid: getDatasourceAPIUid(alertManagerSourceName) }, + { + pollingInterval: SILENCES_POLL_INTERVAL_MS, + } + ); const { currentData: amFeatures } = featureDiscoveryApi.useDiscoverAmFeaturesQuery( { amSourceName: alertManagerSourceName ?? '' }, @@ -51,11 +62,6 @@ const SilencesTable = ({ alertManagerSourceName }: Props) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any (error as any)?.message?.includes('the Alertmanager is not configured') && amFeatures?.lazyConfigInit; - useEffect(() => { - getSilences({ datasourceUid: getDatasourceAPIUid(alertManagerSourceName) }); - getAmAlerts({ amSourceName: alertManagerSourceName }); - }, [alertManagerSourceName, getAmAlerts, getSilences]); - const styles = useStyles2(getStyles); const [queryParams] = useQueryParams(); const filteredSilencesNotExpired = useFilteredSilences(silences, false); @@ -119,11 +125,11 @@ const SilencesTable = ({ alertManagerSourceName }: Props) => { -
+ Add Silence -
+
{ }; const getStyles = (theme: GrafanaTheme2) => ({ - topButtonContainer: css({ - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-end', - }), addNewSilence: css({ margin: theme.spacing(2, 0), }), @@ -237,13 +238,9 @@ const getStyles = (theme: GrafanaTheme2) => ({ calloutIcon: css({ color: theme.colors.info.text, }), - editButton: css({ - marginLeft: theme.spacing(0.5), - }), }); function useColumns(alertManagerSourceName: string) { - const styles = useStyles2(getStyles); const [updateSupported, updateAllowed] = useAlertmanagerAbility(AlertmanagerAction.UpdateSilence); const [expireSilence] = alertSilencesApi.endpoints.expireSilence.useMutation(); @@ -312,10 +309,9 @@ function useColumns(alertManagerSourceName: string) { )} {silence.status.state !== 'expired' && ( )} @@ -325,6 +321,6 @@ function useColumns(alertManagerSourceName: string) { }); } return columns; - }, [alertManagerSourceName, expireSilence, styles.editButton, updateAllowed, updateSupported]); + }, [alertManagerSourceName, expireSilence, updateAllowed, updateSupported]); } export default SilencesTable;