ROX-32647: Add base image assessment card to Image Details page#18483
ROX-32647: Add base image assessment card to Image Details page#18483pedrottimark merged 23 commits intomasterfrom
Conversation
|
Skipping CI for Draft Pull Request. |
|
Images are ready for the commit at 011e769. To use with deploy scripts, first |
|
Images are ready for the commit at f96cd86. To use with deploy scripts, first |
|
When fetching Should we:
Tagging this for discussion once #18381 lands. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #18483 +/- ##
==========================================
+ Coverage 49.23% 49.38% +0.15%
==========================================
Files 2658 2659 +1
Lines 199650 200358 +708
==========================================
+ Hits 98289 98941 +652
- Misses 93938 93977 +39
- Partials 7423 7440 +17
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Another topic of discussion: Is the expandable card approach the best way to display this data? When the list of base images grows (which it might?), the page gets very tall when the card is expanded. This pushes the vuln data down, requiring more scrolling. The page is already quite data-dense. I was thinking a modal approach might be helpful for a case like this. It wouldn't affect the page layout, keeps vuln data visible, and better when we have more base images. The downside would be more clicking, and it could be overkill if we only have around 1-3 base images. I'm not suggesting we do anything different at this stage, but I think this might be something to come back to and discuss a bit more to get it right. cc: @mansursyed |
|
@c-du @daynewlee @jvdm Added you all for awareness (no need to review). The question about errors might be something worth thinking about @c-du |
|
Added a couple more changes:
These were TODOs that were waiting on backend work, which is now available since we're branched off |
4f72871 to
69b6bc0
Compare
dvail
left a comment
There was a problem hiding this comment.
LGTM from a code perspective.
Regarding the error handling, I think in this case 'Accept that empty = "no data or error" is fine for this use case?' is reasonable. If the parent request errors, it looks like the entire page results in an error state anyway. If there are situations where an error in base image detection occurs in the backend, but the graphql query completes successfully with a [] result, then I think a separate field for error detection makes sense.
Very much agree on the placement of the Card and vertical space concerns as well. I haven't tested, but I wouldn't be surprised if all vuln content was below the fold for laptop screens.
What about adding this information in a tab alongside "Vulnerabilities", "Resources", "Signature verification"? Possibly with a status badge for the number of detected base images. Is this information so important that it needs to be shown on the main tab, above the vulnerability info?
ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageVulnerabilities.tsx
Outdated
Show resolved
Hide resolved
1922ff8 to
9feed9e
Compare
Add an expandable card to the Vulnerabilities tab on the Image Details page that displays detected base image information. The card shows: - Base image name with link to base image detail page - Truncated digest with copy button The card is gated behind the ROX_BASE_IMAGE_DETECTION feature flag and only renders when baseImageInfo has entries. Age field is stubbed out pending backend addition of baseImageCreated field to the BaseImageInfo GraphQL type. Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
…tiple images - Move card to its own section with gray background for visual separation - Support displaying multiple base images with dividers between them - Show full digest instead of truncated version (consistent with SHA display) - Update field labels to 'Image name', 'Image digest', 'Image age' - Add baseImageCreated field support (commented out in GraphQL until backend ready) - Fix horizontal alignment to match content below Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
- Remove redundant empty array check (parent handles this) - Default to collapsed state for less visual noise - Remove unnecessary Flex wrapper around image link - Use Fragment instead of StackItem for cleaner structure Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
- Add inBaseImageLayer to GraphQL fragment for accurate layer type display - Replace hardcoded mock data in getBaseImages() with actual API call Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
The backend returns CreateBaseImageReferenceResponse with baseImageReference nested inside, but the service was typed to expect BaseImageReference directly. This fixes the type annotation and response unwrapping to match the actual API response shape. Resolves: ROX-32571 Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
The backend now exposes a consolidated `baseImage` resolver instead of
the raw `baseImageInfo` proto field. This change aligns the UI with the
new GraphQL schema which returns a single BaseImage object with an array
of names rather than an array of BaseImageInfo objects.
- Update GraphQL fragments to use `baseImage { imageSha, names, created }`
- Simplify BaseImageAssessmentCard to work with single object
- Use imageSha (digest) as the image ID for detail links
Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
Display image names as compact labels in a LabelGroup with overflow handling. Shows 3 labels by default with expandable overflow for additional names. Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
e800310 to
50be840
Compare
Description
Adds an expandable "Base image assessment" card to the Vulnerabilities tab on the Image Details page. The card displays:
Supports multiple base images with dividers between entries. Card starts collapsed to reduce visual noise.
Gated behind
ROX_BASE_IMAGE_DETECTIONfeature flag.User-facing documentation
Testing and quality
Automated testing
How I validated my change
Screenshots
Card collapsed
Card expanded (single base image)
Card expanded (multiple base images)