From db2ac3b06cae1297a9eb5b7cf28414747e572e53 Mon Sep 17 00:00:00 2001
From: Patrick Coray <patrick.coray@bluewin.ch>
Date: Sun, 18 Nov 2018 23:01:59 +0100
Subject: [PATCH] minor refinements

Signed-off-by: Patrick Coray <patrick.coray@bluewin.ch>
---
 .../components/TracePage/TraceGraph/OpNode.css   | 10 ++++++++--
 .../components/TracePage/TraceGraph/OpNode.js    |  6 +++---
 .../TracePage/TraceGraph/OpNode.test.js          |  2 +-
 .../TracePage/TraceGraph/TraceGraph.js           |  2 +-
 .../TracePage/TraceGraph/TraceGraph.test.js      | 16 ++++++++--------
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css
index 6e2db5001c..34dbd84d1b 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css
+++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css
@@ -15,10 +15,16 @@ limitations under the License.
 */
 
 .OpNode {
-  border: 1px solid #777;
-  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2);
+  border: 1px solid #111;
   cursor: pointer;
   white-space: nowrap;
+  border-collapse: separate;
+  border-radius: 2px;
+}
+
+.OpNode td,
+th {
+  border: none;
 }
 
 .OpMode--mode-service {
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js
index dd249076e1..fe6ad391c6 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.js
@@ -33,7 +33,7 @@ type Props = {
 };
 
 function formatPercent(percent) {
-  return Math.round(percent * 10000) / 100;
+  return Math.round(percent * 100) / 100;
 }
 
 export default class OpNode extends React.PureComponent<Props> {
@@ -74,7 +74,7 @@ export default class OpNode extends React.PureComponent<Props> {
     const { count, time, percent, selfTime, operation, service, mode } = this.props;
     const modeType = mode ? 'time' : 'service';
     // Spans over 20 % time are full red - we have probably to reconsider better approach
-    const percentBoosted = Math.min(percent * 5, 1);
+    const percentBoosted = Math.min(percent / 20, 1);
     const backgroundColor = mode
       ? [255, 0, 0, percentBoosted].join()
       : colorGenerator
@@ -82,7 +82,7 @@ export default class OpNode extends React.PureComponent<Props> {
           .concat(0.8)
           .join();
     const table = (
-      <table className={`OpNode OpNode--mode-${modeType}`}>
+      <table className={`OpNode OpNode--mode-${modeType}`} cellSpacing="0">
         <tbody
           style={{
             background: `rgba(${backgroundColor})`,
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.test.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.test.js
index d78aa2fec7..4febf7e635 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.test.js
@@ -24,7 +24,7 @@ describe('<OpNode>', () => {
     const props = {
       count: 5,
       time: 200000,
-      percent: 0.0789,
+      percent: 7.89,
       selfTime: 180000,
       operation: 'op1',
       service: 'service1',
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js
index bab9313270..bf5ad98a3a 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js
@@ -97,7 +97,7 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
       const nd = {
         count: n.members.length,
         time: ntime,
-        percent: 1.0 / this.props.trace.duration * ntime,
+        percent: 100 / this.props.trace.duration * ntime,
         selfTime: ntime - n.members.reduce((p, m) => p + this.getChildOfDuration(m.span.spanID), 0),
         mode: this.state.nodeMode,
       };
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.test.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.test.js
index 57dd01e85f..6cc28ec653 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.test.js
@@ -26,7 +26,7 @@ function assertData(nodes, service, operation, count, time, percent, selfTime) {
   expect(d).toBeDefined();
   expect(d.count).toBe(count);
   expect(d.time).toBe(time * 1000);
-  expect(d.percent).toBeCloseTo(percent,2);
+  expect(d.percent).toBeCloseTo(percent, 2);
   expect(d.selfTime).toBe(selfTime * 1000);
 }
 
@@ -50,16 +50,16 @@ describe('<TraceGraph>', () => {
     const traceDag = wrapper.instance().calculateTraceDag();
     expect(traceDag.nodesMap.size).toBe(7);
     const nodes = [...traceDag.nodesMap.values()];
-    assertData(nodes, 'service1', 'op1', 1, 390, .39, 204);
+    assertData(nodes, 'service1', 'op1', 1, 390, 39, 204);
     // accumulate data (count,times)
-    assertData(nodes, 'service1', 'op2', 2, 100, .1, 100);
+    assertData(nodes, 'service1', 'op2', 2, 100, 10, 100);
     // child of durations are valid
-    assertData(nodes, 'service1', 'op3', 1, 66, .066, 46);
-    assertData(nodes, 'service2', 'op1', 1, 20, .02, 2);
-    assertData(nodes, 'service2', 'op2', 1, 18, .018, 18);
+    assertData(nodes, 'service1', 'op3', 1, 66, 6.6, 46);
+    assertData(nodes, 'service2', 'op1', 1, 20, 2, 2);
+    assertData(nodes, 'service2', 'op2', 1, 18, 1.8, 18);
     // follows relation will not accumulate to inmethod
-    assertData(nodes, 'service1', 'op4', 1, 20, .02, 20);
-    assertData(nodes, 'service2', 'op3', 1, 200, .2, 200);
+    assertData(nodes, 'service1', 'op4', 1, 20, 2, 20);
+    assertData(nodes, 'service2', 'op3', 1, 200, 20, 200);
   });
 
   it('it may show no traces', () => {