New dedicated allocations page for jobs

ui/app/controllers/jobs/job/allocations.js

@@ -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']),
+
+  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);
+    },
+  },
+});

ui/app/router.js

@@ -14,6 +14,7 @@ Router.map(function() {
       this.route('versions');
       this.route('deployments');
       this.route('evaluations');
+      this.route('allocations');
     });
   });
 

ui/app/routes/jobs/job/allocations.js

@@ -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'),
+});

ui/app/templates/jobs/job/allocations.hbs

@@ -0,0 +1,65 @@
+{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
+  {{partial "jobs/job/subnav"}}
+  <section class="section">
+    <div class="boxed-section">
+      <div class="boxed-section-head">
+        Allocations
+      </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="createIndex" title="Create Index"}}Created{{/t.sort-by}}
+              {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/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}}
+            <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>
+  </section>
+{{/gutter-menu}}
+

ui/app/templates/jobs/job/subnav.hbs

@@ -6,6 +6,7 @@
     {{#if job.supportsDeployments}}
       <li data-test-tab="deployments">{{#link-to "jobs.job.deployments" job activeClass="is-active"}}Deployments{{/link-to}}</li>
     {{/if}}
+    <li data-test-tab="allocations">{{#link-to "jobs.job.allocations" job activeClass="is-active"}}Allocations{{/link-to}}</li>
     <li data-test-tab="evaluations">{{#link-to "jobs.job.evaluations" job activeClass="is-active"}}Evaluations{{/link-to}}</li>
   </ul>
 </div>