Ddg ui find

packages/jaeger-ui/src/components/DeepDependencies/Graph.test.js

@@ -17,35 +17,39 @@ import { shallow } from 'enzyme';
 import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
 
 import Graph from './Graph';
-import { focalPayloadElem, simplePath, wrap } from '../../model/ddg/sample-paths.test.resources';
-import transformDdgData from '../../model/ddg/transformDdgData';
-import GraphModel from '../../model/ddg/Graph';
 
 describe('<Graph />', () => {
-  const ddgModel = transformDdgData([simplePath].map(wrap), focalPayloadElem);
+  const vertices = [...new Array(10)].map((_, i) => ({ key: `key${i}` }));
+  const edges = [
+    {
+      from: vertices[0].key,
+      to: vertices[1].key,
+    },
+    {
+      from: vertices[1].key,
+      to: vertices[2].key,
+    },
+  ];
+
   const props = {
-    ddgModel,
-    visEncoding: '3',
+    vertices,
+    edges,
   };
 
   describe('constructor', () => {
-    it('creates new managers', () => {
+    it('creates layout manager', () => {
       const graph = new Graph(props);
-      expect(graph.graphModel instanceof GraphModel).toBe(true);
       expect(graph.layoutManager instanceof LayoutManager).toBe(true);
     });
   });
 
   describe('render', () => {
-    it('provides edges and vertices from ddgEVManager to plexus', () => {
+    it('renders provided edges and vertices', () => {
       const wrapper = shallow(<Graph {...props} />);
       const plexusGraph = wrapper.find(DirectedGraph);
-      const { edges: expectedEdges, vertices: expectedVertices } = new GraphModel({ ddgModel }).getVisible(
-        '3'
-      );
-
-      expect(plexusGraph.prop('edges')).toEqual(expectedEdges);
-      expect(plexusGraph.prop('vertices')).toEqual(expectedVertices);
+      expect(plexusGraph.prop('edges')).toEqual(edges);
+      expect(plexusGraph.prop('vertices')).toEqual(vertices);
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

packages/jaeger-ui/src/components/DeepDependencies/Graph.tsx

@@ -12,32 +12,30 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
+import { TEdge } from '@jaegertracing/plexus/lib/types';
 
 import getNodeLabel from './getNodeLabel';
-import GraphModel from '../../model/ddg/Graph';
 
-import { TDdgModel } from '../../model/ddg/types';
+import { TDdgVertex } from '../../model/ddg/types';
 
 type TProps = {
-  ddgModel: TDdgModel;
-  visEncoding?: string;
+  edges: TEdge[];
+  uiFindMatches: Set<TDdgVertex> | undefined;
+  vertices: TDdgVertex[];
 };
 
-export default class Graph extends Component<TProps> {
-  private graphModel: GraphModel;
+export default class Graph extends PureComponent<TProps> {
   private layoutManager: LayoutManager;
 
   constructor(props: TProps) {
     super(props);
-    const { ddgModel } = props;
-    this.graphModel = new GraphModel({ ddgModel });
     this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
   }
 
   render() {
-    const { edges, vertices } = this.graphModel.getVisible(this.props.visEncoding);
+    const { edges, uiFindMatches, vertices } = this.props;
 
     return (
       <DirectedGraph
@@ -48,7 +46,7 @@ export default class Graph extends Component<TProps> {
         layoutManager={this.layoutManager}
         edges={edges}
         vertices={vertices}
-        getNodeLabel={getNodeLabel}
+        getNodeLabel={getNodeLabel(uiFindMatches)}
       />
     );
   }

packages/jaeger-ui/src/components/DeepDependencies/Header/__snapshots__/index.test.js.snap

@@ -19,6 +19,32 @@ exports[`<Header> renders the hops selector if distanceToPathElems is provided 1
   <div
     className="DdgHeader--controlHeader"
   >
+    <div
+      className="DdgHeader--uiFind"
+      onClick={[Function]}
+      role="button"
+    >
+      <Icon
+        className="DdgHeader--uiFindSearchIcon"
+        type="search"
+      />
+      <withRouter(Connect(UnconnectedUiFindInput))
+        allowClear={true}
+        forwardedRef={
+          Object {
+            "current": null,
+          }
+        }
+        inputProps={
+          Object {
+            "className": "DdgHeader--uiFindInput",
+          }
+        }
+      />
+      <span
+        className="DdgHeader--uiFindCount"
+      />
+    </div>
     <Component
       distanceToPathElems={Map {}}
       handleClick={[Function]}
@@ -58,7 +84,34 @@ exports[`<Header> renders the operation selector if a service is selected 1`] =
   </div>
   <div
     className="DdgHeader--controlHeader"
-  />
+  >
+    <div
+      className="DdgHeader--uiFind"
+      onClick={[Function]}
+      role="button"
+    >
+      <Icon
+        className="DdgHeader--uiFindSearchIcon"
+        type="search"
+      />
+      <withRouter(Connect(UnconnectedUiFindInput))
+        allowClear={true}
+        forwardedRef={
+          Object {
+            "current": null,
+          }
+        }
+        inputProps={
+          Object {
+            "className": "DdgHeader--uiFindInput",
+          }
+        }
+      />
+      <span
+        className="DdgHeader--uiFindCount"
+      />
+    </div>
+  </div>
 </header>
 `;
 
@@ -83,7 +136,11 @@ exports[`<Header> renders the operation selector if a service is selected 2`] =
     />
     <NameSelector
       label="Operation:"
-      options={Array []}
+      options={
+        Array [
+          "testOperation",
+        ]
+      }
       placeholder="Select an operation…"
       required={true}
       setValue={[Function]}
@@ -92,7 +149,34 @@ exports[`<Header> renders the operation selector if a service is selected 2`] =
   </div>
   <div
     className="DdgHeader--controlHeader"
-  />
+  >
+    <div
+      className="DdgHeader--uiFind"
+      onClick={[Function]}
+      role="button"
+    >
+      <Icon
+        className="DdgHeader--uiFindSearchIcon"
+        type="search"
+      />
+      <withRouter(Connect(UnconnectedUiFindInput))
+        allowClear={true}
+        forwardedRef={
+          Object {
+            "current": null,
+          }
+        }
+        inputProps={
+          Object {
+            "className": "DdgHeader--uiFindInput",
+          }
+        }
+      />
+      <span
+        className="DdgHeader--uiFindCount"
+      />
+    </div>
+  </div>
 </header>
 `;
 
@@ -114,6 +198,33 @@ exports[`<Header> renders with minimal props 1`] = `
   </div>
   <div
     className="DdgHeader--controlHeader"
-  />
+  >
+    <div
+      className="DdgHeader--uiFind"
+      onClick={[Function]}
+      role="button"
+    >
+      <Icon
+        className="DdgHeader--uiFindSearchIcon"
+        type="search"
+      />
+      <withRouter(Connect(UnconnectedUiFindInput))
+        allowClear={true}
+        forwardedRef={
+          Object {
+            "current": null,
+          }
+        }
+        inputProps={
+          Object {
+            "className": "DdgHeader--uiFindInput",
+          }
+        }
+      />
+      <span
+        className="DdgHeader--uiFindCount"
+      />
+    </div>
+  </div>
 </header>
 `;

packages/jaeger-ui/src/components/DeepDependencies/Header/index.css

@@ -28,8 +28,10 @@ limitations under the License.
 .DdgHeader--controlHeader {
   align-items: center;
   background-color: #fafafa;
+  border-top: 1px solid #eee;
   display: flex;
-  height: 40px; /* Arbitrary height until find is implemented */
+  flex-direction: row-reverse;
+  justify-content: space-between;
 }
 
 .DdgHeader--paramsHeader {
@@ -43,3 +45,51 @@ limitations under the License.
   padding: 0.75rem 1.25rem 0.75rem 1.25rem;
   position: relative;
 }
+
+.DdgHeader--uiFind {
+  align-items: center;
+  background-color: #ffffff;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  color: #bbb;
+  display: flex;
+  flex-grow: 1;
+  margin-right: 8px;
+  max-width: 20%;
+  min-width: 200px;
+  transition: max-width 0.5s;
+}
+
+.DdgHeader--uiFind:focus-within {
+  max-width: 60%;
+}
+
+.DdgHeader--uiFindSearchIcon {
+  margin: 0 0.25em;
+  padding: 0.24em;
+}
+
+.DdgHeader--uiFindInput > input:focus,
+.DdgHeader--uiFindInput > input {
+  border: none;
+  box-shadow: none;
+  border-radius: 0px;
+}
+
+.DdgHeader--uiFindCount {
+  background: #ffffb8;
+  border: 1px dashed #fadb14;
+  border-radius: 4px;
+  color: #ad8b00;
+  margin-left: 0.25em;
+  margin-right: 0.5em;
+  transition: width 0.5s;
+  padding: 0.27em 0.4em;
+  stroke: #666;
+  stroke-width: 1.2px;
+  text-align: center;
+}
+
+.DdgHeader--uiFindCount:empty {
+  display: none;
+}

packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js

@@ -21,7 +21,6 @@ import NameSelector from './NameSelector';
 
 describe('<Header>', () => {
   const minProps = {
-    operationsForService: {},
     setDistance: () => {},
     setOperation: () => {},
     setService: () => {},