-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI: Recent allocs + job allocs view #4529
Merged
Merged
Changes from all commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
81255be
Add createTime to the allocation model
DingoEatingFuzz 137fbcc
Remove the name column and add a created column to allocation rows
DingoEatingFuzz bc41b23
Make sure memory and cpu bars have a consistent size
DingoEatingFuzz 221881e
Add recent allocations to relevant job overview pages
DingoEatingFuzz d250b2a
New dedicated allocations page for jobs
DingoEatingFuzz 77e7d8e
Use the new taskGroup context for allocation row
DingoEatingFuzz 87c3aa2
Use the correct allocation row context in various places
DingoEatingFuzz ac972a6
Link to the allocations page from the recent allocations table
DingoEatingFuzz b128c05
Add search to the allocations page
DingoEatingFuzz e8a7d9d
Don't use the boxed-section pattern on pages with one section
DingoEatingFuzz 5fff8e1
Watch allocations on the job index page
DingoEatingFuzz f50aff5
Treat filtering on an async relationship as async
DingoEatingFuzz b14693f
Add object spread
DingoEatingFuzz a014860
Refactor allocations page as a component
DingoEatingFuzz f8504cb
Tests for the recent allocations table
DingoEatingFuzz 29fcece
Test coverage for the jobs/:job/allocations page
DingoEatingFuzz 32c321a
Keep the search box around when a search yields no results
DingoEatingFuzz File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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('[email protected]', 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); | ||
| }, | ||
| }, | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | ||
| }, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
ui/app/templates/components/job-page/parts/recent-allocations.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just about of interest, what's the reason for the PromiseArray? I'm guessing the allocations might not be loaded yet when you ask to sort them or something? If you have a sec would be good to get an understanding, no prob if not.
I had a quick look at some other sorting you are doing and none of them use this, are allocations different or is this something you are going to be moving to across the board?
P.S.(edit) Sorry funny the way GH does this, the preview from GH doesn't help here 😄 probably need to view a few lines up also for this to make sense!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually just noticed also, looks like job is an attribute on the component
(job="job")and then you are reaching up into the job to get the allocations. Just an offshoot, would an alternative beallocations={{job.allocations}}so you are sending the data down? Not sure if that is workable for you or notThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it isn't clear, the
PromiseArrayobject makes it so the returned value always has an array-like interface before and after the promise resolves.This isn't important elsewhere because
RecordArray(either fromstore.findAllormodel.get('asyncHasMany')are used in templates.Here, additional transformations need to happen (sortBy, reverse, slice).
If the promise isn't resolved yet, this breaks because it's not an array yet. Simply doing
this.get('job.allocations').then(allocations => allocations.transformations)also doesn't work because the computed property now returns a promise. The template can't do anything with the promise and the computed property doesn't update when the promise resolves.By using a PromiseArray, I can do the promise control flow while also ensuring an Array interface as well as a template re-render when the promise resolves.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I could use
allocations=job.allocations, and that may be better. Specifically because of the principle of least authority. I chose to usejob=jobto make all the variousjob-page/partscomponents feel similar.I don't think this violates data-down actions-up because it isn't reaching up into a higher viewer (e.g.,
allocations: alias('parentView.job.allocations')). Instead, a larger than necessary piece of data is being provided to the component and the component is reaching down in that data.I'm willing to talk about this more if you wish. I know it's pretty nuanced.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey, thanks for the further detail.
It's fine I'm not fussed, just thought I'd highlight a alternative approach if it helps. If you decide to go that route at some point and you want to chat then quite happy to, no prob if not.
Back to the PR - Ping me when you tweak the search thing so you can undo your search when there are no results, and I can give it another once over.
Thanks,