Members
# constant filtersSerialiser
Takes an AsyncTableToolsTable state and transforms it into a Compliance scoped search filter parameter
# constant sortSerialiser
Returns a string consumable by the Compliance API as a "sort_by" parameter for a given column and direction For columns to be sortable they need to have a "sortable" prop, which corresponds to the field name in the Compliance API
Example
const columns = [
{
title: 'Name',
sortable: 'name' // Corresponds to the attribute/field to sort by in the API
}
];
Methods
# AsyncTableToolsTable(props) → {React.ReactElement}
This component is a wrapper around the Patternfly Table component(s), the FEC PrimaryToolbar and combines them with the useAsyncTableTools
hook
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
props |
object
|
Component Props |
|
items |
Array
|
An array or (async) function that returns an array of items to render or an async function to call with the tableState and serialised table state |
|
columns |
Array
|
An array of column objects to render items with |
|
filters |
Array
|
<optional> |
an array of filters |
total |
Array
|
<optional> |
Number of total items available |
loading |
boolean
|
<optional> |
Custom loading condition |
options |
object
|
<optional> |
An object of options that will be passed along to the |
toolbarProps |
object
|
<optional> |
Props to be passed on the |
tableHeaderProps |
object
|
<optional> |
Props to be passed on the TableHeader component |
tableBodyProps |
object
|
<optional> |
Props to be passed on the TableBody component |
tableToolbarProps |
object
|
<optional> |
Props to be passed on the TableToolbar (bottom toolbar) component |
paginationProps |
object
|
<optional> |
Props to be passed on the Pagination component |
- Tutorials:
View Source Frameworks/AsyncTableTools/components/AsyncTableToolsTable/AsyncTableToolsTable.js, line 37
Returns a PrimaryToolbar
component, a Patternfly (v4) Table
component and a TableToolbarComponent
wrapped together
React.ReactElement
# ComplianceRoute(props) → {React.ReactElement}
This is component renders "routes" in Routes.js
Parameters:
Name | Type | Description |
---|---|---|
props |
object
|
Component props |
component |
React.ReactElement
|
Component to render |
title |
string
|
Title to set as browser title |
path |
string
|
Path of the route |
requiredPermissions |
Array
|
An array of RBAC permissions required to render the component |
props |
object
|
Props for the component to render |
Returns the component for this route
React.ReactElement
# ComplianceTable(props) → {React.ReactElement}
This component serves as a place to either use the non-async TableTools or the AsyncTableTools And allow preparing the AsyncTableToolsTable props/options common across tables in Compliance
Parameters:
Name | Type | Description |
---|---|---|
props |
object
|
Component props |
Returns either a Async or non async table depending on useAPIV2FeatureFlag
React.ReactElement
# DeleteReportBase(props) → {React.Element}
DeleteReportBase Component
Renders the base modal for deleting a report. It provides buttons for confirming or canceling the deletion.
Parameters:
Name | Type | Description |
---|---|---|
props |
object
|
The properties passed to the component. |
id |
string
|
The ID of the report to be deleted. |
deleteReport |
function
|
Function to call when the delete button is clicked. |
onClose |
function
|
Function to call when the cancel button or modal close is triggered. |
The rendered DeleteReportBase component.
React.Element
# DeleteReportGraphQL(props) → {React.Element}
DeleteReportGraphQL Component
Handles report deletion using a GraphQL.
Parameters:
Name | Type | Description |
---|---|---|
props |
object
|
The properties passed to the component. |
reportId |
string
|
The ID of the report to be deleted. |
onClose |
function
|
Function to call when the modal is closed. |
onDelete |
function
|
Function to call when the report is successfully deleted. |
The rendered DeleteReportGraphQL component.
React.Element
# DeleteReportRest(props) → {React.Element}
DeleteReportRest Component
Handles report deletion using a REST API.
Parameters:
Name | Type | Description |
---|---|---|
props |
object
|
The properties passed to the component. |
reportId |
string
|
The ID of the report to be deleted. |
onClose |
function
|
Function to call when the modal is closed. |
onDelete |
function
|
Function to call when the report is successfully deleted. |
The rendered DeleteReportRest component.
React.Element
# DeleteReportWrapper() → {React.Element}
DeleteReportWrapper Component
This component decides to show a loading spinner or the component once apiV2 is defined
The rendered DeleteReportWrapper component.
React.Element
# LinkWithPermission(props) → {React.ReactElement}
Component to render a InsightsLink if required permissions are met or render a disabled link with tooltip if not.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
props |
object
|
Component props |
|
to |
string
|
object
|
ReactRouter to prop, which will be used to determine the required permissions for this path |
|
Component |
React.ReactElement
|
<optional> |
Alternative "Link" component to render |
componentProps |
object
|
<optional> |
Additional props for the Link component |
children |
React.ReactElement
|
Component children |
Component
React.ReactElement
# TableStateProvider(propsopt) → {React.ReactElement}
This component provides a context for components/hooks that want to use async tables and access it's state to perform API requests
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
props |
object
|
<optional> |
Component Props |
children |
React.ReactElement
|
<optional> |
Child components to render within |
- Tutorials:
View Source Frameworks/AsyncTableTools/components/TableStateProvider/TableStateProvider.js, line 19
The passed in component wrapped in a TableContext provider
React.ReactElement
# Tailorings(propsopt) → {React.ReactElement}
This component is used to show either the tailorings with rules of a specific policy, or the rules of a specific security guide and it's rules for a set of minor OS versions
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
props |
object
|
<optional> |
|
policy |
object
|
<optional> |
A policy object from the API |
profiles |
string
|
<optional> |
An array of objects containing osMajorVersion, osMinorVersion, securityGuideId, profileId props for showing additional tabs. |
defaultTab |
string
|
<optional> |
TODO |
columns |
Array
|
<optional> |
An array of RulesTable columns |
level |
number
|
<optional> |
Sets the level of the tab in the URL anchor |
ouiaId |
string
|
<optional> |
OuiaId to pass to the PatternFly Table |
onValueOverrideSave |
function
|
<optional> |
Callback function called when a value of a rule is saved |
onSelect |
function
|
<optional> |
Callback function called when any selection is made |
preselected |
object
|
<optional> |
An object containing the preselection of rules for each tab |
enableSecurityGuideRulesToggle |
boolean
|
<optional> |
Will enable the "Only Selected" toggle. When a policy with tailorings is shown and the toggle is enabled it will request rule data from the tailoring, with it disabled it will load rule data from the security guide. If a profile is provided it will load rules either from the profile, if the toggle is enabled, otherwise from the security guide. |
rulesPageLink |
<optional> |
||
selectedVersionCounts |
object
|
An object containing minor version as a key and count as a value. Helps to render the system count badge in tab headers. |
|
valueOverrides |
React.ReactElement
Example
// Will show the tailorings of a policy
<Tailorings
ouiaId="RHELVersions"
columns={[
Columns.Name,
Columns.Severity,
Columns.Remediation,
]}
policy={policy}
/>
// Will show the tailorings of a policy and an additional tabs for other OS minor version to show
<Tailorings
ouiaId="RHELVersions"
columns={[
Columns.Name,
Columns.Severity,
Columns.Remediation,
]}
policy={policy}
profiles={[
{
osMajorVersion: 9,
osMinorVersion: 1,
securityGuideId: 'XYZ-ABC',
profileId: 'XYZ-ABC',
},
{
osMajorVersion: 9,
osMinorVersion: 2,
securityGuideId: 'XYZ-ABC',
profileId: 'XYZ-ABC',
},
]}
/>
// Will show tabs with rules from the security guide and the specified OS minor versions
<Tailorings
ouiaId="RHELVersions"
columns={[
Columns.Name,
Columns.Severity,
Columns.Remediation,
]}
profiles={[
{
osMajorVersion: 9,
osMinorVersion: 1,
securityGuideId: 'XYZ-ABC',
profileId: 'XYZ-ABC',
},
{
osMajorVersion: 9,
osMinorVersion: 2,
securityGuideId: 'XYZ-ABC',
profileId: 'XYZ-ABC',
},
]}
/>
// Will show tabs with rules from the security guide and the specified OS minor versions
// and preselect rules with the IDs provided in preselected. The key can also be a tailorings ID
<Tailorings
ouiaId="RHELVersions"
columns={[
Columns.Name,
Columns.Severity,
Columns.Remediation,
]}
profiles={[
{
osMajorVersion: 9,
osMinorVersion: 1,
securityGuideId: 'XYZ-ABC',
profileId: 'XYZ-ABC',
},
{
osMajorVersion: 9,
osMinorVersion: 2,
securityGuideId: 'XYZ-ABC',
profileId: 'XYZ-ABC',
},
]}
preselected={{
"2": ['RULE_ID1', 'RULE_ID2']
"1": ['RULE_ID11', 'RULE_ID5']
}}
/>
# WithPermission(props) → {React.ReactElement}
Wrapper component to either render a component if required permissions are met,
Show the NotAuthorized
page, or do not render the component at all
Parameters:
Name | Type | Description |
---|---|---|
props |
object
|
Component props |
children |
React.ReactElement
|
Component to render |
requiredPermissions |
Array
|
An array of RBAC permissions required to render the component |
hide |
boolean
|
Boolean to set wether or not to hide the component if required permissions are NOT met |
Returns the component for this route
React.ReactElement
# rowsBuilder(items, columns, optionsopt) → {object}
A function to compile a list of items and passed columns into rows for the Patternfly (v4) Table component within a tableProps
object.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
items |
Array
|
An array of items to render |
|
columns |
Array
|
An array of columns to render the rows with |
|
options |
object
|
<optional> |
Options for rendering rows |
emptyRows |
object
|
<optional> |
A component to render when no items are to render. ( |
A object containing tableProps
object
# useAsyncTableTools(items, columns, optionsopt) → {useAsyncTableToolsReturn}
This hook combines several "Table hooks" and returns props for Patternfly (v4) Table components and the FEC PrimaryToolbar
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
items |
Array
|
function
|
An array or (async) function that returns an array of items to render or an async function to call with the tableState and serialised table state |
|
columns |
object
|
An array of columns to render the items/rows with |
|
options |
object
|
<optional> |
AsyncTableTools options |
An object of props meant to be used in the AsyncTableToolsTable
# useBulkSelect(optionsopt) → {useBulkSelectReturn}
Provides properties for a Pattternfly (based) Table and Toolbar component to implement bulk selection
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
object
|
<optional> |
AsyncTableTools options |
total |
number
|
<optional> |
Number to show as total count |
onSelect |
function
|
<optional> |
function to call when a selection is made |
preselected |
Array
|
<optional> |
Array of itemIds selected when initialising |
itemIdsInTable |
function
|
<optional> |
Function to call to retrieve IDs when "Select All" is chosen |
itemIdsOnPage |
Array
|
<optional> |
Array of item ids visible on the page |
identifier |
string
|
<optional> |
Property of the items that should be used as ID to select them |
Functions and props to use for setting up bulk selection
# useColumnManager(columns, optionsopt) → {useColumnManagerReturn}
Provides columns for a Patternfly table, a (Primary)Toolbar action and a ColumnManager
component
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
columns |
Array
|
Columns for a table to be managed |
|
options |
object
|
<optional> |
AsyncTableTools options |
columnManagerSelectProp |
string
|
<optional> |
Property to use for the selection manager to identify columns |
manageColumnLabel |
string
|
<optional> |
Label for the action item to show |
Props and function to integrate the column manager
# useComplianceApi(endpointopt) → {object|function}
Hook to get a Compliance javascript-client or specific endpoint function
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
endpoint |
string
|
<optional> |
String of the javascript-clients export for the needed endpoint |
Compliance javascript-client or specific endpoint function
object
|
function
# useComplianceQuery(endpoint, optionsopt) → {useQueryReturn}
Hook to use a Compliance REST API v2 endpoint with useQuery.
Optionally support for using the serialised table state if a <TableStateProvider/>
is available.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
endpoint |
function
|
String of the javascript-clients export for the needed endpoint |
|
options |
object
|
<optional> |
Options for useComplianceQuery & useQuery |
params |
useComplianceQueryParams
|
<optional> |
API endpoint params |
useTableState |
boolean
|
<optional> |
Use the serialised table state |
An object containing a data, loading and error state, as well as a fetch and refetch function.
Example
// Will return a `useQuery` result with data, loading, error
const { data, loading, error } = useComplianceQuery('policies')
// Will return a `useQuery` result with a filter passed to the API
const reportsApi = useComplianceQuery('reports', {
params: { filter: 'name NOT null'}
})
// Will return a `useQuery` result using the sort, pagination and filter state from a TableStateProvider passed as params to the API
const reportsApi = useComplianceQuery('reports', {
useTableState: true
})
// Will do the same as above, but additionally add a default filter to the tables filter
const reportsApi = useComplianceQuery('reports', {
params: { filter: 'name NOT null' },
useTableState: true
})
// Will use the table state for pagination and filters, but always use the 'name:asc' for every request
const reportsApi = useComplianceQuery('reports', {
params: { sortBy: 'name:asc' },
useTableState: true
})
# useExpandable(optionsopt) → {useExpandableReturn}
Provides props for a Patternfly table to manage expandable items/rows.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
object
|
<optional> |
AsyncTableTools options |
detailsComponent |
object
|
<optional> |
A component that should be rendered as a details row |
An object of props meant to be used in the AsyncTableToolsTable
# useFilterConfig(optionsopt) → {FilterConfig}
Provides PrimaryToolbar
props for the ConditionalFilter
component filter configuration.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
object
|
<optional> |
AsyncTableTools options |
filters.filterConfig |
object
|
<optional> |
An object containing filter definition |
filters.activeFilters |
object
|
<optional> |
An object containing an initial active filters state |
serialisers.filters |
object
|
<optional> |
A function to serialise the filter table state |
props for PrimaryToolbar/ConditionalFilter component
# useFullTableState() → {object}
Hook to access both the "raw" and the serialised table state
table state
object
# useItems(itemsProp) → {Array}
This hook handles either just returning a provided array of items or calls a provided async (fetch) function to load an array of items
Parameters:
Name | Type | Description |
---|---|---|
itemsProp |
Array
|
function
|
An array or (async) function that returns an array of items to render or an async function to call with the tableState and serialised table state |
An array of items from the itemsProp passed in or a return from it as a function
Array
# usePagination(optionsopt) → {object}
Provides pagination
props and functionality for a (Primary)Toolbar
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
object
|
<optional> |
AsyncTableTools options |
numberOfItems |
number
|
The total number of items (required). |
|
perPage |
number
|
<optional> |
A number that will dictate the amount of items shown per page. |
serialisers.pagination |
function
|
<optional> |
A function to provide a serialiser for the table state |
An object of props meant to be used in the AsyncTableToolsTable
object
# useQuery(fn, optionsopt) → {useQueryReturn}
Custom hook to execute a query function with parameters and optional skip condition
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
fn |
function
|
Function to execute |
|
options |
object
|
<optional> |
Includes options like params and skip |
params |
Array
|
object
|
<optional> |
Parameters passed to the request to make. If an array is passed it will be spread as arguments! |
debounce |
boolean
|
<optional> |
Enables/disables debouncing of requests |
convertToArray |
boolean
|
<optional> |
A function to use to convert a params object into an arguments array to pass to the fetch function |
skip |
boolean
|
<optional> |
Wether or not to skip the request |
An object containing a data, loading and error state, as well as a fetch and refetch function.
Examples
// Query is skipped if conditions are met
const query = useQuery(apiInstance.systems, {params: ["param1", "param2"], skip: number > 5})
const query = useQuery(apiInstance.systems)
const query = useQuery(apiInstance.system, {params: ["id"]})
# useSelectionManager(preselected, optionsopt, handleSelect) → {object}
Provides a generic API to manage selection stats of one (default) or multiple groups of selections.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
preselected |
Array
|
Array of items initially selected |
|
options |
object
|
<optional> |
function to call when a selection is made |
handleSelect |
function
|
function to call when a selection is made |
Object containing the current selection state and functions to manipulate it
object
# useSerialisedTableState() → {object}
Hook to access the serialised table state
View Source Frameworks/AsyncTableTools/hooks/useTableState/hooks/useSerialisedTableState.js, line 13
serialised table state
object
# useTableSort(columns, optionsopt) → {useTableSortReturn}
Provides columns with the sortable
transform mixed in for a Patternfly table.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
columns |
Array
|
Columns for a table, with a "sortable" prop |
|
options |
object
|
<optional> |
AsyncTableTools options |
sortBy |
object
|
<optional> |
An initial sortBy state like |
onSort |
object
|
<optional> |
A function to call after setting a new sort state. |
serialisers.sort |
object
|
<optional> |
A function to provide a serialiser for the table state |
Props for a Patternfly table to integrate sorting
Example
const columns = [{ title: 'Name', sortable: true }]
const tableSort = useTableSort(columns)
# useTableState(namespace, initialStateopt, optionsopt) → {Array}
Provides an interface for hooks to store their states name-spaced into the tableState in the TableContext
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
namespace |
object
|
A key to namespace the state under (e.g. 'filters', 'sort') |
|
initialState |
object
|
<optional> |
Initial state to put into the table state |
options |
object
|
<optional> |
Options for the state |
serialiser |
object
|
<optional> |
A function to serialise the table state and allow access it via the useSerialisedTableState hook |
observers |
object
|
<optional> |
An object with properties of an other state namespace and an object or function returning an object with an desired state should the other state change |
An array with the first item being the tableState, the second a function to set the state and a third optional item with the serialised state if a serialiser was provided
Array
# useTableView(items, columns, optionsopt) → {object}
A hook that manages "views" for a Patternfly (v4) Table component, like a simple "row" view or a "tree" view
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
items |
Array
|
An array of items to render |
|
columns |
Array
|
An array of columns to render items with |
|
options |
object
|
<optional> |
AsyncTableTools options |
tableTree |
object
|
<optional> |
|
showViewToggle |
boolean
|
<optional> |
|
defaultTableView |
string
|
<optional> |
TODO
object
# withExport(optionsopt) → {withExportReturn}
Provides an exportConfig
prop for a (Primary)Toolbar action
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
object
|
<optional> |
AsyncTableTools options |
exporter |
function
|
<optional> |
Function to return an array of items to be exported |
columns |
Array
|
<optional> |
columns for the export |
isDisabled |
boolean
|
<optional> |
Wether or not export is enabled |
onStart |
function
|
<optional> |
Function to call before the export |
onComplete |
function
|
<optional> |
Function to call when the export succeeded |
onError |
function
|
<optional> |
Function to call when there was an error exporting |
Props for PrimaryToolbar component
Type Definitions
object
# FilterConfig
Properties:
Name | Type | Description |
---|---|---|
toolbarProps |
object
|
Object containing PrimaryToolbar props |
filterConfig |
object
|
Object containing the filterConfig prop for the PrimaryToolbar |
activeFiltersConfig |
object
|
Object containing the activeFiltersConfigs prop for the PrimaryToolbar |
object
# useAsyncTableToolsReturn
Properties:
Name | Type | Description |
---|---|---|
toolbarProps |
object
|
Object containing PrimaryToolbar props |
tableProps |
object
|
Object containing Patternfly (deprecated) Table props |
object
# useBulkSelectReturn
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
markRowSelected |
function
|
<optional> |
"Transformer" function to be passed to the rowsBuilder |
toolbarProps |
object
|
<optional> |
Object containing PrimaryToolbar props |
tableProps |
object
|
<optional> |
Object containing Patternfly (v4) Table props |
object
# useColumnManagerReturn
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
columns |
Array
|
Patternfly table columns |
|
columnManagerAction |
function
|
<optional> |
Action props for a Toolbar action |
ColumnManager |
object
|
<optional> |
ColumnManager modal component to be shown to manage columns |
object
# useComplianceQueryParams
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
filter |
string
|
<optional> |
Scoped search filter string for the endpoint |
pagination |
object
|
<optional> |
API pagination params |
offset |
object
|
<optional> |
Pagination offset |
limit |
object
|
<optional> |
Pagination limit (maximum 100) |
sortBy |
object
|
<optional> |
SortBy string for the API (usually 'attribute:desc') |
object
|
undefined
# useExpandableReturn
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
openItem |
function
|
<optional> |
"Transformer" function to be passed to the |
tableProps |
object
|
<optional> |
Object containing Patternfly (deprecated) Table props |
object
# useQueryReturn
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
data |
any
|
<optional> |
Data loaded from the response of the request |
error |
Error
|
<optional> |
An error if the request failed |
loading |
boolean
|
<optional> |
Boolean of wether or not data is being requested |
refetch |
function
|
<optional> |
A function to re-trigger a request with params coming from the options |
fetch |
function
|
<optional> |
A function to make a request on demand. It takes to arguments, a params object or array, and a boolean to control wether or not to set the "data" state or return the results directly. In case the params argument is an array any params from the options will be ignored! |
object
# useTableSortReturn
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
tableProps |
object
|
<optional> |
Props for a Patternfly table |
onSort |
function
|
<optional> |
Callback function for column headers in a Patternfly table |
cells |
Array
|
<optional> |
Array containing columns for a Patternfly table with the sortable transform applied |
sortBy |
object
|
<optional> |
Object containing the current sortBy state |
object
# withExportReturn
Properties:
Name | Type | Description |
---|---|---|
toolbarProps |
object
|
Object containing PrimaryToolbar props |
exportConfig |
object
|
Object containing the exportConfig prop for the PrimaryToolbar |