From ad661ca75b7b95fc0e4d335814c15969f4783265 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sat, 8 Dec 2018 12:17:26 +0300
Subject: [PATCH] problems panel: handle tag click

---
 src/panel-triggers/components/EventTag.tsx | 37 ++++++++++++++--------
 src/sass/_panel-problems.scss              |  1 +
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/panel-triggers/components/EventTag.tsx b/src/panel-triggers/components/EventTag.tsx
index 309ecc6..250c29c 100644
--- a/src/panel-triggers/components/EventTag.tsx
+++ b/src/panel-triggers/components/EventTag.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { ZBXTag } from '../types';
 
 const TAG_COLORS = [
@@ -87,20 +87,31 @@ function djb2(str) {
 interface EventTagProps {
   tag: ZBXTag;
   highlight?: boolean;
+  onClick?: (tag: ZBXTag) => void;
 }
 
-function EventTag(props: EventTagProps) {
-  const { tag, highlight } = props;
-  const tagColor = getTagColorsFromName(tag.tag);
-  const style: React.CSSProperties = {
-    background: tagColor.color,
-    borderColor: tagColor.borderColor,
-  };
-  return (
-    <span className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`} style={style}>
-      {tag.tag}: {tag.value}
-    </span>
-  );
+class EventTag extends PureComponent<EventTagProps> {
+  handleClick = () => {
+    if (this.props.onClick) {
+      this.props.onClick(this.props.tag);
+    }
+  }
+
+  render() {
+    const { tag, highlight } = this.props;
+    const tagColor = getTagColorsFromName(tag.tag);
+    const style: React.CSSProperties = {
+      background: tagColor.color,
+      borderColor: tagColor.borderColor,
+    };
+    return (
+      <span className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`}
+        style={style}
+        onClick={this.handleClick}>
+        {tag.tag}: {tag.value}
+      </span>
+    );
+  }
 }
 
 export default EventTag;
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 3f9875c..e555994 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -144,6 +144,7 @@
         padding-left: 0.6rem;
       }
       .label-tag, .zbx-tag {
+        cursor: pointer;
         margin-right: 0.6rem;
 
         &.highlighted {