Skip to content

Commit

Permalink
Refs #38107 - fix bootc bookmarks + adjust table format
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianballou
ianballou committed Jan 10, 2025
1 parent efa7f3e commit 5c0f7d4
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 46 deletions.
13 changes: 13 additions & 0 deletions app/lib/katello/concerns/bookmark_controller_validator_extensions.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module Katello
module Concerns
module BookmarkControllerValidatorExtensions
extend ActiveSupport::Concern

def valid_controllers_list
@valid_controllers_list ||= (["dashboard", "common_parameters", "/katello/api/v2/host_bootc_images"] +
ActiveRecord::Base.connection.tables.map(&:to_s) +
Permission.resources.map(&:tableize)).uniq
end
end
end
end
3 changes: 3 additions & 0 deletions lib/katello/engine.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,9 @@ class Engine < ::Rails::Engine
::HttpProxy.include Katello::Concerns::HttpProxyExtensions
ForemanTasks::RecurringLogic.include Katello::Concerns::RecurringLogicExtensions

# Validator extensions
::BookmarkControllerValidator.singleton_class.send :prepend, Katello::Concerns::BookmarkControllerValidatorExtensions

#Controller extensions
::HostsController.include Katello::Concerns::HostsControllerExtensions
::SmartProxiesController.include Katello::Concerns::SmartProxiesControllerExtensions
Expand Down
98 changes: 52 additions & 46 deletions webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ const BootedContainerImagesPage = () => {
},
digest: {
title: __('Image digests'),
wrapper: ({digests}) => digests.length,
wrapper: ({ digests }) => digests.length,
},
hosts: {
title: __('Hosts'),
wrapper: ({bootc_booted_image, digests}) => (
<a href={`/hosts?search=bootc_booted_image%20=%20${bootc_booted_image}`}>{digests.reduce((total, digest) => total + digest.host_count, 0)}</a>
wrapper: ({ bootc_booted_image: bootcBootedImage, digests }) => (
<a href={`/hosts?search=bootc_booted_image%20=%20${bootcBootedImage}`}>{digests.reduce((total, digest) => total + digest.host_count, 0)}</a>
),
},
};
Expand All @@ -54,11 +54,16 @@ const BootedContainerImagesPage = () => {
defaultParams,
});
const columnsToSortParams = {};
Object.keys(columns).forEach(key => {
Object.keys(columns).forEach((key) => {
if (columns[key].isSorted) {
columnsToSortParams[columns[key].title] = key;
}
});
const { setParamsAndAPI, params } = useSetParamsAndApiAndSearch({
defaultParams,
apiOptions,
setAPIOptions: response.setAPIOptions,
});
const onSort = (_event, index, direction) => {
setParamsAndAPI({
...params,
Expand All @@ -71,7 +76,7 @@ const BootedContainerImagesPage = () => {
onSort,
});
const expandedImages = useSet([]);
const imageIsExpanded = bootc_booted_image => expandedImages.has(bootc_booted_image);
const imageIsExpanded = bootcBootedImage => expandedImages.has(bootcBootedImage);
const STATUS = {
PENDING: 'PENDING',
RESOLVED: 'RESOLVED',
Expand All @@ -81,23 +86,14 @@ const BootedContainerImagesPage = () => {
const {
response: {
results = [],
per_page: perPage,
page,
subtotal,
message: errorMessage,
},
status = STATUS.PENDING,
setAPIOptions,
} = response;

const { setParamsAndAPI, params } = useSetParamsAndApiAndSearch({
defaultParams,
apiOptions,
setAPIOptions: response.setAPIOptions,
});

const [columnNamesKeys, keysToColumnNames] = getColumnHelpers(columns);
const onPagination = newPagination => {
const onPagination = (newPagination) => {
setParamsAndAPI({ ...params, ...newPagination });
};
const bottomPagination = (
Expand All @@ -107,10 +103,16 @@ const BootedContainerImagesPage = () => {
perPage={params.perPage}
itemCount={subtotal}
onChange={onPagination}
updateParamsByUrl={true}
updateParamsByUrl
/>
);

const getColumnWidth = (key) => {
if (key === 'bootc_booted_image') return 40;
if (key === 'digest') return 15;
return 45;
};

return (
<TableIndexPage
apiUrl={BOOTED_CONTAINER_IMAGES_API_PATH}
Expand All @@ -128,6 +130,7 @@ const BootedContainerImagesPage = () => {
<Th />
{columnNamesKeys.map(k => (
<Th
width={getColumnWidth(k)}
key={k}
sort={
Object.values(columnsToSortParams).includes(k) &&
Expand Down Expand Up @@ -165,7 +168,7 @@ const BootedContainerImagesPage = () => {
/>
</Td>
</Tr>
)}
)}
{errorMessage && (
<Tr ouiaId="table-error">
<Td colSpan={100}>
Expand All @@ -175,18 +178,19 @@ const BootedContainerImagesPage = () => {
)}
</Tbody>
{results?.map((result, rowIndex) => {
const { bootc_booted_image, digests } = result;
const isExpanded = imageIsExpanded(bootc_booted_image);
const { bootcBootedImage, digests } = result;
const isExpanded = imageIsExpanded(bootcBootedImage);
return (
<Tbody key={`bootable-container-images-body-${rowIndex}`} isExpanded={isExpanded}>
<Tr key={bootc_booted_image} ouiaId={`table-row-${rowIndex}`}>
<Tbody key="bootable-container-images-body" isExpanded={isExpanded}>
<Tr key={bootcBootedImage} ouiaId={`table-row-${rowIndex}`}>
<>
<Td
expand={digests.length > 0 && {
rowIndex,
isExpanded,
onToggle: (_event, _rInx, isOpen,) => expandedImages.onToggle(isOpen, bootc_booted_image),
expandId: 'booted-containers-expander'
onToggle: (_event, _rInx, isOpen) =>
expandedImages.onToggle(isOpen, bootcBootedImage),
expandId: 'booted-containers-expander',
}}
/>
{columnNamesKeys.map(k => (
Expand All @@ -199,30 +203,32 @@ const BootedContainerImagesPage = () => {
))}
</>
</Tr>
{digests ? <Tr isExpanded={isExpanded}>
<Td colSpan={3}>
<ExpandableRowContent>
<TableComposable variant="compact" isStriped>
<Thead>
<Tr>
<Th>{__('Image digest')}</Th>
<Th>{__('Hosts')}</Th>
</Tr>
</Thead>
<Tbody>
{digests.map((digest, index) => (
<Tr key={index}>
<Td>{digest.bootc_booted_digest}</Td>
<Td>
<a href={`/hosts?search=bootc_booted_digest%20=%20${digest.bootc_booted_digest}`}>{digest.host_count}</a>
</Td>
{digests ?
<Tr isExpanded={isExpanded} ouiaId={`table-row-outer-expandable-${rowIndex}`}>
<Td />
<Td colSpan={3}>
<ExpandableRowContent>
<TableComposable variant="compact" isStriped ouiaId={`table-composable-expanded-${rowIndex}`}>
<Thead>
<Tr ouiaId={`table-row-inner-expandable-${rowIndex}`}>
<Th width={50}>{__('Image digest')}</Th>
<Th width={50}>{__('Hosts')}</Th>
</Tr>
))}
</Tbody>
</TableComposable>
</ExpandableRowContent>
</Td>
</Tr> : null}
</Thead>
<Tbody>
{digests.map((digest, index) => (
<Tr key={digest} ouiaId={`table-row-expandable-content-${index}`}>
<Td>{digest.bootc_booted_digest}</Td>
<Td>
<a href={`/hosts?search=bootc_booted_digest%20=%20${digest.bootc_booted_digest}`}>{digest.host_count}</a>
</Td>
</Tr>
))}
</Tbody>
</TableComposable>
</ExpandableRowContent>
</Td>
</Tr> : null}
</Tbody>
);
})}
Expand Down

0 comments on commit 5c0f7d4

Please sign in to comment.