ui: Round Trip Time Tooltips (#9290)

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>

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>

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,

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;

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)}
+                }
+              }
+            `;
           }
-        `;
+        )
       }
     )
   }