1import React, { FC } from 'react'; 2import { RouteComponentProps } from '@reach/router'; 3import { useFetch } from '../../hooks/useFetch'; 4import { withStatusIndicator } from '../../components/withStatusIndicator'; 5import AlertsContent, { RuleStatus, AlertsProps } from './AlertContents'; 6import { usePathPrefix } from '../../contexts/PathPrefixContext'; 7import { API_PATH } from '../../constants/constants'; 8 9const AlertsWithStatusIndicator = withStatusIndicator(AlertsContent); 10 11const Alerts: FC<RouteComponentProps> = () => { 12 const pathPrefix = usePathPrefix(); 13 const { response, error, isLoading } = useFetch<AlertsProps>(`${pathPrefix}/${API_PATH}/rules?type=alert`); 14 15 const ruleStatsCount: RuleStatus<number> = { 16 inactive: 0, 17 pending: 0, 18 firing: 0, 19 }; 20 21 if (response.data && response.data.groups) { 22 response.data.groups.forEach(el => el.rules.forEach(r => ruleStatsCount[r.state]++)); 23 } 24 25 return <AlertsWithStatusIndicator {...response.data} statsCount={ruleStatsCount} error={error} isLoading={isLoading} />; 26}; 27 28export default Alerts; 29