Add a TraceGraph view (jaegertracing#273)

Add alternative view in TracePage which allows
to see count,time,percent total time, self-time for
a given trace grouped by service and operation

Signed-off-by: Patrick Coray <[email protected]>

packages/jaeger-ui/config-overrides.js

@@ -14,10 +14,15 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 
+const path = require('path');
 const fs = require('fs');
 const { injectBabelPlugin } = require('react-app-rewired');
 const rewireLess = require('react-app-rewire-less');
 const lessToJs = require('less-vars-to-js');
+const rewireBabelLoader = require('react-app-rewire-babel-loader');
+
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
 // Read the less file in as string
 const loadedVarOverrides = fs.readFileSync('config-overrides-antd-vars.less', 'utf8');
@@ -29,5 +34,6 @@ module.exports = function override(_config, env) {
   let config = _config;
   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
   config = rewireLess.withLoaderOptions({ modifyVars })(config, env);
+  config = rewireBabelLoader.include(config, resolveApp('../../node_modules/drange'));
   return config;
 };

packages/jaeger-ui/package.json

@@ -22,6 +22,7 @@
     "enzyme-adapter-react-16": "^1.1.0",
     "enzyme-to-json": "^3.3.0",
     "less-vars-to-js": "^1.2.1",
+    "react-app-rewire-babel-loader": "^0.1.1",
     "react-app-rewire-less": "^2.1.0",
     "react-app-rewired": "^1.4.0",
     "react-scripts": "^1.0.11",
@@ -39,6 +40,7 @@
     "d3-scale": "^1.0.6",
     "dagre": "^0.7.4",
     "deep-freeze": "^0.0.1",
+    "drange": "^2.0.0",
     "fuzzy": "^0.1.3",
     "global": "^4.3.2",
     "history": "^4.6.3",

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

@@ -0,0 +1,52 @@
+/*
+Copyright (c) 2017 The Jaeger Authors.
+
+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.
+*/
+
+.OpNode {
+  border: 1px solid #111;
+  cursor: pointer;
+  white-space: nowrap;
+  border-collapse: separate;
+  border-radius: 2px;
+}
+
+.OpNode td,
+th {
+  border: none;
+}
+
+.OpMode--mode-service {
+  background: #bbb;
+}
+
+.OpNode--mode-time {
+  background: #eee;
+}
+
+.OpNode--metricCell {
+  padding: 0.3rem 0.5rem;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.OpNode--labelCell {
+  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
+}
+
+/* Tweak the popover aesthetics - unfortunate but necessary */
+
+.OpNode--popover .ant-popover-inner-content {
+  padding: 0;
+  position: relative;
+}

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

@@ -0,0 +1,135 @@
+// @flow
+
+// Copyright (c) 2017 The Jaeger Authors.
+//
+// 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 { Popover, Icon } from 'antd';
+import colorGenerator from '../../../utils/color-generator';
+
+import type { PVertex } from '../../../model/trace-dag/types';
+
+import './OpNode.css';
+
+type Props = {
+  count: number,
+  time: number,
+  percent: number,
+  selfTime: number,
+  operation: string,
+  service: string,
+  registerFn: any,
+};
+type State = {
+  nodeMode: boolean,
+};
+
+function formatPercent(percent) {
+  return Math.round(percent * 100) / 100;
+}
+
+export default class OpNode extends React.PureComponent<Props, State> {
+  props: Props;
+  state: State;
+
+  static helpPopover() {
+    const helpTable = (
+      <table className={`OpNode OpNode--mode-service`}>
+        <tbody>
+          <tr>
+            <td className={`OpNode--metricCell`}>Count</td>
+            <td className={`OpNode--labelCell`}>
+              <strong>Service</strong>
+            </td>
+            <td className={`OpNode--metricCell`}>% of trace duration</td>
+          </tr>
+          <tr>
+            <td className={`OpNode--metricCell`}>Duration</td>
+            <td className={`OpNode--labelCell`}>Operation</td>
+            <td className={`OpNode--metricCell`}>Self time</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+    return (
+      <Popover
+        overlayClassName={`OpNode--popover`}
+        placement="left"
+        mouseEnterDelay={0.25}
+        content={helpTable}
+      >
+        <Icon type="question-circle" />
+      </Popover>
+    );
+  }
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      nodeMode: false,
+    };
+    props.registerFn.call(this, this);
+  }
+
+  toggleNodeMode = () => {
+    const { nodeMode } = this.state;
+    this.setState({ nodeMode: !nodeMode });
+  };
+
+  render() {
+    const { count, time, percent, selfTime, operation, service } = this.props;
+    const modeType = this.state.nodeMode ? 'time' : 'service';
+    // Spans over 20 % time are full red - we have probably to reconsider better approach
+    const percentBoosted = Math.min(percent / 20, 1);
+    const backgroundColor = this.state.nodeMode
+      ? [255, 0, 0, percentBoosted].join()
+      : colorGenerator
+          .getRgbColorByKey(service)
+          .concat(0.8)
+          .join();
+    const table = (
+      <table className={`OpNode OpNode--mode-${modeType}`} cellSpacing="0">
+        <tbody
+          style={{
+            background: `rgba(${backgroundColor})`,
+          }}
+        >
+          <tr>
+            <td className={`OpNode--metricCell OpNode--count`}>{count}</td>
+            <td className={`OpNode--labelCell OpNode--service`}>
+              <strong>{service}</strong>
+            </td>
+            <td className={`OpNode--metricCell OpNode--percent`}>{formatPercent(percent)} %</td>
+          </tr>
+          <tr>
+            <td className={`OpNode--metricCell OpNode--time`}>{time / 1000} ms</td>
+            <td className={`OpNode--labelCell OpNode--op`}>{operation}</td>
+            <td className={`OpNode--metricCell OpNode--selfTime`}>{selfTime / 1000} ms</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+
+    return (
+      <Popover overlayClassName={`OpNode--popover`} mouseEnterDelay={0.25} content={table}>
+        {table}
+      </Popover>
+    );
+  }
+}
+
+export function drawNode<T>(vertex: PVertex<T>) {
+  const { data, operation, service } = vertex.data;
+  return <OpNode {...data} operation={operation} service={service} />;
+}

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

@@ -0,0 +1,73 @@
+// Copyright (c) 2017 The Jaeger Authors.
+//
+// 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 OpNode, { drawNode } from './OpNode';
+
+describe('<OpNode>', () => {
+  let wrapper;
+  let cb;
+
+  beforeEach(() => {
+    cb = jest.fn();
+    const props = {
+      count: 5,
+      time: 200000,
+      percent: 7.89,
+      selfTime: 180000,
+      operation: 'op1',
+      service: 'service1',
+      registerFn: cb,
+    };
+    wrapper = shallow(<OpNode {...props} />);
+  });
+
+  it('it does not explode', () => {
+    expect(wrapper).toBeDefined();
+    expect(cb).toHaveBeenCalledTimes(1); // register
+    expect(wrapper.find('.OpNode').length).toBe(1);
+    expect(wrapper.find('.OpNode--mode-service').length).toBe(1);
+  });
+
+  it('it renders OpNode', () => {
+    expect(wrapper.find('.OpNode--count').text()).toBe('5');
+    expect(wrapper.find('.OpNode--time').text()).toBe('200 ms');
+    expect(wrapper.find('.OpNode--percent').text()).toBe('7.89 %');
+    expect(wrapper.find('.OpNode--selfTime').text()).toBe('180 ms');
+    expect(wrapper.find('.OpNode--op').text()).toBe('op1');
+    expect(wrapper.find('.OpNode--service').text()).toBe('service1');
+  });
+
+  it('it switches mode', () => {
+    expect(wrapper.state().nodeMode).toBeFalsy();
+    wrapper.instance().toggleNodeMode();
+    expect(wrapper.state().nodeMode).toBeTruthy();
+  });
+
+  describe('drawNode()', () => {
+    it('it creates OpNode', () => {
+      const vertex = {
+        data: {
+          service: 'service1',
+          operation: 'op1',
+          data: {},
+        },
+      };
+      const opNode = drawNode(vertex);
+      expect(opNode.type === 'OpNode');
+    });
+  });
+});

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

@@ -0,0 +1,90 @@
+/*
+Copyright (c) 2017 The Jaeger Authors.
+
+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.
+*/
+
+.TraceGraph--graphWrapper {
+  bottom: 0;
+  cursor: move;
+  left: 0;
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.TraceGraph--menu {
+  cursor: pointer;
+  position: absolute;
+  right: 1rem;
+  z-index: 1;
+}
+
+.TraceGraph--menu > li {
+  list-style-type: none;
+  text-align: right;
+  padding-bottom: 0.3rem;
+}
+
+.TraceGraph--dag {
+  stroke-width: 1.2;
+}
+
+.TraceGraph--dag.is-small {
+  stroke-width: 0.7;
+}
+
+/* DAG minimap */
+
+.TraceGraph--miniMap {
+  align-items: flex-end;
+  bottom: 1rem;
+  display: flex;
+  left: 1rem;
+  position: absolute;
+  z-index: 1;
+}
+
+.TraceGraph--miniMap > .plexus-MiniMap--item {
+  border: 1px solid #777;
+  background: #999;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  margin-right: 1rem;
+  position: relative;
+}
+
+.TraceGraph--miniMap > .plexus-MiniMap--map {
+  /* dynamic widht, height */
+  box-sizing: content-box;
+  cursor: not-allowed;
+}
+
+.TraceGraph--miniMap .plexus-MiniMap--mapActive {
+  /* dynamic: width, height, transform */
+  background: #ccc;
+  position: absolute;
+}
+
+.TraceGraph--miniMap > .plexus-MiniMap--button {
+  background: #ccc;
+  color: #888;
+  cursor: pointer;
+  font-size: 1.6em;
+  line-height: 0;
+  padding: 0.1rem;
+}
+
+.TraceGraph--miniMap > .plexus-MiniMap--button:hover {
+  background: #ddd;
+}