Highlight span-name-wrapper

Signed-off-by: Davit Yeghshatyan <[email protected]>
jaegertracing · Aug 24, 2018 · 9bb150a · 9bb150a
1 parent 7cc9a7f
commit 9bb150a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
@@ -45,6 +45,10 @@ limitations under the License.
   display: flex;
 }
 
+.span-name-wrapper.is-matching-filter {
+  background-color: #fffce4;
+}
+
 .span-name-wrapper:hover {
   border-right: 1px solid #bbb;
   float: left;
@@ -57,11 +61,19 @@ limitations under the License.
   background: linear-gradient(90deg, #fafafa, #f8f8f8 75%, #eee);
 }
 
+.span-row.is-matching-filter:hover .span-name-wrapper {
+  background: linear-gradient(90deg, #fff5e1, #fff5e1 75%, #ffe6c9);
+}
+
 .span-row.is-expanded .span-name-wrapper {
   background: #f0f0f0;
   outline: 1px solid #ddd;
 }
 
+.span-row.is-expanded .span-name-wrapper.is-matching-filter {
+  background: #fff3d7;
+}
+
 .span-name {
   color: #000;
   cursor: pointer;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
@@ -117,7 +117,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
         `}
       >
         <TimelineRow.Cell className="span-name-column" width={columnDivision}>
-          <div className="span-name-wrapper">
+          <div className={`span-name-wrapper ${isMatchingFilter ? 'is-matching-filter' : ''}`}>
             <SpanTreeOffset
               level={depth + 1}
               hasChildren={isParent}