From 4c98eb6beada2afc8b51ac6ccc8247a6cfdb4374 Mon Sep 17 00:00:00 2001 From: Patrick Coray Date: Mon, 17 Dec 2018 22:26:47 +0100 Subject: [PATCH] Next review changes Signed-off-by: Patrick Coray --- .../components/TracePage/TraceGraph/OpNode.js | 41 +++--- .../TracePage/TraceGraph/TraceGraph.css | 8 +- .../TracePage/TraceGraph/TraceGraph.js | 138 ++++++++++-------- .../components/TracePage/TracePageHeader.js | 14 +- 4 files changed, 108 insertions(+), 93 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js index 8fc65c7d55..d29cd252ef 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js @@ -38,6 +38,25 @@ export const MODE_SERVICE = 'service'; export const MODE_TIME = 'time'; export const MODE_SELFTIME = 'selftime'; +export const HELP_TABLE = ( + + + + + + + + + + + + + +
Count / Error + Service + Avg
DurationOperationSelf time
+); + export function round2(percent: number) { return Math.round(percent * 100) / 100; } @@ -45,28 +64,6 @@ export function round2(percent: number) { export default class OpNode extends React.PureComponent { props: Props; - static helpTable() { - const helpTable = ( - - - - - - - - - - - - - -
Count / Error - Service - Avg
DurationOperationSelf time
- ); - return helpTable; - } - render() { const { count, errors, time, percent, selfTime, percentSelfTime, operation, service, mode } = this.props; diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css index ee09a3a2b9..47562a012c 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css @@ -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 { @@ -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 { diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js index 37da4cfc47..b56a64e916 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js @@ -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'; @@ -74,65 +74,73 @@ export function isError(tags: Array) { return false; } -function helpContent() { - return ( -
- {OpNode.helpTable()} -
- - - - - - - - - - - - - - - - - - -
- - ServiceColored by service
- - TimeColored by total time
- - SelftimeColored by self time
-
-
- - - - ChildOf - - - - FollowsFrom - - -
-
- ); +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 = ( +
+ {HELP_TABLE} +
+ + + + + + + + + + + + + + + + + + +
+ + ServiceColored by service
+ + TimeColored by total time
+ + SelftimeColored by self time
+
+
+ + + + ChildOf + + + + FollowsFrom + + +
+
+); + export default class TraceGraph extends React.PureComponent { props: Props; state: State; @@ -258,12 +266,18 @@ export default class TraceGraph extends React.PureComponent { getNodeLabel={getNodeDrawer(mode)} setOnRoot={classNameIsSmall} setOnEdgePath={setOnEdgePath} + setOnEdgesContainer={setOnEdgesContainer} edges={ev.edges} vertices={ev.vertices} /> - + + Experimental +
  • @@ -317,7 +331,7 @@ export default class TraceGraph extends React.PureComponent { } > - {helpContent()} + {HELP_CONTENT} )} diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js index 05122d6450..5b0c120d4e 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js @@ -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'; @@ -123,6 +123,9 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) { const viewMenu = ( + + {traceGraphView ? 'Trace Timeline' : 'Trace Graph'} + - - {traceGraphView ? 'Trace Timeline' : 'Trace Graph'} - + + + + {archiveButtonVisible && (