github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/templates/allocations/allocation/index.hbs (about) 1 {{page-title "Allocation " this.model.name}} 2 <AllocationSubnav @allocation={{this.model}} /> 3 <section class="section"> 4 {{#if this.error}} 5 <div data-test-inline-error class="notification is-danger"> 6 <div class="columns"> 7 <div class="column"> 8 <h3 data-test-inline-error-title class="title is-4">{{this.error.title}}</h3> 9 <p data-test-inline-error-body>{{this.error.description}}</p> 10 </div> 11 <div class="column is-centered is-minimum"> 12 <button data-test-inline-error-close class="button is-danger" onclick={{action this.onDismiss}} type="button">Okay</button> 13 </div> 14 </div> 15 </div> 16 {{/if}} 17 18 <h1 data-test-title class="title with-headroom with-flex"> 19 <div> 20 Allocation {{this.model.name}} 21 <span class="bumper-left tag {{this.model.statusClass}}">{{this.model.clientStatus}}</span> 22 </div> 23 <div> 24 {{#if this.model.isRunning}} 25 <div class="two-step-button"> 26 <Exec::OpenButton @job={{this.model.job}} @allocation={{this.model}} /> 27 </div> 28 <TwoStepButton 29 data-test-stop 30 @alignRight={{true}} 31 @idleText="Stop" 32 @cancelText="Cancel" 33 @confirmText="Yes, Stop" 34 @confirmationMessage="Are you sure? This will reschedule the allocation on a different client." 35 @awaitingConfirmation={{this.stopAllocation.isRunning}} 36 @disabled={{or this.stopAllocation.isRunning this.restartAllocation.isRunning}} 37 @onConfirm={{perform this.stopAllocation}} /> 38 <TwoStepButton 39 data-test-restart 40 @alignRight={{true}} 41 @idleText="Restart" 42 @cancelText="Cancel" 43 @confirmText="Yes, Restart" 44 @confirmationMessage="Are you sure? This will restart the allocation in-place." 45 @awaitingConfirmation={{this.restartAllocation.isRunning}} 46 @disabled={{or this.stopAllocation.isRunning this.restartAllocation.isRunning}} 47 @onConfirm={{perform this.restartAllocation}} /> 48 {{/if}} 49 </div> 50 </h1> 51 52 <span class="tag is-hollow is-small is-alone no-text-transform"> 53 {{this.model.id}} 54 <CopyButton @clipboardText={{this.model.id}} /> 55 </span> 56 57 <div class="boxed-section is-small"> 58 <div data-test-allocation-details class="boxed-section-body inline-definitions"> 59 <span class="label">Allocation Details</span> 60 <span class="pair job-link"><span class="term">Job</span> 61 <LinkTo @route="jobs.job" @model={{this.model.job}} @query={{hash jobNamespace=this.model.job.namespace.id}} data-test-job-link>{{this.model.job.name}}</LinkTo> 62 </span> 63 <span class="pair node-link"><span class="term">Client</span> 64 <LinkTo @route="clients.client" @model={{this.model.node}} data-test-client-link>{{this.model.node.shortId}}</LinkTo> 65 </span> 66 </div> 67 </div> 68 69 <div class="boxed-section"> 70 <div class="boxed-section-head is-hollow"> 71 Resource Utilization 72 </div> 73 <div class="boxed-section-body"> 74 {{#if this.model.isRunning}} 75 <div class="columns"> 76 <div class="column"> 77 <PrimaryMetric @resource={{this.model}} @metric="cpu" /> 78 </div> 79 <div class="column"> 80 <PrimaryMetric @resource={{this.model}} @metric="memory" /> 81 </div> 82 </div> 83 {{else}} 84 <div data-test-resource-error class="empty-message"> 85 <h3 data-test-resource-error-headline class="empty-message-headline">Allocation isn't running</h3> 86 <p class="empty-message-body">Only running allocations utilize resources.</p> 87 </div> 88 {{/if}} 89 </div> 90 </div> 91 92 <LifecycleChart @taskStates={{this.model.states}} /> 93 94 <div class="boxed-section"> 95 <div class="boxed-section-head"> 96 Tasks 97 </div> 98 <div class="boxed-section-body {{if this.sortedStates.length "is-full-bleed"}}"> 99 {{#if this.sortedStates.length}} 100 <ListTable 101 @source={{this.sortedStates}} 102 @sortProperty={{this.sortProperty}} 103 @sortDescending={{this.sortDescending}} 104 @class="is-striped" as |t|> 105 <t.head> 106 <th class="is-narrow"></th> 107 <t.sort-by @prop="name">Name</t.sort-by> 108 <t.sort-by @prop="state">State</t.sort-by> 109 <th>Last Event</th> 110 <t.sort-by @prop="events.lastObject.time">Time</t.sort-by> 111 <th>Volumes</th> 112 <th>CPU</th> 113 <th>Memory</th> 114 </t.head> 115 <t.body as |row|> 116 <TaskRow 117 @data-test-task-row={{row.model.name}} 118 @task={{row.model}} 119 @onClick={{action "taskClick" row.model.allocation row.model}} /> 120 </t.body> 121 </ListTable> 122 {{else}} 123 <div data-test-empty-tasks-list class="empty-message"> 124 <h3 data-test-empty-tasks-list-headline class="empty-message-headline">No Tasks</h3> 125 <p data-test-empty-tasks-list-body class="empty-message-body">Allocations will not have tasks until they are in a running state.</p> 126 </div> 127 {{/if}} 128 </div> 129 </div> 130 131 {{#if this.ports.length}} 132 <div class="boxed-section" data-test-allocation-ports> 133 <div class="boxed-section-head"> 134 Ports 135 </div> 136 <div class="boxed-section-body is-full-bleed"> 137 <ListTable @source={{this.ports}} as |t|> 138 <t.head> 139 <th>Name</th> 140 <th>Host Address</th> 141 <th>Mapped Port</th> 142 </t.head> 143 <t.body as |row|> 144 <tr data-test-allocation-port> 145 <td data-test-allocation-port-name>{{row.model.label}}</td> 146 <td data-test-allocation-port-address> 147 <a href="http://{{row.model.hostIp}}:{{row.model.value}}" target="_blank" rel="noopener noreferrer">{{row.model.hostIp}}:{{row.model.value}}</a> 148 </td> 149 <td data-test-allocation-port-to>{{row.model.to}}</td> 150 </tr> 151 </t.body> 152 </ListTable> 153 </div> 154 </div> 155 {{/if}} 156 157 {{#if this.services.length}} 158 <div class="boxed-section"> 159 <div class="boxed-section-head"> 160 Services 161 </div> 162 <div class="boxed-section-body is-full-bleed"> 163 <ListTable @source={{this.services}} as |t|> 164 <t.head> 165 <th class="is-2">Name</th> 166 <th class="is-1">Port</th> 167 <td>Tags</td> 168 <td>Connect?</td> 169 <td>Upstreams</td> 170 </t.head> 171 <t.body as |row|> 172 <tr data-test-service> 173 <td data-test-service-name>{{row.model.name}}</td> 174 <td data-test-service-port>{{row.model.portLabel}}</td> 175 <td data-test-service-tags>{{join ", " row.model.tags}}</td> 176 <td data-test-service-connect>{{if row.model.connect "Yes" "No"}}</td> 177 <td data-test-service-upstreams> 178 {{#each row.model.connect.sidecarService.proxy.upstreams as |upstream|}} 179 {{upstream.destinationName}}:{{upstream.localBindPort}} 180 {{/each}} 181 </td> 182 </tr> 183 </t.body> 184 </ListTable> 185 </div> 186 </div> 187 {{/if}} 188 189 {{#if this.model.hasRescheduleEvents}} 190 <div class="boxed-section" data-test-reschedule-events> 191 <div class="boxed-section-head is-hollow"> 192 Reschedule Events 193 </div> 194 <div class="boxed-section-body"> 195 <RescheduleEventTimeline @allocation={{this.model}} /> 196 </div> 197 </div> 198 {{/if}} 199 200 {{#if this.model.wasPreempted}} 201 <div class="boxed-section is-warning" data-test-was-preempted> 202 <div class="boxed-section-head">Preempted By</div> 203 <div class="boxed-section-body"> 204 {{#if this.preempter}} 205 <div class="boxed-section is-small"> 206 <div class="boxed-section-body inline-definitions"> 207 <span class="pair"> 208 <span data-test-allocation-status class="tag {{this.preempter.statusClass}}"> 209 {{this.preempter.clientStatus}} 210 </span> 211 </span> 212 <span class="pair"> 213 <span class="term" data-test-allocation-name>{{this.preempter.name}}</span> 214 <LinkTo @route="allocations.allocation" @model={{this.preempter}} data-test-allocation-id>{{this.preempter.shortId}}</LinkTo> 215 </span> 216 <span class="pair job-link"><span class="term">Job</span> 217 <LinkTo @route="jobs.job" @model={{this.preempter.job}} @query={{hash jobNamespace=this.preempter.job.namespace.id}} data-test-job-link>{{this.preempter.job.name}}</LinkTo> 218 </span> 219 <span class="pair job-priority"><span class="term">Priority</span> 220 <span data-test-job-priority>{{this.preempter.job.priority}}</span> 221 </span> 222 <span class="pair node-link"><span class="term">Client</span> 223 <LinkTo @route="clients.client" @model={{this.preempter.node}} data-test-client-link>{{this.preempter.node.shortId}}</LinkTo> 224 </span> 225 <span class="pair"><span class="term">Reserved CPU</span> 226 <span data-test-allocation-cpu>{{this.preempter.resources.cpu}} MHz</span> 227 </span> 228 <span class="pair"><span class="term">Reserved Memory</span> 229 <span data-test-allocation-memory>{{this.preempter.resources.memory}} MiB</span> 230 </span> 231 </div> 232 </div> 233 {{else}} 234 <div class="empty-message"> 235 <h3 class="empty-message-headline">Allocation is gone</h3> 236 <p class="empty-message-body">This allocation has been stopped and garbage collected.</p> 237 </div> 238 {{/if}} 239 </div> 240 </div> 241 {{/if}} 242 243 {{#if (and this.model.preemptedAllocations.isFulfilled this.model.preemptedAllocations.length)}} 244 <div class="boxed-section" data-test-preemptions> 245 <div class="boxed-section-head">Preempted Allocations</div> 246 <div class="boxed-section-body"> 247 <ListTable 248 @source={{this.model.preemptedAllocations}} 249 @class="allocations is-isolated" as |t|> 250 <t.head> 251 <th class="is-narrow"></th> 252 <th>ID</th> 253 <th>Task Group</th> 254 <th>Created</th> 255 <th>Modified</th> 256 <th>Status</th> 257 <th>Version</th> 258 <th>Node</th> 259 <th>CPU</th> 260 <th>Memory</th> 261 </t.head> 262 <t.body as |row|> 263 <AllocationRow @allocation={{row.model}} @context="job" @data-test-allocation={{row.model.id}} /> 264 </t.body> 265 </ListTable> 266 </div> 267 </div> 268 {{/if}} 269 </section>