Pagination for Saved and Expiring runs (distributed-system-analysis#3536

) * PBENCH-1255 Pagination for Saved and Expiring runs
mfleader · Aug 30, 2023 · 30505a2 · 30505a2
1 parent 3d9261e
commit 30505a2
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
-    <List isPlain isBordered>
-      {expiringRuns.map((run) => {
-        return <ListItem key={run.resource_id}>{run.name}</ListItem>;
-      })}
-    </List>
+    <>
+      <List isPlain isBordered className="expiring-soon-list">
+        {initExpiringRuns.map((run) => (
+          <ListItem key={run.resource_id}>{run.name}</ListItem>
+        ))}
+      </List>
+      <RenderPagination
+        items={expiringRuns.length}
+        page={page}
+        setPage={setPage}
+        perPage={perPage}
+        setPerPage={setPerPage}
+        onSetPage={onSetPage}
+        perPageOptions={perPageOptions}
+        onPerPageSelect={onPerPageSelect}
+      />
+    </>
   );
 };
 

diff --git a/dashboard/src/modules/components/OverviewComponent/SavedRunsComponent.jsx b/dashboard/src/modules/components/OverviewComponent/SavedRunsComponent.jsx
@@ -3,9 +3,11 @@ import "./index.less";
 import {
   DASHBOARD_SEEN,
   DATASET_ACCESS,
+  DEFAULT_PER_PAGE_SAVED,
   IS_ITEM_SEEN,
   NAME_KEY,
   SERVER_DELETION_KEY,
+  START_PAGE_NUMBER,
 } from "assets/constants/overviewConstants";
 import {
   InnerScrollContainer,
@@ -16,27 +18,27 @@ import {
   Thead,
   Tr,
 } from "@patternfly/react-table";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
+import { RenderPagination, SavedRunsRow } from "./common-component";
 import {
   deleteDataset,
   editMetadata,
   getEditedMetadata,
   getMetaDataActions,
   publishDataset,
   setRowtoEdit,
+  setSavedRows,
   setSelectedSavedRuns,
 } from "actions/overviewActions";
 import { useDispatch, useSelector } from "react-redux";
 
-import { SavedRunsRow } from "./common-component";
-
 const SavedRunsComponent = () => {
   const dispatch = useDispatch();
-  const { savedRuns, selectedSavedRuns } = useSelector(
+  const { savedRuns, selectedSavedRuns, initSavedRuns } = useSelector(
     (state) => state.overview
   );
 
-  /* Selecting */
+  // Selecting helper
   const areAllRunsSelected =
     savedRuns?.length > 0 && savedRuns?.length === selectedSavedRuns?.length;
   const selectAllRuns = (isSelecting) => {
@@ -51,9 +53,9 @@ const SavedRunsComponent = () => {
   };
   const isRowSelected = (run) =>
     selectedSavedRuns.filter((item) => item.name === run.name).length > 0;
-  /* Selecting */
+  // Selecting helper
 
-  /* Actions Row */
+  // Actions Row
   const moreActionItems = (dataset) => [
     {
       title:
@@ -76,11 +78,11 @@ const SavedRunsComponent = () => {
       onClick: () => dispatch(deleteDataset(dataset)),
     },
   ];
-  /* Actions Row */
+  // Actions Row
   const makeFavorites = (dataset, isFavoriting = true) => {
     dispatch(getMetaDataActions(dataset, "favorite", isFavoriting));
   };
-  /* Edit Dataset */
+  // Edit Dataset
   const saveRowData = (dataset) => {
     dispatch(getEditedMetadata(dataset, "savedRuns"));
   };
@@ -91,8 +93,34 @@ const SavedRunsComponent = () => {
   const updateTblValue = (newValue, metadata, rId) => {
     dispatch(editMetadata(newValue, metadata, rId, "savedRuns"));
   };
+  // Edit Dataset
+
+  // Pagination helper
+  const [perPage, setPerPage] = useState(DEFAULT_PER_PAGE_SAVED);
+  const [page, setPage] = useState(START_PAGE_NUMBER);
+
+  const onSetPage = useCallback(
+    (_evt, newPage, _perPage, startIdx, endIdx) => {
+      setPage(newPage);
+      dispatch(setSavedRows(savedRuns.slice(startIdx, endIdx)));
+    },
+    [dispatch, savedRuns]
+  );
+  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(setSavedRows(savedRuns.slice(startIdx, endIdx)));
+    },
+    [dispatch, savedRuns]
+  );
+  // Pagination helper
 
-  /* Edit Dataset */
   const columnNames = {
     result: "Result",
     uploadedtime: "Uploaded Time",
@@ -126,7 +154,7 @@ const SavedRunsComponent = () => {
               </Tr>
             </Thead>
             <Tbody>
-              {savedRuns.map((item, rowIndex) => {
+              {initSavedRuns.map((item, rowIndex) => {
                 const rowActions = moreActionItems(item);
                 return (
                   <Tr
@@ -159,6 +187,16 @@ const SavedRunsComponent = () => {
               })}
             </Tbody>
           </TableComposable>
+          <RenderPagination
+            items={savedRuns.length}
+            page={page}
+            setPage={setPage}
+            perPage={perPage}
+            setPerPage={setPerPage}
+            onSetPage={onSetPage}
+            perPageOptions={perPageOptions}
+            onPerPageSelect={onPerPageSelect}
+          />
         </InnerScrollContainer>
       </OuterScrollContainer>
     </div>

diff --git a/dashboard/src/modules/components/OverviewComponent/index.less b/dashboard/src/modules/components/OverviewComponent/index.less
@@ -25,6 +25,9 @@
       .pf-c-scroll-inner-wrapper {
         height: 100%;
       }
+      table {
+        height: 40vh;
+      }
     }
     .result_column {
       white-space: nowrap;
@@ -44,6 +47,9 @@
     }
     .newruns-table-container {
       height: 90%;
+      table {
+        height: 40vh;
+      }
       .pf-c-scroll-outer-wrapper {
         min-height: 100%;
       }
@@ -86,6 +92,9 @@
       font-size: 1.2rem;
     }
   }
+  .expiring-soon-list {
+    height: 40vh;
+  }
 }
 .treeview-container {
   text-transform: capitalize;

diff --git a/dashboard/src/reducers/overviewReducer.js b/dashboard/src/reducers/overviewReducer.js
@@ -3,8 +3,9 @@ const initialState = {
   datasets: [],
   savedRuns: [],
   newRuns: [],
-  defaultPerPage: 5,
   initNewRuns: [],
+  initSavedRuns: [],
+  initExpiringRuns: [],
   selectedRuns: [],
   selectedSavedRuns: [],
   expiringRuns: [],
@@ -39,6 +40,16 @@ const OverviewReducer = (state = initialState, action = {}) => {
         ...state,
         initNewRuns: payload,
       };
+    case TYPES.INIT_SAVED_RUNS:
+      return {
+        ...state,
+        initSavedRuns: payload,
+      };
+    case TYPES.INIT_EXPIRING_RUNS:
+      return {
+        ...state,
+        initExpiringRuns: payload,
+      };
     case TYPES.SELECTED_NEW_RUNS:
       return {
         ...state,