Files
nomad/ui/app/templates/allocations/allocation/task/index.hbs
Phil Renaud 932c3ebfb0 [ui] Adds meta k/v tables to Task Group and Task pages (#24594)
* Experimenting with a generic meta job-part component

* Taskstate.task gets me every time

* continue-on-error false test

* continue-on-error back in, but explicit success check after exam

* Testfixes for new meta structure on tasks and groups

* Clean up test and dev code
2024-12-17 10:46:03 -05:00

296 lines
9.6 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
{{page-title "Task " this.model.name}}
<TaskSubnav @task={{this.model}} />
<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}}
<Hds::PageHeader class="job-page-header" as |PH|>
<PH.Title data-test-title>
{{this.model.name}}
{{#if this.model.isConnectProxy}}
<ProxyTag @class="bumper-left" />
{{/if}}
<span
class="{{unless this.model.isConnectProxy "bumper-left"}}
tag
{{this.model.stateClass}}"
data-test-state
>
{{this.model.state}}
</span>
</PH.Title>
<PH.Actions>
{{#if this.model.isRunning}}
{{#if this.shouldShowActions}}
<ActionsDropdown
@actions={{this.model.task.actions}}
@allocation={{this.model.allocation}}
/>
{{/if}}
<div class="two-step-button">
<Exec::OpenButton
@job={{this.model.task.taskGroup.job}}
@taskGroup={{this.model.task.taskGroup}}
@allocation={{this.model.allocation}}
@task={{this.model.task}}
/>
</div>
<TwoStepButton
data-test-restart
@alignRight={{true}}
@idleText="Restart Task"
@cancelText="Cancel"
@confirmText="Yes, Restart Task"
@confirmationMessage="Are you sure? This will restart the task in-place."
@awaitingConfirmation={{this.restartTask.isRunning}}
@disabled={{this.restartTask.isRunning}}
@onConfirm={{perform this.restartTask}}
/>
{{/if}}
</PH.Actions>
</Hds::PageHeader>
{{#if this.model.task.schedule}}
<Hds::Alert @type="inline" @icon="delay" @color="highlight" class="time-based-alert" as |A|>
{{#if (eq this.model.paused '')}}
<A.Title>This task is currently running on schedule</A.Title>
<A.Description>This task is running as per the defined schedule.</A.Description>
<A.Button @text="Force Pause" @color="secondary" {{on "click" (perform this.forcePause)}} />
<A.Button @text="Remove from Schedule" @color="secondary" {{on "click" (perform this.forceRun)}} />
{{else if (eq this.model.paused 'scheduled_pause')}}
<A.Title>This task is currently paused on schedule</A.Title>
<A.Description>This task is paused and will resume on the next scheduled run.</A.Description>
<A.Button @text="Force Run" @color="secondary" {{on "click" (perform this.forceRun)}} />
<A.Button @text="Remove from Schedule" @color="secondary" {{on "click" (perform this.forcePause)}} />
{{else if (eq this.model.paused 'force_pause')}}
<A.Title>This task is manually paused</A.Title>
<A.Description>This task has been paused manually and is not following the schedule.</A.Description>
<A.Button @text="Force Run" @color="secondary" {{on "click" (perform this.forceRun)}} />
<A.Button @text="Put Back on Schedule" @color="secondary" {{on "click" (perform this.reEnableSchedule)}} />
{{else if (eq this.model.paused 'force_run')}}
<A.Title>This task is manually running</A.Title>
<A.Description>This task is running manually and is not following the schedule.</A.Description>
<A.Button @text="Force Pause" @color="secondary" {{on "click" (perform this.forcePause)}} />
<A.Button @text="Put Back on Schedule" @color="secondary" {{on "click" (perform this.reEnableSchedule)}} />
{{/if}}
<A.Generic>
<Hds::CodeBlock @value={{stringify-object this.model.task.schedule.cron}} @hasLineNumbers={{false}} @language="hcl" />
</A.Generic>
</Hds::Alert>
<Hds::Separator />
{{/if}}
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="label">
Task Details
</span>
<span class="pair" data-test-started-at>
<span class="term">
Started At
</span>
{{format-ts this.model.startedAt}}
</span>
{{#if this.model.finishedAt}}
<span class="pair">
<span class="term">
Finished At
</span>
{{format-ts this.model.finishedAt}}
</span>
{{/if}}
<span class="pair">
<span class="term">
Driver
</span>
{{this.model.task.driver}}
</span>
<span class="pair">
<span class="term">
Lifecycle
</span>
<span data-test-lifecycle>
{{this.model.task.lifecycleName}}
</span>
</span>
<span class="pair">
<span class="term">
Namespace
</span>
<span>
{{this.model.allocation.job.namespace.name}}
</span>
</span>
{{#if (and (can "list variables") this.model.task.pathLinkedVariable)}}
<span class="pair" data-test-task-stat="variables">
<LinkTo @route="variables.variable" @model={{this.model.task.pathLinkedVariable.id}}>Variables</LinkTo>
</span>
{{/if}}
</div>
</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::Task @taskState={{this.model}} @metric="cpu" />
</div>
<div class="column">
<PrimaryMetric::Task @taskState={{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">
Task isn't running
</h3>
<p class="empty-message-body">
Only running tasks utilize resources.
</p>
</div>
{{/if}}
</div>
</div>
{{#if this.model.task.volumeMounts.length}}
<div data-test-volumes class="boxed-section">
<div class="boxed-section-head">
Volumes
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{this.model.task.volumeMounts}} as |t|>
<t.head>
<th>
Name
</th>
<th>
Destination
</th>
<th>
Permissions
</th>
<th>
Client Source
</th>
</t.head>
<t.body as |row|>
<tr data-test-volume>
<td data-test-volume-name>
{{row.model.volume}}
</td>
<td data-test-volume-destination>
<code>
{{row.model.destination}}
</code>
</td>
<td data-test-volume-permissions>
{{if row.model.readOnly "Read" "Read/Write"}}
</td>
<td data-test-volume-client-source>
{{#if row.model.isCSI}}
<LinkTo
@route="csi.volumes.volume"
@model={{concat
(format-volume-name
source=row.model.source
isPerAlloc=row.model.volumeDeclaration.perAlloc
volumeExtension=this.model.allocation.volumeExtension)
"@"
row.model.namespace.id
}}
>
{{format-volume-name
source=row.model.source
isPerAlloc=row.model.volumeDeclaration.perAlloc
volumeExtension=this.model.allocation.volumeExtension}}
</LinkTo>
{{else}}
{{row.model.source}}
{{/if}}
</td>
</tr>
</t.body>
</ListTable>
</div>
</div>
{{/if}}
<div class="boxed-section">
<div class="boxed-section-head">
Recent Events
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable
@source={{reverse this.model.events}}
@class="is-striped recent-events-table" as |t|
>
<t.head>
<th class="is-3">
Time
</th>
<th class="is-1">
Type
</th>
<th>
Description
</th>
</t.head>
<t.body as |row|>
<tr data-test-task-event>
<td data-test-task-event-time>
{{format-ts row.model.time}}
</td>
<td data-test-task-event-type>
{{row.model.type}}
</td>
<td data-test-task-event-message>
{{#if row.model.message}}
{{row.model.message}}
{{else}}
<em>
No message
</em>
{{/if}}
</td>
</tr>
</t.body>
</ListTable>
</div>
</div>
{{#if this.model.task.meta}}
<JobPage::Parts::Meta
@meta={{this.model.task.meta}}
/>
{{/if}}
</section>