Skip to content

Change pagination from infinite loading to paged pagination #500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Venefilyn merged 10 commits into from
Feb 5, 2025
Merged

Change pagination from infinite loading to paged pagination #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
67d4bf3
feat(Projects): Paginate with pages and context
Venefilyn Dec 4, 2024
cddcb12
Copr: Migrate to page-based pagination
Venefilyn Jan 30, 2025
fffdefd
Koji: Migrate to page-based pagination
Venefilyn Jan 30, 2025
4899a05
SRPM: Migrate to page-based pagination
Venefilyn Jan 30, 2025
6aeca55
Testing Farm: Migrate to page-based pagination
Venefilyn Jan 30, 2025
854dc83
Sync Release: Migrate to page-based pagination
Venefilyn Jan 30, 2025
40bbcc5
Bodhi: Migrate to page-based pagination
Venefilyn Jan 30, 2025
c59a653
OpenScanHub: Migrate to page-based pagination
Venefilyn Jan 30, 2025
96cb5b5
KojiTag: Migrate to page-based pagination
Venefilyn Jan 30, 2025
ff21bc1
Pipelines: Migrate to page-based pagination
Venefilyn Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 68 additions & 77 deletions frontend/src/components/bodhi/BodhiUpdatesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright Contributors to the Packit project.
// SPDX-License-Identifier: MIT

import { useMemo } from "react";
import { useState } from "react";

import {
Table,
Expand All @@ -14,7 +14,7 @@ import {
} from "@patternfly/react-table";

import { SkeletonTable } from "@patternfly/react-component-groups";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useQuery } from "@tanstack/react-query";
import { ErrorConnection } from "../../components/errors/ErrorConnection";
import { Timestamp } from "../../components/shared/Timestamp";
import {
Expand All @@ -23,10 +23,15 @@ import {
} from "../../components/trigger/TriggerLink";
import { bodhiUpdatesQueryOptions } from "../../queries/bodhi/bodhiUpdatesQuery";
import { ForgeIcon, ForgeIconByForge } from "../icons/ForgeIcon";
import { LoadMore } from "../shared/LoadMore";
import { PackitPagination } from "../shared/PackitPagination";
import { PackitPaginationContext } from "../shared/PackitPaginationContext";
import { StatusLabel } from "../statusLabels/StatusLabel";

const BodhiUpdatesTable = () => {
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);
const value = { page, setPage, perPage, setPerPage };

// Headings
const columnNames = {
forge: "Forge",
Expand All @@ -36,17 +41,9 @@ const BodhiUpdatesTable = () => {
bodhiUpdate: "Bodhi Update",
};

const {
isLoading,
isError,
fetchNextPage,
data,
isFetchingNextPage,
hasNextPage,
} = useInfiniteQuery(bodhiUpdatesQueryOptions());

// Create a memoization of all the data when we flatten it out. Ideally one should render all the pages separately so that rendering will be done faster
const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
const { isLoading, isError, data } = useQuery(
bodhiUpdatesQueryOptions(page, perPage),
);

const TableHeads = [
<Th key={columnNames.forge}>
Expand All @@ -71,70 +68,64 @@ const BodhiUpdatesTable = () => {
return <ErrorConnection />;
}

if (isLoading) {
return (
<SkeletonTable
variant={TableVariant.compact}
rows={10}
columns={TableHeads}
/>
);
}

return (
<>
<Table aria-label="Bodhi updates" variant={TableVariant.compact}>
<Thead>
<Tr>{TableHeads}</Tr>
</Thead>
<Tbody>
{rows.map((bodhi_update) => (
<Tr key={bodhi_update.packit_id}>
<Td dataLabel={columnNames.forge}>
{bodhi_update.project_url ? (
<ForgeIcon url={bodhi_update.project_url} />
) : (
<ForgeIconByForge />
)}
</Td>
<Td dataLabel={columnNames.trigger}>
<strong>
<TriggerLink trigger={bodhi_update}>
<TriggerSuffix trigger={bodhi_update} />
</TriggerLink>
</strong>
</Td>
<Td dataLabel={columnNames.branch}>
<StatusLabel
target={bodhi_update.branch}
status={bodhi_update.status}
link={`/jobs/bodhi/${bodhi_update.packit_id}`}
/>
</Td>
<Td dataLabel={columnNames.timeProcessed}>
<Timestamp stamp={bodhi_update.submitted_time} />
</Td>
<Td dataLabel={columnNames.bodhiUpdate}>
<strong>
<a
href={bodhi_update.web_url ?? ""}
target="_blank"
rel="noreferrer"
>
{bodhi_update.alias}
</a>
</strong>
</Td>
</Tr>
))}
</Tbody>
</Table>
<LoadMore
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
fetchNextPage={() => void fetchNextPage()}
/>
</>
<PackitPaginationContext.Provider value={value}>
<PackitPagination />
{isLoading ? (
<SkeletonTable
variant={TableVariant.compact}
rowsCount={perPage}
columns={TableHeads}
/>
) : (
<Table aria-label="Bodhi updates" variant={TableVariant.compact}>
<Thead>
<Tr>{TableHeads}</Tr>
</Thead>
<Tbody>
{data?.map((bodhi_update) => (
<Tr key={bodhi_update.packit_id}>
<Td dataLabel={columnNames.forge}>
{bodhi_update.project_url ? (
<ForgeIcon url={bodhi_update.project_url} />
) : (
<ForgeIconByForge />
)}
</Td>
<Td dataLabel={columnNames.trigger}>
<strong>
<TriggerLink trigger={bodhi_update}>
<TriggerSuffix trigger={bodhi_update} />
</TriggerLink>
</strong>
</Td>
<Td dataLabel={columnNames.branch}>
<StatusLabel
target={bodhi_update.branch}
status={bodhi_update.status}
link={`/jobs/bodhi/${bodhi_update.packit_id}`}
/>
</Td>
<Td dataLabel={columnNames.timeProcessed}>
<Timestamp stamp={bodhi_update.submitted_time} />
</Td>
<Td dataLabel={columnNames.bodhiUpdate}>
<strong>
<a
href={bodhi_update.web_url ?? ""}
target="_blank"
rel="noreferrer"
>
{bodhi_update.alias}
</a>
</strong>
</Td>
</Tr>
))}
</Tbody>
</Table>
)}
</PackitPaginationContext.Provider>
);
};

Expand Down
123 changes: 61 additions & 62 deletions frontend/src/components/copr/CoprBuildsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright Contributors to the Packit project.
// SPDX-License-Identifier: MIT

import React, { useMemo } from "react";
import React, { useState } from "react";

import {
Table,
Expand All @@ -14,10 +14,11 @@ import {
} from "@patternfly/react-table";

import { SkeletonTable } from "@patternfly/react-component-groups";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useQuery } from "@tanstack/react-query";
import { coprBuildsQueryOptions } from "../../queries/copr/coprBuildsQuery";
import { ForgeIcon } from "../icons/ForgeIcon";
import { LoadMore } from "../shared/LoadMore";
import { PackitPagination } from "../shared/PackitPagination";
import { PackitPaginationContext } from "../shared/PackitPaginationContext";
import { Timestamp } from "../shared/Timestamp";
import { StatusLabel } from "../statusLabels/StatusLabel";
import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink";
Expand Down Expand Up @@ -53,8 +54,11 @@ const ChrootStatuses: React.FC<ChrootStatusesProps> = (props) => {
};

const CoprBuildsTable = () => {
const { data, isLoading, isFetchingNextPage, fetchNextPage, hasNextPage } =
useInfiniteQuery(coprBuildsQueryOptions());
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);
const value = { page, setPage, perPage, setPerPage };

const { data, isLoading } = useQuery(coprBuildsQueryOptions(page, perPage));

// Headings
const columnNames = {
Expand All @@ -65,9 +69,6 @@ const CoprBuildsTable = () => {
coprBuild: "Copr Build",
};

// Create a memoization of all the data when we flatten it out. Ideally one should render all the pages separately so that rendering will be done faster
const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);

const TableHeads = [
<Th key={columnNames.forge}>
<span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
Expand All @@ -86,61 +87,59 @@ const CoprBuildsTable = () => {
</Th>,
];

if (isLoading) {
return (
<SkeletonTable
variant={TableVariant.compact}
rows={10}
columns={TableHeads}
/>
);
}

return (
<>
<Table aria-label="Copr builds" variant={TableVariant.compact}>
<Thead>
<Tr>{TableHeads}</Tr>
</Thead>
<Tbody>
{rows.map((copr_build) => (
<Tr key={copr_build.build_id}>
<Td dataLabel={columnNames.forge}>
<ForgeIcon url={copr_build.project_url} />
</Td>
<Td dataLabel={columnNames.trigger}>
<strong>
<TriggerLink trigger={copr_build}>
<TriggerSuffix trigger={copr_build} />
</TriggerLink>
</strong>
</Td>
<Td dataLabel={columnNames.chroots}>
<ChrootStatuses
statuses={copr_build.status_per_chroot}
ids={copr_build.packit_id_per_chroot}
/>
</Td>
<Td dataLabel={columnNames.timeSubmitted}>
<Timestamp stamp={copr_build.build_submitted_time} />
</Td>
<Td dataLabel={columnNames.coprBuild}>
<strong>
<a href={copr_build.web_url} target="_blank" rel="noreferrer">
{copr_build.build_id}
</a>
</strong>
</Td>
</Tr>
))}
</Tbody>
</Table>
<LoadMore
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
fetchNextPage={() => void fetchNextPage()}
/>
</>
<PackitPaginationContext.Provider value={value}>
<PackitPagination />
{isLoading ? (
<SkeletonTable
variant={TableVariant.compact}
rowsCount={perPage}
columns={TableHeads}
/>
) : (
<Table aria-label="Copr builds" variant={TableVariant.compact}>
<Thead>
<Tr>{TableHeads}</Tr>
</Thead>
<Tbody>
{data?.map((copr_build) => (
<Tr key={copr_build.build_id}>
<Td dataLabel={columnNames.forge}>
<ForgeIcon url={copr_build.project_url} />
</Td>
<Td dataLabel={columnNames.trigger}>
<strong>
<TriggerLink trigger={copr_build}>
<TriggerSuffix trigger={copr_build} />
</TriggerLink>
</strong>
</Td>
<Td dataLabel={columnNames.chroots}>
<ChrootStatuses
statuses={copr_build.status_per_chroot}
ids={copr_build.packit_id_per_chroot}
/>
</Td>
<Td dataLabel={columnNames.timeSubmitted}>
<Timestamp stamp={copr_build.build_submitted_time} />
</Td>
<Td dataLabel={columnNames.coprBuild}>
<strong>
<a
href={copr_build.web_url}
target="_blank"
rel="noreferrer"
>
{copr_build.build_id}
</a>
</strong>
</Td>
</Tr>
))}
</Tbody>
</Table>
)}
</PackitPaginationContext.Provider>
);
};

Expand Down
Loading
Loading