Merge pull request #9240 from hashicorp/f-ui/topo-viz-tooltips

UI: Topo Viz Tooltips

ui/app/components/topo-viz.js

@@ -1,12 +1,16 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action, set } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { run } from '@ember/runloop';
 import { scaleLinear } from 'd3-scale';
 import { extent, deviation, mean } from 'd3-array';
 import { line, curveBasis } from 'd3-shape';
+import styleStringProperty from '../utils/properties/style-string';
 
 export default class TopoViz extends Component {
+  @service system;
+
   @tracked element = null;
   @tracked topology = { datacenters: [] };
 
@@ -16,6 +20,11 @@ export default class TopoViz extends Component {
   @tracked edgeOffset = { x: 0, y: 0 };
   @tracked viewportColumns = 2;
 
+  @tracked highlightAllocation = null;
+  @tracked tooltipProps = {};
+
+  @styleStringProperty('tooltipProps') tooltipStyle;
+
   get isSingleColumn() {
     if (this.topology.datacenters.length <= 1 || this.viewportColumns === 1) return true;
 
@@ -144,6 +153,19 @@ export default class TopoViz extends Component {
     if (this.args.onNodeSelect) this.args.onNodeSelect(this.activeNode);
   }
 
+  @action showTooltip(allocation, element) {
+    const bbox = element.getBoundingClientRect();
+    this.highlightAllocation = allocation;
+    this.tooltipProps = {
+      left: window.scrollX + bbox.left + bbox.width / 2,
+      top: window.scrollY + bbox.top,
+    };
+  }
+
+  @action hideTooltip() {
+    this.highlightAllocation = null;
+  }
+
   @action
   associateAllocations(allocation) {
     if (this.activeAllocation === allocation) {
@@ -242,7 +264,7 @@ export default class TopoViz extends Component {
       });
 
       this.activeEdges = curves.map(curve => path(curve));
-      this.edgeOffset = { x: window.visualViewport.pageLeft, y: window.visualViewport.pageTop };
+      this.edgeOffset = { x: window.scrollX, y: window.scrollY };
     });
   }
 }

ui/app/components/topo-viz/node.js

@@ -89,8 +89,14 @@ export default class TopoVizNode extends Component {
   }
 
   @action
-  highlightAllocation(allocation) {
+  highlightAllocation(allocation, { target }) {
     this.activeAllocation = allocation;
+    this.args.onAllocationFocus && this.args.onAllocationFocus(allocation, target);
+  }
+
+  @action
+  allocationBlur() {
+    this.args.onAllocationBlur && this.args.onAllocationBlur();
   }
 
   @action

ui/app/styles/charts/tooltip.scss

@@ -1,109 +1,116 @@
 .chart {
   position: relative;
+}
 
-  .chart-tooltip {
+.chart-tooltip {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    display: none;
+  display: none;
-    background: $white;
+  background: $white;
-    color: rgba($black, 0.6);
+  color: rgba($black, 0.6);
-    border: 1px solid $grey;
+  border: 1px solid $grey;
-    min-width: 150px;
+  min-width: 150px;
-    margin-top: -10px;
+  margin-top: -10px;
-    transform: translate(-50%, -100%);
+  transform: translate(-50%, -100%);
-    transition: 0.2s top ease-out, 0.2s left ease-out;
+  transition: 0.2s top ease-out, 0.2s left ease-out;
+  pointer-events: none;
+  z-index: $z-tooltip;
+
+  &.is-snappy {
+    transition: 0.2s top ease-out, 0.05s left ease-out;
+  }
+
+  &::before {
     pointer-events: none;
+    display: inline-block;
+    content: '';
+    width: 0;
+    height: 0;
+    border-top: 7px solid $grey;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+    position: absolute;
+    transform: translateX(-7px);
+    left: 50%;
+    bottom: -8px;
     z-index: $z-tooltip;
+  }
 
-    &.is-snappy {
+  &::after {
-      transition: 0.2s top ease-out, 0.05s left ease-out;
+    pointer-events: none;
-    }
+    display: inline-block;
+    content: '';
+    width: 0;
+    height: 0;
+    border-top: 6px solid $white;
+    border-right: 6px solid transparent;
+    border-left: 6px solid transparent;
+    position: absolute;
+    transform: translateX(-6px);
+    left: 50%;
+    bottom: -6px;
+    z-index: $z-tooltip;
+  }
 
-    &::before {
+  &.active {
-      pointer-events: none;
+    display: block;
-      display: inline-block;
+  }
-      content: '';
-      width: 0;
-      height: 0;
-      border-top: 7px solid $grey;
-      border-right: 7px solid transparent;
-      border-left: 7px solid transparent;
-      position: absolute;
-      transform: translateX(-7px);
-      left: 50%;
-      bottom: -8px;
-      z-index: $z-tooltip;
-    }
 
-    &::after {
+  ol {
-      pointer-events: none;
+    list-style: none;
-      display: inline-block;
-      content: '';
-      width: 0;
-      height: 0;
-      border-top: 6px solid $white;
-      border-right: 6px solid transparent;
-      border-left: 6px solid transparent;
-      position: absolute;
-      transform: translateX(-6px);
-      left: 50%;
-      bottom: -6px;
-      z-index: $z-tooltip;
-    }
-
-    &.active {
-      display: block;
-    }
-
-    ol {
-      list-style: none;
-    }
-
-    ol > li,
-    p {
-      display: flex;
-      flex-flow: row;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      padding: 0.25rem 0.5rem;
-
-      span {
-        display: inline-block;
-      }
 
+    &.is-static {
       .label {
-        white-space: nowrap;
-        font-weight: $weight-bold;
         color: $black;
-        margin: 0;
+        background: $white;
-
-        &.is-empty {
-          color: rgba($grey, 0.6);
-        }
-      }
-
-      .value {
-        padding-left: 1em;
-      }
-    }
-
-    ol > li {
-      .label {
-        color: rgba($black, 0.6);
-      }
-
-      &.active {
-        color: $black;
-        background: $white-ter;
-
-        .label {
-          color: $black;
-        }
-      }
-
-      + li {
-        border-top: 1px solid $grey-light;
       }
     }
   }
+
+  ol > li,
+  p {
+    display: flex;
+    flex-flow: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding: 0.25rem 0.5rem;
+
+    span {
+      display: inline-block;
+    }
+
+    .label {
+      white-space: nowrap;
+      font-weight: $weight-bold;
+      color: $black;
+      margin: 0;
+
+      &.is-empty {
+        color: rgba($grey, 0.6);
+      }
+    }
+
+    .value {
+      padding-left: 1em;
+    }
+  }
+
+  ol > li {
+    .label {
+      color: rgba($black, 0.6);
+    }
+
+    &.active {
+      color: $black;
+      background: $white-ter;
+
+      .label {
+        color: $black;
+      }
+    }
+
+    + li {
+      border-top: 1px solid $grey-light;
+    }
+  }
 }

ui/app/templates/components/topo-viz.hbs

@@ -14,9 +14,36 @@
         @isDense={{this.isDense}}
         @heightScale={{this.topology.heightScale}}
         @onAllocationSelect={{this.associateAllocations}}
+        @onAllocationFocus={{this.showTooltip}}
+        @onAllocationBlur={{this.hideTooltip}}
         @onNodeSelect={{this.showNodeDetails}} />
   </FlexMasonry>
 
+  <div class="chart-tooltip is-absolute {{if this.highlightAllocation "active" "inactive"}}" style={{this.tooltipStyle}}>
+    {{#let this.highlightAllocation as |allocation|}}
+      <ol class="is-static">
+        <li>
+          <span class="label">Job</span>
+          <span class="value">{{allocation.allocation.job.name}}/{{allocation.allocation.taskGroupName}}</span>
+        </li>
+        {{#if this.system.shouldShowNamespaces}}
+          <li>
+            <span class="label">Namespace</span>
+            <span class="value">{{allocation.allocation.job.namespace.name}}</span>
+          </li>
+        {{/if}}
+        <li>
+          <span class="label">Memory</span>
+          <span class="value">{{allocation.memory}} MiB</span>
+        </li>
+        <li>
+          <span class="label">CPU</span>
+          <span class="value">{{allocation.cpu}} MHz</span>
+        </li>
+      </ol>
+    {{/let}}
+  </div>
+
   {{#if this.activeAllocation}}
     <svg data-test-allocation-associations class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
       <g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">

ui/app/templates/components/topo-viz/datacenter.hbs

@@ -13,7 +13,9 @@
         @isDense={{@isDense}}
         @heightScale={{@heightScale}}
         @onAllocationSelect={{@onAllocationSelect}}
-        @onNodeSelect={{@onNodeSelect}}/>
+        @onAllocationFocus={{@onAllocationFocus}}
+        @onAllocationBlur={{@onAllocationBlur}}
+        @onNodeSelect={{@onNodeSelect}} />
     </FlexMasonry>
   </div>
 </div>

ui/app/templates/components/topo-viz/node.hbs

@@ -11,7 +11,14 @@
       <span class="bumper-left is-faded">{{@node.memory}} MiB, {{@node.cpu}} Mhz</span>
     </p>
   {{/unless}}
-  <svg class="chart" height="{{this.totalHeight}}px" {{did-insert this.render}} {{did-update this.updateRender}} {{window-resize this.render}}>
+  <svg
+    data-test-topo-node-svg
+    class="chart"
+    height="{{this.totalHeight}}px"
+    {{did-insert this.render}}
+    {{did-update this.updateRender}}
+    {{window-resize this.render}}
+    {{on "mouseout" this.allocationBlur}}>
     <defs>
       <clipPath id="{{this.maskId}}">
         <rect class="mask" x="0" y="0" width="{{this.dimensionsWidth}}px" height="{{this.maskHeight}}px" rx="2px" ry="2px" />
@@ -32,7 +39,7 @@
         width="{{this.dimensionsWidth}}px"
         height="{{this.maskHeight}}px"
         pointer-events="all"
-        {{on "mouseout" this.clearHighlight}}
+        {{on "mouseleave" this.clearHighlight}}
       >
         <g class="memory">
           {{#if this.data.memoryLabel}}

ui/app/utils/properties/style-string.js

@@ -1,4 +1,4 @@
-import { computed } from '@ember/object';
+import { computed, get } from '@ember/object';
 import { htmlSafe } from '@ember/template';
 
 // An Ember.Computed property for transforming an object into an
@@ -8,7 +8,7 @@ import { htmlSafe } from '@ember/template';
 //     styleStr: styleStringProperty('styleProps') // color:#FF0;border-width:1px
 export default function styleStringProperty(prop) {
   return computed(prop, function() {
-    const styles = this.get(prop);
+    const styles = get(this, prop);
     let str = '';
 
     if (styles) {

ui/tests/integration/components/topo-viz-test.js

@@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { create } from 'ember-cli-page-object';
+import { setupMirage } from 'ember-cli-mirage/test-support';
 import sinon from 'sinon';
 import faker from 'nomad-ui/mirage/faker';
 import topoVizPageObject from 'nomad-ui/tests/pages/components/topo-viz';
@@ -31,6 +32,7 @@ const node = (datacenter, id, memory, cpu) => ({
 
 module('Integration | Component | TopoViz', function(hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
   const commonTemplate = hbs`
     <TopoViz

ui/tests/integration/components/topo-viz/datacenter-test.js

@@ -2,6 +2,7 @@ import { find } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { setupMirage } from 'ember-cli-mirage/test-support';
 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { create } from 'ember-cli-page-object';
 import sinon from 'sinon';
@@ -32,6 +33,7 @@ const sumBy = prop => (sum, obj) => (sum += obj[prop]);
 
 module('Integration | Component | TopoViz::Datacenter', function(hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
   const commonProps = props => ({
     isSingleColumn: true,

ui/tests/integration/components/topo-viz/node-test.js

@@ -1,10 +1,12 @@
+import { findAll } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { create } from 'ember-cli-page-object';
 import sinon from 'sinon';
 import faker from 'nomad-ui/mirage/faker';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import { setupMirage } from 'ember-cli-mirage/test-support';
 import topoVisNodePageObject from 'nomad-ui/tests/pages/components/topo-viz/node';
 
 const TopoVizNode = create(topoVisNodePageObject());
@@ -38,11 +40,14 @@ const props = overrides => ({
   heightScale: () => 50,
   onAllocationSelect: sinon.spy(),
   onNodeSelect: sinon.spy(),
+  onAllocationFocus: sinon.spy(),
+  onAllocationBlur: sinon.spy(),
   ...overrides,
 });
 
 module('Integration | Component | TopoViz::Node', function(hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
   const commonTemplate = hbs`
     <TopoViz::Node
@@ -50,6 +55,8 @@ module('Integration | Component | TopoViz::Node', function(hooks) {
       @isDense={{this.isDense}}
       @heightScale={{this.heightScale}}
       @onAllocationSelect={{this.onAllocationSelect}}
+      @onAllocationFocus={{this.onAllocationFocus}}
+      @onAllocationBlur={{this.onAllocationBlur}}
       @onNodeSelect={{this.onNodeSelect}} />
   `;
 
@@ -269,18 +276,72 @@ module('Integration | Component | TopoViz::Node', function(hooks) {
     await this.render(commonTemplate);
 
     await TopoVizNode.memoryRects[0].select();
-    assert.ok(this.onAllocationSelect.callCount, 1);
+    assert.equal(this.onAllocationSelect.callCount, 1);
     assert.ok(this.onAllocationSelect.calledWith(this.node.allocations[0]));
 
     await TopoVizNode.cpuRects[0].select();
-    assert.ok(this.onAllocationSelect.callCount, 2);
+    assert.equal(this.onAllocationSelect.callCount, 2);
 
     await TopoVizNode.cpuRects[1].select();
-    assert.ok(this.onAllocationSelect.callCount, 3);
+    assert.equal(this.onAllocationSelect.callCount, 3);
     assert.ok(this.onAllocationSelect.calledWith(this.node.allocations[1]));
 
     await TopoVizNode.memoryRects[1].select();
-    assert.ok(this.onAllocationSelect.callCount, 4);
+    assert.equal(this.onAllocationSelect.callCount, 4);
+  });
+
+  test('hovering over a memory or cpu rect for an allocation will call onAllocationFocus', async function(assert) {
+    const node = nodeGen('Node One', 'dc1', 1000, 1000);
+    this.setProperties(
+      props({
+        node: {
+          ...node,
+          allocations: [allocGen(node, 100, 100), allocGen(node, 250, 250)],
+        },
+      })
+    );
+
+    await this.render(commonTemplate);
+
+    await TopoVizNode.memoryRects[0].hover();
+    assert.equal(this.onAllocationFocus.callCount, 1);
+    assert.equal(
+      this.onAllocationFocus.getCall(0).args[0].allocation,
+      this.node.allocations[0].allocation
+    );
+    assert.equal(this.onAllocationFocus.getCall(0).args[1], findAll('[data-test-memory-rect]')[0]);
+
+    await TopoVizNode.cpuRects[1].hover();
+    assert.equal(this.onAllocationFocus.callCount, 2);
+    assert.equal(
+      this.onAllocationFocus.getCall(1).args[0].allocation,
+      this.node.allocations[1].allocation
+    );
+    assert.equal(this.onAllocationFocus.getCall(1).args[1], findAll('[data-test-cpu-rect]')[1]);
+  });
+
+  test('leaving the entire node will call onAllocationBlur, which allows for the tooltip transitions', async function(assert) {
+    const node = nodeGen('Node One', 'dc1', 1000, 1000);
+    this.setProperties(
+      props({
+        node: {
+          ...node,
+          allocations: [allocGen(node, 100, 100), allocGen(node, 250, 250)],
+        },
+      })
+    );
+
+    await this.render(commonTemplate);
+
+    await TopoVizNode.memoryRects[0].hover();
+    assert.equal(this.onAllocationFocus.callCount, 1);
+    assert.equal(this.onAllocationBlur.callCount, 0);
+
+    await TopoVizNode.memoryRects[0].mouseleave();
+    assert.equal(this.onAllocationBlur.callCount, 0);
+
+    await TopoVizNode.mouseout();
+    assert.equal(this.onAllocationBlur.callCount, 1);
   });
 
   test('allocations are sorted by smallest to largest delta of memory to cpu percent utilizations', async function(assert) {

ui/tests/pages/components/topo-viz/node.js

@@ -1,7 +1,17 @@
-import { attribute, collection, clickable, hasClass, isPresent, text } from 'ember-cli-page-object';
+import {
+  attribute,
+  collection,
+  clickable,
+  hasClass,
+  isPresent,
+  text,
+  triggerable,
+} from 'ember-cli-page-object';
 
 const allocationRect = {
   select: clickable(),
+  hover: triggerable('mouseenter'),
+  mouseleave: triggerable('mouseleave'),
   width: attribute('width', '> rect'),
   height: attribute('height', '> rect'),
   isActive: hasClass('is-active'),
@@ -32,6 +42,8 @@ export default scope => ({
     id: attribute('data-test-cpu-rect'),
   }),
 
+  mouseout: triggerable('mouseout', '[data-test-topo-node-svg]'),
+
   emptyMessage: text('[data-test-empty-message]'),
   isEmpty: hasClass('is-empty'),
 });