Move filter to query param and highlight filter matches on graphs

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css

@@ -47,6 +47,37 @@ limitations under the License.
   stroke-width: 0.7;
 }
 
+/* Find within diff */
+.TraceDiffGraph--uiFind {
+  border: solid 1px #a9a9a9;
+  border-radius: 21px;
+  bottom: 20px;
+  cursor: auto;
+  display: flex;
+  padding: 5px;
+  position: absolute;
+  right: 20px;
+  z-index: 1;
+}
+
+.TraceDiffGraph--uiFind--input {
+  width: 300px;
+  transition: ease 1s;
+  margin: 0px 3px;
+}
+
+.TraceDiffGraph--uiFind:not(:hover) > .TraceDiffGraph--uiFind--input:not(:focus) {
+  border: none;
+  padding: 0px;
+  width: 0;
+  margin: 0px;
+}
+
+.TraceDiffGraph--uiFind--icon {
+  cursor: pointer;
+  font-size: 32px;
+}
+
 /* DAG minimap */
 
 .TraceDiffGraph--miniMap {

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js

@@ -15,11 +15,13 @@
 // limitations under the License.
 
 import * as React from 'react';
+import { Icon, Input } from 'antd';
 import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
 
 import drawNode from './drawNode';
 import ErrorMessage from '../../common/ErrorMessage';
 import LoadingIndicator from '../../common/LoadingIndicator';
+import UIFindInput from '../../common/UIFindInput';
 import { fetchedState } from '../../../constants';
 import convPlexus from '../../../model/trace-dag/convPlexus';
 import TraceDag from '../../../model/trace-dag/TraceDag';
@@ -42,23 +44,33 @@ function setOnEdgesContainer(state: Object) {
   }
   const { k } = zoomTransform;
   const opacity = 0.1 + k * 0.9;
-  return { style: { opacity } };
+  return { style: { opacity, zIndex: 1 } };
+}
+
+function setOnNodesContainer() {
+  return { style: { zIndex: -1 } };
 }
 
 export default class TraceDiffGraph extends React.PureComponent<Props> {
   props: Props;
+  _uiFindInputRef: { current: Input | null };
 
   layoutManager: LayoutManager;
 
   constructor(props: Props) {
     super(props);
     this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
+    this._uiFindInputRef = React.createRef();
   }
 
   componentWillUnmount() {
     this.layoutManager.stopAndRelease();
   }
 
+  handleIconClick = () => {
+    if (this._uiFindInputRef.current) this._uiFindInputRef.current.focus();
+  };
+
   render() {
     const { a, b } = this.props;
     if (!a || !b) {
@@ -109,9 +121,17 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
           getNodeLabel={drawNode}
           setOnRoot={classNameIsSmall}
           setOnEdgesContainer={setOnEdgesContainer}
+          setOnNodesContainer={setOnNodesContainer}
           edges={edges}
           vertices={vertices}
         />
+        <div className="TraceDiffGraph--uiFind">
+          <UIFindInput
+            forwardedRef={this._uiFindInputRef}
+            inputProps={{ className: 'TraceDiffGraph--uiFind--input' }}
+          />
+          <Icon className="TraceDiffGraph--uiFind--icon" onClick={this.handleIconClick} type="search" />
+        </div>
       </div>
     );
   }

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css

@@ -52,6 +52,13 @@ limitations under the License.
   color: #fff;
 }
 
+.DiffNode.is-ui-find-match {
+  outline-style: solid;
+  outline-color: #050;
+  outline-width: 2px;
+  box-shadow: 0 0 4px 8px #0d0;
+}
+
 .DiffNode--metricCell {
   padding: 0.3rem 0.5rem;
   background: rgba(255, 255, 255, 0.3);

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js

@@ -17,16 +17,24 @@
 import * as React from 'react';
 import { Popover } from 'antd';
 import cx from 'classnames';
+import _get from 'lodash/get';
+import _map from 'lodash/map';
+import _memoize from 'lodash/memoize';
+import { connect } from 'react-redux';
 
 import CopyIcon from '../../common/CopyIcon';
+import { extractUIFindFromState } from '../../common/UIFindInput';
+import filterSpans from '../../../utils/filter-spans';
 
-import type { PVertex } from '../../../model/trace-dag/types';
+import type { PVertex, DenseSpan } from '../../../model/trace-dag/types';
 
 import './drawNode.css';
 
 type Props = {
   a: number,
   b: number,
+  uiFind: string,
+  members: DenseSpan[],
   operation: string,
   service: string,
 };
@@ -36,9 +44,18 @@ const max = Math.max;
 
 class DiffNode extends React.PureComponent<Props> {
   props: Props;
+  filterSpans: typeof filterSpans;
+  static defaultProps = {
+    uiFind: '',
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.filterSpans = _memoize(filterSpans);
+  }
 
   render() {
-    const { a, b, operation, service } = this.props;
+    const { a, b, uiFind, operation, service } = this.props;
     const isSame = a === b;
     const className = cx({
       'is-same': isSame,
@@ -47,6 +64,7 @@ class DiffNode extends React.PureComponent<Props> {
       'is-added': a === 0,
       'is-less': a > b && b > 0,
       'is-removed': b === 0,
+      'is-ui-find-match': _get(this.filterSpans(uiFind, _map(this.props.members, 'span')), 'size'),
     });
     const chgSign = a < b ? '+' : '-';
     const table = (
@@ -88,7 +106,9 @@ class DiffNode extends React.PureComponent<Props> {
   }
 }
 
+const ConnectedDiffNode = connect(extractUIFindFromState)(DiffNode);
+
 export default function drawNode<T>(vertex: PVertex<T>) {
-  const { data, operation, service } = vertex.data;
-  return <DiffNode {...data} operation={operation} service={service} />;
+  const { data, members, operation, service } = vertex.data;
+  return <ConnectedDiffNode {...data} members={members} operation={operation} service={service} />;
 }

packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css

@@ -20,14 +20,20 @@ limitations under the License.
   cursor: pointer;
   white-space: nowrap;
   border-collapse: separate;
-  border-radius: 2px;
 }
 
 .OpNode td,
 .OpNode th {
   border: none;
 }
 
+.OpNode.is-ui-find-match {
+  outline-style: solid;
+  outline-color: #050;
+  outline-width: 2px;
+  box-shadow: 0 0 4px 8px #0d0;
+}
+
 .OpMode--mode-service {
   background: #bbb;
 }

packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js

@@ -16,11 +16,18 @@
 
 import * as React from 'react';
 import { Popover } from 'antd';
+import cx from 'classnames';
+import _get from 'lodash/get';
+import _map from 'lodash/map';
+import _memoize from 'lodash/memoize';
+import { connect } from 'react-redux';
 
 import CopyIcon from '../../common/CopyIcon';
+import { extractUIFindFromState } from '../../common/UIFindInput';
 import colorGenerator from '../../../utils/color-generator';
+import filterSpans from '../../../utils/filter-spans';
 
-import type { PVertex } from '../../../model/trace-dag/types';
+import type { PVertex, DenseSpan } from '../../../model/trace-dag/types';
 
 import './OpNode.css';
 
@@ -34,6 +41,8 @@ type Props = {
   operation: string,
   service: string,
   mode: string,
+  uiFind: string,
+  members: DenseSpan[],
 };
 
 export const MODE_SERVICE = 'service';
@@ -65,9 +74,29 @@ export function round2(percent: number) {
 
 export default class OpNode extends React.PureComponent<Props> {
   props: Props;
+  filterSpans: typeof filterSpans;
+  static defaultProps = {
+    uiFind: '',
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.filterSpans = _memoize(filterSpans);
+  }
 
   render() {
-    const { count, errors, time, percent, selfTime, percentSelfTime, operation, service, mode } = this.props;
+    const {
+      count,
+      errors,
+      time,
+      percent,
+      selfTime,
+      percentSelfTime,
+      operation,
+      service,
+      mode,
+      uiFind,
+    } = this.props;
 
     // Spans over 20 % time are full red - we have probably to reconsider better approach
     let backgroundColor;
@@ -83,8 +112,12 @@ export default class OpNode extends React.PureComponent<Props> {
         .join();
     }
 
+    const className = cx('OpNode', `OpNode--mode-${mode}`, {
+      'is-ui-find-match': _get(this.filterSpans(uiFind, _map(this.props.members, 'span')), 'size'),
+    });
+
     const table = (
-      <table className={`OpNode OpNode--mode-${mode}`} cellSpacing="0">
+      <table className={className} cellSpacing="0">
         <tbody
           style={{
             background: `rgba(${backgroundColor})`,
@@ -125,9 +158,13 @@ export default class OpNode extends React.PureComponent<Props> {
   }
 }
 
+const ConnectedOpNode = connect(extractUIFindFromState)(OpNode);
+
 export function getNodeDrawer(mode: string) {
   return function drawNode<T>(vertex: PVertex<T>) {
-    const { data, operation, service } = vertex.data;
-    return <OpNode {...data} mode={mode} operation={operation} service={service} />;
+    const { data, members, operation, service } = vertex.data;
+    return (
+      <ConnectedOpNode {...data} members={members} mode={mode} operation={operation} service={service} />
+    );
   };
 }

packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.test.js

@@ -14,9 +14,13 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import _map from 'lodash/map';
 
 import OpNode, { getNodeDrawer, MODE_SERVICE, MODE_TIME, MODE_SELFTIME } from './OpNode';
 import CopyIcon from '../../common/CopyIcon';
+import filterSpansMock from '../../../utils/filter-spans';
+
+jest.mock('../../../utils/filter-spans');
 
 describe('<OpNode>', () => {
   let wrapper;
@@ -28,23 +32,25 @@ describe('<OpNode>', () => {
     props = {
       count: 5,
       errors: 0,
-      time: 200000,
+      uiFind: 'uiFind',
+      members: [{ span: { spanID: 'memberSpanID0' } }, { span: { spanID: 'memberSpanID1' } }],
+      operation: 'op1',
       percent: 7.89,
-      selfTime: 180000,
       percentSelfTime: 90,
-      operation: 'op1',
+      selfTime: 180000,
       service: 'service1',
+      time: 200000,
     };
     wrapper = shallow(<OpNode {...props} mode={mode} />);
   });
 
-  it('it does not explode', () => {
+  it('does not explode', () => {
     expect(wrapper).toBeDefined();
     expect(wrapper.find('.OpNode').length).toBe(1);
     expect(wrapper.find('.OpNode--mode-service').length).toBe(1);
   });
 
-  it('it renders OpNode', () => {
+  it('renders OpNode', () => {
     expect(wrapper.find('.OpNode--count').text()).toBe('5 / 0');
     expect(wrapper.find('.OpNode--time').text()).toBe('200 ms (7.89 %)');
     expect(wrapper.find('.OpNode--avg').text()).toBe('40 ms');
@@ -58,7 +64,7 @@ describe('<OpNode>', () => {
     ).toBe('service1');
   });
 
-  it('it switches mode', () => {
+  it('switches mode', () => {
     mode = MODE_SERVICE;
     wrapper = shallow(<OpNode {...props} mode={mode} />);
     expect(wrapper.find('.OpNode--mode-service').length).toBe(1);
@@ -78,6 +84,15 @@ describe('<OpNode>', () => {
     expect(wrapper.find('.OpNode--mode-selftime').length).toBe(1);
   });
 
+  it('updates class when it matches search', () => {
+    const uiFind = 'newUIFindToTriggerRender';
+    expect(wrapper.find('.is-ui-find-match').length).toBe(0);
+    filterSpansMock.mockReturnValue({ size: 1 });
+    wrapper.setProps({ uiFind });
+    expect(wrapper.find('.is-ui-find-match').length).toBe(1);
+    expect(filterSpansMock).toHaveBeenLastCalledWith(uiFind, _map(props.members, 'span'));
+  });
+
   it('renders a copy icon', () => {
     const copyIcon = wrapper.find(CopyIcon);
     expect(copyIcon.length).toBe(1);
@@ -86,7 +101,7 @@ describe('<OpNode>', () => {
   });
 
   describe('getNodeDrawer()', () => {
-    it('it creates OpNode', () => {
+    it('creates OpNode', () => {
       const vertex = {
         data: {
           service: 'service1',

packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js

@@ -84,6 +84,10 @@ function setOnEdgesContainer(state: Object) {
   return { style: { opacity } };
 }
 
+function setOnNodesContainer() {
+  return { style: { zIndex: -1 } };
+}
+
 const HELP_CONTENT = (
   <div className="TraceGraph--help-content">
     {HELP_TABLE}
@@ -267,6 +271,7 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
           setOnRoot={classNameIsSmall}
           setOnEdgePath={setOnEdgePath}
           setOnEdgesContainer={setOnEdgesContainer}
+          setOnNodesContainer={setOnNodesContainer}
           edges={ev.edges}
           vertices={ev.vertices}
         />