Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #38107 - Booted container images page #11269

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

ianballou
Copy link
Member

What are the changes introduced in this pull request?

Adds the "Booted container images" page. In the future it'll likely change to be the "Containers" page and merge with the new container images UI.

Within the page, there is a table that shows an overview of booted container images used by bootc hosts. The table shows the image name, number of digests within, and the number of hosts using that container image:

image

The last functionality-TODO is to make the rows expand and show the actual digests within. I also need to write tests.

Considerations taken when implementing this change?

I decided to use the newer TableIndexPage from Foreman since it's the new goodness.

This PR is built on top of #11257.

What are the testing steps for this pull request?

  1. Create hosts that have bootc attributes, ideally enough to test the counting and pagination
  2. Try everything the new page has to offer, including the hyperlinks

@ianballou
Copy link
Member Author

It looks like I can't use the Foreman React Table component due to the expandable rows. That component sticks children inside a Tbody, but I need to create one Tbody elements for each expandable row.

Tbody elements cannot go inside another Tbody.

@ianballou ianballou marked this pull request as draft December 20, 2024 15:08
@ianballou ianballou force-pushed the 38107-bootc-images-page branch from ef686fc to d861aea Compare December 20, 2024 18:05
const BootedContainerImagesPage = () => {
const columns = {
image_name: {
title: __('Image name'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change this to Bootc - booted image name so it's also easier to figure out the serach query?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed all of the references to image_name to bootc_booted_image like in the API.

@sjha4
Copy link
Member

sjha4 commented Dec 20, 2024

So we don't forget after the break, the bookmarks controller needs some love on the page to work..

@ianballou ianballou force-pushed the 38107-bootc-images-page branch 3 times, most recently from 85536ed to 7ac103d Compare December 23, 2024 16:54
@ianballou
Copy link
Member Author

Sorting support is in!

@ianballou ianballou marked this pull request as ready for review January 6, 2025 16:34
@ianballou ianballou force-pushed the 38107-bootc-images-page branch from 7ac103d to f634101 Compare January 7, 2025 19:34
@ianballou ianballou force-pushed the 38107-bootc-images-page branch from f634101 to 5c0f7d4 Compare January 10, 2025 21:49
Copy link
Member Author

@ianballou ianballou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've fixed bookmarks and tidied up some things.
Empty state is still broken and I'm a little confused, and the table doesn't match the mock-up perfectly. Details below:

!errorMessage && (
<Tr ouiaId="table-empty">
<Td colSpan={100}>
<EmptyPage
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why, but this empty state page does not want to get rendered. The loading page renders even, just not this one.

<TableComposable variant="compact" isStriped ouiaId={`table-composable-expanded-${rowIndex}`}>
<Thead>
<Tr ouiaId={`table-row-inner-expandable-${rowIndex}`}>
<Th width={50}>{__('Image digest')}</Th>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to use the width to align the inner "Hosts" data with the outer "Hosts" data, but they are always off by a little bit. So, for now, I distanced them enough to not look completely weird. Ideally I could remove the Hosts header in the inner expanded table and have that data be perfectly lined up with the outer table's hosts count. However, I'm not sure if that's easily possible with these PF components.

@ianballou ianballou force-pushed the 38107-bootc-images-page branch from 5c0f7d4 to 5af40f2 Compare January 10, 2025 21:54
@ianballou
Copy link
Member Author

Current state:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants