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">

src/sass/_panel-problems.scss

@@ -145,6 +145,10 @@
       }
       .label-tag, .zbx-tag {
         margin-right: 0.6rem;
+
+        &.highlighted {
+          box-shadow: 0 0 10px $orange;
+        }
       }
     }
 
@@ -176,7 +180,7 @@
 
       .problem-details {
         position: relative;
-        flex: 10 0 auto;
+        flex: 10 1 auto;
         padding: 0.5rem 1rem 0.5rem 1.2rem;
         display: flex;
         flex-direction: column;
@@ -279,7 +283,7 @@
 
 
       .problem-details-right {
-        // flex: 1 0 auto;
+        flex: 0 0 auto;
         padding: 0.5rem 2rem;
         // background: $dark-4;
         color: $text-color-muted;