Problems: add ack field to table view, closes #946

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<FAIconProps> = (props: FAIconProps) => {
   return (
     <span className={`fa-icon-container ${props.customClass || ''}`}>
       <i className={`fa fa-${props.icon}`}></i>
     </span>
   );
-}
+};
+
+export default FAIcon;

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<RTCell<ProblemDTO>> = (props: RTCell<ProblemDTO>) => {
+  const problem = props.original;
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <div>
+      {problem.acknowledges?.length > 0 &&
+        <>
+          <FAIcon icon="comments" />
+          <span className={styles.countLabel}> ({problem.acknowledges?.length})</span>
+        </>
+      }
+    </div>
+  );
+};
+
+export default AckCell;

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<ProblemListProps, Problem
       },
       { Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
       { Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell},
+      {
+        Header: 'Ack', id: 'ack', show: options.ackField, width: 70,
+        Cell: props => <AckCell {...props} />
+      },
       {
         Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags',
         Cell: props => <TagCell {...props} onTagClick={this.handleTagClick} />

src/panel-triggers/partials/options_tab.html

@@ -50,6 +50,12 @@
       checked="ctrl.panel.severityField"
       on-change="ctrl.render()">
     </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Ack"
+      checked="ctrl.panel.ackField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
     <gf-form-switch class="gf-form"
       label-class="width-9"
       label="Age"

src/panel-triggers/triggers_panel_ctrl.ts

@@ -48,6 +48,7 @@ export const PANEL_DEFAULTS = {
   statusField: true,
   statusIcon: false,
   severityField: true,
+  ackField: true,
   ageField: false,
   descriptionField: true,
   descriptionAtNewLine: false,

src/panel-triggers/types.ts

@@ -11,6 +11,7 @@ export interface ProblemsPanelOptions {
   statusField?: boolean;
   statusIcon?: boolean;
   severityField?: boolean;
+  ackField?: boolean;
   ageField?: boolean;
   descriptionField?: boolean;
   descriptionAtNewLine?: boolean;