Merge pull request #1151 from yaacov/paginate-inside-table

🐞 pagination is slow on pages with items > 10K

Author: yaacov

packages/forklift-console-plugin/src/components/page/StandardPage.tsx

@@ -176,13 +176,6 @@ export interface StandardPageProps<T> {
    */
   page: number;
 
-  /**
-   * Update page number
-   *
-   * @param number Update page
-   */
-  setPage: (number) => void;
-
   /**
    * Prefix for filters stored in the query params part of the URL.
    * By default no prefix is used - the field ID is used directly.
@@ -271,7 +264,6 @@ export interface StandardPageProps<T> {
  *   title="My List"
  *   fieldsMetadata={myFieldsMetadata}
  *   page={page}
- *   setPage={setPage}
  *   // ...other props
  * />
  */
@@ -287,8 +279,7 @@ export function StandardPage<T>({
   customNoResultsFound,
   customNoResultsMatchFilter,
   pagination = DEFAULT_PER_PAGE,
-  page,
-  setPage,
+  page: initialPage,
   userSettings,
   filterPrefix = '',
   extraSupportedMatchers,
@@ -303,6 +294,7 @@ export function StandardPage<T>({
     t,
     i18n: { resolvedLanguage },
   } = useForkliftTranslation();
+  const [page, setPage] = useState(initialPage);
   const [filteredData, setFilteredData] = useState([]);
 
   const [selectedFilters, setSelectedFilters] = useUrlFilters({

packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/NetworkMapsListPage.tsx

@@ -104,7 +104,6 @@ const NetworkMapsListPage: React.FC<{
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
   const [userSettings] = useState(() => loadUserSettings({ pageId: 'NetworkMaps' }));
-  const [page, setPage] = useState(1);
 
   const [networkMaps, networkMapsLoaded, networkMapsLoadError] = useK8sWatchResource<
     V1beta1NetworkMap[]
@@ -152,8 +151,7 @@ const NetworkMapsListPage: React.FC<{
       title={t('NetworkMaps')}
       userSettings={userSettings}
       customNoResultsFound={EmptyState}
-      page={page}
-      setPage={setPage}
+      page={1}
     />
   );
 };

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesList.tsx

@@ -105,8 +105,6 @@ type PageGlobalActions = FC<GlobalActionWithSelection<VMData>>[];
 
 export const MigrationVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) => {
   const { t } = useForkliftTranslation();
-  const [page, setPage] = useState(1);
-
   const { plan } = obj;
 
   const [lastMigration] = usePlanMigration(plan);
@@ -190,8 +188,7 @@ export const MigrationVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) =>
     title: t('Virtual Machines'),
     userSettings: userSettings,
     namespace: '',
-    page,
-    setPage,
+    page: 1,
   };
 
   const extendedProps = {

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Plan/PlanVirtualMachinesList.tsx

@@ -38,7 +38,6 @@ export const PlanVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) => {
 
   const { plan } = obj;
 
-  const [page, setPage] = useState(1);
   const [selectedIds, setSelectedIds] = useState([]);
   const [userSettings] = useState(() => loadUserSettings({ pageId: 'PlanVirtualMachines' }));
 
@@ -68,8 +67,7 @@ export const PlanVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) => {
     title: t('Virtual Machines'),
     userSettings: userSettings,
     namespace: '',
-    page,
-    setPage,
+    page: 1,
   };
 
   const extendedProps = {

packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.tsx

@@ -134,7 +134,6 @@ const PlansListPage: React.FC<{
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
   const [userSettings] = useState(() => loadUserSettings({ pageId: 'Plans' }));
-  const [page, setPage] = useState(1);
 
   const [plans, plansLoaded, plansLoadError] = useK8sWatchResource<V1beta1Plan[]>({
     groupVersionKind: PlanModelGroupVersionKind,
@@ -178,8 +177,7 @@ const PlansListPage: React.FC<{
         title={t('Plans')}
         userSettings={userSettings}
         customNoResultsFound={EmptyState}
-        page={page}
-        setPage={setPage}
+        page={1}
       />
     </ModalHOC>
   );

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/VSphereHostsList.tsx

@@ -77,7 +77,6 @@ export const VSphereHostsList: FC<ProviderHostsProps> = ({ obj }) => {
   const { provider, permissions } = obj;
   const { namespace } = provider?.metadata || {};
 
-  const [page, setPage] = useState(1);
   const [selectedIds, setSelectedIds] = useState([]);
   const [userSettings] = useState(() => loadUserSettings({ pageId: 'ProviderHosts' }));
 
@@ -110,8 +109,7 @@ export const VSphereHostsList: FC<ProviderHostsProps> = ({ obj }) => {
     namespace: namespace,
     title: t('Hosts'),
     userSettings: userSettings,
-    page,
-    setPage,
+    page: 1,
   };
 
   const extendedProps: PageWithSelectionProps = permissions?.canPatch

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx

@@ -49,7 +49,6 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
   className,
 }) => {
   const { t } = useForkliftTranslation();
-  const [page, setPage] = useState(1);
   const [userSettings] = useState(() => loadUserSettings({ pageId }));
 
   const initialSelectedIds_ = initialSelectedIds || [];
@@ -93,8 +92,7 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
       toId={toId}
       onSelect={onSelectedIds}
       selectedIds={initialSelectedIds_}
-      page={page}
-      setPage={setPage}
+      page={1}
       expandedIds={initialExpandedIds_}
       ExpandedComponent={ConcernsTable}
     />

packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx

@@ -170,7 +170,6 @@ const ProvidersListPage: React.FC<{
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
   const [userSettings] = useState(() => loadUserSettings({ pageId: 'Providers' }));
-  const [page, setPage] = useState(1);
 
   const [providers, providersLoaded, providersLoadError] = useK8sWatchResource<V1beta1Provider[]>({
     groupVersionKind: ProviderModelGroupVersionKind,
@@ -225,8 +224,7 @@ const ProvidersListPage: React.FC<{
           : undefined
       }
       customNoResultsFound={EmptyState}
-      page={page}
-      setPage={setPage}
+      page={1}
     />
   );
 };

packages/forklift-console-plugin/src/modules/StorageMaps/views/list/StorageMapsListPage.tsx

@@ -104,7 +104,6 @@ const StorageMapsListPage: React.FC<{
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
   const [userSettings] = useState(() => loadUserSettings({ pageId: 'StorageMaps' }));
-  const [page, setPage] = useState(1);
 
   const [StorageMaps, StorageMapsLoaded, StorageMapsLoadError] = useK8sWatchResource<
     V1beta1StorageMap[]
@@ -152,8 +151,7 @@ const StorageMapsListPage: React.FC<{
       title={t('StorageMaps')}
       userSettings={userSettings}
       customNoResultsFound={EmptyState}
-      page={page}
-      setPage={setPage}
+      page={1}
     />
   );
 };