Global

Members

# constant filtersSerialiser

Takes an AsyncTableToolsTable state and transforms it into a Compliance scoped search filter parameter

Tutorials:

View Source PresentationalComponents/ComplianceTable/serialisers.js, line 51

# 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

View Source PresentationalComponents/ComplianceTable/serialisers.js, line 93

Example

Example of a column with an sortable property

 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 useAsyncTableTools hook

toolbarProps object <optional>

Props to be passed on the PrimaryToolbar component

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

View Source PresentationalComponents/ComplianceRoute/ComplianceRoute.js, line 23

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

View Source PresentationalComponents/ComplianceTable/ComplianceTable.js, line 24

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.

View Source SmartComponents/DeleteReport/DeleteReport.js, line 32

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.

View Source SmartComponents/DeleteReport/DeleteReport.js, line 121

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.

View Source SmartComponents/DeleteReport/DeleteReport.js, line 86

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

View Source SmartComponents/DeleteReport/DeleteReport.js, line 155

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

View Source PresentationalComponents/LinkWithPermission/LinkWithPermission.js, line 27

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

View Source PresentationalComponents/Tailorings/Tailorings.js, line 138

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

View Source PresentationalComponents/WithPermission/WithPermission.js, line 21

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. (.length === 0)

View Source Frameworks/AsyncTableTools/hooks/useTableView/views/rowsBuilder.js, line 38

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

View Source Frameworks/AsyncTableTools/hooks/useAsyncTableTools/useAsyncTableTools.js, line 34

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

View Source Frameworks/AsyncTableTools/hooks/useBulkSelect/useBulkSelect.js, line 36

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

View Source Frameworks/AsyncTableTools/hooks/useColumnManager/useColumnManager.js, line 27

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

View Source Utilities/hooks/api/useComplianceApi.js, line 20

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

View Source Utilities/hooks/api/useComplianceQuery.js, line 61

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

View Source Frameworks/AsyncTableTools/hooks/useExpandable/useExpandable.js, line 26

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

View Source Frameworks/AsyncTableTools/hooks/useFilterConfig/useFilterConfig.js, line 31

props for PrimaryToolbar/ConditionalFilter component

FilterConfig

# useFullTableState() → {object}

Hook to access both the "raw" and the serialised table state

View Source Frameworks/AsyncTableTools/hooks/useTableState/hooks/useFullTableState.js, line 13

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

View Source Frameworks/AsyncTableTools/hooks/useItems/useItems.js, line 28

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

View Source Frameworks/AsyncTableTools/hooks/usePagination/usePagination.js, line 18

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

View Source Utilities/hooks/useQuery/useQuery.js, line 39

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"]})

# useRawTableState() → {object}

Hook to access the "raw" table state

View Source Frameworks/AsyncTableTools/hooks/useTableState/hooks/useRawTableState.js, line 13

raw table state

object

# 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

View Source Frameworks/AsyncTableTools/hooks/useSelectionManager/useSelectionManager.js, line 16

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 {index: 1, direction: 'desc'}

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

View Source Frameworks/AsyncTableTools/hooks/useTableSort/useTableSort.js, line 36

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

View Source Frameworks/AsyncTableTools/hooks/useTableState/useTableState.js, line 24

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>

View Source Frameworks/AsyncTableTools/hooks/useTableView/useTableView.js, line 22

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

View Source Frameworks/AsyncTableTools/utils/withExport/withExport.js, line 28

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

View Source Frameworks/AsyncTableTools/hooks/useFilterConfig/useFilterConfig.js, line 9

object

# useAsyncTableToolsReturn

Properties:
Name Type Description
toolbarProps object

Object containing PrimaryToolbar props

tableProps object

Object containing Patternfly (deprecated) Table props

View Source Frameworks/AsyncTableTools/hooks/useAsyncTableTools/useAsyncTableTools.js, line 14

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

View Source Frameworks/AsyncTableTools/hooks/useBulkSelect/useBulkSelect.js, line 10

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

View Source Frameworks/AsyncTableTools/hooks/useColumnManager/useColumnManager.js, line 5

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')

View Source Utilities/hooks/api/useComplianceQuery.js, line 6

object | undefined

# useExpandableReturn

Properties:
Name Type Attributes Description
openItem function <optional>

"Transformer" function to be passed to the rowsBuilder

tableProps object <optional>

Object containing Patternfly (deprecated) Table props

View Source Frameworks/AsyncTableTools/hooks/useExpandable/useExpandable.js, line 6

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!

View Source Utilities/hooks/useQuery/useQuery.js, line 5

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

View Source Frameworks/AsyncTableTools/hooks/useTableSort/useTableSort.js, line 6

object

# withExportReturn

Properties:
Name Type Description
toolbarProps object

Object containing PrimaryToolbar props

exportConfig object

Object containing the exportConfig prop for the PrimaryToolbar

View Source Frameworks/AsyncTableTools/utils/withExport/withExport.js, line 4