feat: add manifest / multi-arch selection support

### What does this PR do?

* Manifests are now listed, inspected and propagated within the Build
  page
* Simply select a manifest, select the arch and it will build

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

Closes podman-desktop#324

### How to test this PR?

<!-- Please explain steps to reproduce -->

Follow the video above, or do the following tests:

1. Build a manifest within Podman Desktop (select two architectures, and
   build a bootc image). Must use the latest Podman Desktop
2. Select the manifest within the extension and see it build.

Signed-off-by: Charlie Drage <[email protected]>

packages/backend/src/api-impl.ts

@@ -100,12 +100,30 @@ export class BootcApiImpl implements BootcApi {
   async listBootcImages(): Promise<ImageInfo[]> {
     let images: ImageInfo[] = [];
     try {
-      const retrieveImages = await podmanDesktopApi.containerEngine.listImages();
-      images = retrieveImages.filter(image => {
-        if (image.Labels) {
-          return image.Labels['bootc'] ?? image.Labels['containers.bootc'];
+      const retrievedImages = await podmanDesktopApi.containerEngine.listImages();
+      const filteredImages: ImageInfo[] = [];
+      for (const image of retrievedImages) {
+        let includeImage = false;
+
+        // The image must have RepoTags and Labels to be considered a bootc image
+        if (image.RepoTags && image.Labels) {
+          // Convert to boolean by checking the string is non-empty
+          includeImage = !!(image.Labels['bootc'] ?? image.Labels['containers.bootc']);
+        } else if (image?.isManifest) {
+          // Manifests **usually** do not have any labels. If this is the case, we must find the images associated to the
+          // manifest in order to determine if we are going to return the manifest or not.
+          const manifestImages = await containerUtils.getImagesFromManifest(image, retrievedImages);
+          // Checking if any associated image has a non-empty label
+          includeImage = manifestImages.some(
+            manifestImage => !!(manifestImage.Labels['bootc'] ?? manifestImage.Labels['containers.bootc']),
+          );
         }
-      });
+
+        if (includeImage) {
+          filteredImages.push(image);
+        }
+      }
+      images = filteredImages;
     } catch (err) {
       await podmanDesktopApi.window.showErrorMessage(`Error listing images: ${err}`);
       console.error('Error listing images: ', err);

packages/backend/src/constants.ts

@@ -18,4 +18,8 @@
 
 // Image related
 export const bootcImageBuilderContainerName = '-bootc-image-builder';
-export const bootcImageBuilderName = 'quay.io/centos-bootc/bootc-image-builder:latest-1713548482';
+
+// CHANGE IN THE FUTURE... MUST BE THE ONE WITH MANIFEST IMPLEMENTATION
+// export const bootcImageBuilderName = 'quay.io/centos-bootc/bootc-image-builder:latest-1712917745';
+// Below only works for arm64 M1 testing
+export const bootcImageBuilderName = 'quay.io/bootc-extension/test-arm64-bib-image:latest';

packages/backend/src/container-utils.ts

@@ -317,3 +317,33 @@ export async function removeContainerAndVolumes(engineId: string, container: str
     throw new Error('There was an error removing the container and volumes: ' + e);
   }
 }
+
+// Image retrieval for manifest
+// Params: Pass in ImageInfo
+// 1. Check if isManifest for ImageInfo is true
+// 2. If true, perform a inspectManifest to get the manifest object
+// 3. Go through the array of manifests and get the digest values's (sha256)
+// 4. do listImages and filter out the images that have the same digest value
+// 5. Return the imageInfo of all matching images (these are the images that are part of the manifest)
+export async function getImagesFromManifest(
+  image: extensionApi.ImageInfo,
+  images: extensionApi.ImageInfo[],
+): Promise<extensionApi.ImageInfo[]> {
+  if (!image.isManifest) {
+    throw new Error('Image is not a manifest');
+  }
+
+  // Get the manifest
+  const manifest = await inspectManifest(image.engineId, image.Id);
+
+  if (manifest.manifests === undefined) {
+    return [];
+  }
+
+  // Get the digest values, if there are no digests, make sure array is [] so we don't run into
+  // issues with the filter
+  const digestValues = manifest.manifests.map(manifest => manifest.digest).filter(digest => digest !== undefined);
+
+  // Filter out the images that have the same digest value
+  return images.filter(image => image.Digest && digestValues.includes(image.Digest));
+}