problems panel: enable acknowledges

src/panel-triggers/components/Modal.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 interface ModalProps {
   isOpen?: boolean;
   withBackdrop?: boolean;
-  onSubmit: (data?: AckProblemData) => void;
+  onSubmit: (data?: AckProblemData) => Promise<any> | any;
   onClose?: () => void;
 }
 
@@ -42,6 +42,8 @@ export class Modal extends PureComponent<ModalProps, ModalState> {
     console.log('submit', this.state.value);
     this.props.onSubmit({
       message: this.state.value
+    }).then(() => {
+      this.dismiss();
     });
   }
 

src/panel-triggers/components/ProblemDetails.tsx

@@ -11,6 +11,7 @@ interface ProblemDetailsProps extends RTRow<Trigger> {
   rootWidth: number;
   timeRange: GFTimeRange;
   getProblemEvents: (problem: Trigger) => Promise<ZBXEvent[]>;
+  onProblemAck: (problem: Trigger, data: AckProblemData) => Promise<any> | any;
 }
 
 interface ProblemDetailsState {
@@ -47,7 +48,13 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
 
   ackProblem = (data: AckProblemData) => {
     const problem = this.props.original as Trigger;
-    console.log(problem.lastEvent && problem.lastEvent.eventid, data);
+    console.log('acknowledge: ', problem.lastEvent && problem.lastEvent.eventid, data);
+    return this.props.onProblemAck(problem, data).then(result => {
+      this.closeAckDialog();
+    }).catch(err => {
+      console.log(err);
+      this.closeAckDialog();
+    });
   }
 
   showAckDialog = () => {

src/panel-triggers/components/Problems.tsx

@@ -4,6 +4,7 @@ import * as utils from '../../datasource-zabbix/utils';
 import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell } from '../types';
 import EventTag from './EventTag';
 import ProblemDetails from './ProblemDetails';
+import { AckProblemData } from './Modal';
 
 export interface ProblemListProps {
   problems: Trigger[];
@@ -11,6 +12,7 @@ export interface ProblemListProps {
   loading?: boolean;
   timeRange?: GFTimeRange;
   getProblemEvents: (ids: string[]) => ZBXEvent[];
+  onProblemAck: (problem: Trigger, data: AckProblemData) => void;
 }
 
 interface ProblemListState {
@@ -34,6 +36,10 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     this.rootRef = ref;
   }
 
+  handleProblemAck = (problem: Trigger, data: AckProblemData) => {
+    return this.props.onProblemAck(problem, data);
+  }
+
   buildColumns() {
     const result = [];
     const options = this.props.panelOptions;
@@ -99,6 +105,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
               rootWidth={this.rootWidth}
               timeRange={this.props.timeRange}
               getProblemEvents={this.props.getProblemEvents}
+              onProblemAck={this.handleProblemAck}
             />
           }
           expanded={this.getExpandedPage(this.state.page)}

src/panel-triggers/triggers_panel_ctrl.js

@@ -732,6 +732,10 @@ export class TriggerPanelCtrl extends PanelCtrl {
         panelOptions,
         timeRange: { timeFrom, timeTo },
         getProblemEvents: ctrl.getProblemEvents.bind(ctrl),
+        onProblemAck: (trigger, data) => {
+          const message = data.message;
+          return ctrl.acknowledgeTrigger(trigger, message);
+        }
       };
       const problemsReactElem = React.createElement(ProblemList, problemsListProps);
       ReactDOM.render(problemsReactElem, elem.find('.panel-content')[0]);