Skip to content

Commit

Permalink
Add a TraceGraph view (jaegertracing#273) (jaegertracing#276)
Browse files Browse the repository at this point in the history
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 <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
  • Loading branch information
copa2 authored and everett980 committed Jan 16, 2019
1 parent f51dfd7 commit bdc0220
Show file tree
Hide file tree
Showing 15 changed files with 1,201 additions and 19 deletions.
6 changes: 6 additions & 0 deletions packages/jaeger-ui/config-overrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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;
};
2 changes: 2 additions & 0 deletions packages/jaeger-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
54 changes: 54 additions & 0 deletions packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css
Original file line number Diff line number Diff line change
@@ -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;
}
126 changes: 126 additions & 0 deletions packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js
Original file line number Diff line number Diff line change
@@ -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} />;
};
}
Original file line number Diff line number Diff line change
@@ -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');
});
});
});
Loading

0 comments on commit bdc0220

Please sign in to comment.