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