From f46ef3e3ff56b25b0ee31d1d646b97f3e3c8cd45 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 30 Nov 2020 17:02:54 +0000
Subject: [PATCH] ui: Round Trip Time Tooltips (#9290)

---
 .../consul/discovery-chain/index.hbs          |  1 -
 .../consul/tomography/graph/index.hbs         | 17 +++++--
 .../consul/tomography/graph/index.js          |  2 +-
 .../consul/tomography/graph/index.scss        | 13 +++--
 .../consul-ui/mock-api/v1/coordinate/nodes    | 49 ++++++++++---------
 5 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
index d9d184964e..4af01d0a47 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
@@ -59,7 +59,6 @@
     <h2>
       Resolvers
       <span {{tooltip "Resolvers are used to define which instances of a service should satisfy discovery requests."}}>
-
       </span>
     </h2>
   </header>
diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs
index 15ceb90173..7856c759f2 100644
--- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs
@@ -13,12 +13,19 @@
           </g>
           <g class="lines">
       {{#each this.distances as |item|}}
-          <line
+          <rect
+            {{tooltip
+              (concat item.node ' - ' (format-number item.distance maximumFractionDigits=2) 'ms'
+            (if item.segment (concat '<br />(Segment: ' item.segment ')'))
+              )
+              options=(hash
+                followCursor=true
+                allowHTML=true
+              )
+            }}
             transform="rotate({{item.rotate}})"
-            y2={{item.y2}}
-            data-node={{item.d}}
-            data-distance={{item.distance}}
-            data-segment={{item.segment}}
+            width={{item.y2}}
+            height="1"
           />
       {{/each}}
           </g>
diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js
index 26d3764c28..f5403b15b5 100644
--- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js
+++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js
@@ -37,7 +37,7 @@ export default class TomographyGraph extends Component {
     return distances.map((d, i) => {
       return {
         rotate: (i * 360) / distances.length,
-        y2: -insetSize * (d.distance / max),
+        y2: insetSize * (d.distance / max),
         node: d.node,
         distance: d.distance,
         segment: d.segment,
diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
index 45f343d816..db4fc74e36 100644
--- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
@@ -15,12 +15,15 @@
     stroke: $gray-400;
     fill: $magenta-600;
   }
-  .lines line {
-    stroke: $magenta-600;
+  .lines rect {
+    fill: $magenta-600;
+    stroke: transparent;
+    stroke-width: 5px;
   }
-  .lines line:hover {
-    stroke: $gray-300;
-    stroke-width: 2px;
+  .lines rect:hover {
+    fill: $gray-300;
+    height: 3px;
+    y: -1px;
   }
   .tick line {
     stroke: $gray-300;
diff --git a/ui/packages/consul-ui/mock-api/v1/coordinate/nodes b/ui/packages/consul-ui/mock-api/v1/coordinate/nodes
index d79a16b71f..71ebcc411c 100644
--- a/ui/packages/consul-ui/mock-api/v1/coordinate/nodes
+++ b/ui/packages/consul-ui/mock-api/v1/coordinate/nodes
@@ -1,29 +1,34 @@
 [
   ${
-    range(
-      env(
-        'CONSUL_NODE_COUNT',
-        Math.floor(
-          (
-            Math.random() * env('CONSUL_NODE_MAX', 10)
-          ) + parseInt(env('CONSUL_NODE_MIN', 1))
-        )
-      )
-    ).map(
-      function(item, i)
-      {
-        return `
+    [0].map(
+      item => {
+      const segment = env('CONSUL_NSPACES_ENABLE', false) ? fake.hacker.noun() : '';
+        return range(
+          env(
+            'CONSUL_NODE_COUNT',
+            Math.floor(
+              (
+                Math.random() * env('CONSUL_NODE_MAX', 10)
+              ) + parseInt(env('CONSUL_NODE_MIN', 1))
+            )
+          )
+        ).map(
+          function(item, i)
           {
-            "Node":"node-${i}",
-            "Segment":"",
-            "Coord":{
-              "Vec":[${range(7).map((item, i) => fake.random.number())}],
-              "Error":1.5,
-              "Adjustment":0,
-              "Height":0.0000${fake.random.number()}
-            }
+            return `
+              {
+                "Node":"node-${i}",
+                "Segment":"${segment}",
+                "Coord":{
+                  "Vec":[${range(8).map((item, i) => (fake.random.number() * 1e-9) * (fake.random.boolean() ? -1 : 1))}],
+                  "Error": ${(fake.random.number() * 1e-3) * (fake.random.boolean() ? -1 : 1)},
+                  "Adjustment":${(fake.random.number() * 1e-9) * (fake.random.boolean() ? -1 : 1)},
+                  "Height": ${(fake.random.number() * 1e-9) * (fake.random.boolean() ? -1 : 1)}
+                }
+              }
+            `;
           }
-        `;
+        )
       }
     )
   }