feat: display error when extracting image layers fail (#8932)

feat: display error when displaying image layers fail Signed-off-by: Philippe Martin <[email protected]>
podman-desktop · Sep 18, 2024 · ef9f990 · ef9f990
1 parent 39370fc
commit ef9f990
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/packages/renderer/src/lib/image/ImageDetailsFiles.svelte b/packages/renderer/src/lib/image/ImageDetailsFiles.svelte
@@ -20,6 +20,7 @@ let selectedLayer: ImageFilesystemLayerUI;
 let showLayerOnly: boolean;
 let loading: boolean;
 let cancellableTokenId: number = 0;
+let error: string = '';
 
 function onSelectedLayer(event: CustomEvent<ImageFilesystemLayerUI>) {
   selectedLayer = event.detail;
@@ -37,6 +38,9 @@ onMount(async () => {
           .then(layers => {
             imageLayers = layers;
           })
+          .catch((err: unknown) => {
+            error = String(err);
+          })
           .finally(() => {
             loading = false;
           });
@@ -55,7 +59,11 @@ onDestroy(() => {
   <div class="p-4">Layers are being loaded. This can take a while for large images, please wait...</div>
 {/if}
 
-{#if imageLayers}
+{#if error}
+  <div class="p-4 text-[var(--pd-state-error)]">
+    {error}
+  </div>
+{:else if imageLayers}
   <div class="flex flex-col w-full h-full p-8 pr-0 text-[var(--pd-content-text)] bg-[var(--pd-content-bg)]">
     <div class="pr-4">
       <slot name="header-info" />

diff --git a/packages/renderer/src/lib/image/imageDetailsFiles.spec.ts b/packages/renderer/src/lib/image/imageDetailsFiles.spec.ts
@@ -17,7 +17,7 @@
  ***********************************************************************/
 
 import type { ImageFilesystemLayer } from '@podman-desktop/api';
-import { render } from '@testing-library/svelte';
+import { render, screen } from '@testing-library/svelte';
 import { tick } from 'svelte';
 import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 
@@ -274,4 +274,30 @@ describe('ImageDetailsFiles component', () => {
     component.unmount();
     expect(cancelTokenMock).toHaveBeenCalledWith(TOKEN_ID);
   });
+
+  test('error during imageGetFilesystemLayers', async () => {
+    getCancellableTokenSourceMock.mockResolvedValue(101010);
+    imageGetFilesystemLayersMock.mockRejectedValue(new Error('an error'));
+    const imageInfo = {
+      engineId: 'podman.Podman',
+      engineName: 'Podman',
+      Id: 'sha256:3696f18be9a51a60395a7c2667e2fcebd2d913af0ad6da287e03810fda566833',
+      ParentId: '7f8297e79d497136a7d75d506781b545b20ea599041f02ab14aa092e24f110b7',
+      RepoTags: ['quay.io/user/image-name:v0.0.1'],
+      Created: 1701338214,
+      Size: 34134140,
+      VirtualSize: 34134140,
+      SharedSize: 0,
+      Labels: {},
+      Containers: 0,
+      Digest: '',
+    };
+    render(ImageDetailsFiles, {
+      imageInfo,
+    });
+    imageFilesProviders.set([{ id: 'provider1', label: 'Provider 1' }]);
+    await tick();
+    await tick();
+    screen.getByText('Error: an error');
+  });
 });