Custom fetch
The InventoryTable component allows replacing the default functions that load entities for the table and tags for the filters with custom async functions to provide results.
const getEntities = () => {
return {...}
};
const getTags = () => {
return {...}
};
<InventoryTable
{...otherProps}
getEntities={getEntities}
getTags={getTags}
/>
getEntities
getEntities = (items: array, config: Config, showTags: boolean, defaultGetEntities: function) => result as Result
items
Custom items. You should consider not using this array when using custom function as you can limit the items there.
config
{
per_page: Number, page: Number, orderBy: String, orderDirection: String, filters: Filters
}
example:
{
"per_page":50,
"page":3,
"orderBy":"display_name",
"orderDirection":"ASC",
"filters":{
"staleFilter":[
"fresh",
"stale"
],
"osFilter":[
"8.4",
"7.9"
],
"registeredWithFilter":[
"insights"
],
"hostnameOrId":"rhel-123"
},
"tags":[],
"filter":{
"system_profile":{}
},
"sortBy":{
"key":"display_name",
"direction":"asc"
},
"hasItems":false
}
defaultGetEntities
As the 4th argument, the default getEntities function is passed, so you can grab it and enhance it.
import { mergeArraysByKey } from '@redhat-cloud-services/frontend-components-utilities/helpers';
customGetEntities = async (_items, config, showTags, defaultGetEntities) => {
const customResult = await getCustomItems(config); // load your items and data
// example: { rows: [...], total: 637 }
const items = customResult.rows.map(({ id }) => id ); // has to be an array of IDs
const enhancedConfig = { ...config, hasItems: true }; // hasItems have to be set to true
const defaultData = await defaultGetEntities(items, enhancedConfig, showTags); // get default data for your items from inventory API
return {
results: mergeArraysByKey([ defaultData.results, customResult.rows ]) // merge common data and your data based on their ids (you can also use your own solution)
total: customResult.total
};
}
result
You should follow this simple format of data:
{
results,
total,
// optional
loaded
}
results
An array of entities.
total
Total number of all entities based on the filters.
loaded
Set loaded to false, when loading was not successful.
Example
<InventoryTable
{...props}
getEntities={async (
items, { per_page, page, orderBy, orderDirection, ...rest
}) => {
const result = await fetch(`/api/application/v1/systems?page_size=${
per_page}&page=${page}`).then(data => data.json());
return {
results: result.data,
total: result.meta.total_items
};
}}
/>
getTags
getTags = (search: array, config: Config) => result as Result
search
Search string to filter tags by
config
See getEntities config.
result
{
page: 1,
per_page: 1,
total: 1,
results: [
{
tag: { key: 'XUyiWeFmoF', namespace: 'BDFiKe', value: 'miAOoMthvR' },
count: 1,
},
],
}
page
Current page to fetch
per_page
Tags per page
total
Overall count of tags
results
An array of objects with a tag object and count.