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 (
-
- {tag.tag}: {tag.value}
-
- );
+class EventTag extends PureComponent {
+ 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 (
+
+ {tag.tag}: {tag.value}
+
+ );
+ }
}
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 {