ui - save current page on drilldown (#415)

ui/src/components/Table/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { isEmpty, isEqual, pickBy, isNull } from 'lodash';
+import { isEmpty, isEqual, pickBy, isNull, isUndefined } from 'lodash';
 import { useTable, usePagination, useSortBy, useResizeColumns, useFlexLayout, useRowSelect } from 'react-table';
 import Icon, { ICON_NAMES } from 'components/Icon';
 import Loader from 'components/Loader';
@@ -38,9 +38,9 @@ const RowSelectCheckbox = React.memo(
 );
 
 const Table = props => {
-    const {columns, defaultSortBy: defaultSortByItems, onLineClick, paginationItemsName, url, formatFetchedData, filters,
+    const {columns, defaultSortBy: defaultSortByItems, onLineClick, paginationItemsName, url, formatFetchedData, filters, defaultPageIndex=0,
         noResultsTitle="API", refreshTimestamp, withPagination=true, data: externalData, withMultiSelect=false, onRowSelect,
-        markedRowIds=[], actionsComponent: ActionsComponent} = props;
+        onPageChange, markedRowIds=[], actionsComponent: ActionsComponent} = props;
 
     const defaultSortBy = useMemo(() => defaultSortByItems || [], [defaultSortByItems]);
     const defaultColumn = React.useMemo(() => ({
@@ -78,7 +78,7 @@ const Table = props => {
             data: tableItems,
             defaultColumn,
             initialState: {
-                pageIndex: 0,
+                pageIndex: defaultPageIndex,
                 pageSize: 50,
                 sortBy: defaultSortBy,
                 selectedRowIds: {}
@@ -146,10 +146,18 @@ const Table = props => {
         }
     );
 
+    const updatePage = useCallback(pageIndex => {
+        if (!!onPageChange) {
+            onPageChange(pageIndex);
+        }
+
+        gotoPage(pageIndex);
+    }, [gotoPage, onPageChange]);
+
     const {id: sortKey, desc: sortDesc} = !isEmpty(sortBy) ? sortBy[0] : {};
     const cleanFilters = pickBy(filters, value => !isNull(value) && value !== "");
     const prevCleanFilters = usePrevious(cleanFilters);
-    const filtersChanged = !isEqual(cleanFilters, prevCleanFilters);
+    const filtersChanged = !isEqual(cleanFilters, prevCleanFilters) && !isUndefined(prevCleanFilters);
     const prevPageIndex = usePrevious(pageIndex);
     const prevSortKey = usePrevious(sortKey);
     const prevSortDesc = usePrevious(sortDesc);
@@ -188,15 +196,15 @@ const Table = props => {
         }
 
         if (filtersChanged && pageIndex !== 0) {
-            gotoPage(0);
+            updatePage(0);
 
             return;
         }
 
         if (!!url) {
             doFetchWithQueryParams();
         }
-    }, [filtersChanged, pageIndex, prevPageIndex, doFetchWithQueryParams, gotoPage, sortingChanged, refreshTimestamp, prevRefreshTimestamp, url]);
+    }, [filtersChanged, pageIndex, prevPageIndex, doFetchWithQueryParams, updatePage, sortingChanged, refreshTimestamp, prevRefreshTimestamp, url]);
 
     const selectedRows = Object.keys(selectedRowIds);
     const prevSelectedRows = usePrevious(selectedRows);
@@ -221,7 +229,7 @@ const Table = props => {
                     pageIndex={pageIndex}
                     pageSize={pageSize}
                     displayName={paginationItemsName}
-                    gotoPage={gotoPage}
+                    gotoPage={updatePage}
                     loading={loading}
                     total={total}
                     page={page}

ui/src/components/TablePage/index.js

@@ -7,7 +7,7 @@ import SystemFilterDisplay from 'components/SystemFilterDisplay';
 import Filter, { formatFiltersToQueryParams } from 'components/Filter';
 import PageContainer from 'components/PageContainer';
 import TopBarTitle from 'components/TopBarTitle';
-import { useFilterState, useFilterDispatch, setFilters, resetSystemFilters } from 'context/FiltersProvider';
+import { useFilterState, useFilterDispatch, setFilters, setPage, resetSystemFilters } from 'context/FiltersProvider';
 
 import './table-page.scss';
 
@@ -39,7 +39,7 @@ const TablePage = ({columns, filterType, filtersMap, url, title, defaultSortBy,
     const doRefreshTimestamp = () => setRefreshTimestamp(Date());
 
     const filtersState = useFilterState();
-    const {tableFilters, systemFilters} = filtersState[filterType];
+    const {tableFilters, systemFilters, selectedPageIndex} = filtersState[filterType];
     const filtersDispatch = useFilterDispatch();
     const setTableFilters = (filters) => setFilters(filtersDispatch, {type: filterType, filters, isSystem: false});
 
@@ -48,7 +48,7 @@ const TablePage = ({columns, filterType, filtersMap, url, title, defaultSortBy,
     const onSystemFilterClose = () => resetSystemFilters(filtersDispatch, filterType);
 
     const hasSystemFitler = !!systemFilterTitle || !!currentRuntimeScan;
-
+    
     useEffect(() => {
         doRefreshTimestamp();
     }, [externalRefreshTimestamp]);
@@ -79,6 +79,8 @@ const TablePage = ({columns, filterType, filtersMap, url, title, defaultSortBy,
                                 ...(!!currentRuntimeScan ? {currentRuntimeScan: true} : {})
                             }}
                             onLineClick={onLineClick}
+                            defaultPageIndex={selectedPageIndex}
+                            onPageChange={pageIndex => setPage(filtersDispatch, {type: filterType, pageIndex})}
                             noResultsTitle={title}
                             refreshTimestamp={refreshTimestamp}
                             actionsComponent={actionsComponent}

ui/src/context/FiltersProvider.js

@@ -1,6 +1,6 @@
 import { create } from './utils';
 
-export const FILTERR_TYPES = {
+export const FILTER_TYPES = {
     APPLICATIONS: "APPLICATIONS",
     APPLICATION_RESOURCES: "APPLICATION_RESOURCES",
     PACKAGES: "PACKAGES",
@@ -9,31 +9,21 @@ export const FILTERR_TYPES = {
 }
 
 const initialState = {
-    [FILTERR_TYPES.APPLICATIONS]: {
-        tableFilters: [],
-        systemFilters: {}
-    },
-    [FILTERR_TYPES.APPLICATION_RESOURCES]: {
-        tableFilters: [],
-        systemFilters: {}
-    },
-    [FILTERR_TYPES.PACKAGES]: {
-        tableFilters: [],
-        systemFilters: {}
-    },
-    [FILTERR_TYPES.PACKAGE_RESOURCES]: {
-        tableFilters: []
-    },
-    [FILTERR_TYPES.VULNERABILITIES]: {
-        tableFilters: [],
-        systemFilters: {}
-    },
+    ...Object.keys(FILTER_TYPES).reduce((acc, curr) => ({
+        ...acc,
+        [curr]: {
+            tableFilters: [],
+            systemFilters: {},
+            selectedPageIndex: 0
+        }
+    }), {}),
     currentRuntimeScan: null
-};
+}
 
 const FITLER_ACTIONS = {
     SET_TABLE_FILTERS_BY_KEY: "SET_TABLE_FILTERS_BY_KEY",
     SET_SYSTEM_FILTERS_BY_KEY: "SET_SYSTEM_FILTERS_BY_KEY",
+    SET_TABLE_PAGE_BY_KEY: "SET_TABLE_PAGE_BY_KEY",
     RESET_ALL_FILTERS: "RESET_ALL_FILTERS",
     RESET_FILTERS_BY_KEY: "RESET_FILTERS_BY_KEY"
 }
@@ -47,7 +37,8 @@ const reducer = (state, action) => {
                 ...state,
                 [filterType]: {
                     ...state[filterType],
-                    tableFilters: filterData
+                    tableFilters: filterData,
+                    selectedPageIndex: 0
                 }
             };
         }
@@ -59,7 +50,19 @@ const reducer = (state, action) => {
                 [filterType]: {
                     ...state[filterType],
                     tableFilters: [...initialState[filterType].tableFilters],
-                    systemFilters: filterData
+                    systemFilters: filterData,
+                    selectedPageIndex: 0
+                }
+            };
+        }
+        case FITLER_ACTIONS.SET_TABLE_PAGE_BY_KEY: {
+            const {filterType, pageIndex} = action.payload;
+
+            return {
+                ...state,
+                [filterType]: {
+                    ...state[filterType],
+                    selectedPageIndex: pageIndex
                 }
             };
         }
@@ -90,6 +93,7 @@ const setFilters = (dispatch, {type, filters, isSystem=false}) => dispatch({
     type: isSystem ? FITLER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY : FITLER_ACTIONS.SET_TABLE_FILTERS_BY_KEY,
     payload: {filterType: type, filterData: filters}
 });
+const setPage = (dispatch, {type, pageIndex}) => dispatch({type: FITLER_ACTIONS.SET_TABLE_PAGE_BY_KEY, payload: {filterType: type, pageIndex}});
 const resetAllFilters = (dispatch) => dispatch({type: FITLER_ACTIONS.RESET_ALL_FILTERS});
 const resetFilters = (dispatch, filterType) => dispatch({type: FITLER_ACTIONS.RESET_FILTERS_BY_KEY, payload: {filterType}});
 const resetSystemFilters = (dispatch, type) => setFilters(dispatch, {type, filters: {}, isSystem: true})
@@ -99,6 +103,7 @@ export {
     useFilterState,
     useFilterDispatch,
     setFilters,
+    setPage,
     resetAllFilters,
     resetFilters,
     resetSystemFilters

ui/src/layout/App/index.js

@@ -13,7 +13,7 @@ import Packages from 'layout/Packages';
 import Vulnerabilities from 'layout/Vulnerabilities';
 import RuntimeScan from 'layout/RuntimeScan';
 import { NotificationProvider, useNotificationState, useNotificationDispatch, removeNotification } from 'context/NotificationProvider';
-import { FiltersProvider, useFilterDispatch, resetFilters, resetAllFilters, FILTERR_TYPES } from 'context/FiltersProvider';
+import { FiltersProvider, useFilterDispatch, resetFilters, resetAllFilters, FILTER_TYPES } from 'context/FiltersProvider';
 import { ROUTES } from 'utils/systemConsts';
 
 import brandImage from 'utils/images/brand.svg';
@@ -33,28 +33,28 @@ const ROUTES_CONFIG = [
 		path: ROUTES.APPLICATIONS,
 		component: Applications,
         icon: ICON_NAMES.APPLICATION,
-        resetFilter: FILTERR_TYPES.APPLICATIONS,
+        resetFilter: FILTER_TYPES.APPLICATIONS,
         title: "Applications"
 	},
     {
 		path: ROUTES.APPLICATION_RESOURCES,
 		component: ApplicationResources,
         icon: ICON_NAMES.RESOURCE,
-        resetFilter: FILTERR_TYPES.APPLICATION_RESOURCES,
+        resetFilter: FILTER_TYPES.APPLICATION_RESOURCES,
         title: "Applications Resources"
 	},
     {
 		path: ROUTES.PACKAGES,
 		component: Packages,
         icon: ICON_NAMES.PACKAGE,
-        resetFilter: FILTERR_TYPES.PACKAGES,
+        resetFilter: FILTER_TYPES.PACKAGES,
         title: "Packages"
 	},
     {
 		path: ROUTES.VULNERABILITIES,
 		component: Vulnerabilities,
         icon: ICON_NAMES.VULNERABILITY,
-        resetFilter: FILTERR_TYPES.VULNERABILITIES,
+        resetFilter: FILTER_TYPES.VULNERABILITIES,
         title: "Vulnerabilities"
 	},
     {

ui/src/layout/ApplicationResources/ApplicationResourcesTable.js

@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import TablePage from 'components/TablePage';
 import { OPERATORS } from 'components/Filter';
 import VerticalItemsList from 'components/VerticalItemsList';
-import { FILTERR_TYPES } from 'context/FiltersProvider';
+import { FILTER_TYPES } from 'context/FiltersProvider';
 import { CisBenchmarkLevelsDisplay } from 'components/VulnerabilitiesSummaryDisplay';
 import { SEVERITY_ITEMS, CIS_SEVERITY_ITEMS } from 'utils/systemConsts';
 import { RESOURCE_TYPES, VulnerabilitiesLink, PackagesLink, ApplicationsLink } from './utils';
@@ -90,7 +90,7 @@ const ApplicationResourcesTable = () => {
     return (
         <TablePage
             columns={columns}
-            filterType={FILTERR_TYPES.APPLICATION_RESOURCES}
+            filterType={FILTER_TYPES.APPLICATION_RESOURCES}
             filtersMap={{
                 resourceName: {value: "resourceName", label: "Resource name", operators: [
                     {...OPERATORS.is, valueItems: [], creatable: true},

ui/src/layout/ApplicationResources/index.js

@@ -2,15 +2,15 @@ import React from 'react';
 import ListAndDetailsRouter from 'components/ListAndDetailsRouter';
 import InnerAppLink from 'components/InnerAppLink';
 import { ROUTES } from 'utils/systemConsts';
-import { useFilterDispatch, setFilters, FILTERR_TYPES } from 'context/FiltersProvider';
+import { useFilterDispatch, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
 import ApplicationResourcesTable from './ApplicationResourcesTable';
 import ApplicationResourcesDetails from './ApplicationResourcesDetails';
 
 export const ApplicationResourcesLink = ({count, applicationID, packageID, title}) => {
     const filtersDispatch = useFilterDispatch();
 
     const onClick = () => {
-        setFilters(filtersDispatch, {type: FILTERR_TYPES.APPLICATION_RESOURCES, filters: {applicationID, packageID, title}, isSystem: true});
+        setFilters(filtersDispatch, {type: FILTER_TYPES.APPLICATION_RESOURCES, filters: {applicationID, packageID, title}, isSystem: true});
     }
 
     return (

ui/src/layout/Applications/ApplicationsTable.js

@@ -11,7 +11,7 @@ import Modal from 'components/Modal';
 import { TooltipWrapper } from 'components/Tooltip';
 import { LabelsDisplay } from 'components/LabelTag';
 import { CisBenchmarkLevelsDisplay } from 'components/VulnerabilitiesSummaryDisplay';
-import { FILTERR_TYPES } from 'context/FiltersProvider';
+import { FILTER_TYPES } from 'context/FiltersProvider';
 import { SEVERITY_ITEMS, CIS_SEVERITY_ITEMS } from 'utils/systemConsts';
 import { APPLICATION_TYPE_ITEMS, VulnerabilitiesLink, PackagesLink, ApplicationResourcesLink } from './utils';
 import ApplicationForm, { APP_FIELD_NAMES } from './ApplicationForm';
@@ -160,7 +160,7 @@ const ApplicationsTable = () => {
             </TableHeaderPortal>
             <TablePage
                 columns={columns}
-                filterType={FILTERR_TYPES.APPLICATIONS}
+                filterType={FILTER_TYPES.APPLICATIONS}
                 filtersMap={{
                     applicationName: {value: "applicationName", label: "Application name", operators: [
                         {...OPERATORS.is, valueItems: [], creatable: true},

ui/src/layout/Applications/index.js

@@ -2,15 +2,15 @@ import React from 'react';
 import ListAndDetailsRouter from 'components/ListAndDetailsRouter';
 import InnerAppLink from 'components/InnerAppLink';
 import { ROUTES } from 'utils/systemConsts';
-import { useFilterDispatch, setFilters, FILTERR_TYPES } from 'context/FiltersProvider';
+import { useFilterDispatch, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
 import ApplicationsTable from './ApplicationsTable';
 import ApplicationDetails from './ApplicationDetails';
 
 export const ApplicationsLink = ({count, applicationResourceID, packageID, title}) => {
     const filtersDispatch = useFilterDispatch();
 
     const onClick = () => {
-        setFilters(filtersDispatch, {type: FILTERR_TYPES.APPLICATIONS, filters: {applicationResourceID, packageID, title}, isSystem: true});
+        setFilters(filtersDispatch, {type: FILTER_TYPES.APPLICATIONS, filters: {applicationResourceID, packageID, title}, isSystem: true});
     }
 
     return (

ui/src/layout/Dashboard/FixableVulnerabilitiesWidget/index.js

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import Icon, { ICON_NAMES } from 'components/Icon';
 import { TooltipWrapper } from 'components/Tooltip';
 import { OPERATORS } from 'components/Filter';
-import { useFilterDispatch, setFilters, FILTERR_TYPES } from 'context/FiltersProvider';
+import { useFilterDispatch, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
 import { SEVERITY_ITEMS, ROUTES } from 'utils/systemConsts';
 import WidgetWrapper from '../WidgetWrapper';
 
@@ -56,7 +56,7 @@ const FixableVulnerabilitiesWidget = ({data}) => {
             }
         }
 
-        setFilters(filtersDispatch, {type: FILTERR_TYPES.VULNERABILITIES, filters: filtersData});
+        setFilters(filtersDispatch, {type: FILTER_TYPES.VULNERABILITIES, filters: filtersData});
         navigate(ROUTES.VULNERABILITIES);
     }
 

ui/src/layout/Dashboard/PackagesPieWidget/index.js

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import classnames from 'classnames';
 import { orderBy, isEmpty } from 'lodash';
 import { PieChart, Pie, Cell } from 'recharts';
-import { useFilterDispatch, setFilters, FILTERR_TYPES } from 'context/FiltersProvider';
+import { useFilterDispatch, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
 import { OPERATORS } from 'components/Filter';
 import { ROUTES } from 'utils/systemConsts';
 import WidgetWrapper from '../WidgetWrapper';
@@ -70,7 +70,7 @@ const PackagesPieWidget = ({data, itemTitleKey, filterName}) => {
     const onLegendItemClick = ({name, filterNamesNot}) => {
         const isIsNotFilter = !isEmpty(filterNamesNot);
 
-        setFilters(filtersDispatch, {type: FILTERR_TYPES.PACKAGES, filters: [{
+        setFilters(filtersDispatch, {type: FILTER_TYPES.PACKAGES, filters: [{
             scope: filterName,
             operator: isIsNotFilter ? OPERATORS.isNot.value : OPERATORS.is.value,
             value: isIsNotFilter ? filterNamesNot : [name]

ui/src/layout/Dashboard/TopVulnerabilitiesWidget/index.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import VulnerabilitiesSummaryDisplay from 'components/VulnerabilitiesSummaryDisplay';
 import { TooltipWrapper } from 'components/Tooltip';
 import { OPERATORS } from 'components/Filter';
-import { FILTERR_TYPES } from 'context/FiltersProvider';
+import { FILTER_TYPES } from 'context/FiltersProvider';
 import { useFilterDispatch, setFilters } from 'context/FiltersProvider';
 import { setVulnerabilitiesSystemFilters } from 'layout/Vulnerabilities';
 import { ROUTES } from 'utils/systemConsts';
@@ -63,7 +63,7 @@ const TopVulnerabilitiesWidget = ({data}) => {
 
                         const onItemClick = () => {
                             if (!!getCustomFilterData) {
-                                setFilters(filtersDispatch, {type: FILTERR_TYPES.VULNERABILITIES, filters: getCustomFilterData(item), isSystem: false});
+                                setFilters(filtersDispatch, {type: FILTER_TYPES.VULNERABILITIES, filters: getCustomFilterData(item), isSystem: false});
                             } else {
                                 setVulnerabilitiesSystemFilters(filtersDispatch, {[systemFilter]: item.id, title: <span>{`${filterTitle}: `}<BoldText>{title}</BoldText></span>});
                             }