import React, { useCallback, useEffect } from 'react'; import { Route, RouteChildrenProps, Switch } from 'react-router-dom'; import { Alert, withErrorBoundary } from '@grafana/ui'; import { Silence } from 'app/plugins/datasource/alertmanager/types'; import { useDispatch } from 'app/types'; import { featureDiscoveryApi } from './api/featureDiscoveryApi'; import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper'; import { GrafanaAlertmanagerDeliveryWarning } from './components/GrafanaAlertmanagerDeliveryWarning'; import SilencesEditor from './components/silences/SilencesEditor'; import SilencesTable from './components/silences/SilencesTable'; import { useSilenceNavData } from './hooks/useSilenceNavData'; import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; import { useAlertmanager } from './state/AlertmanagerContext'; import { fetchAmAlertsAction, fetchSilencesAction } from './state/actions'; import { SILENCES_POLL_INTERVAL_MS } from './utils/constants'; import { AsyncRequestState, initialAsyncRequestState } from './utils/redux'; const Silences = () => { const { selectedAlertmanager } = useAlertmanager(); const dispatch = useDispatch(); const silences = useUnifiedAlertingSelector((state) => state.silences); const alertsRequests = useUnifiedAlertingSelector((state) => state.amAlerts); const alertsRequest = selectedAlertmanager ? alertsRequests[selectedAlertmanager] || initialAsyncRequestState : undefined; const { currentData: amFeatures } = featureDiscoveryApi.useDiscoverAmFeaturesQuery( { amSourceName: selectedAlertmanager ?? '' }, { skip: !selectedAlertmanager } ); useEffect(() => { function fetchAll() { if (selectedAlertmanager) { dispatch(fetchSilencesAction(selectedAlertmanager)); dispatch(fetchAmAlertsAction(selectedAlertmanager)); } } fetchAll(); const interval = setInterval(() => fetchAll, SILENCES_POLL_INTERVAL_MS); return () => { clearInterval(interval); }; }, [selectedAlertmanager, dispatch]); const { result, loading, error }: AsyncRequestState = (selectedAlertmanager && silences[selectedAlertmanager]) || initialAsyncRequestState; const getSilenceById = useCallback((id: string) => result && result.find((silence) => silence.id === id), [result]); const mimirLazyInitError = error?.message?.includes('the Alertmanager is not configured') && amFeatures?.lazyConfigInit; if (!selectedAlertmanager) { return null; } return ( <> {mimirLazyInitError && ( Create a new contact point to create a configuration using the default values or contact your administrator to set up the Alertmanager. )} {error && !loading && !mimirLazyInitError && ( {error.message || 'Unknown error.'} )} {alertsRequest?.error && !alertsRequest?.loading && !mimirLazyInitError && ( {alertsRequest.error?.message || 'Unknown error.'} )} {result && !error && ( {({ match }: RouteChildrenProps<{ id: string }>) => { return ( match?.params.id && ( ) ); }} )} ); }; function SilencesPage() { const pageNav = useSilenceNavData(); return ( ); } export default withErrorBoundary(SilencesPage, { style: 'page' });