Fixes #36469 - Fix Ansible Roles and Variables sub-tabs pagination

webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -16,16 +16,23 @@ import './AnsibleVariableOverrides.scss';
 const AnsibleVariableOverrides = ({ hostId, hostAttrs, history }) => {
   const hostGlobalId = encodeId('Host', hostId);
   const pagination = useCurrentPagination(history);
+  const [totalItems, setTotalItems] = useState(0);
+  const setTotalCount = data => {
+    if (!data) return;
+    const { totalCount } = data.host.ansibleVariablesWithOverrides;
+    if (totalItems === 0) setTotalItems(totalCount);
+  };
 
   const useFetchFn = () =>
     useQuery(variableOverrides, {
       variables: {
         id: hostGlobalId,
         match: `fqdn=${hostAttrs.name}`,
-        ...useParamsToVars(history),
+        ...useParamsToVars(history, totalItems),
       },
       fetchPolicy: 'network-only',
       nextFetchPolicy: 'cache-first',
+      onCompleted: setTotalCount,
     });
 
   const renameData = data => ({

webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from '@apollo/client';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -14,6 +14,12 @@ import {
 } from '../../../../../helpers/pageParamsHelper';
 
 const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
+  const [totalItems, setTotalItems] = useState(0);
+  const setTotalCount = data => {
+    if (!data) return;
+    const { totalCount } = data.host.allAnsibleRoles;
+    if (totalItems === 0) setTotalItems(totalCount);
+  };
   const baseModalProps = {
     ouiaId: 'modal-ansible-roles',
     variant: ModalVariant.large,
@@ -28,8 +34,6 @@ const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
     ),
   };
 
-  const paginationKeys = { page: 'page', perPage: 'per_page' };
-
   const wrapper = child => (
     <Modal ouiaId="modal-ansible-roles" {...baseModalProps}>
       {child}
@@ -46,17 +50,18 @@ const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
     useQuery(allAnsibleRolesQuery, {
       variables: {
         id: hostGlobalId,
-        ...useParamsToVars(history, paginationKeys),
+        ...useParamsToVars(history, totalItems),
       },
       fetchPolicy: 'network-only',
+      onCompleted: setTotalCount,
     });
 
   const renameData = data => ({
     allAnsibleRoles: data.host.allAnsibleRoles.nodes,
     totalCount: data.host.allAnsibleRoles.totalCount,
   });
 
-  const pagination = useCurrentPagination(history, paginationKeys);
+  const pagination = useCurrentPagination(history);
 
   return (
     <AllRolesTable

webpack/components/AnsibleHostDetail/components/RolesTab/index.js

@@ -21,15 +21,23 @@ const RolesTab = ({ hostId, history, canEditHost }) => {
   const hostGlobalId = encodeId('Host', hostId);
   const pagination = useCurrentPagination(history);
   const [assignModal, setAssignModal] = useState(false);
+  const [totalItems, setTotalItems] = useState(0);
+  const setTotalCount = data => {
+    if (!data) return;
+    const { totalCount } = data.host.ownAnsibleRoles;
+    if (totalItems === 0) setTotalItems(totalCount);
+  };
+
   const renameData = data => ({
     ansibleRoles: data.host.ownAnsibleRoles.nodes,
     totalCount: data.host.ownAnsibleRoles.totalCount,
   });
 
   const useFetchFn = () =>
     useQuery(ansibleRolesQuery, {
-      variables: { id: hostGlobalId, ...useParamsToVars(history) },
+      variables: { id: hostGlobalId, ...useParamsToVars(history, totalItems) },
       fetchPolicy: 'network-only',
+      onCompleted: setTotalCount,
     });
 
   const editBtn = canEditHost ? (

webpack/helpers/pageParamsHelper.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import URI from 'urijs';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 
@@ -12,29 +13,29 @@ export const addSearch = (basePath, params) => {
   return `${basePath}${stringyfied}`;
 };
 
-export const useCurrentPagination = (
-  history,
-  keys = { page: 'page', perPage: 'per_page' }
-) => {
+export const useCurrentPagination = history => {
   const pageParams = parsePageParams(history);
   const uiSettings = useForemanSettings();
 
   return {
-    [keys.page]: parseInt(pageParams[keys.page], 10) || 1,
-    [keys.perPage]:
-      parseInt(pageParams[keys.perPage], 10) || uiSettings.perPage,
+    page: parseInt(pageParams.page, 10) || 1,
+    per_page: parseInt(pageParams.per_page, 10) || uiSettings.perPage,
   };
 };
 
-export const pageToVars = (
-  pagination,
-  keys = { page: 'page', perPage: 'per_page' }
-) => ({
-  first: pagination[keys.page] * pagination[keys.perPage],
-  last: pagination[keys.perPage],
-});
+/**
+ * Since there is no easy way to do pagination with Graphql at the moment,
+ * we are using `first` and `last` variables in the query.
+ * to make the pagination work on tables where `page * per_page > totalCount`,
+ * we needed to add the following calculation for the `last` variable
+ */
+export const pageToVars = ({ page, per_page }, totalCount = 0) => {
+  totalCount = totalCount || per_page;
+  return {
+    first: Math.min(page * per_page, totalCount),
+    last: Math.min(per_page, totalCount - (page - 1) * per_page),
+  };
+};
 
-export const useParamsToVars = (
-  history,
-  keys = { page: 'page', perPage: 'per_page' }
-) => pageToVars(useCurrentPagination(history, keys), keys);
+export const useParamsToVars = (history, totalCount) =>
+  pageToVars(useCurrentPagination(history), totalCount);