mirror of
https://github.com/kemko/nomad.git
synced 2026-01-05 09:55:44 +03:00
Fleshing out job page parts and differences
This commit is contained in:
Michael Lange
@@ -11,6 +11,7 @@ export default Component.extend({
|
||||
// Provide actions that require routing
|
||||
onNamespaceChange() {},
|
||||
gotoTaskGroup() {},
|
||||
gotoJob() {},
|
||||
|
||||
breadcrumbs: computed('job.{name,id}', function() {
|
||||
const job = this.get('job');
|
||||
|
||||
3
ui/app/components/job-page/batch.js
Normal file
3
ui/app/components/job-page/batch.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import AbstractJobPage from './abstract';
|
||||
|
||||
export default AbstractJobPage.extend();
|
||||
3
ui/app/components/job-page/parameterized-child.js
Normal file
3
ui/app/components/job-page/parameterized-child.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import AbstractJobPage from './abstract';
|
||||
|
||||
export default AbstractJobPage.extend();
|
||||
3
ui/app/components/job-page/parameterized.js
Normal file
3
ui/app/components/job-page/parameterized.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import AbstractJobPage from './abstract';
|
||||
|
||||
export default AbstractJobPage.extend();
|
||||
31
ui/app/components/job-page/parts/children.js
Normal file
31
ui/app/components/job-page/parts/children.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import Component from '@ember/component';
|
||||
import { computed } from '@ember/object';
|
||||
import { alias } from '@ember/object/computed';
|
||||
import Sortable from 'nomad-ui/mixins/sortable';
|
||||
|
||||
export default Component.extend(Sortable, {
|
||||
job: null,
|
||||
|
||||
classNames: ['boxed-section'],
|
||||
|
||||
// Provide a value that is bound to a query param
|
||||
sortProperty: null,
|
||||
sortDescending: null,
|
||||
currentPage: null,
|
||||
|
||||
// Provide an action with access to the router
|
||||
gotoJob() {},
|
||||
|
||||
pageSize: 10,
|
||||
|
||||
taskGroups: computed('job.taskGroups.[]', function() {
|
||||
return this.get('job.taskGroups') || [];
|
||||
}),
|
||||
|
||||
children: computed('job.children.[]', function() {
|
||||
return this.get('job.children') || [];
|
||||
}),
|
||||
|
||||
listToSort: alias('children'),
|
||||
sortedChildren: alias('listSorted'),
|
||||
});
|
||||
@@ -12,6 +12,7 @@ export default Component.extend(Sortable, {
|
||||
sortProperty: null,
|
||||
sortDescending: null,
|
||||
|
||||
// Provide an action with access to the router
|
||||
gotoTaskGroup() {},
|
||||
|
||||
taskGroups: computed('job.taskGroups.[]', function() {
|
||||
|
||||
3
ui/app/components/job-page/periodic-child.js
Normal file
3
ui/app/components/job-page/periodic-child.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import AbstractJobPage from './abstract';
|
||||
|
||||
export default AbstractJobPage.extend();
|
||||
3
ui/app/components/job-page/periodic.js
Normal file
3
ui/app/components/job-page/periodic.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import AbstractJobPage from './abstract';
|
||||
|
||||
export default AbstractJobPage.extend();
|
||||
@@ -1,11 +1,9 @@
|
||||
import { inject as service } from '@ember/service';
|
||||
import { alias } from '@ember/object/computed';
|
||||
import Controller, { inject as controller } from '@ember/controller';
|
||||
import { computed } from '@ember/object';
|
||||
import Sortable from 'nomad-ui/mixins/sortable';
|
||||
import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
|
||||
|
||||
export default Controller.extend(Sortable, WithNamespaceResetting, {
|
||||
export default Controller.extend(WithNamespaceResetting, {
|
||||
system: service(),
|
||||
jobController: controller('jobs.job'),
|
||||
|
||||
@@ -16,7 +14,6 @@ export default Controller.extend(Sortable, WithNamespaceResetting, {
|
||||
},
|
||||
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
|
||||
sortProperty: 'name',
|
||||
sortDescending: false,
|
||||
@@ -24,20 +21,15 @@ export default Controller.extend(Sortable, WithNamespaceResetting, {
|
||||
breadcrumbs: alias('jobController.breadcrumbs'),
|
||||
job: alias('model'),
|
||||
|
||||
taskGroups: computed('model.taskGroups.[]', function() {
|
||||
return this.get('model.taskGroups') || [];
|
||||
}),
|
||||
|
||||
listToSort: alias('taskGroups'),
|
||||
sortedTaskGroups: alias('listSorted'),
|
||||
|
||||
sortedEvaluations: computed('model.evaluations.@each.modifyIndex', function() {
|
||||
return (this.get('model.evaluations') || []).sortBy('modifyIndex').reverse();
|
||||
}),
|
||||
|
||||
actions: {
|
||||
gotoTaskGroup(taskGroup) {
|
||||
this.transitionToRoute('jobs.job.task-group', taskGroup.get('job'), taskGroup);
|
||||
},
|
||||
|
||||
gotoJob(job) {
|
||||
this.transitionToRoute('jobs.job', job, {
|
||||
queryParams: { jobNamespace: job.get('namespace.name') },
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,162 +1,8 @@
|
||||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to data-test-breadcrumb=breadcrumb.label params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
|
||||
{{partial "jobs/job/subnav"}}
|
||||
<section class="section">
|
||||
<h1 class="title">
|
||||
{{model.name}}
|
||||
<span class="bumper-left tag {{model.statusClass}}" data-test-job-status>{{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 data-test-job-stat="type"><strong>Type:</strong> {{model.type}} | </span>
|
||||
<span data-test-job-stat="priority"><strong>Priority:</strong> {{model.priority}} </span>
|
||||
{{#if (and model.namespace system.shouldShowNamespaces)}}
|
||||
<span data-test-job-stat="namespace"> | <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 data-test-allocations-legend 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" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
|
||||
<span class="label">
|
||||
{{datum.label}}
|
||||
</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/allocation-status-bar}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if model.hasPlacementFailures}}
|
||||
<div class="boxed-section is-danger" data-test-placement-failures>
|
||||
<div class="boxed-section-head">
|
||||
Placement Failures
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
{{#each model.taskGroups as |taskGroup|}}
|
||||
{{placement-failure taskGroup=taskGroup}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.runningDeployment}}
|
||||
<div class="boxed-section is-info" data-test-active-deployment>
|
||||
<div class="boxed-section-head">
|
||||
<div class="boxed-section-row">
|
||||
Active Deployment
|
||||
<span class="badge is-white is-subtle bumper-left" data-test-active-deployment-stat="id">{{model.runningDeployment.shortId}}</span>
|
||||
{{#if model.runningDeployment.version.submitTime}}
|
||||
<span class="pull-right submit-time" data-test-active-deployment-stat="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" {{action (toggle "isShowingDeploymentDetails" this)}} data-test-deployment-toggle-details>
|
||||
{{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 data-test-task-group taskGroup=row.model onClick=(action "gotoTaskGroup" row.model)}}
|
||||
{{/t.body}}
|
||||
{{/list-table}}
|
||||
{{/list-pagination}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Evaluations
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed evaluations">
|
||||
{{#list-table source=sortedEvaluations as |t|}}
|
||||
{{#t.head}}
|
||||
<th>ID</th>
|
||||
<th>Priority</th>
|
||||
<th>Triggered By</th>
|
||||
<th>Status</th>
|
||||
<th>Placement Failures</th>
|
||||
{{/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}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/gutter-menu}}
|
||||
{{component (concat "job-page/" model.templateType)
|
||||
job=model
|
||||
sortProperty=sortProperty
|
||||
sortDescending=sortDescending
|
||||
currentPage=currentPage
|
||||
onNamespaceChange=(action "gotoJobs")
|
||||
gotoJob=(action "gotoJob")
|
||||
gotoTaskGroup=(action "gotoTaskGroup")}}
|
||||
|
||||
Reference in New Issue
Block a user