problems panel: highlight correlation tag

src/panel-triggers/components/EventTag.tsx

@@ -86,17 +86,18 @@ function djb2(str) {
 
 interface EventTagProps {
   tag: ZBXTag;
+  highlight?: boolean;
 }
 
 function EventTag(props: EventTagProps) {
-  const { tag } = props;
+  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" style={style}>
+    <span className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`} style={style}>
       {tag.tag}: {tag.value}
     </span>
   );

src/panel-triggers/components/Problems.tsx

@@ -322,7 +322,9 @@ class ProblemDetails extends PureComponent<any, any> {
             </div>
           }
           <div className="problem-tags">
-            {problem.tags && problem.tags.map(tag => <EventTag key={tag.tag + tag.value} tag={tag} />)}
+            {problem.tags && problem.tags.map(tag =>
+              <EventTag key={tag.tag + tag.value} tag={tag} highlight={tag.tag === problem.correlation_tag} />)
+            }
           </div>
           {problem.acknowledges && !wideLayout &&
             <div className="problem-ack-container">