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

<div
  data-test-topo-viz
  class="topo-viz {{if this.isSingleColumn "is-single-column"}}"
  {{did-insert this.buildTopology}}
  {{did-insert this.captureElement}}
  {{window-resize this.determineViewportColumns}}>
  <FlexMasonry
    @columns={{if this.isSingleColumn 1 2}}
    @items={{this.topology.datacenters}}
    @withSpacing={{true}} as |dc|>
    <TopoViz::Datacenter
        @datacenter={{dc}}
        @isSingleColumn={{this.datacenterIsSingleColumn}}
        @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">{{format-scheduled-bytes allocation.memory start="MiB"}}</span>
        </li>
        <li>
          <span class="label">CPU</span>
          <span class="value">{{format-scheduled-hertz allocation.cpu}}</span>
        </li>
      </ol>
    {{/let}}
  </div>

  {{#if this.activeAllocation}}
    <svg data-test-allocation-associations class="chart topo-viz-edges" {{window-resize this.resizeEdges}}>
      <g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
        {{#each this.activeEdges as |edge|}}
          <path data-test-allocation-association class="edge" d={{edge}} />
        {{/each}}
      </g>
    </svg>
  {{/if}}
</div>