diff --git a/src/panel-triggers/components/FAIcon.tsx b/src/panel-triggers/components/FAIcon.tsx index aca9968..960947e 100644 --- a/src/panel-triggers/components/FAIcon.tsx +++ b/src/panel-triggers/components/FAIcon.tsx @@ -5,10 +5,12 @@ interface FAIconProps { customClass?: string; } -export default function FAIcon(props: FAIconProps) { +export const FAIcon: React.FC = (props: FAIconProps) => { return ( ); -} +}; + +export default FAIcon; diff --git a/src/panel-triggers/components/Problems/AckCell.tsx b/src/panel-triggers/components/Problems/AckCell.tsx new file mode 100644 index 0000000..757907f --- /dev/null +++ b/src/panel-triggers/components/Problems/AckCell.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { css } from 'emotion'; +import { RTCell } from '../../types'; +import { ProblemDTO } from '../../../datasource-zabbix/types'; +import { FAIcon } from '../FAIcon'; +import { useTheme, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + return { + countLabel: css` + font-size: ${theme.typography.size.sm}; + `, + }; +}); + +export const AckCell: React.FC> = (props: RTCell) => { + const problem = props.original; + const theme = useTheme(); + const styles = getStyles(theme); + + return ( +
+ {problem.acknowledges?.length > 0 && + <> + + ({problem.acknowledges?.length}) + + } +
+ ); +}; + +export default AckCell; diff --git a/src/panel-triggers/components/Problems/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx index 0ab1e90..56e071c 100644 --- a/src/panel-triggers/components/Problems/Problems.tsx +++ b/src/panel-triggers/components/Problems/Problems.tsx @@ -11,7 +11,8 @@ import { AckProblemData } from '../Modal'; import GFHeartIcon from '../GFHeartIcon'; import { ProblemsPanelOptions, GFTimeRange, RTCell, TriggerSeverity, RTResized } from '../../types'; import { ProblemDTO, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types'; -import FAIcon from '../FAIcon'; +import { FAIcon } from '../FAIcon'; +import { AckCell } from './AckCell'; export interface ProblemListProps { problems: ProblemDTO[]; @@ -110,6 +111,10 @@ export default class ProblemList extends PureComponent + }, { Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags', Cell: props => diff --git a/src/panel-triggers/partials/options_tab.html b/src/panel-triggers/partials/options_tab.html index 799c6e5..378bb08 100644 --- a/src/panel-triggers/partials/options_tab.html +++ b/src/panel-triggers/partials/options_tab.html @@ -50,6 +50,12 @@ checked="ctrl.panel.severityField" on-change="ctrl.render()"> + +