Derive DDG from search results

packages/jaeger-ui/src/components/App/Page.css

@@ -23,6 +23,8 @@ limitations under the License.
 }
 
 .Page--content {
+  display: flex;
+  flex-direction: column;
   left: 0;
   min-height: calc(100% - 46px);
   position: absolute;

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

@@ -60,13 +60,17 @@ export default class DdgNodeContent extends React.PureComponent<TProps> {
     getVisiblePathElems: (vertexKey: string) => PathElem[] | undefined,
     setViewModifier: (vertexKey: string, viewModifier: EViewModifier, enable: boolean) => void,
     density: EDdgDensity,
-    showOp: boolean
+    showOp: boolean,
+    baseUrl: string,
+    extraUrlArgs: { [key: string]: unknown } | undefined
   ) {
     return function renderNode(vertex: TDdgVertex, _: unknown, lv: TLayoutVertex<any> | null) {
       const { isFocalNode, key, operation, service } = vertex;
       return (
         <DdgNodeContent
-          focalNodeUrl={isFocalNode ? null : getUrl({ density, operation, service, showOp })}
+          focalNodeUrl={
+            isFocalNode ? null : getUrl({ density, operation, service, showOp, ...extraUrlArgs }, baseUrl)
+          }
           getVisiblePathElems={getVisiblePathElems}
           isFocalNode={isFocalNode}
           isPositioned={Boolean(lv)}

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

@@ -27,9 +27,11 @@ import { PathElem, TDdgVertex, EDdgDensity, EViewModifier } from '../../../model
 import './index.css';
 
 type TProps = {
+  baseUrl: string;
   density: EDdgDensity;
   edges: TEdge[];
   edgesViewModifiers: Map<string, number>;
+  extraUrlArgs?: { [key: string]: unknown };
   getVisiblePathElems: (vertexKey: string) => PathElem[] | undefined;
   setViewModifier: (vertexKey: string, viewModifier: EViewModifier, enable: boolean) => void;
   showOp: boolean;
@@ -85,6 +87,8 @@ export default class Graph extends PureComponent<TProps> {
       uiFindMatches,
       vertices,
       verticesViewModifiers,
+      baseUrl,
+      extraUrlArgs,
     } = this.props;
     const nodeRenderers = this.getNodeRenderers(uiFindMatches || this.emptyFindSet, verticesViewModifiers);
 
@@ -132,7 +136,14 @@ export default class Graph extends PureComponent<TProps> {
             layerType: 'html',
             measurable: true,
             measureNode: DdgNodeContent.measureNode,
-            renderNode: this.getNodeContentRenderer(getVisiblePathElems, setViewModifier, density, showOp),
+            renderNode: this.getNodeContentRenderer(
+              getVisiblePathElems,
+              setViewModifier,
+              density,
+              showOp,
+              baseUrl,
+              extraUrlArgs
+            ),
           },
         ]}
       />

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

@@ -28,19 +28,19 @@ limitations under the License.
 .DdgHeader--controlHeader {
   align-items: center;
   background-color: #f6f6f6;
-  border-top: 1px solid #eee;
   display: flex;
   justify-content: space-between;
   padding-left: 1.25rem;
 }
 
 .DdgHeader--paramsHeader {
-  flex-wrap: wrap;
-  font-size: unset;
   align-items: center;
   background: #fafafa;
+  border-bottom: 1px solid #eee;
   display: flex;
   flex: 1;
+  flex-wrap: wrap;
+  font-size: unset;
   margin: 0;
   padding: 0.75rem 1.25rem 0.75rem 1.25rem;
   position: relative;

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

@@ -37,6 +37,7 @@ type TProps = {
   setOperation: (operation: string) => void;
   setService: (service: string) => void;
   showOperations: boolean;
+  showParameters?: boolean;
   showVertices: (vertices: TDdgVertex[]) => void;
   toggleShowOperations: (enable: boolean) => void;
   uiFindCount: number | undefined;
@@ -45,6 +46,10 @@ type TProps = {
 export default class Header extends React.PureComponent<TProps> {
   private _uiFindInput: React.RefObject<Input> = React.createRef();
 
+  static defaultProps = {
+    showParameters: true,
+  };
+
   focusUiFindInput = () => {
     if (this._uiFindInput.current) {
       this._uiFindInput.current.focus();
@@ -103,30 +108,33 @@ export default class Header extends React.PureComponent<TProps> {
       showOperations,
       toggleShowOperations,
       visEncoding,
+      showParameters,
     } = this.props;
 
     return (
       <header className="DdgHeader">
-        <div className="DdgHeader--paramsHeader">
-          <NameSelector
-            label="Service:"
-            placeholder="Select a service…"
-            value={service || null}
-            setValue={setService}
-            required
-            options={services || []}
-          />
-          {service && (
+        {showParameters && (
+          <div className="DdgHeader--paramsHeader">
             <NameSelector
-              label="Operation:"
-              placeholder="Select an operation…"
-              value={operation || null}
-              setValue={setOperation}
+              label="Service:"
+              placeholder="Select a service…"
+              value={service || null}
+              setValue={setService}
               required
-              options={operations || []}
+              options={services || []}
             />
-          )}
-        </div>
+            {service && (
+              <NameSelector
+                label="Operation:"
+                placeholder="Select an operation…"
+                value={operation || null}
+                setValue={setOperation}
+                required
+                options={operations || []}
+              />
+            )}
+          </div>
+        )}
         <div className="DdgHeader--controlHeader">
           <LayoutSettings
             density={density}

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

@@ -104,7 +104,7 @@ describe('DeepDependencyGraphPage', () => {
           const value = `new ${propName}`;
           const kwarg = { [propName]: value };
           ddgPageImpl.updateUrlState(kwarg);
-          expect(getUrlSpy).toHaveBeenLastCalledWith(Object.assign({}, props.urlState, kwarg));
+          expect(getUrlSpy).toHaveBeenLastCalledWith(Object.assign({}, props.urlState, kwarg), undefined);
           expect(props.history.push).toHaveBeenCalledTimes(i + 1);
         });
       });
@@ -115,7 +115,7 @@ describe('DeepDependencyGraphPage', () => {
           start: 'new start',
         };
         ddgPageImpl.updateUrlState(kwarg);
-        expect(getUrlSpy).toHaveBeenLastCalledWith(Object.assign({}, props.urlState, kwarg));
+        expect(getUrlSpy).toHaveBeenLastCalledWith(Object.assign({}, props.urlState, kwarg), undefined);
         expect(props.history.push).toHaveBeenCalledTimes(1);
       });
 
@@ -130,14 +130,17 @@ describe('DeepDependencyGraphPage', () => {
         };
         const ddgPageWithFewerProps = new DeepDependencyGraphPageImpl(otherProps);
         ddgPageWithFewerProps.updateUrlState(kwarg);
-        expect(getUrlSpy).toHaveBeenLastCalledWith(Object.assign({}, otherUrlState, kwarg));
+        expect(getUrlSpy).toHaveBeenLastCalledWith(Object.assign({}, otherUrlState, kwarg), undefined);
         expect(getUrlSpy).not.toHaveBeenLastCalledWith(expect.objectContaining({ start: expect.anything() }));
         expect(props.history.push).toHaveBeenCalledTimes(1);
       });
 
       it('includes props.graphState.model.hash iff it is truthy', () => {
         ddgPageImpl.updateUrlState({});
-        expect(getUrlSpy).toHaveBeenLastCalledWith(expect.not.objectContaining({ hash: expect.anything() }));
+        expect(getUrlSpy).toHaveBeenLastCalledWith(
+          expect.not.objectContaining({ hash: expect.anything() }),
+          undefined
+        );
 
         const hash = 'testHash';
         const propsWithHash = {
@@ -152,7 +155,7 @@ describe('DeepDependencyGraphPage', () => {
         };
         const ddgPageWithHash = new DeepDependencyGraphPageImpl(propsWithHash);
         ddgPageWithHash.updateUrlState({});
-        expect(getUrlSpy).toHaveBeenLastCalledWith(expect.objectContaining({ hash }));
+        expect(getUrlSpy).toHaveBeenLastCalledWith(expect.objectContaining({ hash }), undefined);
       });
 
       describe('setDistance', () => {
@@ -192,7 +195,8 @@ describe('DeepDependencyGraphPage', () => {
             prevVisEncoding: visEncoding,
           });
           expect(getUrlSpy).toHaveBeenLastCalledWith(
-            Object.assign({}, props.urlState, { visEncoding: mockNewEncoding })
+            Object.assign({}, props.urlState, { visEncoding: mockNewEncoding }),
+            undefined
           );
           expect(props.history.push).toHaveBeenCalledTimes(1);
         });
@@ -203,7 +207,8 @@ describe('DeepDependencyGraphPage', () => {
           const operation = 'newOperation';
           ddgPageImpl.setOperation(operation);
           expect(getUrlSpy).toHaveBeenLastCalledWith(
-            Object.assign({}, props.urlState, { operation, visEncoding: undefined })
+            Object.assign({}, props.urlState, { operation, visEncoding: undefined }),
+            undefined
           );
           expect(props.history.push).toHaveBeenCalledTimes(1);
         });
@@ -219,7 +224,8 @@ describe('DeepDependencyGraphPage', () => {
         it('updates service and clears operation and visEncoding', () => {
           ddgPageImpl.setService(service);
           expect(getUrlSpy).toHaveBeenLastCalledWith(
-            Object.assign({}, props.urlState, { operation: undefined, service, visEncoding: undefined })
+            Object.assign({}, props.urlState, { operation: undefined, service, visEncoding: undefined }),
+            undefined
           );
           expect(props.history.push).toHaveBeenCalledTimes(1);
         });
@@ -382,20 +388,19 @@ describe('DeepDependencyGraphPage', () => {
       }
     );
     let getUrlStateSpy;
-    let sanitizeUrlStateSpy;
     let makeGraphSpy;
+    let sanitizeUrlStateSpy;
 
     beforeAll(() => {
       getUrlStateSpy = jest.spyOn(url, 'getUrlState');
       sanitizeUrlStateSpy = jest.spyOn(url, 'sanitizeUrlState');
-      makeGraphSpy = jest.spyOn(GraphModel, 'makeGraph');
+      makeGraphSpy = jest.spyOn(GraphModel, 'makeGraph').mockReturnValue(mockGraph);
     });
 
     beforeEach(() => {
-      getUrlStateSpy.mockReset();
+      getUrlStateSpy.mockClear();
       getUrlStateSpy.mockReturnValue(expected.urlState);
-      makeGraphSpy.mockReset();
-      makeGraphSpy.mockReturnValue(mockGraph);
+      makeGraphSpy.mockClear();
     });
 
     it('uses gets relevant params from location.search', () => {