dosubot[bot] commented on issue #7388:
URL:
https://github.com/apache/incubator-devlake/issues/7388#issuecomment-2267966149
<!-- Greeting -->
Hello @TihomirPop! I'm here to help you with any issues you encounter and
answer your questions while you wait for a human maintainer. Let's work
together to solve this!
<!-- Answer -->
The issue where the Pipelines page only loads the first 50 pipelines and
doesn't call the API for new pages or use the page size selector is likely due
to the `useRefreshData` hook not being called with the correct parameters to
handle pagination.
To fix this, you need to modify the API call to include pagination
parameters such as `page` and `pageSize`.
Here is the updated code:
```tsx
import { useState, useMemo, useEffect } from 'react';
import API from '@/api';
import { PageHeader } from '@/components';
import { PATHS } from '@/config';
import { useRefreshData } from '@/hooks';
import { PipelineTable } from './components';
export const Pipelines = () => {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const { ready, data, refresh } = useRefreshData(() => API.pipeline.list({
page, pageSize }));
const [dataSource, total] = useMemo(() => [(data?.pipelines ??
[]).map((it) => it), data?.count ?? 0], [data]);
useEffect(() => {
refresh();
}, [page, pageSize, refresh]);
return (
<PageHeader
breadcrumbs={[
{ name: 'Advanced', path: PATHS.BLUEPRINTS() },
{ name: 'Pipelines', path: PATHS.PIPELINES() },
]}
>
<PipelineTable
loading={!ready}
dataSource={dataSource}
pagination={{
total,
current: page,
pageSize,
onChange: (newPage, newPageSize) => {
setPage(newPage);
setPageSize(newPageSize);
},
}}
noData={{
text: 'Add new projects to see engineering metrics based on
projects.',
}}
/>
</PageHeader>
);
};
```
In this updated code:
1. The `API.pipeline.list` function is called with `page` and `pageSize`
parameters.
2. The `useEffect` hook is used to refresh the data whenever `page` or
`pageSize` changes.
3. The `pagination` object in the `PipelineTable` component is updated to
handle page and page size changes.
Additionally, the backend implementation for collecting pipeline data from
the GitLab API supports pagination through the `page` and `per_page` query
parameters, as shown in the `Index` function:
```go
// @Summary Get list of pipelines
// @Description GET
/pipelines?status=TASK_RUNNING&pending=1&label=search_text&page=1&pagesize=10
// @Tags framework/pipelines
// @Param status query string false "status"
// @Param pending query int false "pending"
// @Param page query int false "page"
// @Param pagesize query int false "pagesize"
// @Param blueprint_id query int false "blueprint_id"
// @Param label query string false "label"
// @Success 200 {object} shared.ResponsePipelines
// @Failure 400 {string} errcode.Error "Bad Request"
// @Failure 500 {string} errcode.Error "Internal Error"
// @Router /pipelines [get]
func Index(c *gin.Context) {
var query services.PipelineQuery
err := c.ShouldBindQuery(&query)
if err != nil {
shared.ApiOutputError(c, errors.BadInput.Wrap(err,
shared.BadRequestBody))
return
}
pipelines, count, err := services.GetPipelines(&query, true)
if err != nil {
shared.ApiOutputError(c, errors.Default.Wrap(err, "error
getting pipelines"))
return
}
shared.ApiOutputSuccess(c, shared.ResponsePipelines{Pipelines:
pipelines, Count: count}, http.StatusOK)
}
```
This backend function ensures that the API calls handle pagination correctly
by setting the `page` and `pagesize` parameters in the query
<sup>[[1]](https://github.com/apache/incubator-devlake/blob/main/config-ui/src/routes/pipeline/pipelines.tsx)</sup><sup>[[2]](https://github.com/apache/incubator-devlake/blob/main/backend/plugins/gitlab/tasks/pipeline_collector.go)</sup><sup>[[3]](https://github.com/apache/incubator-devlake/blob/main/backend/server/api/pipelines/pipelines.go)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
