open-nomad/ui/app/templates/jobs/job/index.hbs
Michael Lange 61b988fbb8 Gracefully handle the 501 case
Enterprise endpoints return a 501 in the open source build. 5xx
errors throw by default, so handle this one since it's expected
for things such as namespaces.
2017-10-11 14:06:46 -07:00

114 lines
4.5 KiB
Handlebars

{{#global-header class="page-header"}}
{{#each breadcrumbs as |breadcrumb|}}
<a href="{{href-to-spread breadcrumb.args}}" class="breadcrumb">{{breadcrumb.label}}</a>
{{/each}}
{{/global-header}}
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section">
<h1 class="title">
{{model.name}}
<span class="bumper-left tag {{model.statusClass}}">{{model.status}}</span>
{{#if model.periodic}}
<span class="tag is-hollow">periodic</span>
{{else if model.parameterized}}
<span class="tag is-hollow">parameterized</span>
{{/if}}
</h1>
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span><strong>Type:</strong> {{model.type}} | </span>
<span><strong>Priority:</strong> {{model.priority}} </span>
{{#if model.namespace}}
<span> | <strong>Namespace:</strong> {{model.namespace.name}}</span>
{{/if}}
</div>
</div>
<div class="boxed-section">
<div class="boxed-section-head">
<div>Allocation Status <span class="badge is-white">{{taskGroups.length}}</span></div>
</div>
<div class="boxed-section-body">
{{#allocation-status-bar allocationContainer=model class="split-view" as |chart|}}
<ol class="legend">
{{#each chart.data as |datum index|}}
<li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
<span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
<span class="value">{{datum.value}}</span>
<span class="label">
{{datum.label}}
</span>
</li>
{{/each}}
</ol>
{{/allocation-status-bar}}
</div>
</div>
{{#if model.runningDeployment}}
<div class="boxed-section is-info active-deployment">
<div class="boxed-section-head">
<div class="boxed-section-row">
Active Deployment
<span class="badge is-white is-subtle bumper-left">{{model.runningDeployment.shortId}}</span>
{{#if model.runningDeployment.version.submitTime}}
<span class="pull-right submit-time">{{moment-from-now model.runningDeployment.version.submitTime}}</span>
{{/if}}
</div>
<div class="boxed-section-row">
<span class="tag is-info is-outlined">Running</span>
{{#if model.runningDeployment.requiresPromotion}}
<span class="tag bumper-left is-warning no-text-transform">Deployment is running but requires promotion</span>
{{/if}}
</div>
</div>
<div class="boxed-section-body with-foot">
{{#job-deployment-details deployment=model.runningDeployment as |d|}}
{{d.metrics}}
{{#if isShowingDeploymentDetails}}
{{d.taskGroups}}
{{d.allocations}}
{{/if}}
{{/job-deployment-details}}
</div>
<div class="boxed-section-foot">
<a class="pull-right active-deployment-details-toggle" {{action (toggle "isShowingDeploymentDetails" this)}}>
{{if isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
</a>
</div>
</div>
{{/if}}
<div class="boxed-section">
<div class="boxed-section-head">
Task Groups
</div>
<div class="boxed-section-body is-full-bleed">
{{#list-pagination
source=sortedTaskGroups
sortProperty=sortProperty
sortDescending=sortDescending as |p|}}
{{#list-table
source=p.list
sortProperty=sortProperty
sortDescending=sortDescending as |t|}}
{{#t.head}}
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
{{#t.sort-by prop="count"}}Count{{/t.sort-by}}
{{#t.sort-by prop="queuedOrStartingAllocs" class="is-3"}}Allocation Status{{/t.sort-by}}
{{#t.sort-by prop="reservedCPU"}}Reserved CPU{{/t.sort-by}}
{{#t.sort-by prop="reservedMemory"}}Reserved Memory{{/t.sort-by}}
{{#t.sort-by prop="reservedEphemeralDisk"}}Reserved Disk{{/t.sort-by}}
{{/t.head}}
{{#t.body as |row|}}
{{task-group-row taskGroup=row.model onClick=(action "gotoTaskGroup" row.model)}}
{{/t.body}}
{{/list-table}}
{{/list-pagination}}
</div>
</div>
</section>
{{/gutter-menu}}