9b2079c1da
* Replace default angular app config editor * Problems panel: migrate module to ts * Problems panel options editor to react * Problems panel react WIP * Fix explore button * Problems panel alert list layout WIP * Refactor * Minor tweaks on panel options * remove outdated tests * Update typescript * Draft for tag event handling * Remove unused files
35 lines
878 B
TypeScript
35 lines
878 B
TypeScript
import React, { FC } from 'react';
|
|
import { cx, css } from '@emotion/css';
|
|
import { GFHeartIcon } from '../../../components';
|
|
import { ProblemDTO } from '../../../datasource-zabbix/types';
|
|
|
|
interface Props {
|
|
problem: ProblemDTO;
|
|
color: string;
|
|
blink?: boolean;
|
|
highlightBackground?: boolean;
|
|
}
|
|
|
|
export const AlertIcon: FC<Props> = ({ problem, color, blink, highlightBackground }) => {
|
|
const severity = Number(problem.severity);
|
|
const status = problem.value === '1' && severity >= 2 ? 'critical' : 'online';
|
|
|
|
const iconClass = cx('icon-gf', blink && 'zabbix-trigger--blinked');
|
|
|
|
const wrapperClass = cx(
|
|
'alert-rule-item__icon',
|
|
!highlightBackground &&
|
|
css`
|
|
color: ${color};
|
|
`
|
|
);
|
|
|
|
return (
|
|
<div className={wrapperClass}>
|
|
<GFHeartIcon status={status} className={iconClass} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AlertIcon;
|