Files
Josh Hunt 3c6e0e8ef8 Chore: ESlint import order (#44959)
* Add and configure eslint-plugin-import

* Fix the lint:ts npm command

* Autofix + prettier all the files

* Manually fix remaining files

* Move jquery code in jest-setup to external file to safely reorder imports

* Resolve issue caused by circular dependencies within Prometheus

* Update .betterer.results

* Fix missing // @ts-ignore

* ignore iconBundle.ts

* Fix missing // @ts-ignore
2022-04-22 14:33:13 +01:00

84 lines
2.3 KiB
TypeScript

import { css } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
import { AlertLabels } from '../AlertLabels';
import { CollapseToggle } from '../CollapseToggle';
import { AlertGroupAlertsTable } from './AlertGroupAlertsTable';
import { AlertGroupHeader } from './AlertGroupHeader';
interface Props {
group: AlertmanagerGroup;
alertManagerSourceName: string;
}
export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
const styles = useStyles2(getStyles);
return (
<div className={styles.wrapper}>
<div className={styles.header}>
<div className={styles.group} data-testid="alert-group">
<CollapseToggle
isCollapsed={isCollapsed}
onToggle={() => setIsCollapsed(!isCollapsed)}
data-testid="alert-group-collapse-toggle"
/>
{Object.keys(group.labels).length ? (
<AlertLabels className={styles.headerLabels} labels={group.labels} />
) : (
<span>No grouping</span>
)}
</div>
<AlertGroupHeader group={group} />
</div>
{!isCollapsed && <AlertGroupAlertsTable alertManagerSourceName={alertManagerSourceName} alerts={group.alerts} />}
</div>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
& + & {
margin-top: ${theme.spacing(2)};
}
`,
headerLabels: css`
padding-bottom: 0 !important;
margin-bottom: -${theme.spacing(0.5)};
`,
header: css`
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: ${theme.spacing(1, 1, 1, 0)};
background-color: ${theme.colors.background.secondary};
width: 100%;
`,
group: css`
display: flex;
flex-direction: row;
align-items: center;
`,
summary: css``,
spanElement: css`
margin-left: ${theme.spacing(0.5)};
`,
[AlertState.Active]: css`
color: ${theme.colors.error.main};
`,
[AlertState.Suppressed]: css`
color: ${theme.colors.primary.main};
`,
[AlertState.Unprocessed]: css`
color: ${theme.colors.secondary.main};
`,
});