diff --git a/dashboard/src/actions/overviewActions.js b/dashboard/src/actions/overviewActions.js
index f2191f3c5c..18717461a4 100644
--- a/dashboard/src/actions/overviewActions.js
+++ b/dashboard/src/actions/overviewActions.js
@@ -77,7 +77,6 @@ const initializeRuns = () => (dispatch, getState) => {
item[CONSTANTS.IS_ITEM_FAVORITED] =
!!item?.metadata?.[CONSTANTS.USER_FAVORITE];
});
- const defaultPerPage = getState().overview.defaultPerPage;
const savedRuns = data.filter(
(item) => item.metadata[CONSTANTS.DASHBOARD_SAVED]
@@ -105,7 +104,15 @@ const initializeRuns = () => (dispatch, getState) => {
});
dispatch({
type: TYPES.INIT_NEW_RUNS,
- payload: newRuns?.slice(0, defaultPerPage),
+ payload: newRuns?.slice(0, CONSTANTS.DEFAULT_PER_PAGE_NEWRUNS) ?? [],
+ });
+ dispatch({
+ type: TYPES.INIT_SAVED_RUNS,
+ payload: savedRuns?.slice(0, CONSTANTS.DEFAULT_PER_PAGE_SAVED) ?? [],
+ });
+ dispatch({
+ type: TYPES.INIT_EXPIRING_RUNS,
+ payload: expiringRuns?.slice(0, CONSTANTS.DEFAULT_PER_PAGE_EXPIRING) ?? [],
});
};
const metaDataActions = {
@@ -223,26 +230,29 @@ export const deleteDataset = (dataset) => async (dispatch, getState) => {
dispatch({ type: TYPES.COMPLETED });
};
-export const setRows = (rows) => {
- return {
- type: TYPES.INIT_NEW_RUNS,
- payload: rows,
- };
-};
+export const setRows = (rows) => ({
+ type: TYPES.INIT_NEW_RUNS,
+ payload: rows,
+});
-export const setSelectedRuns = (rows) => {
- return {
- type: TYPES.SELECTED_NEW_RUNS,
- payload: rows,
- };
-};
+export const setSavedRows = (rows) => ({
+ type: TYPES.INIT_SAVED_RUNS,
+ payload: rows,
+});
-export const setSelectedSavedRuns = (rows) => {
- return {
- type: TYPES.SELECTED_SAVED_RUNS,
- payload: rows,
- };
-};
+export const setExpiringRows = (rows) => ({
+ type: TYPES.INIT_EXPIRING_RUNS,
+ payload: rows,
+});
+export const setSelectedRuns = (rows) => ({
+ type: TYPES.SELECTED_NEW_RUNS,
+ payload: rows,
+});
+
+export const setSelectedSavedRuns = (rows) => ({
+ type: TYPES.SELECTED_SAVED_RUNS,
+ payload: rows,
+});
export const updateMultipleDataset =
(method, value) => (dispatch, getState) => {
const selectedRuns = getState().overview.selectedRuns;
diff --git a/dashboard/src/actions/types.js b/dashboard/src/actions/types.js
index 454e231268..532c9218aa 100644
--- a/dashboard/src/actions/types.js
+++ b/dashboard/src/actions/types.js
@@ -35,6 +35,8 @@ export const USER_RUNS = "USER_RUNS";
export const SAVED_RUNS = "SAVED_RUNS";
export const NEW_RUNS = "NEW_RUNS";
export const INIT_NEW_RUNS = "INIT_NEW_RUNS";
+export const INIT_SAVED_RUNS = "INIT_SAVED_RUNS";
+export const INIT_EXPIRING_RUNS = "INIT_EXPIRING_RUNS";
export const SELECTED_NEW_RUNS = "SELECTED_NEW_RUNS";
export const EXPIRING_RUNS = "EXPIRING_RUNS";
export const SET_DASHBOARD_LOADING = "SET_DASHBOARD_LOADING";
diff --git a/dashboard/src/assets/constants/overviewConstants.js b/dashboard/src/assets/constants/overviewConstants.js
index b489610023..97196d83e3 100644
--- a/dashboard/src/assets/constants/overviewConstants.js
+++ b/dashboard/src/assets/constants/overviewConstants.js
@@ -11,6 +11,9 @@ export const DATASET_NAME_LENGTH = 1024;
export const DATASET_OWNER = "dataset.owner";
export const DATASET_UPLOADED = "dataset.uploaded";
export const DEFAULT = "default";
+export const DEFAULT_PER_PAGE_EXPIRING = 7;
+export const DEFAULT_PER_PAGE_NEWRUNS = 5;
+export const DEFAULT_PER_PAGE_SAVED = 7;
export const ERROR = "error";
export const EXPIRATION_DAYS_LIMIT = 20;
export const IS_DIRTY_NAME = "isDirtyName";
diff --git a/dashboard/src/modules/components/OverviewComponent/ExpiringSoonComponent.jsx b/dashboard/src/modules/components/OverviewComponent/ExpiringSoonComponent.jsx
index 3603015a2e..d095aa6b41 100644
--- a/dashboard/src/modules/components/OverviewComponent/ExpiringSoonComponent.jsx
+++ b/dashboard/src/modules/components/OverviewComponent/ExpiringSoonComponent.jsx
@@ -1,19 +1,65 @@
import "./index.less";
+import {
+ DEFAULT_PER_PAGE_EXPIRING,
+ START_PAGE_NUMBER,
+} from "assets/constants/overviewConstants";
import { List, ListItem } from "@patternfly/react-core";
+import React, { useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
-import React from "react";
-import { useSelector } from "react-redux";
+import { RenderPagination } from "./common-component";
+import { setExpiringRows } from "actions/overviewActions";
const ExpiringSoonComponent = () => {
- const { expiringRuns } = useSelector((state) => state.overview);
+ const dispatch = useDispatch();
+ const { expiringRuns, initExpiringRuns } = useSelector(
+ (state) => state.overview
+ );
+
+ // Pagination helper
+ const [perPage, setPerPage] = useState(DEFAULT_PER_PAGE_EXPIRING);
+ const [page, setPage] = useState(START_PAGE_NUMBER);
+ const onSetPage = useCallback(
+ (_evt, newPage, _perPage, startIdx, endIdx) => {
+ setPage(newPage);
+ dispatch(setExpiringRows(expiringRuns.slice(startIdx, endIdx)));
+ },
+ [dispatch, expiringRuns]
+ );
+ const perPageOptions = [
+ { title: "7", value: 7 },
+ { title: "15", value: 15 },
+ { title: "20", value: 20 },
+ ];
+ const onPerPageSelect = useCallback(
+ (_evt, newPerPage, newPage, startIdx, endIdx) => {
+ setPerPage(newPerPage);
+ setPage(newPage);
+ dispatch(setExpiringRows(expiringRuns.slice(startIdx, endIdx)));
+ },
+ [dispatch, expiringRuns]
+ );
+ // Pagination helper
return (
-
- {expiringRuns.map((run) => {
- return
+ <>
+
+ {initExpiringRuns.map((run) => (
+
+