Merge pull request #86 from zenml-io/pagination-integration

Pagination integration

Author: danialraza03

src/api/endpoints.ts

@@ -22,7 +22,7 @@ export const endpoints = {
 
   projects: {
     my: '/projects',
-    stats: (project: string) => `/projects/${project}/statistics`
+    stats: (project: string) => `/projects/${project}/statistics`,
   },
 
   pipelines: {

src/api/fetchApi/index.ts

@@ -33,10 +33,12 @@ export const fetchApiWithAuthRequest = ({
   url,
   data,
   method,
+  params,
   authenticationToken,
   headers,
 }: {
   url: string;
+  params?: any;
   data?: any;
   method: any;
   authenticationToken: string;
@@ -47,6 +49,7 @@ export const fetchApiWithAuthRequest = ({
   return axios({
     method: method || httpMethods.get,
     url,
+    params,
     data,
     cancelToken: new CancelToken(function executor(c) {
       // An executor function receives a cancel function as a parameter

src/api/pipelines/getAllRunsByPipelineIdApi.ts

@@ -6,12 +6,19 @@ import { apiUrl } from '../apiUrl';
 const getAllRunsByPipelineIdApi = ({
   authenticationToken,
   pipelineId,
+  page,
+  size,
+  filtersParam,
 }: {
   authenticationToken: string;
   pipelineId: TId;
+  page: number;
+  size: number;
+  filtersParam?: any;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.pipeline.get(pipelineId)), // todo: get runs by pipeline id please update endpoint
+    url: apiUrl(endpoints.runs.pipeline.get(pipelineId)),
+    params: { page, size, ...filtersParam }, // todo: get runs by pipeline id please update endpoint
     method: httpMethods.get,
     authenticationToken,
   });

src/api/pipelines/getMyPipelinesApi.ts

@@ -6,12 +6,20 @@ import { apiUrl } from '../apiUrl';
 const getMyPipelinesApi = ({
   authenticationToken,
   project,
+  page,
+  size,
+  filtersParam,
 }: {
+  page: number;
+  size: number;
+  name?: string;
   authenticationToken: string;
   project: string;
+  filtersParam?: object;
 }): Promise<TPipeline> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.pipelines.my(project)),
+    params: { page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/runs/getAllRunsApi.ts

@@ -5,13 +5,20 @@ import { apiUrl } from '../apiUrl';
 
 const getAllRunsApi = ({
   project,
+  page,
+  size,
+  filtersParam,
   authenticationToken,
 }: {
-  project: string;
+  page: number;
+  size: number;
   authenticationToken: string;
+  project: string;
+  filtersParam?: object;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.runs.all(project)),
+    params: { page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stackComponents/getAllRunsByStackComponentIdApi.ts

@@ -6,12 +6,19 @@ import { apiUrl } from '../apiUrl';
 const getAllRunsByStackComponentIdApi = ({
   authenticationToken,
   stackComponentId,
+  page,
+  size,
+  filtersParam,
 }: {
+  page: number;
+  size: number;
+  filtersParam?: any;
   authenticationToken: string;
   stackComponentId: TId;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.stackComponent.get(stackComponentId)), // todo: get runs by pipeline id please update endpoint
+    url: apiUrl(endpoints.runs.stackComponent.get(stackComponentId)),
+    params: { page, size, ...filtersParam }, // todo: get runs by pipeline id please update endpoint
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stackComponents/getStackComponentListApi.ts

@@ -5,15 +5,22 @@ import { apiUrl } from '../apiUrl';
 
 const getMyStackComponentsApi = ({
   authenticationToken,
+  page,
+  size,
   type,
+  filtersParam,
   project,
 }: {
   project: string;
   authenticationToken: string;
   type: string;
+  filtersParam?: object;
+  page: number;
+  size: number;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.StackComponents.my(type, project)),
+    params: { page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stacks/getAllRunsByStackIdApi.ts

@@ -6,12 +6,19 @@ import { apiUrl } from '../apiUrl';
 const getAllRunsByStackIdApi = ({
   authenticationToken,
   stackId,
+  page,
+  size,
+  filtersParam,
 }: {
+  page: number;
+  size: number;
+  filtersParam?: any;
   authenticationToken: string;
   stackId: TId;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.stack.get(stackId)), // todo: get runs by pipeline id please update endpoint
+    url: apiUrl(endpoints.runs.stack.get(stackId)),
+    params: { page, size, ...filtersParam }, // todo: get runs by pipeline id please update endpoint
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stacks/getMyStacksApi.ts

@@ -5,13 +5,20 @@ import { apiUrl } from '../apiUrl';
 
 const getMyStacksApi = ({
   project,
+  page,
+  size,
+  filtersParam,
   authenticationToken,
 }: {
   project: string;
+  page: number;
+  size: number;
+  filtersParam?: object;
   authenticationToken: string;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.Stacks.my(project)),
+    params: { page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/redux/actions/pipelines/getAllRunsByPipelineId.ts

@@ -3,10 +3,16 @@ import getAllRunsByPipelineIdApi from '../../../api/pipelines/getAllRunsByPipeli
 
 export const getAllRunsByPipelineId = ({
   pipelineId,
+  page,
+  size,
+  filtersParam,
   onSuccess,
   onFailure,
 }: {
   pipelineId: TId;
+  page: number;
+  size: number;
+  filtersParam?: any;
   onSuccess?: () => void;
   onFailure?: () => void;
 }): TRequestAction => {
@@ -17,7 +23,7 @@ export const getAllRunsByPipelineId = ({
       isAuthenticated: true,
       failureActionType: pipelineActionTypes.getRunsByPipelineId.failure,
       successActionType: pipelineActionTypes.getRunsByPipelineId.success,
-      params: { pipelineId },
+      params: { pipelineId, page, size, filtersParam },
       onSuccess,
       onFailure,
     },