Use page-layout for job routes

This commit is contained in:
Michael Lange
2018-07-25 15:19:43 -07:00
parent cd3f8ab139
commit 7aeba8007e
12 changed files with 227 additions and 261 deletions

View File

@@ -1,6 +1,4 @@
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{yield}}
</section>
{{/gutter-menu}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{yield}}
</section>

View File

@@ -1,6 +1,3 @@
<div class="page-layout">
{{#global-header class="page-header"}}
{{app-breadcrumbs}}
{{/global-header}}
{{#page-layout}}
{{outlet}}
</div>
{{/page-layout}}

View File

@@ -1,60 +1,58 @@
{{#gutter-menu class="page-body"}}
<section class="section">
{{#if isForbidden}}
{{partial "partials/forbidden-message"}}
{{else}}
{{#if filteredJobs.length}}
<div class="content">
<div>{{search-box data-test-jobs-search searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
</div>
{{/if}}
{{#list-pagination
source=sortedJobs
size=pageSize
page=currentPage as |p|}}
{{#list-table
source=p.list
sortProperty=sortProperty
sortDescending=sortDescending
class="with-foot" as |t|}}
{{#t.head}}
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
{{#t.sort-by prop="status"}}Status{{/t.sort-by}}
{{#t.sort-by prop="type"}}Type{{/t.sort-by}}
{{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
<th>Groups</th>
<th class="is-3">Summary</th>
{{/t.head}}
{{#t.body key="model.id" as |row|}}
{{job-row data-test-job-row job=row.model onClick=(action "gotoJob" row.model)}}
{{/t.body}}
{{/list-table}}
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedJobs.length}}
{{#if searchTerm}}
<em>({{dec sortedJobs.length filteredJobs.length}} hidden by search term)</em>
{{/if}}
</div>
{{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
{{#p.next class="pagination-next"}} &gt; {{/p.next}}
<ul class="pagination-list"></ul>
</nav>
</div>
{{else}}
<div data-test-empty-jobs-list class="empty-message">
{{#if (eq filteredJobs.length 0)}}
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
<p class="empty-message-body">
The cluster is currently empty.
</p>
{{else if searchTerm}}
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
<p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
{{/if}}
</div>
{{/list-pagination}}
<section class="section">
{{#if isForbidden}}
{{partial "partials/forbidden-message"}}
{{else}}
{{#if filteredJobs.length}}
<div class="content">
<div>{{search-box data-test-jobs-search searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
</div>
{{/if}}
</section>
{{/gutter-menu}}
{{#list-pagination
source=sortedJobs
size=pageSize
page=currentPage as |p|}}
{{#list-table
source=p.list
sortProperty=sortProperty
sortDescending=sortDescending
class="with-foot" as |t|}}
{{#t.head}}
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
{{#t.sort-by prop="status"}}Status{{/t.sort-by}}
{{#t.sort-by prop="type"}}Type{{/t.sort-by}}
{{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
<th>Groups</th>
<th class="is-3">Summary</th>
{{/t.head}}
{{#t.body key="model.id" as |row|}}
{{job-row data-test-job-row job=row.model onClick=(action "gotoJob" row.model)}}
{{/t.body}}
{{/list-table}}
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedJobs.length}}
{{#if searchTerm}}
<em>({{dec sortedJobs.length filteredJobs.length}} hidden by search term)</em>
{{/if}}
</div>
{{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
{{#p.next class="pagination-next"}} &gt; {{/p.next}}
<ul class="pagination-list"></ul>
</nav>
</div>
{{else}}
<div data-test-empty-jobs-list class="empty-message">
{{#if (eq filteredJobs.length 0)}}
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
<p class="empty-message-body">
The cluster is currently empty.
</p>
{{else if searchTerm}}
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
<p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
{{/if}}
</div>
{{/list-pagination}}
{{/if}}
</section>

View File

@@ -1,10 +1,8 @@
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section">
<div class="boxed-section">
<div class="boxed-section-body is-dark">
{{json-viewer data-test-definition-view json=model.definition}}
</div>
{{partial "jobs/job/subnav"}}
<section class="section">
<div class="boxed-section">
<div class="boxed-section-body is-dark">
{{json-viewer data-test-definition-view json=model.definition}}
</div>
</section>
{{/gutter-menu}}
</div>
</section>

View File

@@ -1,6 +1,4 @@
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{job-deployments-stream deployments=model.deployments}}
</section>
{{/gutter-menu}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{job-deployments-stream deployments=model.deployments}}
</section>

View File

@@ -1,49 +1,46 @@
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section">
<div class="boxed-section">
<div class="boxed-section-head">
Evaluations
</div>
<div class="boxed-section-body {{if sortedEvaluations.length "is-full-bleed"}}">
{{#if sortedEvaluations.length}}
{{#list-table
source=sortedEvaluations
sortProperty=sortProperty
sortDescending=sortDescending as |t|}}
{{#t.head}}
<th>ID</th>
{{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
{{#t.sort-by prop="triggeredBy"}}Triggered By{{/t.sort-by}}
{{#t.sort-by prop="status"}}Status{{/t.sort-by}}
{{#t.sort-by prop="hasPlacementFailures"}}Placement Failures{{/t.sort-by}}
{{/t.head}}
{{#t.body as |row|}}
<tr data-test-evaluation="{{row.model.shortId}}">
<td data-test-id>{{row.model.shortId}}</td>
<td data-test-priority>{{row.model.priority}}</td>
<td data-test-triggered-by>{{row.model.triggeredBy}}</td>
<td data-test-status>{{row.model.status}}</td>
<td data-test-blocked>
{{#if (eq row.model.status "blocked")}}
N/A - In Progress
{{else if row.model.hasPlacementFailures}}
True
{{else}}
False
{{/if}}
</td>
</tr>
{{/t.body}}
{{/list-table}}
{{else}}
<div data-test-empty-evaluations-list class="empty-message">
<h3 data-test-empty-evaluations-list-headline class="empty-message-headline">No Evaluations</h3>
<p class="empty-message-body">This is most likely due to garbage collection.</p>
</div>
{{/if}}
{{partial "jobs/job/subnav"}}
<section class="section">
<div class="boxed-section">
<div class="boxed-section-head">
Evaluations
</div>
</div>
</section>
{{/gutter-menu}}
<div class="boxed-section-body {{if sortedEvaluations.length "is-full-bleed"}}">
{{#if sortedEvaluations.length}}
{{#list-table
source=sortedEvaluations
sortProperty=sortProperty
sortDescending=sortDescending as |t|}}
{{#t.head}}
<th>ID</th>
{{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
{{#t.sort-by prop="triggeredBy"}}Triggered By{{/t.sort-by}}
{{#t.sort-by prop="status"}}Status{{/t.sort-by}}
{{#t.sort-by prop="hasPlacementFailures"}}Placement Failures{{/t.sort-by}}
{{/t.head}}
{{#t.body as |row|}}
<tr data-test-evaluation="{{row.model.shortId}}">
<td data-test-id>{{row.model.shortId}}</td>
<td data-test-priority>{{row.model.priority}}</td>
<td data-test-triggered-by>{{row.model.triggeredBy}}</td>
<td data-test-status>{{row.model.status}}</td>
<td data-test-blocked>
{{#if (eq row.model.status "blocked")}}
N/A - In Progress
{{else if row.model.hasPlacementFailures}}
True
{{else}}
False
{{/if}}
</td>
</tr>
{{/t.body}}
{{/list-table}}
{{else}}
<div data-test-empty-evaluations-list class="empty-message">
<h3 data-test-empty-evaluations-list-headline class="empty-message-headline">No Evaluations</h3>
<p class="empty-message-body">This is most likely due to garbage collection.</p>
</div>
{{/if}}
</div>
</div>
</section>

View File

@@ -1,4 +1,2 @@
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
{{/gutter-menu}}
{{partial "jobs/job/subnav"}}
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>

View File

@@ -1,109 +1,107 @@
{{#gutter-menu class="page-body"}}
<div class="tabs is-subnav">
<ul>
<li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>
</ul>
<div class="tabs is-subnav">
<ul>
<li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>
</ul>
</div>
<section class="section">
<h1 class="title">
{{model.name}}
</h1>
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="label">Task Group Details</span>
<span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{model.tasks.length}}</span>
<span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
<span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
<span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
</div>
</div>
<section class="section">
<h1 class="title">
{{model.name}}
</h1>
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="label">Task Group Details</span>
<span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{model.tasks.length}}</span>
<span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
<span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
<span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
</div>
<div class="boxed-section">
<div class="boxed-section-head">
<div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
</div>
<div class="boxed-section">
<div class="boxed-section-head">
<div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
</div>
<div class="boxed-section-body">
{{#allocation-status-bar allocationContainer=model.summary 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 class="boxed-section-body">
{{#allocation-status-bar allocationContainer=model.summary 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>
<div class="boxed-section">
<div class="boxed-section-head">
Allocations
{{search-box
searchTerm=(mut searchTerm)
placeholder="Search allocations..."
class="is-inline pull-right"
inputClass="is-compact"}}
</div>
<div class="boxed-section-body is-full-bleed">
{{#list-pagination
source=sortedAllocations
size=pageSize
page=currentPage
class="allocations" as |p|}}
{{#list-table
source=p.list
sortProperty=sortProperty
sortDescending=sortDescending
class="with-foot" as |t|}}
{{#t.head}}
<th class="is-narrow"></th>
{{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
{{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
{{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
{{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
{{#t.sort-by prop="node.shortId"}}Client{{/t.sort-by}}
<th>CPU</th>
<th>Memory</th>
{{/t.head}}
{{#t.body as |row|}}
{{allocation-row data-test-allocation=row.model.id allocation=row.model context="job" onClick=(action "gotoAllocation" row.model)}}
{{/t.body}}
{{/list-table}}
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
</div>
{{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
{{#p.next class="pagination-next"}} &gt; {{/p.next}}
<ul class="pagination-list"></ul>
</nav>
<div class="boxed-section">
<div class="boxed-section-head">
Allocations
{{search-box
searchTerm=(mut searchTerm)
placeholder="Search allocations..."
class="is-inline pull-right"
inputClass="is-compact"}}
</div>
<div class="boxed-section-body is-full-bleed">
{{#list-pagination
source=sortedAllocations
size=pageSize
page=currentPage
class="allocations" as |p|}}
{{#list-table
source=p.list
sortProperty=sortProperty
sortDescending=sortDescending
class="with-foot" as |t|}}
{{#t.head}}
<th class="is-narrow"></th>
{{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
{{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
{{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
{{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
{{#t.sort-by prop="node.shortId"}}Client{{/t.sort-by}}
<th>CPU</th>
<th>Memory</th>
{{/t.head}}
{{#t.body as |row|}}
{{allocation-row data-test-allocation=row.model.id allocation=row.model context="job" onClick=(action "gotoAllocation" row.model)}}
{{/t.body}}
{{/list-table}}
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
</div>
{{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
{{#p.next class="pagination-next"}} &gt; {{/p.next}}
<ul class="pagination-list"></ul>
</nav>
</div>
{{else}}
{{#if allocations.length}}
<div class="boxed-section-body">
<div class="empty-message" data-test-empty-allocations-list>
<h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
<p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
</div>
</div>
{{else}}
{{#if allocations.length}}
<div class="boxed-section-body">
<div class="empty-message" data-test-empty-allocations-list>
<h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
<p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
</div>
<div class="boxed-section-body">
<div class="empty-message" data-test-empty-allocations-list>
<h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
<p class="empty-message-body">No allocations have been placed.</p>
</div>
{{else}}
<div class="boxed-section-body">
<div class="empty-message" data-test-empty-allocations-list>
<h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
<p class="empty-message-body">No allocations have been placed.</p>
</div>
</div>
{{/if}}
{{/list-pagination}}
</div>
</div>
{{/if}}
{{/list-pagination}}
</div>
</section>
{{/gutter-menu}}
</div>
</section>

View File

@@ -1,6 +1,4 @@
{{#gutter-menu class="page-body"}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{job-versions-stream versions=model.versions verbose=true}}
</section>
{{/gutter-menu}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{job-versions-stream versions=model.versions verbose=true}}
</section>

View File

@@ -1,6 +1 @@
{{#global-header class="page-header"}}
{{app-breadcrumbs}}
{{/global-header}}
{{#gutter-menu class="page-body"}}
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
{{/gutter-menu}}
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>

View File

@@ -1,8 +1,3 @@
<div class="page-layout">
{{#global-header class="page-header"}}
{{app-breadcrumbs}}
{{/global-header}}
{{#gutter-menu class="page-body"}}
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
{{/gutter-menu}}
</div>
{{#page-layout}}
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
{{/page-layout}}

View File

@@ -97,10 +97,6 @@ test('body yields content to a section after the subnav', function(assert) {
`);
return wait().then(() => {
assert.ok(
find('[data-test-page-content] .section > .inner-content'),
'Content is rendered in a section in a gutter menu'
);
assert.ok(
find('[data-test-subnav="job"] + .section > .inner-content'),
'Content is rendered immediately after the subnav'