Skip to content

Commit

Permalink
Next review changes
Browse files Browse the repository at this point in the history 
Signed-off-by: Patrick Coray <[email protected]>
  • Loading branch information
@copa2
copa2 committed Dec 17, 2018
1 parent 982ef4a commit 4c98eb6
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 93 deletions.
41 changes: 19 additions & 22 deletions packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,35 +38,32 @@ 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;

static helpTable() {
const helpTable = (
<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>
);
return helpTable;
}

render() {
const { count, errors, time, percent, selfTime, percentSelfTime, operation, service, mode } = this.props;

Expand Down
8 changes: 3 additions & 5 deletions packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@ limitations under the License.

.TraceGraph--experimental {
background-color: #a00;
color: #fff;
position: absolute;
top: 122px;
}
.TraceGraph--experimental a {
color: #fff;
padding: 10px 15px;
padding: 1px 15px;
}

.TraceGraph--graphWrapper {
Expand Down Expand Up @@ -54,7 +52,7 @@ limitations under the License.

.TraceGraph--sidebar {
cursor: default;
box-shadow: -1px 0 #00000030;
box-shadow: -1px 0 rgba(0, 0, 0, 0.2);
}

.TraceGraph--help-content > div {
Expand Down
138 changes: 76 additions & 62 deletions packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { Card, Icon, Button, Tooltip } from 'antd';
import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
import DRange from 'drange';

import OpNode, { getNodeDrawer, MODE_SERVICE, MODE_TIME, MODE_SELFTIME } from './OpNode';
import { getNodeDrawer, MODE_SERVICE, MODE_TIME, MODE_SELFTIME, HELP_TABLE } from './OpNode';
import convPlexus from '../../../model/trace-dag/convPlexus';
import TraceDag from '../../../model/trace-dag/TraceDag';

Expand Down Expand Up @@ -74,65 +74,73 @@ export function isError(tags: Array<KeyValuePair>) {
return false;
}

function helpContent() {
return (
<div className="TraceGraph--help-content">
{OpNode.helpTable()}
<div>
<table width="100%">
<tbody>
<tr>
<td>
<Button shape="circle" size="small">
S
</Button>
</td>
<td>Service</td>
<td>Colored by service</td>
</tr>
<tr>
<td>
<Button shape="circle" size="small">
T
</Button>
</td>
<td>Time</td>
<td>Colored by total time</td>
</tr>
<tr>
<td>
<Button shape="circle" size="small">
ST
</Button>
</td>
<td>Selftime</td>
<td>Colored by self time</td>
</tr>
</tbody>
</table>
</div>
<div>
<svg width="100%" height="40">
<line x1="0" y1="10" x2="90" y2="10" style={{ stroke: '#000', strokeWidth: 2 }} />
<text alignmentBaseline="middle" x="100" y="10">
ChildOf
</text>
<line
x1="0"
y1="30"
x2="90"
y2="30"
style={{ stroke: '#000', strokeWidth: 2, strokeDasharray: '4' }}
/>
<text alignmentBaseline="middle" x="100" y="30">
FollowsFrom
</text>
</svg>
</div>
</div>
);
function setOnEdgesContainer(state: Object) {
const { zoomTransform } = state;
if (!zoomTransform) {
return null;
}
const { k } = zoomTransform;
const opacity = 0.1 + k * 0.9;
return { style: { opacity } };
}

const HELP_CONTENT = (
<div className="TraceGraph--help-content">
{HELP_TABLE}
<div>
<table width="100%">
<tbody>
<tr>
<td>
<Button shape="circle" size="small">
S
</Button>
</td>
<td>Service</td>
<td>Colored by service</td>
</tr>
<tr>
<td>
<Button shape="circle" size="small">
T
</Button>
</td>
<td>Time</td>
<td>Colored by total time</td>
</tr>
<tr>
<td>
<Button shape="circle" size="small">
ST
</Button>
</td>
<td>Selftime</td>
<td>Colored by self time</td>
</tr>
</tbody>
</table>
</div>
<div>
<svg width="100%" height="40">
<line x1="0" y1="10" x2="90" y2="10" style={{ stroke: '#000', strokeWidth: 2 }} />
<text alignmentBaseline="middle" x="100" y="10">
ChildOf
</text>
<line
x1="0"
y1="30"
x2="90"
y2="30"
style={{ stroke: '#000', strokeWidth: 2, strokeDasharray: '4' }}
/>
<text alignmentBaseline="middle" x="100" y="30">
FollowsFrom
</text>
</svg>
</div>
</div>
);

export default class TraceGraph extends React.PureComponent<Props, State> {
props: Props;
state: State;
Expand Down Expand Up @@ -258,12 +266,18 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
getNodeLabel={getNodeDrawer(mode)}
setOnRoot={classNameIsSmall}
setOnEdgePath={setOnEdgePath}
setOnEdgesContainer={setOnEdgesContainer}
edges={ev.edges}
vertices={ev.vertices}
/>
<div className="TraceGraph--experimental">
<a href="https://github.com/jaegertracing/jaeger-ui/issues/293" target="_blank" rel="noopener noreferrer">Experimental</a>
</div>
<a
className="TraceGraph--experimental"
href="https://github.com/jaegertracing/jaeger-ui/issues/293"
target="_blank"
rel="noopener noreferrer"
>
Experimental
</a>
<div className="TraceGraph--sidebar-container">
<ul className="TraceGraph--menu">
<li>
Expand Down Expand Up @@ -317,7 +331,7 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
</a>
}
>
{helpContent()}
{HELP_CONTENT}
</Card>
</section>
)}
Expand Down
14 changes: 10 additions & 4 deletions packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// limitations under the License.

import * as React from 'react';
import { Button, Dropdown, Input, Menu } from 'antd';
import { Button, Dropdown, Input, Menu, Icon } from 'antd';
import IoChevronDown from 'react-icons/lib/io/chevron-down';
import IoChevronRight from 'react-icons/lib/io/chevron-right';
import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
Expand Down Expand Up @@ -123,6 +123,9 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) {

const viewMenu = (
<Menu>
<Menu.Item>
<a onClick={onTraceGraphViewClicked}>{traceGraphView ? 'Trace Timeline' : 'Trace Graph'}</a>
</Menu.Item>
<Menu.Item>
<Link
to={prefixUrl(`/api/traces/${traceID}?prettyPrint=true`)}
Expand Down Expand Up @@ -193,9 +196,12 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) {
resultCount={resultCount}
ref={forwardedRef}
/>
<Dropdown.Button overlay={viewMenu} onClick={onTraceGraphViewClicked}>
{traceGraphView ? 'Trace Timeline' : 'Trace Graph'}
</Dropdown.Button>

<Dropdown overlay={viewMenu}>
<Button className="ub-mr2" onClick={onTraceGraphViewClicked}>
{traceGraphView ? 'Trace Graph' : 'Trace Timeline'} <Icon type="down" />
</Button>
</Dropdown>
{archiveButtonVisible && (
<Button className="ub-mr2 ub-flex ub-items-center" onClick={onArchiveClicked}>
<IoIosFilingOutline className="TracePageHeader--archiveIcon" />
Expand Down

0 comments on commit 4c98eb6

Please sign in to comment.