DDG graph node

README.md

@@ -39,7 +39,7 @@ yarn install
 yarn
 ```
 
-Make sure you have the Jaeger Query service running on http://localhost:16686. For example, you can run Jaeger all-in-one Docker image as descibed in the [documentation][aio-docs].
+Make sure you have the Jaeger Query service running on http://localhost:16686. For example, you can run Jaeger all-in-one Docker image as described in the [documentation][aio-docs].
 
 If you don't have it running locally, then tunnel to the correct host and port.
 

packages/jaeger-ui/package.json

@@ -108,10 +108,8 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "src/**/*.js",
-      "!src/components/DeepDependencyGraph/Header.tsx",
       "!src/setup*.js",
-      "!src/utils/DraggableManager/demo/*.js",
+      "!src/utils/DraggableManager/demo/*.tsx",
       "!src/utils/test/**/*.js",
       "!src/demo/**/*.js"
     ]

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

@@ -15,6 +15,7 @@
 import React, { Component } from 'react';
 import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
 
+import getNodeLabel from './getNodeLabel';
 import GraphModel from '../../model/ddg/Graph';
 
 import { TDdgModel } from '../../model/ddg/types';
@@ -43,10 +44,11 @@ export default class Graph extends Component<TProps> {
         minimap
         zoom
         arrowScaleDampener={0}
-        minimapClassName="DeepDependencyGraph--miniMap"
+        minimapClassName="u-miniMap"
         layoutManager={this.layoutManager}
         edges={edges}
         vertices={vertices}
+        getNodeLabel={getNodeLabel}
       />
     );
   }

packages/jaeger-ui/src/components/DeepDependencyGraph/getNodeLabel/DdgNode.css

@@ -0,0 +1,100 @@
+/*
+Copyright (c) 2019 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.DdgNode--core {
+  background: #fff;
+  border: 1px solid #bbb;
+  box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.07);
+  display: flex;
+  min-width: 125px;
+}
+
+.DdgNode--core.is-focalNode {
+  border-color: #eb2f96;
+}
+
+.DdgNode--core.is-focalNode::before {
+  bottom: 0;
+  content: '';
+  left: 0;
+  outline: 20px solid rgba(255, 255, 255, 0.2);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.DdgNode--core.is-focalNode::after {
+  bottom: 0;
+  content: '';
+  left: 0;
+  outline-offset: 20px;
+  outline: 1px dashed #ec8cb475;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.DdgNode--focalMarker {
+  align-items: center;
+  background: #eb2f96;
+  display: flex;
+  padding: 0.3rem 0.15rem;
+}
+
+.DdgNode--label {
+  margin: 0;
+  padding: 0.5rem 0.5rem 0.3rem 0.75rem;
+  white-space: nowrap;
+}
+
+.DdgNode--label:not(:first-child) {
+  padding-top: 0.2rem;
+}
+
+.DdgNode--actionsWrapper {
+  background: #fff;
+  border-radius: 3px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  bottom: 100%;
+  box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1);
+  left: 1em;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity 0.1s;
+  white-space: nowrap;
+}
+
+.DdgNode:hover > .DdgNode--actionsWrapper {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.DdgNode--actionsItem {
+  align-items: center;
+  display: flex;
+  padding: 0.5em;
+}
+
+.DdgNode--actionsItem:not(:hover) {
+  color: inherit;
+}
+
+.DdgNode--actionsItemText {
+  font-size: 0.9em;
+  line-height: normal;
+  margin-left: 0.5em;
+}

packages/jaeger-ui/src/components/DeepDependencyGraph/getNodeLabel/DdgNode.test.js

@@ -0,0 +1,66 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import DdgNode from './DdgNode';
+import { EViewModifier } from '../../../model/ddg/types';
+
+describe('<DdgNode>', () => {
+  const vertexKey = 'some-key';
+  const service = 'some-service';
+  const operation = 'some-operation';
+
+  let wrapper;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      vertexKey,
+      service,
+      operation,
+      isFocalNode: false,
+      focalNodeUrl: 'some-url',
+      setViewModifier: jest.fn(),
+    };
+    wrapper = shallow(<DdgNode {...props} />);
+  });
+
+  it('does not explode', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('omits the operation if it is null', () => {
+    expect(wrapper).toMatchSnapshot();
+    wrapper.setProps({ operation: null });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('calls setViewModifier on mouse over, out', () => {
+    const { calls } = props.setViewModifier.mock;
+    wrapper.simulate('mouseover', { type: 'mouseover' });
+    expect(calls.length).toBe(1);
+    wrapper.simulate('mouseout', { type: 'mouseout' });
+    expect(calls.length).toBe(2);
+    expect(calls[0]).toEqual([vertexKey, EViewModifier.Hovered, true]);
+    expect(calls[1]).toEqual([vertexKey, EViewModifier.Hovered, false]);
+  });
+
+  it('renders correctly when isFocalNode = true and focalNodeUrl = null', () => {
+    expect(wrapper).toMatchSnapshot();
+    wrapper.setProps({ focalNodeUrl: null, isFocalNode: true });
+    expect(wrapper).toMatchSnapshot();
+  });
+});

packages/jaeger-ui/src/components/DeepDependencyGraph/getNodeLabel/DdgNode.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import cx from 'classnames';
+
+import focalNodeIcon from './focalNodeIcon';
+import setFocusButtonIcon from './setFocusButtonIcon';
+import NewWindowIcon from '../../common/NewWindowIcon';
+import { EViewModifier } from '../../../model/ddg/types';
+
+import './DdgNode.css';
+
+type TProps = {
+  vertexKey: string;
+  service: string;
+  operation: string | null;
+  focalNodeUrl: string | null;
+  isFocalNode: boolean;
+  viewModifiers: number;
+  setViewModifier: (vertexKey: string, viewModifier: EViewModifier, isEnabled: boolean) => void;
+};
+
+export default class Node extends React.PureComponent<TProps> {
+  onMouseUx = (event: React.MouseEvent<HTMLElement>) => {
+    const { vertexKey, setViewModifier } = this.props;
+    setViewModifier(vertexKey, EViewModifier.Hovered, event.type === 'mouseover');
+  };
+
+  render() {
+    const { focalNodeUrl, isFocalNode, operation, service } = this.props;
+    return (
+      <div className="DdgNode" onMouseOver={this.onMouseUx} onMouseOut={this.onMouseUx}>
+        <div className={cx('DdgNode--core', { 'is-focalNode': isFocalNode })}>
+          {isFocalNode && <div className="DdgNode--focalMarker">{focalNodeIcon}</div>}
+          <div>
+            <h4 className="DdgNode--label">{service}</h4>
+            {operation && <div className="DdgNode--label">{operation}</div>}
+          </div>
+        </div>
+
+        <div className="DdgNode--actionsWrapper">
+          {focalNodeUrl && (
+            <a href={focalNodeUrl} className="DdgNode--actionsItem">
+              {setFocusButtonIcon}
+              <span className="DdgNode--actionsItemText">Set focus</span>
+            </a>
+          )}
+          <a className="DdgNode--actionsItem">
+            <NewWindowIcon />
+            <span className="DdgNode--actionsItemText">View traces</span>
+          </a>
+        </div>
+      </div>
+    );
+  }
+}