open-nomad/ui/app/templates/allocations/allocation/index.hbs

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

472 lines
14 KiB
Handlebars
Raw Normal View History

{{page-title "Allocation " this.model.name}}
<AllocationSubnav @allocation={{this.model}} />
2018-07-25 22:05:24 +00:00
<section class="section">
{{#if this.error}}
<div data-test-inline-error class="notification is-danger">
<div class="columns">
<div class="column">
<h3 data-test-inline-error-title class="title is-4">
{{this.error.title}}
</h3>
<p data-test-inline-error-body>
{{this.error.description}}
</p>
</div>
<div class="column is-centered is-minimum">
<button
data-test-inline-error-close
class="button is-danger"
onclick={{action this.onDismiss}}
type="button"
>
Okay
</button>
</div>
</div>
</div>
{{/if}}
<h1 data-test-title class="title with-headroom with-flex">
<div>
Allocation
{{this.model.name}}
<span class="bumper-left tag {{this.model.statusClass}}">
{{this.model.clientStatus}}
</span>
</div>
<div>
{{#if this.model.isRunning}}
<div class="two-step-button">
<Exec::OpenButton
@job={{this.model.job}}
@allocation={{this.model}}
/>
</div>
<TwoStepButton
data-test-stop
@alignRight={{true}}
2022-03-24 20:38:43 +00:00
@idleText="Stop Alloc"
@cancelText="Cancel Stop"
@confirmText="Yes, Stop Alloc"
@confirmationMessage="Are you sure? This will reschedule the allocation on a different client."
@awaitingConfirmation={{this.stopAllocation.isRunning}}
@disabled={{or
this.stopAllocation.isRunning
this.restartAllocation.isRunning
}}
@onConfirm={{perform this.stopAllocation}}
/>
<TwoStepButton
data-test-restart
@alignRight={{true}}
2022-03-24 20:38:43 +00:00
@idleText="Restart Alloc"
@cancelText="Cancel Restart"
@confirmText="Yes, Restart Alloc"
@confirmationMessage="Are you sure? This will restart the allocation in-place."
@awaitingConfirmation={{this.restartAllocation.isRunning}}
@disabled={{or
this.stopAllocation.isRunning
this.restartAllocation.isRunning
}}
@onConfirm={{perform this.restartAllocation}}
/>
{{/if}}
</div>
2018-07-25 22:05:24 +00:00
</h1>
<span class="tag is-hollow is-small is-alone no-text-transform">
{{this.model.id}}
<CopyButton @clipboardText={{this.model.id}} />
</span>
2018-07-25 22:05:24 +00:00
<div class="boxed-section is-small">
<div
data-test-allocation-details
class="boxed-section-body inline-definitions"
>
<span class="label">
Allocation Details
</span>
<span class="pair job-link">
<span class="term">
Job
</span>
<LinkTo
@route="jobs.job"
@model={{format-job-id this.model.job.id}}
data-test-job-link
>
{{this.model.job.name}}
</LinkTo>
2018-07-25 22:05:24 +00:00
</span>
<span class="pair node-link">
<span class="term">
Client
</span>
<LinkTo
@route="clients.client"
@model={{this.model.node}}
data-test-client-link
>
{{this.model.node.shortId}}
</LinkTo>
2018-07-25 22:05:24 +00:00
</span>
</div>
2018-07-25 22:05:24 +00:00
</div>
<div class="boxed-section">
<div class="boxed-section-head is-hollow">
Resource Utilization
</div>
<div class="boxed-section-body">
{{#if this.model.isRunning}}
<div class="columns">
<div class="column">
<PrimaryMetric::Allocation
@allocation={{this.model}}
@metric="cpu"
/>
</div>
<div class="column">
<PrimaryMetric::Allocation
@allocation={{this.model}}
@metric="memory"
/>
</div>
</div>
{{else}}
<div data-test-resource-error class="empty-message">
<h3 data-test-resource-error-headline class="empty-message-headline">
Allocation isn't running
</h3>
<p class="empty-message-body">
Only running allocations utilize
resources.
</p>
</div>
{{/if}}
</div>
</div>
<LifecycleChart @taskStates={{this.model.states}} />
2018-07-25 22:05:24 +00:00
<div class="boxed-section">
<div class="boxed-section-head">
Tasks
</div>
<div
class="boxed-section-body {{if this.sortedStates.length "is-full-bleed"}}"
>
{{#if this.sortedStates.length}}
<ListTable
@source={{this.sortedStates}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="is-striped" as |t|
>
<t.head>
<th class="is-narrow"></th>
<t.sort-by @prop="name">
Name
</t.sort-by>
<t.sort-by @prop="state">
State
</t.sort-by>
<th>
Last Event
</th>
<t.sort-by @prop="events.lastObject.time">
Time
</t.sort-by>
<th>
Volumes
</th>
<th>
CPU
</th>
<th>
Memory
</th>
</t.head>
<t.body as |row|>
<TaskRow
[ui] general keyboard navigation: 1.3.4 release (#14138) * Initialized keyboard service Neat but funky: dynamic subnav traversal 👻 generalized traverseSubnav method Shift as special modifier key Nice little demo panel Keyboard shortcuts keycard Some animation styles on keyboard shortcuts Handle situations where a link is deeply nested from its parent menu item Keyboard service cleanup helper-based initializer and teardown for new contextual commands Keyboard shortcuts modal component added and demo-ghost removed Removed j and k from subnav traversal Register and unregister methods for subnav plus new subnavs for volumes and volume register main nav method Generalizing the register nav method 12762 table keynav (#12975) * Experimental feature: shortcut visual hints * Long way around to a custom modifier for keyboard shortcuts * dynamic table and list iterative shortcuts * Progress with regular old tether * Delogging * Table Keynav tether fix, server and client navs, and fix to shiftless on modified arrow keys Go to Optimize keyboard link and storage key changed to g r parameterized jobs keyboard nav Dynamic numeric keynav for multiple tables (#13482) * Multiple tables init * URL-bind enumerable keyboard commands and add to more taskRow and allocationRows * Type safety and lint fixes * Consolidated push to keyCommands * Default value when removing keyCommands * Remove the URL-based removal method and perform a recompute on any add Get tests passing in Keynav: remove math helpers and a few other defensive moves (#13761) * Remove ember math helpers * Test fixes for jobparts/body * Kill an unneeded integration helper test * delog * Trying if disabling percy lets this finish * Okay so its not percy; try parallelism in circle * Percyless yet again * Trying a different angle to not have percy * Upgrade percy to 1.6.1 [ui] Keyboard nav: "u" key to go up a level (#13754) * U to go up a level * Mislabelled my conditional * Custom lint ignore rule * Custom lint ignore rule, this time with commas * Since we're getting rid of ember math helpers elsewhere, do the math ourselves here Replace ArrowLeft etc. with an ascii arrow (#13776) * Replace ArrowLeft etc. with an ascii arrow * non-mutative helper cleanup Keyboard Nav: let users rebind their shortcuts (#13781) * click-outside and shortcuts enabled/disabled toggle * Trap focus when modal open * Enabled/disabled saved to localStorage * Autofocus edit button on variable index * Modal overflow styles * Functional rebind * Saving rebinds to localStorage for all majors * Started on defaultCommandBindings * Modal header style and cancel rebind on escape * keyboardable keybindings w buttons instead of spans * recording and defaultvalues * Enter short-circuits rebind * Only some commands are rebindable, and dont show dupes * No unused get import * More visually distinct header on modal * Disallowed keys for rebind, showing buffer as you type, and moving dedupe to modal logic willDestroy hook to prevent tests from doubling/tripling up addEventListener on kb events remove unused tests Keyboard Navigation acceptance tests (#13893) * Acceptance tests for keyboard modal * a11y audit fix and localStorage clear * Bind/rebind/localStorage tests * Keyboard tests for dynamic nav and tables * Rebinder and assert expectation * Second percy snapshot showing hints no longer relevant Weird issue where linktos with query props specifically from the task-groups page would fail to route / hit undefined.shouldSuperCede errors Adds the concept of exclusivity to a keycommand, removing peers that also share its label Lintfix Changelog and PR feedback Changelog and PR feedback Fix to rebinding in firefox by blurring the now-disabled button on rebind (#14053) * Secure Variables shortcuts removed * Variable index route autofocus removed * Updated changelog entry * Updated changelog entry * Keynav docs (#14148) * Section added to the API Docs UI page * Added a note about disabling * Prev and Next order * Remove dev log and unneeded comments
2022-08-17 16:59:33 +00:00
{{keyboard-shortcut
enumerated=true
action=(action "taskClick" row.model.allocation row.model)
}}
@data-test-task-row={{row.model.name}}
@task={{row.model}}
@onClick={{action "taskClick" row.model.allocation row.model}}
/>
</t.body>
</ListTable>
{{else}}
<div data-test-empty-tasks-list class="empty-message">
<h3
data-test-empty-tasks-list-headline
class="empty-message-headline"
>
No Tasks
</h3>
<p data-test-empty-tasks-list-body class="empty-message-body">
Allocations will not have tasks until they are in a running state.
</p>
</div>
{{/if}}
2018-07-25 22:05:24 +00:00
</div>
</div>
{{#if this.ports.length}}
<div class="boxed-section" data-test-allocation-ports>
<div class="boxed-section-head">
Ports
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{this.ports}} as |t|>
<t.head>
<th>
Name
</th>
<th>
Host Address
</th>
<th>
Mapped Port
</th>
</t.head>
<t.body as |row|>
<tr data-test-allocation-port>
<td data-test-allocation-port-name>
{{row.model.label}}
</td>
<td data-test-allocation-port-address>
<a
href="http://{{row.model.hostIp}}:{{row.model.value}}"
target="_blank"
rel="noopener noreferrer"
>
{{row.model.hostIp}}:{{row.model.value}}
</a>
</td>
<td data-test-allocation-port-to>
{{row.model.to}}
</td>
</tr>
</t.body>
</ListTable>
</div>
</div>
{{/if}}
{{#if this.services.length}}
<div class="boxed-section">
<div class="boxed-section-head">
Services
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{this.services}} as |t|>
<t.head>
<th class="is-2">
Name
</th>
<th class="is-1">
Port
</th>
<td>
Tags
</td>
<td>
On Update
</td>
<td>
Connect?
</td>
<td>
Upstreams
</td>
</t.head>
<t.body as |row|>
<tr data-test-service>
<td data-test-service-name>
{{row.model.name}}
</td>
<td data-test-service-port>
{{row.model.portLabel}}
</td>
<td data-test-service-tags class="is-long-text">
{{join ", " row.model.tags}}
</td>
<td data-test-service-onupdate>
{{row.model.onUpdate}}
</td>
<td data-test-service-connect>
{{if row.model.connect "Yes" "No"}}
</td>
<td data-test-service-upstreams>
{{#each
row.model.connect.sidecarService.proxy.upstreams as |upstream|
}}
{{upstream.destinationName}}:{{upstream.localBindPort}}
{{/each}}
</td>
</tr>
</t.body>
</ListTable>
</div>
</div>
{{/if}}
{{#if this.model.hasRescheduleEvents}}
2018-07-25 22:05:24 +00:00
<div class="boxed-section" data-test-reschedule-events>
<div class="boxed-section-head is-hollow">
Reschedule Events
</div>
<div class="boxed-section-body">
<RescheduleEventTimeline @allocation={{this.model}} />
</div>
2018-07-25 22:05:24 +00:00
</div>
{{/if}}
{{#if this.model.wasPreempted}}
<div class="boxed-section is-warning" data-test-was-preempted>
<div class="boxed-section-head">
Preempted By
</div>
<div class="boxed-section-body">
{{#if this.preempter}}
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="pair">
<span
data-test-allocation-status
class="tag {{this.preempter.statusClass}}"
>
{{this.preempter.clientStatus}}
</span>
</span>
<span class="pair">
<span class="term" data-test-allocation-name>
{{this.preempter.name}}
</span>
<LinkTo
@route="allocations.allocation"
@model={{this.preempter}}
data-test-allocation-id
>
{{this.preempter.shortId}}
</LinkTo>
</span>
<span class="pair job-link">
<span class="term">
Job
</span>
<LinkTo
@route="jobs.job"
@model={{this.preempter.job}}
data-test-job-link
>
{{this.preempter.job.name}}
</LinkTo>
</span>
<span class="pair job-priority">
<span class="term">
Priority
</span>
<span data-test-job-priority>
{{this.preempter.job.priority}}
</span>
</span>
<span class="pair node-link">
<span class="term">
Client
</span>
<LinkTo
@route="clients.client"
@model={{this.preempter.node}}
data-test-client-link
>
{{this.preempter.node.shortId}}
</LinkTo>
</span>
<span class="pair">
<span class="term">
Reserved CPU
</span>
<span data-test-allocation-cpu>
{{format-scheduled-hertz this.preempter.resources.cpu}}
</span>
</span>
<span class="pair">
<span class="term">
Reserved Memory
</span>
<span data-test-allocation-memory>
{{format-scheduled-bytes
this.preempter.resources.memory
start="MiB"
}}
</span>
</span>
</div>
</div>
{{else}}
<div class="empty-message">
<h3 class="empty-message-headline">
Allocation is gone
</h3>
<p class="empty-message-body">
This allocation has been stopped and
garbage collected.
</p>
</div>
{{/if}}
</div>
</div>
{{/if}}
{{#if
(and
this.model.preemptedAllocations.isFulfilled
this.model.preemptedAllocations.length
)
}}
<div class="boxed-section" data-test-preemptions>
<div class="boxed-section-head">
Preempted Allocations
</div>
<div class="boxed-section-body">
<ListTable
@source={{this.model.preemptedAllocations}}
@class="allocations is-isolated" as |t|
>
<t.head>
<th class="is-narrow"></th>
<th>
ID
</th>
<th>
Task Group
</th>
<th>
Created
</th>
<th>
Modified
</th>
<th>
Status
</th>
<th>
Version
</th>
<th>
Node
</th>
<th>
CPU
</th>
<th>
Memory
</th>
</t.head>
<t.body as |row|>
<AllocationRow
@allocation={{row.model}}
@context="job"
@data-test-allocation={{row.model.id}}
/>
</t.body>
</ListTable>
</div>
</div>
{{/if}}
</section>