add refreshModel to namespace query param

ui/app/components/list-table/sort-by.js

@@ -29,4 +29,14 @@ export default class SortBy extends Component {
   get shouldSortDescending() {
     return !this.isActive || !this.sortDescending;
   }
+
+  @computed('addToQuery', 'prop', 'shouldSortDescending')
+  get query() {
+    const addToQuery = this.addToQuery || {};
+    return {
+      sortProperty: this.prop,
+      sortDescending: this.shouldSortDescending,
+      ...addToQuery,
+    };
+  }
 }

ui/app/components/search-box.js

@@ -36,5 +36,5 @@ export default class SearchBox extends Component {
 function updateSearch() {
   const newTerm = this._searchTerm;
   this.onChange(newTerm);
-  this.set('searchTerm', newTerm);
+  this.setProperties({ searchTerm: newTerm, namespace: this._target.job.namespace.get('id') });
 }

ui/app/controllers/jobs/job.js

@@ -1,10 +1,12 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 
 export default class JobController extends Controller {
   queryParams = [
     {
       jobNamespace: 'namespace',
     },
   ];
-  jobNamespace = 'default';
+
+  @tracked jobNamespace = 'default';
 }

ui/app/templates/components/list-table.hbs

@@ -1,8 +1,9 @@
-{{yield (hash
-  head=(component "list-table/table-head")
-  body=(component "list-table/table-body" rows=this.decoratedSource)
-  sort-by=(component "list-table/sort-by"
-    currentProp=this.sortProperty
-    sortDescending=this.sortDescending
+{{yield
+  (hash
+    head=(component "list-table/table-head")
+    body=(component "list-table/table-body" rows=this.decoratedSource)
+    sort-by=(component
+      "list-table/sort-by" currentProp=this.sortProperty sortDescending=this.sortDescending
+    )
   )
-)}}
+}}

ui/app/templates/components/list-table/sort-by.hbs

@@ -1,5 +1,3 @@
-<LinkTo
-  @query={{hash sortProperty=this.prop sortDescending=this.shouldSortDescending}}
-  data-test-sort-by={{this.prop}}>
+<LinkTo class="is-selectable" @query={{this.query}} data-test-sort-by={{this.prop}}>
   {{yield}}
-</LinkTo>
+</LinkTo>

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

@@ -8,66 +8,118 @@
           data-test-allocations-search
           @searchTerm={{mut this.searchTerm}}
           @onChange={{action this.resetPagination}}
-          @placeholder="Search allocations..." />
+          @placeholder="Search allocations..."
+        />
       </div>
     </div>
     {{#if this.sortedAllocations}}
       <ListPagination
         @source={{this.sortedAllocations}}
         @size={{this.pageSize}}
         @page={{this.currentPage}}
-        @class="allocations" as |p|>
+        @class="allocations" as |p|
+      >
         <ListTable
           @source={{p.list}}
           @sortProperty={{this.sortProperty}}
           @sortDescending={{this.sortDescending}}
-          @class="with-foot" as |t|>
+          @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="taskGroupName">Task Group</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>Volume</th>
-            <th>CPU</th>
-            <th>Memory</th>
+            <t.sort-by @addToQuery={{hash jobNamespace=this.job.namespace.id}} @prop="shortId">
+              ID
+            </t.sort-by>
+            <t.sort-by
+              @addToQuery={{hash jobNamespace=this.job.namespace.id}}
+              @prop="taskGroupName"
+            >
+              Task Group
+            </t.sort-by>
+            <t.sort-by
+              @addToQuery={{hash jobNamespace=this.job.namespace.id}}
+              @prop="createIndex"
+              @title="Create Index"
+            >
+              Created
+            </t.sort-by>
+            <t.sort-by
+              @addToQuery={{hash jobNamespace=this.job.namespace.id}}
+              @prop="modifyIndex"
+              @title="Modify Index"
+            >
+              Modified
+            </t.sort-by>
+            <t.sort-by @addToQuery={{hash jobNamespace=this.job.namespace.id}} @prop="statusIndex">
+              Status
+            </t.sort-by>
+            <t.sort-by @addToQuery={{hash jobNamespace=this.job.namespace.id}} @prop="jobVersion">
+              Version
+            </t.sort-by>
+            <t.sort-by @addToQuery={{hash jobNamespace=this.job.namespace.id}} @prop="node.shortId">
+              Client
+            </t.sort-by>
+            <th>
+              Volume
+            </th>
+            <th>
+              CPU
+            </th>
+            <th>
+              Memory
+            </th>
           </t.head>
           <t.body as |row|>
             <AllocationRow
               @data-test-allocation={{row.model.id}}
               @allocation={{row.model}}
               @context="job"
-              @onClick={{action "gotoAllocation" row.model}} />
+              @onClick={{action "gotoAllocation" row.model}}
+            />
           </t.body>
         </ListTable>
         <div class="table-foot">
           <nav class="pagination">
             <div class="pagination-numbers">
-              {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedAllocations.length}}
+              {{p.startsAt}}
+              –
+              {{p.endsAt}}
+              of
+              {{this.sortedAllocations.length}}
             </div>
-            <p.prev @class="pagination-previous"> &lt; </p.prev>
-            <p.next @class="pagination-next"> &gt; </p.next>
+            <p.prev @class="pagination-previous" />
+            <p.next @class="pagination-next">
+              >
+            </p.next>
             <ul class="pagination-list"></ul>
           </nav>
         </div>
       </ListPagination>
     {{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 Matches</h3>
-          <p class="empty-message-body">No allocations match the term <strong>{{this.searchTerm}}</strong></p>
+          <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>
+              {{this.searchTerm}}
+            </strong>
+          </p>
         </div>
       </div>
     {{/if}}
   {{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>
+        <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}}
-</section>
+</section>

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

@@ -51,27 +51,54 @@
           @class="with-foot" as |t|
         >
           <t.head>
-            <t.sort-by @prop="node.id">Client ID</t.sort-by>
-            <t.sort-by @prop="node.name" class="is-200px is-truncatable">Client Name</t.sort-by>
-            <t.sort-by @prop="createTime" @title="Create Time">Created</t.sort-by>
-            <t.sort-by @prop="modifyTime" @title="Modify Time">Modified</t.sort-by>
-            <t.sort-by @prop="jobStatus">Job Status</t.sort-by>
-            <th class="is-3">Allocation Summary</th>
+            <t.sort-by @addToQuery={{hash jobNamespace=this.job.namespace.id}} @prop="node.id">
+              Client ID
+            </t.sort-by>
+            <t.sort-by
+              @addToQuery={{hash jobNamespace=this.job.namespace.id}}
+              @prop="node.name"
+              class="is-200px is-truncatable"
+            >
+              Client Name
+            </t.sort-by>
+            <t.sort-by
+              @addToQuery={{hash jobNamespace=this.job.namespace.id}}
+              @prop="createTime"
+              @title="Create Time"
+            >
+              Created
+            </t.sort-by>
+            <t.sort-by
+              @addToQuery={{hash jobNamespace=this.job.namespace.id}}
+              @prop="modifyTime"
+              @title="Modify Time"
+            >
+              Modified
+            </t.sort-by>
+            <t.sort-by @addToQuery={{hash jobNamespace=this.job.namespace.id}} @prop="jobStatus">
+              Job Status
+            </t.sort-by>
+            <th class="is-3">
+              Allocation Summary
+            </th>
           </t.head>
           <t.body as |row|>
-            <JobClientStatusRow
-              @row={{row}}
-              @onClick={{this.gotoClient}}
-            />
+            <JobClientStatusRow @row={{row}} @onClick={{this.gotoClient}} />
           </t.body>
         </ListTable>
         <div class="table-foot">
           <nav class="pagination">
             <div class="pagination-numbers">
-              {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedClients.length}}
+              {{p.startsAt}}
+              –
+              {{p.endsAt}}
+              of
+              {{this.sortedClients.length}}
             </div>
-            <p.prev @class="pagination-previous"> &lt; </p.prev>
-            <p.next @class="pagination-next"> &gt; </p.next>
+            <p.prev @class="pagination-previous" />
+            <p.next @class="pagination-next">
+              >
+            </p.next>
             <ul class="pagination-list"></ul>
           </nav>
         </div>