github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/pages/alerts/Alerts.tsx (about) 1 import React, { FC } from 'react'; 2 import { RouteComponentProps } from '@reach/router'; 3 import PathPrefixProps from '../../types/PathPrefixProps'; 4 import { useFetch } from '../../hooks/useFetch'; 5 import { withStatusIndicator } from '../../components/withStatusIndicator'; 6 import AlertsContent, { RuleStatus, AlertsProps } from './AlertContents'; 7 8 const AlertsWithStatusIndicator = withStatusIndicator(AlertsContent); 9 10 const Alerts: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' }) => { 11 const { response, error, isLoading } = useFetch<AlertsProps>(`${pathPrefix}/api/v1/rules?type=alert`); 12 13 const ruleStatsCount: RuleStatus<number> = { 14 inactive: 0, 15 pending: 0, 16 firing: 0, 17 }; 18 19 if (response.data && response.data.groups) { 20 response.data.groups.forEach((el) => el.rules.forEach((r) => ruleStatsCount[r.state]++)); 21 } 22 23 return <AlertsWithStatusIndicator {...response.data} statsCount={ruleStatsCount} error={error} isLoading={isLoading} />; 24 }; 25 26 export default Alerts;