feat: details page for disk images #866
Conversation
Modifies the build logs to have a proper details page for disk images, similar to how Podman Desktop handles Images or Containers. The two tabs are Summary and Build Logs. The summary page is simple for now but could be expanded; the build logs doesn't really match what we typically have in Podman Desktop, but it fits in better here than a standalone page. Fixes podman-desktop#856. Signed-off-by: Tim deBoer <[email protected]>
deboer-tim
requested review from
cdrage,
feloy and
SoniaSandler
and removed request for
a team
| console.log('id: ' + actualId); | ||
| console.log('hist: ' + historyInfo.subscribe.length); |
There was a problem hiding this comment.
| console.log('id: ' + actualId); | |
| console.log('hist: ' + historyInfo.subscribe.length); |
| console.log('hist: ' + historyInfo.subscribe.length); | ||
| return historyInfo.subscribe(value => { | ||
| const matchingImage = value.find(image => image.id === actualId); | ||
| console.log('match: ' + matchingImage?.id); |
There was a problem hiding this comment.
| console.log('match: ' + matchingImage?.id); |
| @@ -0,0 +1,30 @@ | |||
| /********************************************************************** | |||
| * Copyright (C) 2023-2024 Red Hat, Inc. | |||
There was a problem hiding this comment.
| * Copyright (C) 2023-2024 Red Hat, Inc. | |
| * Copyright (C) 2024 Red Hat, Inc. |
There was a problem hiding this comment.
/upstream is where we've been copying code as-is from PD (until hopefully one day it is part of the UI library), but I've updated this header.
|
|
||
| export function isTabSelected(routerPath: string, tabUrl: string): boolean { | ||
| return routerPath === getTabUrl(routerPath, tabUrl); | ||
| } |
There was a problem hiding this comment.
I copied this from PD, where there were no tests 😬. I've added some, and will PR to PD as well.
| {#if image} | ||
| <tr> | ||
| <Cell>Source image</Cell> | ||
| <Cell>{image.image}:{image.tag}</Cell> |
There was a problem hiding this comment.
Something nice (follow up PR) could be done here, is to have the image as a link and redirect to the image details page.
There was a problem hiding this comment.
Good idea! Yes, I'll do this via another PR.
Removed unnecessary console.log debugging and added tests for Util. Signed-off-by: Tim deBoer <[email protected]>
There was a problem hiding this comment.
Looks absolutely great and thanks for this change!
After testing, the implementation looks great and I have no issues with the code / code LGTM.
I'm going to rebase #865 so that it's in a tab similar to this implementation after this is merged in.
As part of podman-desktop/extension-bootc#866 it was noticed that the Util class is missing tests for a couple functions, this just adds them. Signed-off-by: Tim deBoer <[email protected]>
As part of podman-desktop/extension-bootc#866 it was noticed that the Util class is missing tests for a couple functions, this just adds them. Signed-off-by: Tim deBoer <[email protected]>
What does this PR do?
Modifies the build logs to have a proper details page for disk images, similar to how Podman Desktop handles Images or Containers.
The two tabs are Summary and Build Logs. The summary page is simple for now but could be expanded; the build logs doesn't really match what we typically have in Podman Desktop, but it fits in better here than a standalone page.
Screenshot / video of UI
Before:
Screen.Recording.2024-09-27.at.1.27.30.PM.mov
After:
Screen.Recording.2024-09-27.at.1.26.13.PM.mov
What issues does this PR fix or reference?
Fixes #856.
How to test this PR?
Build some disk images, switch between homepage and disk image, use homepage action to go straight to a build.