problems: remove tag filter with Ctrl/Shift+click

src/panel-triggers/components/EventTag.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { ZBXTag } from '../types';
+import Tooltip from './Tooltip/Tooltip';
 
 const TAG_COLORS = [
   '#E24D42',
@@ -87,13 +88,13 @@ function djb2(str) {
 interface EventTagProps {
   tag: ZBXTag;
   highlight?: boolean;
-  onClick?: (tag: ZBXTag) => void;
+  onClick?: (tag: ZBXTag, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }
 
 export default class EventTag extends PureComponent<EventTagProps> {
-  handleClick = () => {
+  handleClick = (event) => {
     if (this.props.onClick) {
-      this.props.onClick(this.props.tag);
+      this.props.onClick(this.props.tag, event.ctrlKey, event.shiftKey);
     }
   }
 
@@ -105,14 +106,16 @@ export default class EventTag extends PureComponent<EventTagProps> {
       borderColor: tagColor.borderColor,
     };
     return (
-      <span className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`}
-        style={style}
-        onClick={this.handleClick}>
-        {tag.value ?
-          `${tag.tag}: ${tag.value}` :
-          `${tag.tag}`
-        }
-      </span>
+      <Tooltip placement="bottom" content="Click to add tag filter or Ctrl/Shift+click to remove">
+        <span className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`}
+          style={style}
+          onClick={this.handleClick}>
+          {tag.value ?
+            `${tag.tag}: ${tag.value}` :
+            `${tag.tag}`
+          }
+        </span>
+      </Tooltip>
     );
   }
 }

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -15,7 +15,7 @@ interface ProblemDetailsProps extends RTRow<ZBXTrigger> {
   timeRange: GFTimeRange;
   getProblemEvents: (problem: ZBXTrigger) => Promise<ZBXEvent[]>;
   onProblemAck?: (problem: ZBXTrigger, data: AckProblemData) => Promise<any> | any;
-  onTagClick?: (tag: ZBXTag, datasource: string) => void;
+  onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }
 
 interface ProblemDetailsState {
@@ -41,9 +41,9 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     });
   }
 
-  handleTagClick = (tag: ZBXTag) => {
+  handleTagClick = (tag: ZBXTag, ctrlKey?: boolean, shiftKey?: boolean) => {
     if (this.props.onTagClick) {
-      this.props.onTagClick(tag, this.props.original.datasource);
+      this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
     }
   }
 
@@ -51,7 +51,6 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     const problem = this.props.original;
     this.props.getProblemEvents(problem)
     .then(events => {
-      console.log(events, this.props.timeRange);
       this.setState({ events });
     });
   }

src/panel-triggers/components/Problems/ProblemTimeline.tsx

@@ -259,7 +259,6 @@ class TimelineInfoContainer extends PureComponent<TimelineInfoContainerProps> {
     const { event, eventInfo, show, className, left } = this.props;
     let infoItems, durationItem;
     if (event) {
-      console.log(event);
       const ts = moment(Number(event.clock) * 1000);
       const tsFormatted = ts.format('HH:mm:ss');
       infoItems = [

src/panel-triggers/components/Problems/Problems.tsx

@@ -20,7 +20,7 @@ export interface ProblemListProps {
   fontSize?: number;
   getProblemEvents: (ids: string[]) => ZBXEvent[];
   onProblemAck?: (problem: ZBXTrigger, data: AckProblemData) => void;
-  onTagClick?: (tag: ZBXTag, datasource: string) => void;
+  onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
   onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
   onColumnResize?: (newResized: RTResized) => void;
 }
@@ -70,9 +70,9 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
     });
   }
 
-  handleTagClick = (tag: ZBXTag, datasource: string) => {
+  handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
     if (this.props.onTagClick) {
-      this.props.onTagClick(tag, datasource);
+      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
     }
   }
 

src/panel-triggers/triggers_panel_ctrl.js

@@ -479,6 +479,17 @@ export class TriggerPanelCtrl extends PanelCtrl {
     this.refresh();
   }
 
+  removeTagFilter(tag, ds) {
+    let tagFilter = this.panel.targets[ds].tags.filter;
+    let targetTags = this.parseTags(tagFilter);
+    console.log(targetTags);
+    _.remove(targetTags, t => t.tag === tag.tag && t.value === tag.value);
+    targetTags = _.uniqWith(targetTags, _.isEqual);
+    let newFilter = this.tagsToString(targetTags);
+    this.panel.targets[ds].tags.filter = newFilter;
+    this.refresh();
+  }
+
   getProblemEvents(trigger) {
     const triggerids = [trigger.triggerid];
     const timeFrom = Math.ceil(dateMath.parse(this.range.from) / 1000);
@@ -646,8 +657,12 @@ export class TriggerPanelCtrl extends PanelCtrl {
           const message = data.message;
           return ctrl.acknowledgeTrigger(trigger, message);
         },
-        onTagClick: (tag, datasource) => {
-          ctrl.addTagFilter(tag, datasource);
+        onTagClick: (tag, datasource, ctrlKey, shiftKey) => {
+          if (ctrlKey || shiftKey) {
+            ctrl.removeTagFilter(tag, datasource);
+          } else {
+            ctrl.addTagFilter(tag, datasource);
+          }
         }
       };