Repeat new pagination pattern throughout the app

ui/app/controllers/clients/index.js

@@ -1,4 +1,5 @@
-import { alias } from '@ember/object/computed';
+import { alias, readOnly } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 import Controller, { inject as controller } from '@ember/controller';
 import { computed } from '@ember/object';
 import { scheduleOnce } from '@ember/runloop';
@@ -11,6 +12,7 @@ export default Controller.extend(
   SortableFactory(['id', 'name', 'compositeStatus', 'datacenter']),
   Searchable,
   {
+    userSettings: service(),
     clientsController: controller('clients'),
 
     nodes: alias('model.nodes'),
@@ -28,7 +30,7 @@ export default Controller.extend(
     },
 
     currentPage: 1,
-    pageSize: 8,
+    pageSize: readOnly('userSettings.pageSize'),
 
     sortProperty: 'modifyIndex',
     sortDescending: true,

ui/app/controllers/csi/volumes/index.js

@@ -1,5 +1,5 @@
 import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
+import { alias, readOnly } from '@ember/object/computed';
 import Controller, { inject as controller } from '@ember/controller';
 import SortableFactory from 'nomad-ui/mixins/sortable-factory';
 
@@ -13,6 +13,7 @@ export default Controller.extend(
   ]),
   {
     system: service(),
+    userSettings: service(),
     csiController: controller('csi'),
 
     isForbidden: alias('csiController.isForbidden'),
@@ -24,12 +25,19 @@ export default Controller.extend(
     },
 
     currentPage: 1,
-    pageSize: 10,
+    pageSize: readOnly('userSettings.pageSize'),
 
     sortProperty: 'id',
     sortDescending: true,
 
     listToSort: alias('model'),
     sortedVolumes: alias('listSorted'),
+
+    // TODO: Remove once this page gets search capability
+    resetPagination() {
+      if (this.currentPage != null) {
+        this.set('currentPage', 1);
+      }
+    },
   }
 );

ui/app/controllers/jobs/job/task-group.js

@@ -1,4 +1,5 @@
-import { alias } from '@ember/object/computed';
+import { alias, readOnly } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
@@ -6,6 +7,8 @@ import Searchable from 'nomad-ui/mixins/searchable';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
+  userSettings: service(),
+
   queryParams: {
     currentPage: 'page',
     searchTerm: 'search',
@@ -14,7 +17,7 @@ export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
   },
 
   currentPage: 1,
-  pageSize: 10,
+  pageSize: readOnly('userSettings.pageSize'),
 
   sortProperty: 'modifyIndex',
   sortDescending: true,

ui/app/templates/clients/index.hbs

@@ -66,12 +66,13 @@
           {{/t.body}}
         {{/list-table}}
         <div class="table-foot">
+          {{page-size-select onChange=(action resetPagination)}}
           <nav class="pagination" data-test-pagination>
             <div class="pagination-numbers">
               {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedNodes.length}}
             </div>
-            {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
-            {{#p.next class="pagination-next"}} &gt; {{/p.next}}
+            {{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
+            {{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
             <ul class="pagination-list"></ul>
           </nav>
         </div>

ui/app/templates/csi/volumes/index.hbs

@@ -41,12 +41,13 @@
           {{/t.body}}
         {{/list-table}}
         <div class="table-foot">
+          {{page-size-select onChange=(action resetPagination)}}
           <nav class="pagination">
             <div class="pagination-numbers">
               {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedVolumes.length}}
             </div>
-            {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
-            {{#p.next class="pagination-next"}} &gt; {{/p.next}}
+            {{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
+            {{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
             <ul class="pagination-list"></ul>
           </nav>
         </div>

ui/app/templates/jobs/job/task-group.hbs

@@ -81,12 +81,13 @@
             {{/t.body}}
           {{/list-table}}
           <div class="table-foot">
+            {{page-size-select onChange=(action resetPagination)}}
             <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}}
+              {{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
+              {{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
               <ul class="pagination-list"></ul>
             </nav>
           </div>