problems: add tag filter on tag click

src/panel-triggers/components/ProblemDetails.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import * as utils from '../../datasource-zabbix/utils';
-import { Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow } from '../types';
+import { Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../types';
 import { Modal, AckProblemData } from './Modal';
 import EventTag from './EventTag';
 import Tooltip from './Tooltip/Tooltip';
@@ -11,7 +11,8 @@ interface ProblemDetailsProps extends RTRow<Trigger> {
   rootWidth: number;
   timeRange: GFTimeRange;
   getProblemEvents: (problem: Trigger) => Promise<ZBXEvent[]>;
-  onProblemAck: (problem: Trigger, data: AckProblemData) => Promise<any> | any;
+  onProblemAck?: (problem: Trigger, data: AckProblemData) => Promise<any> | any;
+  onTagClick?: (tag: ZBXTag, datasource: string) => void;
 }
 
 interface ProblemDetailsState {
@@ -37,6 +38,12 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     });
   }
 
+  handleTagClick = (tag: ZBXTag) => {
+    if (this.props.onTagClick) {
+      this.props.onTagClick(tag, this.props.original.datasource);
+    }
+  }
+
   fetchProblemEvents() {
     const problem = this.props.original;
     this.props.getProblemEvents(problem)
@@ -100,7 +107,12 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
           {problem.tags && problem.tags.length > 0 &&
             <div className="problem-tags">
               {problem.tags && problem.tags.map(tag =>
-                <EventTag key={tag.tag + tag.value} tag={tag} highlight={tag.tag === problem.correlation_tag} />)
+                <EventTag
+                  key={tag.tag + tag.value}
+                  tag={tag}
+                  highlight={tag.tag === problem.correlation_tag}
+                  onClick={this.handleTagClick}
+                />)
               }
             </div>
           }

src/panel-triggers/components/Problems.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import ReactTable from 'react-table';
 import * as utils from '../../datasource-zabbix/utils';
-import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell } from '../types';
+import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag } from '../types';
 import EventTag from './EventTag';
 import ProblemDetails from './ProblemDetails';
 import { AckProblemData } from './Modal';
@@ -12,7 +12,8 @@ export interface ProblemListProps {
   loading?: boolean;
   timeRange?: GFTimeRange;
   getProblemEvents: (ids: string[]) => ZBXEvent[];
-  onProblemAck: (problem: Trigger, data: AckProblemData) => void;
+  onProblemAck?: (problem: Trigger, data: AckProblemData) => void;
+  onTagClick?: (tag: ZBXTag, datasource: string) => void;
 }
 
 interface ProblemListState {
@@ -88,6 +89,12 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     });
   }
 
+  handleTagClick = (tag: ZBXTag, datasource: string) => {
+    if (this.props.onTagClick) {
+      this.props.onTagClick(tag, datasource);
+    }
+  }
+
   render() {
     // console.log(this.props.problems);
     const columns = this.buildColumns();
@@ -106,6 +113,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
               timeRange={this.props.timeRange}
               getProblemEvents={this.props.getProblemEvents}
               onProblemAck={this.handleProblemAck}
+              onTagClick={this.handleTagClick}
             />
           }
           expanded={this.getExpandedPage(this.state.page)}

src/panel-triggers/triggers_panel_ctrl.js

@@ -735,6 +735,9 @@ export class TriggerPanelCtrl extends PanelCtrl {
         onProblemAck: (trigger, data) => {
           const message = data.message;
           return ctrl.acknowledgeTrigger(trigger, message);
+        },
+        onTagClick: (tag, datasource) => {
+          ctrl.addTagFilter(tag, datasource);
         }
       };
       const problemsReactElem = React.createElement(ProblemList, problemsListProps);