github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/templates/topology.hbs (about) 1 {{page-title "Cluster Topology"}} 2 <PageLayout> 3 <section class="section is-full-width"> 4 {{#if this.isForbidden}} 5 <ForbiddenMessage /> 6 {{else}} 7 {{#if this.filteredNodes}} 8 <div class="notification is-warning"> 9 <div data-test-filtered-nodes-warning class="columns"> 10 <div class="column"> 11 <h3 data-test-title class="title is-4">Some Clients Were Filtered</h3> 12 <p data-test-message>{{this.filteredNodes.length}} {{if (eq this.filteredNodes.length 1) "client was" "clients were"}} filtered from the topology visualization. This is most likely due to the {{pluralize "client" this.filteredNodes.length}} running a version of Nomad <0.9.0.</p> 13 </div> 14 <div class="column is-centered is-minimum"> 15 <button data-test-dismiss class="button is-warning" onclick={{action (mut this.filteredNodes) null}} type="button">Okay</button> 16 </div> 17 </div> 18 </div> 19 {{/if}} 20 <div class="columns"> 21 <div class="column is-narrow is-400"> 22 {{#if this.showPollingNotice}} 23 <div class="notification is-warning"> 24 <div class="columns"> 25 <div class="column"> 26 <h3 class="title is-4">No Live Updating</h3> 27 <p>The topology visualization depends on too much data to continuously poll.</p> 28 </div> 29 <div class="column is-centered is-minimum"> 30 <button data-test-polling-notice-dismiss class="button is-warning" type="button" onclick={{toggle-action "showPollingNotice" this}}>Okay</button> 31 </div> 32 </div> 33 </div> 34 {{/if}} 35 <div class="boxed-section"> 36 <div class="boxed-section-head"> 37 Legend 38 {{#if (cannot "list all jobs")}} 39 <span aria-label="Your ACL token may limit your ability to list all allocations" class="tag is-warning pull-right tooltip multiline">Partial View</span> 40 {{/if}} 41 </div> 42 <div class="boxed-section-body"> 43 <div class="legend"> 44 <h3 class="legend-label">Metrics</h3> 45 <dl class="legend-terms"> 46 <dt>M:</dt><dd>Memory</dd> 47 <dt>C:</dt><dd>CPU</dd> 48 </dl> 49 </div> 50 <div class="legend"> 51 <h3 class="legend-label">Allocation Status</h3> 52 <dl class="legend-terms"> 53 <div class="legend-term"><dt><span class="color-swatch is-wide running" title="Running" /></dt><dd>Running</dd></div> 54 <div class="legend-term"><dt><span class="color-swatch is-wide pending" title="Starting" /></dt><dd>Starting</dd></div> 55 </dl> 56 </div> 57 </div> 58 </div> 59 <div class="boxed-section"> 60 <div data-test-info-panel-title class="boxed-section-head"> 61 {{#if this.activeNode}}Client{{else if this.activeAllocation}}Allocation{{else}}Cluster{{/if}} Details 62 </div> 63 <div data-test-info-panel class="boxed-section-body"> 64 {{#if this.activeNode}} 65 {{#let this.activeNode.node as |node|}} 66 <div class="dashboard-metric"> 67 <p data-test-allocations class="metric">{{this.activeNode.allocations.length}} <span class="metric-label">Allocations</span></p> 68 </div> 69 <div class="dashboard-metric"> 70 <h3 class="pair"> 71 <strong>Client:</strong> 72 <LinkTo data-test-client-link @route="clients.client" @model={{node}}> 73 {{node.shortId}} 74 </LinkTo> 75 </h3> 76 <p data-test-name class="minor-pair"><strong>Name:</strong> {{node.name}}</p> 77 <p data-test-address class="minor-pair"><strong>Address:</strong> {{node.httpAddr}}</p> 78 <p data-test-status class="minor-pair"><strong>Status:</strong> {{node.status}}</p> 79 </div> 80 <div class="dashboard-metric"> 81 <h3 class="pair"> 82 <strong>Draining?</strong> <span data-test-draining class="{{if node.isDraining "status-text is-info"}}">{{if node.isDraining "Yes" "No"}}</span> 83 </h3> 84 <h3 class="pair"> 85 <strong>Eligible?</strong> <span data-test-eligible class="{{unless node.isEligible "status-text is-warning"}}">{{if node.isEligible "Yes" "No"}}</span> 86 </h3> 87 </div> 88 <div class="dashboard-metric with-divider"> 89 <p class="metric"> 90 {{this.nodeUtilization.totalMemoryFormatted}} 91 <span class="metric-units">{{this.nodeUtilization.totalMemoryUnits}}</span> 92 <span class="metric-label">of memory</span> 93 </p> 94 <div class="columns graphic"> 95 <div class="column"> 96 <div class="inline-chart"> 97 <progress 98 data-test-memory-progress-bar 99 class="progress is-danger is-small" 100 value="{{this.nodeUtilization.reservedMemoryPercent}}" 101 max="1"> 102 {{this.nodeUtilization.reservedMemoryPercent}} 103 </progress> 104 </div> 105 </div> 106 <div class="column is-minimum"> 107 <span class="nowrap" data-test-percentage>{{format-percentage this.nodeUtilization.reservedMemoryPercent total=1}}</span> 108 </div> 109 </div> 110 <div class="annotation" data-test-memory-absolute-value> 111 <strong>{{format-bytes this.nodeUtilization.totalReservedMemory}}</strong> / {{format-bytes this.nodeUtilization.totalMemory}} reserved 112 </div> 113 </div> 114 <div class="dashboard-metric"> 115 <p class="metric">{{this.nodeUtilization.totalCPU}} <span class="metric-units">MHz</span> <span class="metric-label">of CPU</span></p> 116 <div class="columns graphic"> 117 <div class="column"> 118 <div class="inline-chart" data-test-percentage-bar> 119 <progress 120 data-test-cpu-progress-bar 121 class="progress is-info is-small" 122 value="{{this.nodeUtilization.reservedCPUPercent}}" 123 max="1"> 124 {{this.nodeUtilization.reservedCPUPercent}} 125 </progress> 126 </div> 127 </div> 128 <div class="column is-minimum"> 129 <span class="nowrap" data-test-percentage>{{format-percentage this.nodeUtilization.reservedCPUPercent total=1}}</span> 130 </div> 131 </div> 132 <div class="annotation" data-test-cpu-absolute-value> 133 <strong>{{this.nodeUtilization.totalReservedCPU}} MHz</strong> / {{this.nodeUtilization.totalCPU}} MHz reserved 134 </div> 135 </div> 136 {{/let}} 137 {{else if this.activeAllocation}} 138 <div class="dashboard-metric"> 139 <h3 class="pair"> 140 <strong>Allocation:</strong> 141 <LinkTo data-test-id @route="allocations.allocation" @model={{this.activeAllocation}} class="is-primary">{{this.activeAllocation.shortId}}</LinkTo> 142 </h3> 143 <p data-test-sibling-allocs class="minor-pair"><strong>Sibling Allocations:</strong> {{this.siblingAllocations.length}}</p> 144 <p data-test-unique-placements class="minor-pair"><strong>Unique Client Placements:</strong> {{this.uniqueActiveAllocationNodes.length}}</p> 145 </div> 146 <div class="dashboard-metric with-divider"> 147 <h3 class="pair"> 148 <strong>Job:</strong> 149 <LinkTo 150 data-test-job 151 @route="jobs.job" 152 @model={{this.activeAllocation.job}} 153 @query={{hash jobNamespace=this.activeAllocation.job.namespace.id}}> 154 {{this.activeAllocation.job.name}}</LinkTo> 155 <span class="is-faded" data-test-task-group> / {{this.activeAllocation.taskGroupName}}</span> 156 </h3> 157 <p class="minor-pair"><strong>Type:</strong> {{this.activeAllocation.job.type}}</p> 158 <p class="minor-pair"><strong>Priority:</strong> {{this.activeAllocation.job.priority}}</p> 159 </div> 160 <div class="dashboard-metric with-divider"> 161 <h3 class="pair"> 162 <strong>Client:</strong> 163 <LinkTo data-test-client @route="clients.client" @model={{this.activeAllocation.node}}> 164 {{this.activeAllocation.node.shortId}} 165 </LinkTo> 166 </h3> 167 <p class="minor-pair"><strong>Name:</strong> {{this.activeAllocation.node.name}}</p> 168 <p class="minor-pair"><strong>Address:</strong> {{this.activeAllocation.node.httpAddr}}</p> 169 </div> 170 <div class="dashboard-metric with-divider"> 171 <PrimaryMetric @resource={{this.activeAllocation}} @metric="memory" class="is-short" /> 172 </div> 173 <div class="dashboard-metric"> 174 <PrimaryMetric @resource={{this.activeAllocation}} @metric="cpu" class="is-short" /> 175 </div> 176 {{else}} 177 <div class="columns is-flush"> 178 <div class="dashboard-metric column"> 179 <p data-test-node-count class="metric">{{this.model.nodes.length}} <span class="metric-label">Clients</span></p> 180 </div> 181 <div class="dashboard-metric column"> 182 <p data-test-alloc-count class="metric">{{this.scheduledAllocations.length}} <span class="metric-label">Allocations</span></p> 183 </div> 184 </div> 185 <div class="dashboard-metric with-divider"> 186 <p class="metric">{{this.totalMemoryFormatted}} <span class="metric-units">{{this.totalMemoryUnits}}</span> <span class="metric-label">of memory</span></p> 187 <div class="columns graphic"> 188 <div class="column"> 189 <div class="inline-chart" data-test-percentage-bar> 190 <progress 191 data-test-memory-progress-bar 192 class="progress is-danger is-small" 193 value="{{this.reservedMemoryPercent}}" 194 max="1"> 195 {{this.reservedMemoryPercent}} 196 </progress> 197 </div> 198 </div> 199 <div class="column is-minimum"> 200 <span class="nowrap" data-test-memory-percentage>{{format-percentage this.reservedMemoryPercent total=1}}</span> 201 </div> 202 </div> 203 <div class="annotation" data-test-memory-absolute-value> 204 <strong>{{format-bytes this.totalReservedMemory}}</strong> / {{format-bytes this.totalMemory}} reserved 205 </div> 206 </div> 207 <div class="dashboard-metric"> 208 <p class="metric">{{this.totalCPU}} <span class="metric-units">MHz</span> <span class="metric-label">of CPU</span></p> 209 <div class="columns graphic"> 210 <div class="column"> 211 <div class="inline-chart" data-test-percentage-bar> 212 <progress 213 data-test-cpu-progress-bar 214 class="progress is-info is-small" 215 value="{{this.reservedCPUPercent}}" 216 max="1"> 217 {{this.reservedCPUPercent}} 218 </progress> 219 </div> 220 </div> 221 <div class="column is-minimum"> 222 <span class="nowrap" data-test-cpu-percentage>{{format-percentage this.reservedCPUPercent total=1}}</span> 223 </div> 224 </div> 225 <div class="annotation" data-test-cpu-absolute-value> 226 <strong>{{this.totalReservedCPU}} MHz</strong> / {{this.totalCPU}} MHz reserved 227 </div> 228 </div> 229 {{/if}} 230 </div> 231 </div> 232 </div> 233 <div class="column"> 234 <TopoViz 235 @nodes={{this.model.nodes}} 236 @allocations={{this.model.allocations}} 237 @onAllocationSelect={{action this.setAllocation}} 238 @onNodeSelect={{action this.setNode}} 239 @onDataError={{action this.handleTopoVizDataError}}/> 240 </div> 241 </div> 242 {{/if}} 243 </section> 244 </PageLayout>