Span Search - Highlight search results (#238)

* Add result count, navigation and clear buttons Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Correct imports Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Move and delete files Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review fixes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix TracePageHeader test Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Lighten buttons when disabled Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review fixes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix tests Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add shortcuts Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix merge changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix TracePageHeader and TracePageSearchBar tests Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Delay TracePageHeader testing until release of Enzyme v3.5.0 Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Highlight matching spans Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Highlight span-name-wrapper Signed-off-by: Davit Yeghshatyan <davo@uber.com>
jaegertracing · Oct 1, 2018 · d7c7e10 · d7c7e10
1 parent 35841f7
commit d7c7e10
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 20 deletions.
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.span-row.is-filtered-out {
-  opacity: 0.2;
+.span-row.is-matching-filter {
+  background-color: #fffce4;
 }
 
 .span-name-column {
@@ -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;
@@ -130,15 +142,29 @@ limitations under the License.
   outline: 1px solid #ddd;
 }
 
+.span-row.is-matching-filter:hover .span-view {
+  background-color: #fff3d7;
+  outline: 1px solid #ddd;
+}
+
 .span-row.is-expanded .span-view {
   background: #f8f8f8;
   outline: 1px solid #ddd;
 }
 
+.span-row.is-expanded.is-matching-filter .span-view {
+  background: #fff3d7;
+  outline: 1px solid #ddd;
+}
+
 .span-row.is-expanded:hover .span-view {
   background: #eee;
 }
 
+.span-row.is-expanded.is-matching-filter:hover .span-view {
+  background: #ffeccf;
+}
+
 .span-row.clipping-right .span-view::before {
   content: ' ';
   height: 100%;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
@@ -32,7 +32,7 @@ type SpanBarRowProps = {
   depth: number,
   isChildrenExpanded: boolean,
   isDetailExpanded: boolean,
-  isFilteredOut: boolean,
+  isMatchingFilter: boolean,
   isParent: boolean,
   label: string,
   onDetailToggled: string => void,
@@ -85,7 +85,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
       depth,
       isChildrenExpanded,
       isDetailExpanded,
-      isFilteredOut,
+      isMatchingFilter,
       isParent,
       label,
       numTicks,
@@ -113,11 +113,11 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
           span-row
           ${className || ''}
           ${isDetailExpanded ? 'is-expanded' : ''}
-          ${isFilteredOut ? 'is-filtered-out' : ''}
+          ${isMatchingFilter ? 'is-matching-filter' : ''}
         `}
       >
         <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}

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.detail-row.is-filtered-out {
-  opacity: 0.2;
-}
-
 .detail-row-expanded-accent {
   cursor: pointer;
   height: 100%;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
@@ -29,7 +29,6 @@ type SpanDetailRowProps = {
   columnDivision: number,
   detailState: DetailState,
   onDetailToggled: string => void,
-  isFilteredOut: boolean,
   linksGetter: ?(Span, KeyValuePair[], number) => Link[],
   logItemToggle: (string, Log) => void,
   logsToggle: string => void,
@@ -56,7 +55,6 @@ export default class SpanDetailRow extends React.PureComponent<SpanDetailRowProp
       color,
       columnDivision,
       detailState,
-      isFilteredOut,
       logItemToggle,
       logsToggle,
       processToggle,
@@ -65,7 +63,7 @@ export default class SpanDetailRow extends React.PureComponent<SpanDetailRowProp
       traceStartTime,
     } = this.props;
     return (
-      <TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
+      <TimelineRow className={`detail-row`}>
         <TimelineRow.Cell width={columnDivision}>
           <SpanTreeOffset level={span.depth + 1} />
           <span>

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
@@ -276,7 +276,7 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
     const color = colorGenerator.getColorByKey(serviceName);
     const isCollapsed = childrenHiddenIDs.has(spanID);
     const isDetailExpanded = detailStates.has(spanID);
-    const isFilteredOut = Boolean(findMatchesIDs) && !findMatchesIDs.has(spanID);
+    const isMatchingFilter = Boolean(findMatchesIDs) && findMatchesIDs.has(spanID);
     const showErrorIcon = isErrorSpan(span) || (isCollapsed && spanContainsErredSpan(trace.spans, spanIndex));
     const viewBounds = getViewedBounds({
       min: trace.startTime,
@@ -319,7 +319,7 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
           label={formatDuration(span.duration)}
           isChildrenExpanded={!isCollapsed}
           isDetailExpanded={isDetailExpanded}
-          isFilteredOut={isFilteredOut}
+          isMatchingFilter={isMatchingFilter}
           isParent={span.hasChildren}
           numTicks={NUM_TICKS}
           onDetailToggled={detailToggle}
@@ -346,7 +346,6 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
       detailStates,
       detailTagsToggle,
       detailToggle,
-      findMatchesIDs,
       spanNameColumnWidth,
       trace,
     } = this.props;
@@ -355,15 +354,13 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
       return null;
     }
     const color = colorGenerator.getColorByKey(serviceName);
-    const isFilteredOut = Boolean(findMatchesIDs) && !findMatchesIDs.has(spanID);
     return (
       <div className="VirtualizedTraceView--row" key={key} style={{ ...style, zIndex: 1 }} {...attrs}>
         <SpanDetailRow
           color={color}
           columnDivision={spanNameColumnWidth}
           onDetailToggled={detailToggle}
           detailState={detailState}
-          isFilteredOut={isFilteredOut}
           linksGetter={this.linksGetter}
           logItemToggle={detailLogItemToggle}
           logsToggle={detailLogsToggle}

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.test.js
@@ -295,7 +295,7 @@ describe('<VirtualizedTraceViewImpl>', () => {
             depth={span.depth}
             isChildrenExpanded
             isDetailExpanded={false}
-            isFilteredOut={false}
+            isMatchingFilter={false}
             isParent={span.hasChildren}
             numTicks={5}
             onDetailToggled={props.detailToggle}
@@ -335,7 +335,6 @@ describe('<VirtualizedTraceViewImpl>', () => {
             columnDivision={props.spanNameColumnWidth}
             onDetailToggled={props.detailToggle}
             detailState={detailState}
-            isFilteredOut={false}
             logItemToggle={props.detailLogItemToggle}
             logsToggle={props.detailLogsToggle}
             processToggle={props.detailProcessToggle}