1import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
2import React from 'react';
3import { useStyles2 } from '@grafana/ui';
4import { getNotificationsTextColors } from '../../styles/notifications';
5import pluralize from 'pluralize';
6
7interface Props {
8  group: AlertmanagerGroup;
9}
10
11export const AlertGroupHeader = ({ group }: Props) => {
12  const textStyles = useStyles2(getNotificationsTextColors);
13  const total = group.alerts.length;
14  const countByStatus = group.alerts.reduce((statusObj, alert) => {
15    if (statusObj[alert.status.state]) {
16      statusObj[alert.status.state] += 1;
17    } else {
18      statusObj[alert.status.state] = 1;
19    }
20    return statusObj;
21  }, {} as Record<AlertState, number>);
22
23  return (
24    <div>
25      {`${total} ${pluralize('alert', total)}: `}
26      {Object.entries(countByStatus).map(([state, count], index) => {
27        return (
28          <span
29            key={`${JSON.stringify(group.labels)}-notifications-${index}`}
30            className={textStyles[state as AlertState]}
31          >
32            {index > 0 && ', '}
33            {`${count} ${state}`}
34          </span>
35        );
36      })}
37    </div>
38  );
39};
40