github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/templates/components/topo-viz.hbs (about)

     1  <div
     2    data-test-topo-viz
     3    class="topo-viz {{if this.isSingleColumn "is-single-column"}}"
     4    {{did-insert this.buildTopology}}
     5    {{did-update this.buildTopology @nodes}}
     6    {{did-insert this.captureElement}}
     7    {{window-resize this.determineViewportColumns}}>
     8    <FlexMasonry
     9      @columns={{if this.isSingleColumn 1 2}}
    10      @items={{this.topology.datacenters}}
    11      @withSpacing={{true}} as |dc|>
    12      <TopoViz::Datacenter
    13          @datacenter={{dc}}
    14          @isSingleColumn={{this.datacenterIsSingleColumn}}
    15          @isDense={{this.isDense}}
    16          @heightScale={{this.topology.heightScale}}
    17          @onAllocationSelect={{this.associateAllocations}}
    18          @onAllocationFocus={{this.showTooltip}}
    19          @onAllocationBlur={{this.hideTooltip}}
    20          @onNodeSelect={{this.showNodeDetails}} />
    21    </FlexMasonry>
    22  
    23    <div class="chart-tooltip is-absolute {{if this.highlightAllocation "active" "inactive"}}" style={{this.tooltipStyle}}>
    24      {{#let this.highlightAllocation as |allocation|}}
    25        <ol class="is-static">
    26          <li>
    27            <span class="label">Job</span>
    28            <span class="value">{{allocation.allocation.job.name}}/{{allocation.allocation.taskGroupName}}</span>
    29          </li>
    30          {{#if this.system.shouldShowNamespaces}}
    31            <li>
    32              <span class="label">Namespace</span>
    33              <span class="value">{{allocation.allocation.job.namespace.name}}</span>
    34            </li>
    35          {{/if}}
    36          <li>
    37            <span class="label">Memory</span>
    38            <span class="value">{{format-scheduled-bytes allocation.memory start="MiB"}}</span>
    39          </li>
    40          <li>
    41            <span class="label">CPU</span>
    42            <span class="value">{{format-scheduled-hertz allocation.cpu}}</span>
    43          </li>
    44        </ol>
    45      {{/let}}
    46    </div>
    47  
    48    {{#if this.activeAllocation}}
    49      <svg data-test-allocation-associations class="chart topo-viz-edges" {{window-resize this.resizeEdges}}>
    50        <g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
    51          {{#each this.activeEdges as |edge|}}
    52            <path data-test-allocation-association class="edge" d={{edge}} />
    53          {{/each}}
    54        </g>
    55      </svg>
    56    {{/if}}
    57  </div>