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 {run.name}; - })} - + <> + + {initExpiringRuns.map((run) => ( + {run.name} + ))} + + + ); }; diff --git a/dashboard/src/modules/components/OverviewComponent/SavedRunsComponent.jsx b/dashboard/src/modules/components/OverviewComponent/SavedRunsComponent.jsx index 2748eba1f3..62c1ab2bce 100644 --- 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,7 +18,8 @@ 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, @@ -24,19 +27,18 @@ import { 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 = () => { - {savedRuns.map((item, rowIndex) => { + {initSavedRuns.map((item, rowIndex) => { const rowActions = moreActionItems(item); return ( { })} + diff --git a/dashboard/src/modules/components/OverviewComponent/index.less b/dashboard/src/modules/components/OverviewComponent/index.less index 9d4004b430..435639d66a 100644 --- 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 index 27d31f9788..a325f31805 100644 --- 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,