Skip to content

Commit

Permalink
Refactor both System tables to use Inventory toolbar (#1918)
Browse files Browse the repository at this point in the history 
* Refactor System list table to use Inventory toolbar

* Fix missing export button

* Remove obsolete snapshot

* Fix lint error

* Fix infinite loading upon performing some actions

* Refactor Systems exposed table toolbar

* Remove obsolete snapshot
  • Loading branch information
@leSamo
leSamo authored Jul 21, 2023
1 parent 6762993 commit 805f2be
Show file tree
Hide file tree
Showing 9 changed files with 248 additions and 4,485 deletions.
11 changes: 7 additions & 4 deletions src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,13 @@ const CVEDetailsPage = () => {
dispatch(fetchCveDetails(cveName));
}, [dispatch, cveName]);

const refreshInventory = () => (
dispatch(clearInventoryStore()),
inventoryRef.current.onRefreshData(({ page: 1 }))
);
const refreshInventory = () => {
dispatch(clearInventoryStore());

// timestamp is used to force inventory to refresh
// if it wasn't there inventory might ignore request to refresh because parameters are the same
inventoryRef.current.onRefreshData(({ timestamp: Date.now(), page: 1 }));
};

const showBusinessRiskModal = cves => {
setBusinessRisk(
Expand Down
162 changes: 124 additions & 38 deletions src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,16 @@ import {
changeExposedSystemsParameters,
clearInventoryStore,
selectRows,
changeColumnsCveDetail
changeColumnsCveDetail,
fetchAffectedSystemIdsByCve
} from '../../../Store/Actions/Actions';
import { SYSTEMS_EXPOSED_HEADER, SYSTEMS_EXPOSED_ALLOWED_PARAMS, PERMISSIONS } from '../../../Helpers/constants';
import {
SYSTEMS_EXPOSED_HEADER,
SYSTEMS_EXPOSED_ALLOWED_PARAMS,
PERMISSIONS,
ANSIBLE_REMEDIATION,
RULE_PRESENCE_OPTIONS
} from '../../../Helpers/constants';
import { TableVariant } from '@patternfly/react-table';
import { InventoryTable } from '@redhat-cloud-services/frontend-components/Inventory';
import ErrorHandler from '../../PresentationalComponents/ErrorHandler/ErrorHandler';
Expand All @@ -28,18 +35,22 @@ import {
clearNotifications
} from '@redhat-cloud-services/frontend-components-notifications/redux';
import { EmptyStateNoSystems } from '../../PresentationalComponents/EmptyStates/EmptyStates';
import { SystemsExposedTableToolbar } from './SystemsExposedTableToolbar';
import { useColumnManagement, useGetEntities, useRbac } from '../../../Helpers/Hooks';
import { useBulkSelect, useColumnManagement, useGetEntities, useRbac } from '../../../Helpers/Hooks';
import * as APIHelper from '../../../Helpers/APIHelper';
import Spinner from '@redhat-cloud-services/frontend-components/Spinner';
import { buildActiveFilters, exportConfig, removeFilters } from '../../../Helpers/TableToolbarHelper';
import Remediation from '../Remediation/Remediation';
import securityRuleFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/SecurityRuleFilter';
import statusFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/StatusFilter';
import useSearchFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/SearchFilter';
import useOsVersionFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/OsVersionFilter';
import remediationFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/RemediationFilter';

const SystemsExposedTable = ({
intl, cveName, cveStatusDetails, filterRuleValues,
hasSecurityRule, canEditPairStatus, canExport, inventoryRef, refreshInventory
}) => {
const [[
canReadHostsInventory],
isLoadingInventory] = useRbac([
const [[canReadHostsInventory], isLoadingInventory] = useRbac([
PERMISSIONS.readHosts
], 'inventory');

Expand Down Expand Up @@ -130,7 +141,66 @@ const SystemsExposedTable = ({
.map(column => ({ ...inventoryColumns.find(({ key }) => column.key === key), ...column }));
};

// TODO: let InventoryTable render its own toolbar instead of using custom one
const rawData = { data: items, meta: { totalItems }, isLoaded };

const remediableSystems = selectedRows.filter(system => system.remediation === ANSIBLE_REMEDIATION);

const kebabOptions = [
...isLoaded ? [
<Remediation
manyRules
isDisabled={selectedRows.length === 0}
systems={remediableSystems}
cves={{ id: cveName, rules: filterRuleValues }}
key="remediation"
/>
] : [],
...canEditPairStatus ? [{
label: intl.formatMessage(messages.editStatus),
onClick: () => showStatusModal([cveStatusDetails], selectedRows),
props: { isDisabled: !selectedRowsCount }
}] : [],
{
label: intl.formatMessage(messages.columnManagementModalTitle),
onClick: () => setColumnManagementModalOpen(true)
}
];

const searchFilter = useSearchFilter(
'filter',
messages.systemsSearchName,
messages.searchFilterByName,
parameters.filter,
apply
);

const advisoryFilter = useSearchFilter(
'advisory',
messages.advisoryName,
messages.searchFilterByAdvisoryName,
parameters.advisory,
apply
);

const osVersionFilter = useOsVersionFilter(
parameters.rhel_version,
apply
);

const bulkSelectProps = useBulkSelect({
rawData,
selectedRows,
selectedRowsCount,
handleSelect,
fetchResource: ops => fetchAffectedSystemIdsByCve({ id: cveName, ...parameters, ...ops })
});

if (isAllExpanded) {
if (rawData.data.filter(row => row.isOpen === undefined).length > 0) {
expandAll(rawData, false);
}
}

return (
<Stack hasGutter>
<StackItem>
Expand All @@ -141,9 +211,12 @@ const SystemsExposedTable = ({
</TextContent>
</StackItem>
<StackItem>
{isLoadingInventory ? <Spinner centered/> :
{StatusModal && <StatusModal />}
{ColumnManagementModal}

{isLoadingInventory ? <Spinner centered /> :
error?.hasError && !canReadHostsInventory
? <ErrorHandler code={error?.errorCode}/>
? <ErrorHandler code={error?.errorCode} />
: <InventoryTable
disableDefaultColumns
onLoad={({ mergeWithEntities }) => {
Expand Down Expand Up @@ -191,34 +264,47 @@ const SystemsExposedTable = ({
showActions={totalItems !== 0}
onExpandClick={(_e, _i, isOpen, { id }) => dispatch(expandRow(id, isOpen))}
hideFilters={{ all: true }}
noSystemsTable={<EmptyStateNoSystems/>}
>
<SystemsExposedTableToolbar
rawData={{ data: items, meta: { totalItems }, isLoaded }}
parameters={parameters}
cveName={cveName}
expandAll={expandAll}
hasSecurityRule={hasSecurityRule}
isAllExpanded={isAllExpanded}
selectedRows={selectedRows}
selectedRowsCount={selectedRowsCount}
cveStatusDetails={cveStatusDetails}
filterRuleValues={filterRuleValues}
methods={{
downloadReport,
apply,
handleSelect,
showStatusModal,
setColumnManagementModalOpen
}}
canEditPairStatus={canEditPairStatus}
canExport={canExport}
>
{StatusModal && <StatusModal/>}

{ ColumnManagementModal }
</SystemsExposedTableToolbar>
</InventoryTable>}
noSystemsTable={<EmptyStateNoSystems />}
expandAll={hasSecurityRule ? {
isAllExpanded,
onClick: () => expandAll(rawData, isAllExpanded),
isDisabled: totalItems === 0
} : undefined}
actionsConfig={{
actions: kebabOptions,
dropdownProps: { ouiaId: 'toolbar-actions' }
}}
exportConfig={canExport && {
isDisabled: totalItems === 0,
ouiaId: 'export',
...exportConfig({ downloadReport })
}}
activeFiltersConfig={{
filters: buildActiveFilters({ ...parameters }, filterRuleValues),
onDelete: (_, chips) => removeFilters(chips, apply),
deleteTitle: intl.formatMessage(messages.resetFilters)
}}
bulkSelect={bulkSelectProps}
filterConfig={{
items: [
searchFilter,
securityRuleFilter(
apply,
parameters,
filterRuleValues,
{
isDynamic: true,
dropdownItems: RULE_PRESENCE_OPTIONS.filter(item => item.value !== 'true')
}
),
statusFilter(apply, parameters),
advisoryFilter,
...osVersionFilter,
remediationFilter(apply, parameters)
]
}}
/>
}
</StackItem>
</Stack>
);
Expand Down
166 changes: 0 additions & 166 deletions src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTableToolbar.js
View file

This file was deleted.

Loading

0 comments on commit 805f2be

Please sign in to comment.