Skip to content

Commit

Permalink
Merge pull request #4529 from hashicorp/f-ui-job-overview-allocs
Browse files Browse the repository at this point in the history
UI: Recent allocs + job allocs view
  • Loading branch information
DingoEatingFuzz committed Aug 6, 2018
2 parents 11bc25b + 32c321a commit 561d0b9
Show file tree
Hide file tree
Showing 38 changed files with 616 additions and 111 deletions.
3 changes: 3 additions & 0 deletions ui/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ module.exports = {
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
rules: {
indent: ['error', 2, { SwitchCase: 1 }],
Expand Down
24 changes: 24 additions & 0 deletions ui/app/components/job-page/parts/recent-allocations.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Component from '@ember/component';
import { computed } from '@ember/object';
import PromiseArray from 'nomad-ui/utils/classes/promise-array';

export default Component.extend({
sortProperty: 'modifyIndex',
sortDescending: true,
sortedAllocations: computed('job.allocations.@each.modifyIndex', function() {
return new PromiseArray({
promise: this.get('job.allocations').then(allocations =>
allocations
.sortBy('modifyIndex')
.reverse()
.slice(0, 5)
),
});
}),

actions: {
gotoAllocation(allocation) {
this.transitionToRoute('allocations.allocation', allocation);
},
},
});
39 changes: 39 additions & 0 deletions ui/app/controllers/jobs/job/allocations.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { alias } from '@ember/object/computed';
import Controller from '@ember/controller';
import { computed } from '@ember/object';
import Sortable from 'nomad-ui/mixins/sortable';
import Searchable from 'nomad-ui/mixins/searchable';
import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';

export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
queryParams: {
currentPage: 'page',
searchTerm: 'search',
sortProperty: 'sort',
sortDescending: 'desc',
},

currentPage: 1,
pageSize: 25,

sortProperty: 'modifyIndex',
sortDescending: true,

job: alias('model'),

searchProps: computed(() => ['shortId', 'name', 'taskGroupName']),

allocations: computed('model.allocations.[]', function() {
return this.get('model.allocations') || [];
}),

listToSort: alias('allocations'),
listToSearch: alias('listSorted'),
sortedAllocations: alias('listSearched'),

actions: {
gotoAllocation(allocation) {
this.transitionToRoute('allocations.allocation', allocation);
},
},
});
6 changes: 5 additions & 1 deletion ui/app/models/allocation.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,13 @@ export default Model.extend({
name: attr('string'),
taskGroupName: attr('string'),
resources: fragment('resources'),
jobVersion: attr('number'),

modifyIndex: attr('number'),
modifyTime: attr('date'),
jobVersion: attr('number'),

createIndex: attr('number'),
createTime: attr('date'),

clientStatus: attr('string'),
desiredStatus: attr('string'),
Expand Down
1 change: 1 addition & 0 deletions ui/app/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Router.map(function() {
this.route('versions');
this.route('deployments');
this.route('evaluations');
this.route('allocations');
});
});

Expand Down
19 changes: 19 additions & 0 deletions ui/app/routes/jobs/job/allocations.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Route from '@ember/routing/route';
import { collect } from '@ember/object/computed';
import { watchRelationship } from 'nomad-ui/utils/properties/watch';
import WithWatchers from 'nomad-ui/mixins/with-watchers';

export default Route.extend(WithWatchers, {
model() {
const job = this.modelFor('jobs.job');
return job.get('allocations').then(() => job);
},

startWatchers(controller, model) {
controller.set('watchAllocations', this.get('watchAllocations').perform(model));
},

watchAllocations: watchRelationship('allocations'),

watchers: collect('watchAllocations'),
});
3 changes: 3 additions & 0 deletions ui/app/routes/jobs/job/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export default Route.extend(WithWatchers, {
controller.set('watchers', {
model: this.get('watch').perform(model),
summary: this.get('watchSummary').perform(model.get('summary')),
allocations: this.get('watchAllocations').perform(model),
evaluations: this.get('watchEvaluations').perform(model),
latestDeployment:
model.get('supportsDeployments') && this.get('watchLatestDeployment').perform(model),
Expand All @@ -21,13 +22,15 @@ export default Route.extend(WithWatchers, {
watch: watchRecord('job'),
watchAll: watchAll('job'),
watchSummary: watchRecord('job-summary'),
watchAllocations: watchRelationship('allocations'),
watchEvaluations: watchRelationship('evaluations'),
watchLatestDeployment: watchRelationship('latestDeployment'),

watchers: collect(
'watch',
'watchAll',
'watchSummary',
'watchAllocations',
'watchEvaluations',
'watchLatestDeployment'
),
Expand Down
3 changes: 3 additions & 0 deletions ui/app/serializers/allocation.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ export default ApplicationSerializer.extend({
hash.ModifyTimeNanos = hash.ModifyTime % 1000000;
hash.ModifyTime = Math.floor(hash.ModifyTime / 1000000);

hash.CreateTimeNanos = hash.CreateTime % 1000000;
hash.CreateTime = Math.floor(hash.CreateTime / 1000000);

hash.RescheduleEvents = (hash.RescheduleTracker || {}).Events;

// API returns empty strings instead of null
Expand Down
10 changes: 7 additions & 3 deletions ui/app/styles/charts.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@import "./charts/distribution-bar";
@import "./charts/tooltip";
@import "./charts/colors";
@import './charts/distribution-bar';
@import './charts/tooltip';
@import './charts/colors';

.inline-chart {
height: 1.5rem;
display: flex;
align-items: center;

&.is-small {
width: 50px;
}
}

// Patterns are templates referenced by other SVG fill properties.
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/clients/client.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
<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="createIndex" title="Create Index"}}Created{{/t.sort-by}}
{{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
{{#t.sort-by prop="job.name"}}Job{{/t.sort-by}}
{{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
Expand Down
23 changes: 15 additions & 8 deletions ui/app/templates/components/allocation-row.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,19 @@
{{allocation.shortId}}
{{/link-to}}
</td>
<td data-test-modify-time>{{moment-format allocation.modifyTime "MM/DD HH:mm:ss"}}</td>
<td data-test-name>{{allocation.name}}</td>
{{#if (eq context "job")}}
<td data-test-task-group>
{{#link-to "jobs.job.task-group" allocation.job allocation.taskGroupName (query-params jobNamespace=allocation.job.namespace.id)}}
{{allocation.taskGroupName}}
{{/link-to}}
</td>
{{/if}}
<td data-test-create-time>{{moment-format allocation.createTime "MM/DD HH:mm:ss"}}</td>
<td data-test-modify-time>{{moment-from-now allocation.modifyTime}}</td>
<td data-test-client-status class="is-one-line">
<span class="color-swatch {{allocation.clientStatus}}" /> {{allocation.clientStatus}}
</td>
{{#if (eq context "job")}}
{{#if (or (eq context "taskGroup") (eq context "job"))}}
<td data-test-job-version>{{allocation.jobVersion}}</td>
<td data-test-client>{{#link-to "clients.client" allocation.node}}{{allocation.node.shortId}}{{/link-to}}</td>
{{else if (eq context "node")}}
Expand All @@ -32,9 +39,9 @@
<span class="is-faded" data-test-task-group>/ {{allocation.taskGroup.name}}</span>
{{/if}}
</td>
<td data-test-job-version>{{allocation.jobVersion}}</td>
<td data-test-job-version class="is-1">{{allocation.jobVersion}}</td>
{{/if}}
<td data-test-cpu class="has-text-centered">
<td data-test-cpu class="is-1 has-text-centered">
{{#if (and (not stats) fetchStats.isRunning)}}
...
{{else if (not allocation)}}
Expand All @@ -44,7 +51,7 @@
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart tooltip" aria-label="{{stats.cpuUsed}} / {{stats.reservedCPU}} MHz">
<div class="inline-chart is-small tooltip" aria-label="{{stats.cpuUsed}} / {{stats.reservedCPU}} MHz">
<progress
class="progress is-info is-small"
value="{{stats.percentCPU}}"
Expand All @@ -54,13 +61,13 @@
</div>
{{/if}}
</td>
<td data-test-mem class="has-text-centered">
<td data-test-mem class="is-1 has-text-centered">
{{#if (and (not stats) fetchStats.isRunning)}}
...
{{else if (not allocation)}}
{{! nothing when there's no allocation}}
{{else if statsError}}
<span class="tooltip text-center" aria-label="Couldn't collect stats">
<span class="tooltip is-small text-center" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
{{#t.head}}
<th class="is-narrow"></th>
<th>ID</th>
<th>Task Group</th>
<th>Created</th>
<th>Modified</th>
<th>Name</th>
<th>Status</th>
<th>Version</th>
<th>Node</th>
Expand Down
2 changes: 2 additions & 0 deletions ui/app/templates/components/job-page/batch.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,6 @@
sortProperty=sortProperty
sortDescending=sortDescending
gotoTaskGroup=gotoTaskGroup}}

{{job-page/parts/recent-allocations job=job}}
{{/job-page/parts/body}}
2 changes: 2 additions & 0 deletions ui/app/templates/components/job-page/parameterized-child.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
sortDescending=sortDescending
gotoTaskGroup=gotoTaskGroup}}

{{job-page/parts/recent-allocations job=job}}

<div class="boxed-section">
<div class="boxed-section-head">Payload</div>
<div class="boxed-section-body is-dark">
Expand Down
46 changes: 46 additions & 0 deletions ui/app/templates/components/job-page/parts/recent-allocations.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<div class="boxed-section">
<div class="boxed-section-head">
Recent Allocations
</div>
<div class="boxed-section-body is-full-bleed">
{{#if job.allocations.length}}
{{#list-table
source=sortedAllocations
sortProperty=sortProperty
sortDescending=sortDescending
class="with-foot" 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>Client</th>
<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}}
{{else}}
<div class="empty-message" data-test-empty-recent-allocations>
<h3 class="empty-message-headline" data-test-empty-recent-allocations-headline>No Allocations</h3>
<p class="empty-message-body" data-test-empty-recent-allocations-message>No allocations have been placed.</p>
</div>
{{/if}}
</div>
{{#if job.allocations.length}}
<div class="boxed-section-foot">
<p class="pull-right" data-test-view-all-allocations>{{#link-to "jobs.job.allocations" job}}
View all {{job.allocations.length}} {{pluralize "allocation" job.allocations.length}}
{{/link-to}}</p>
</div>
{{/if}}
</div>
2 changes: 2 additions & 0 deletions ui/app/templates/components/job-page/periodic-child.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,6 @@
sortProperty=sortProperty
sortDescending=sortDescending
gotoTaskGroup=gotoTaskGroup}}

{{job-page/parts/recent-allocations job=job}}
{{/job-page/parts/body}}
2 changes: 2 additions & 0 deletions ui/app/templates/components/job-page/service.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,6 @@
sortProperty=sortProperty
sortDescending=sortDescending
gotoTaskGroup=gotoTaskGroup}}

{{job-page/parts/recent-allocations job=job}}
{{/job-page/parts/body}}
2 changes: 2 additions & 0 deletions ui/app/templates/components/job-page/system.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,6 @@
sortProperty=sortProperty
sortDescending=sortDescending
gotoTaskGroup=gotoTaskGroup}}

{{job-page/parts/recent-allocations job=job}}
{{/job-page/parts/body}}
Loading

0 comments on commit 561d0b9

Please sign in to comment.