Add a TraceGraph view (#273) (#276)

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

Signed-off-by: Patrick Coray <patrick.coray@bluewin.ch>

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,54 @@
+/*
+Copyright (c) 2018 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 {
+  width: 100%;
+  border: 1px solid #111;
+  cursor: pointer;
+  white-space: nowrap;
+  border-collapse: separate;
+  border-radius: 2px;
+}
+
+.OpNode td,
+.OpNode th {
+  border: none;
+}
+
+.OpMode--mode-service {
+  background: #bbb;
+}
+
+.OpNode--mode-time {
+  background: #eee;
+}
+
+.OpNode--metricCell {
+  text-align: right;
+  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,126 @@
+// @flow
+
+// Copyright (c) 2018 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 } from 'antd';
+import colorGenerator from '../../../utils/color-generator';
+
+import type { PVertex } from '../../../model/trace-dag/types';
+
+import './OpNode.css';
+
+type Props = {
+  count: number,
+  errors: number,
+  time: number,
+  percent: number,
+  selfTime: number,
+  percentSelfTime: number,
+  operation: string,
+  service: string,
+  mode: string,
+};
+
+export const MODE_SERVICE = 'service';
+export const MODE_TIME = 'time';
+export const MODE_SELFTIME = 'selftime';
+
+export const HELP_TABLE = (
+  <table className="OpNode OpNode--mode-service">
+    <tbody>
+      <tr>
+        <td className="OpNode--metricCell">Count / Error</td>
+        <td className="OpNode--labelCell">
+          <strong>Service</strong>
+        </td>
+        <td className="OpNode--metricCell">Avg</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>
+);
+
+export function round2(percent: number) {
+  return Math.round(percent * 100) / 100;
+}
+
+export default class OpNode extends React.PureComponent<Props> {
+  props: Props;
+
+  render() {
+    const { count, errors, time, percent, selfTime, percentSelfTime, operation, service, mode } = this.props;
+
+    // Spans over 20 % time are full red - we have probably to reconsider better approach
+    let backgroundColor;
+    if (mode === MODE_TIME) {
+      const percentBoosted = Math.min(percent / 20, 1);
+      backgroundColor = [255, 0, 0, percentBoosted].join();
+    } else if (mode === MODE_SELFTIME) {
+      backgroundColor = [255, 0, 0, percentSelfTime / 100].join();
+    } else {
+      backgroundColor = colorGenerator
+        .getRgbColorByKey(service)
+        .concat(0.8)
+        .join();
+    }
+
+    const table = (
+      <table className={`OpNode OpNode--mode-${mode}`} cellSpacing="0">
+        <tbody
+          style={{
+            background: `rgba(${backgroundColor})`,
+          }}
+        >
+          <tr>
+            <td className="OpNode--metricCell OpNode--count">
+              {count} / {errors}
+            </td>
+            <td className="OpNode--labelCell OpNode--service">
+              <strong>{service}</strong>
+            </td>
+            <td className="OpNode--metricCell OpNode--avg">{round2(time / 1000 / count)} ms</td>
+          </tr>
+          <tr>
+            <td className="OpNode--metricCell OpNode--time">
+              {time / 1000} ms ({round2(percent)} %)
+            </td>
+            <td className="OpNode--labelCell OpNode--op">{operation}</td>
+            <td className="OpNode--metricCell OpNode--selfTime">
+              {selfTime / 1000} ms ({round2(percentSelfTime)} %)
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+
+    return (
+      <Popover overlayClassName="OpNode--popover" mouseEnterDelay={0.25} content={table}>
+        {table}
+      </Popover>
+    );
+  }
+}
+
+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} />;
+  };
+}

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

@@ -0,0 +1,89 @@
+// Copyright (c) 2018 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, { getNodeDrawer, MODE_SERVICE, MODE_TIME, MODE_SELFTIME } from './OpNode';
+
+describe('<OpNode>', () => {
+  let wrapper;
+  let mode;
+  let props;
+
+  beforeEach(() => {
+    mode = MODE_SERVICE;
+    props = {
+      count: 5,
+      errors: 0,
+      time: 200000,
+      percent: 7.89,
+      selfTime: 180000,
+      percentSelfTime: 90,
+      operation: 'op1',
+      service: 'service1',
+    };
+    wrapper = shallow(<OpNode {...props} mode={mode} />);
+  });
+
+  it('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', () => {
+    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');
+    expect(wrapper.find('.OpNode--selfTime').text()).toBe('180 ms (90 %)');
+    expect(wrapper.find('.OpNode--op').text()).toBe('op1');
+    expect(wrapper.find('.OpNode--service').text()).toBe('service1');
+  });
+
+  it('it switches mode', () => {
+    mode = MODE_SERVICE;
+    wrapper = shallow(<OpNode {...props} mode={mode} />);
+    expect(wrapper.find('.OpNode--mode-service').length).toBe(1);
+    expect(wrapper.find('.OpNode--mode-time').length).toBe(0);
+    expect(wrapper.find('.OpNode--mode-selftime').length).toBe(0);
+
+    mode = MODE_TIME;
+    wrapper = shallow(<OpNode {...props} mode={mode} />);
+    expect(wrapper.find('.OpNode--mode-service').length).toBe(0);
+    expect(wrapper.find('.OpNode--mode-time').length).toBe(1);
+    expect(wrapper.find('.OpNode--mode-selftime').length).toBe(0);
+
+    mode = MODE_SELFTIME;
+    wrapper = shallow(<OpNode {...props} mode={mode} />);
+    expect(wrapper.find('.OpNode--mode-service').length).toBe(0);
+    expect(wrapper.find('.OpNode--mode-time').length).toBe(0);
+    expect(wrapper.find('.OpNode--mode-selftime').length).toBe(1);
+  });
+
+  describe('getNodeDrawer()', () => {
+    it('it creates OpNode', () => {
+      const vertex = {
+        data: {
+          service: 'service1',
+          operation: 'op1',
+          data: {},
+        },
+      };
+      const drawNode = getNodeDrawer(MODE_SERVICE);
+      const opNode = drawNode(vertex);
+      expect(opNode.type === 'OpNode');
+    });
+  });
+});