Merge pull request #6740 from jaredevantabor/page-size

Adding View Per Page for pagination

awx/ui/client/src/inventories-hosts/inventories/related/completed-jobs/completed-jobs.route.js

@@ -7,7 +7,8 @@ export default {
             value: {
                 or__job__inventory:"",
                 or__adhoccommand__inventory:"",
-                or__inventoryupdate__inventory_source__inventory:""
+                or__inventoryupdate__inventory_source__inventory:"",
+                order_by: "-id"
             },
             squash:""
         }

awx/ui/client/src/shared/form-generator.js

@@ -2015,7 +2015,13 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 //html += "</div>\n"; // close well
                 html += "</div>\n"; // close list-wrapper div
 
-                html += `<paginate base-path="${collection.basePath}" dataset="${collection.iterator}_dataset" collection="${collection.iterator}s" iterator="${collection.iterator}" ng-hide="hidePagination">`;
+                html += `<paginate
+                    base-path="${collection.basePath}"
+                    dataset="${collection.iterator}_dataset"
+                    collection="${collection.iterator}s"
+                    iterator="${collection.iterator}"
+                    query-set="${collection.iterator}_queryset"
+                    ng-hide="hidePagination">`;
                 return html;
             },
         };

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -453,12 +453,14 @@ export default ['$compile', 'Attr', 'Icon',
                 }
 
                 if (options.paginate === undefined || options.paginate === true) {
+                    let hide_view_per_page = (options.mode === "lookup") ? true : false;
                     html += `<paginate
                     base-path="${list.basePath || list.name}"
                     collection="${list.name}"
                     dataset="${list.iterator}_dataset"
                     iterator="${list.iterator}"
-                    query-set="${list.iterator}_queryset"`;
+                    query-set="${list.iterator}_queryset"
+                    hide-view-per-page="${hide_view_per_page}"`;
                     html += list.maxVisiblePages ? `max-visible-pages="${list.maxVisiblePages}"` : '';
                     html += `></paginate></div>`;
                 }

awx/ui/client/src/shared/paginate/paginate.block.less

@@ -56,3 +56,17 @@
     align-items: flex-end;
     margin-bottom: -2px;
 }
+
+.Paginate-filterLabel{
+    padding: 0px 10px 0px 10px;
+}
+
+.Paginate-filteringDropdowns{
+    display: flex;
+    align-items: center;
+}
+
+.Paginate-dropdown{
+    z-index: 1041;
+    margin-bottom: 10px;
+}

awx/ui/client/src/shared/paginate/paginate.controller.js

@@ -9,6 +9,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
         function init() {
 
             let updatePaginationVariables = function() {
+                $scope.pageSize = calcPageSize();
                 $scope.current = calcCurrent();
                 $scope.last = calcLast();
                 $scope.pageRange = calcPageRange($scope.current, $scope.last);
@@ -22,6 +23,22 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
             });
         }
 
+        $scope.filter = function(id){
+            $scope.pageSize = Number(id);
+            $('#period-dropdown')
+                .replaceWith("<a id=\"period-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+id+
+            "<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
+            
+            if($scope.querySet){
+                let origQuerySet = _.cloneDeep($scope.querySet);
+                queryset = _.merge(origQuerySet, { page_size: $scope.pageSize });
+            }
+            else {
+                queryset = _.merge($stateParams[`${$scope.iterator}_search`], { page_size: $scope.pageSize, page: 1 });
+            }
+            $scope.toPage();
+        };
+
         $scope.dataCount = function() {
             return $filter('number')($scope.dataset.count);
         };
@@ -65,7 +82,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
         };
 
         function calcLast() {
-            return Math.ceil($scope.dataset.count / pageSize);
+            return Math.ceil($scope.dataset.count / $scope.pageSize);
         }
 
         function calcCurrent() {
@@ -107,17 +124,22 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
         }
 
         function calcDataRange() {
-            if ($scope.current === 1 && $scope.dataset.count < parseInt(pageSize)) {
+            if ($scope.current === 1 && $scope.dataset.count < parseInt($scope.pageSize)) {
                 return `1 - ${$scope.dataset.count}`;
             } else if ($scope.current === 1) {
-                return `1 - ${pageSize}`;
+                return `1 - ${$scope.pageSize}`;
             } else {
-                let floor = (($scope.current - 1) * parseInt(pageSize)) + 1;
+                let floor = (($scope.current - 1) * parseInt($scope.pageSize)) + 1;
-                let ceil = floor + parseInt(pageSize) < $scope.dataset.count ? floor + parseInt(pageSize) : $scope.dataset.count;
+                let ceil = floor + parseInt($scope.pageSize) < $scope.dataset.count ? floor + parseInt($scope.pageSize) : $scope.dataset.count;
                 return `${floor} - ${ceil}`;
             }
         }
 
+        function calcPageSize(){
+            let pageSize = $scope.querySet ? $scope.querySet.page_size || 20 : $stateParams[`${$scope.iterator}_search`].page_size || 20;
+            return Number(pageSize) ;
+        }
+
         init();
     }
 ];

awx/ui/client/src/shared/paginate/paginate.directive.js

@@ -9,7 +9,8 @@ export default ['templateUrl',
                 iterator: '@',
                 basePath: '@',
                 querySet: '=',
-                maxVisiblePages: '@'
+                maxVisiblePages: '@',
+                hideViewPerPage: '='
             },
             controller: 'PaginateController',
             templateUrl: templateUrl('shared/paginate/paginate')

awx/ui/client/src/shared/paginate/paginate.partial.html

@@ -44,5 +44,29 @@
             <span>{{dataRange}}</span>
             <span>of {{dataCount()}}</span>
         </span>
+        <div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage">
+            <div class="Paginate-filterLabel" translate>VIEW PER PAGE</div>
+            <div class="DashboardGraphs-periodDropdown">
+                <a role="button"
+                data-toggle="dropdown"
+                data-target="#"
+                href="/page.html"
+                class="DashboardGraphs-filterDropdownText">
+                    <translate>{{pageSize}}</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                </a>
+                <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
+                    DashboardGraphs-filterDropdownItems--period Paginate-dropdown" role="menu" aria-labelledby="period-dropdown">
+                    <li>
+                        <a ng-click="filter(20)" translate>20</a>
+                    </li>
+                    <li>
+                        <a ng-click="filter(50)" translate>50</a>
+                    </li>
+                    <li>
+                        <a ng-click="filter(100)" translate>100</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
 </div>

awx/ui/client/src/templates/completed-jobs.list.js

@@ -11,7 +11,11 @@ export default ['i18n', function(i18n) {
         awToolTip: i18n._('Please save and run a job to view'),
         dataPlacement: 'top',
         name: 'completed_jobs',
-        basePath: 'api/v2/job_templates/{{$stateParams.job_template_id}}/jobs/?or__status=successful&or__status=failed&or__status=error&or__status=canceled',
+        basePath: 'api/v2/job_templates/{{$stateParams.job_template_id}}/jobs',
+        search: {
+            or__status__in: "successful,failed,error,canceled",
+            order_by: "-id"
+        },
         iterator: 'completed_job',
         editTitle: i18n._('COMPLETED JOBS'),
         index: false,
@@ -29,6 +33,7 @@ export default ['i18n', function(i18n) {
                 icon: 'icon-job-{{ completed_job.status }}',
                 iconOnly: true,
                 ngClick:"viewjobResults(completed_job)",
+                nosort: true
             },
             id: {
                 label: 'ID',