fix(UI): container details image link (podman-desktop#6805)

* fix(UI): container details image link Signed-off-by: axel7083 <[email protected]> * fix(ContainerList): tests Signed-off-by: axel7083 <[email protected]> * fix(ContainerListCompose): tests Signed-off-by: axel7083 <[email protected]> * fix(ComposeDetails): tests Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
axel7083 · Apr 18, 2024 · 6efeded · 6efeded
1 parent 9b25259
commit 6efeded
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 19 deletions.
diff --git a/packages/renderer/src/lib/compose/ComposeDetails.spec.ts b/packages/renderer/src/lib/compose/ComposeDetails.spec.ts
@@ -235,6 +235,7 @@ test('Compose details inspect is clickable and loadable', async () => {
       Labels: {
         'com.docker.compose.project': 'foobar',
       },
+      ImageID: 'sha256:dummy-image-id',
     },
     {
       Id: 'sha256:1234567890123',
@@ -246,6 +247,7 @@ test('Compose details inspect is clickable and loadable', async () => {
       Labels: {
         'com.docker.compose.project': 'foobar',
       },
+      ImageID: 'sha256:dummy-image-id',
     },
   ];
 
@@ -273,6 +275,8 @@ test('Compose details inspect is clickable and loadable', async () => {
 });
 
 test('Test that compose kube tab is clickable and loadable', async () => {
+  listContainersMock.mockResolvedValue([]);
+
   render(ComposeDetails, { composeName: 'foobar', engineId: 'engine' });
   const kubeHref = screen.getByRole('link', { name: 'Kube' });
   await fireEvent.click(kubeHref);

diff --git a/packages/renderer/src/lib/container/ContainerList.spec.ts b/packages/renderer/src/lib/container/ContainerList.spec.ts
@@ -224,6 +224,7 @@ test('Try to delete a pod that has containers', async () => {
     Status: 'Running',
     engineId: 'podman',
     engineName: 'podman',
+    ImageID: 'dummy-image-id',
   };
 
   // one single container and two containers part of a pod
@@ -242,6 +243,7 @@ test('Try to delete a pod that has containers', async () => {
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
     {
       Id: 'sha256:7897891234567890123',
@@ -255,6 +257,7 @@ test('Try to delete a pod that has containers', async () => {
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
   ];
 
@@ -322,6 +325,7 @@ test('Try to delete a container without deleting pods', async () => {
     Status: 'Running',
     engineId: 'podman',
     engineName: 'podman',
+    ImageID: 'dummy-image-id',
   };
 
   // one single container and a container as part of a pod
@@ -339,6 +343,7 @@ test('Try to delete a container without deleting pods', async () => {
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
   ];
 
@@ -403,6 +408,7 @@ test('Try to delete a pod without deleting container', async () => {
     Status: 'Running',
     engineId: 'podman',
     engineName: 'podman',
+    ImageID: 'dummy-image-id',
   };
 
   // one single container and a container as part of a pod
@@ -420,6 +426,7 @@ test('Try to delete a pod without deleting container', async () => {
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
   ];
 
@@ -481,6 +488,7 @@ test('Expect filter empty screen', async () => {
     Status: 'Running',
     engineId: 'podman',
     engineName: 'podman',
+    ImageID: 'dummy-image-id',
   };
 
   // one single container
@@ -528,6 +536,7 @@ test('Expect clear filter in empty screen to clear serach term, except is:...',
     Status: 'Running',
     engineId: 'podman',
     engineName: 'podman',
+    ImageID: 'dummy-image-id',
   };
 
   // one single container
@@ -605,6 +614,7 @@ test('Expect to display running / stopped containers depending on tab', async ()
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
     {
       Id: 'sha256:7897891234567890123',
@@ -618,6 +628,7 @@ test('Expect to display running / stopped containers depending on tab', async ()
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
 
     // 1 / 2 containers are running on this pod
@@ -634,6 +645,7 @@ test('Expect to display running / stopped containers depending on tab', async ()
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
     {
       Id: 'sha256:834752375490',
@@ -647,6 +659,7 @@ test('Expect to display running / stopped containers depending on tab', async ()
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
 
     // 0 / 2 containers are running on this pod
@@ -663,6 +676,7 @@ test('Expect to display running / stopped containers depending on tab', async ()
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
     {
       Id: 'sha256:834752375490',
@@ -676,6 +690,7 @@ test('Expect to display running / stopped containers depending on tab', async ()
       },
       engineId: 'podman',
       engineName: 'podman',
+      ImageID: 'dummy-image-id',
     },
   ];
 

diff --git a/packages/renderer/src/lib/container/ContainerListCompose.spec.ts b/packages/renderer/src/lib/container/ContainerListCompose.spec.ts
@@ -107,6 +107,7 @@ test('Delete a group of compose containers succesfully', async () => {
       State: 'RUNNING',
       engineId: 'podman',
       engineType: 'podman',
+      ImageID: 'dummy-image-id',
     },
     {
       Id: 'container2',
@@ -116,6 +117,7 @@ test('Delete a group of compose containers succesfully', async () => {
       State: 'RUNNING',
       engineId: 'podman',
       engineType: 'podman',
+      ImageID: 'dummy-image-id',
     },
   ];
   listContainersMock.mockResolvedValue(mockedContainers);

diff --git a/packages/renderer/src/lib/container/container-utils.spec.ts b/packages/renderer/src/lib/container/container-utils.spec.ts
@@ -97,13 +97,15 @@ test('container group status should be running when all compose containers are r
     Labels: { 'com.docker.compose.project': groupName },
     Names: ['container1'],
     State: 'RUNNING',
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const containerInfo2 = {
     Id: 'container2',
     Image: 'docker.io/kindest/node:foobar',
     Labels: { 'com.docker.compose.project': groupName },
     Names: ['container2'],
     State: 'RUNNING',
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const groups = containerUtils.getContainerGroups([
     containerUtils.getContainerInfoUI(containerInfo),
@@ -123,13 +125,15 @@ test('container group status should be stopped when any compose container is sto
     Labels: { 'com.docker.compose.project': groupName },
     Names: ['container1'],
     State: 'RUNNING',
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const containerInfo2 = {
     Id: 'container2',
     Image: 'docker.io/kindest/node:foobar',
     Labels: { 'com.docker.compose.project': groupName },
     Names: ['container2'],
     State: 'STOPPED',
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const groups = containerUtils.getContainerGroups([
     containerUtils.getContainerInfoUI(containerInfo),
@@ -155,13 +159,15 @@ test('container group status should be running when the pod status is running',
     Names: ['container1'],
     State: 'RUNNING',
     pod: pod,
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const containerInfo2 = {
     Id: 'container2',
     Image: 'docker.io/kindest/node:foobar',
     Names: ['container2'],
     State: 'RUNNING',
     pod: pod,
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const groups = containerUtils.getContainerGroups([
     containerUtils.getContainerInfoUI(containerInfo),
@@ -186,13 +192,15 @@ test('container group status should be degraded when the pod status is degraded'
     Names: ['container1'],
     State: 'RUNNING',
     pod: pod,
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const containerInfo2 = {
     Id: 'container2',
     Image: 'docker.io/kindest/node:foobar',
     Names: ['container2'],
     State: 'STOPPED',
     pod: pod,
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const groups = containerUtils.getContainerGroups([
     containerUtils.getContainerInfoUI(containerInfo),
@@ -247,6 +255,7 @@ test('should expect icon to be ContainerIcon if no context/view is passed', asyn
     Image: 'docker.io/kindest/node:foobar',
     Names: ['container1'],
     State: 'STOPPED',
+    ImageID: 'sha256:dummy-sha256',
   } as unknown as ContainerInfo;
   const containerUI = containerUtils.getContainerInfoUI(containerInfo);
   expect(containerUI.icon).toBeDefined();
@@ -278,3 +287,31 @@ test('check parsing of container info without labels', async () => {
   } as unknown as ContainerInfo;
   containerUtils.adaptContextOnContainer(context, containerInfo);
 });
+
+test('should expect imageHref not to have sha256: prefix', async () => {
+  const containerInfo = {
+    Id: 'container1',
+    Image: 'docker.io/kindest/node:foobar',
+    Names: ['container1'],
+    State: 'STOPPED',
+    ImageID: 'sha256:dummy-sha256',
+    engineId: 'dummy-engine-id',
+    ImageBase64RepoTag: 'dummy-base-64',
+  } as unknown as ContainerInfo;
+  const containerUI = containerUtils.getContainerInfoUI(containerInfo);
+  expect(containerUI.imageHref).toBe('/images/dummy-sha256/dummy-engine-id/dummy-base-64/summary');
+});
+
+test('should expect imageHref to use exact image id if no sha256: prefix', async () => {
+  const containerInfo = {
+    Id: 'container1',
+    Image: 'docker.io/kindest/node:foobar',
+    Names: ['container1'],
+    State: 'STOPPED',
+    ImageID: 'dummy-sha256',
+    engineId: 'dummy-engine-id',
+    ImageBase64RepoTag: 'dummy-base-64',
+  } as unknown as ContainerInfo;
+  const containerUI = containerUtils.getContainerInfoUI(containerInfo);
+  expect(containerUI.imageHref).toBe('/images/dummy-sha256/dummy-engine-id/dummy-base-64/summary');
+});
diff --git a/packages/renderer/src/lib/container/container-utils.ts b/packages/renderer/src/lib/container/container-utils.ts
@@ -157,7 +157,7 @@ export class ContainerUtils {
       labels: containerInfo.Labels,
       icon: this.iconClass(containerInfo, context, viewContributions) || ContainerIcon,
       imageBase64RepoTag: containerInfo.ImageBase64RepoTag,
-      imageHref: `/images/${containerInfo.ImageID}/${containerInfo.engineId}/${containerInfo.ImageBase64RepoTag}/summary`,
+      imageHref: `/images/${containerInfo.ImageID.startsWith('sha256:') ? containerInfo.ImageID.slice(7) : containerInfo.ImageID}/${containerInfo.engineId}/${containerInfo.ImageBase64RepoTag}/summary`,
     };
   }
 

diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte
@@ -58,8 +58,8 @@ function closeModals() {
 }
 
 let imageInfo: ImageInfo | undefined;
-let image: ImageInfoUI;
-let detailsPage: DetailsPage;
+let image: ImageInfoUI | undefined;
+let detailsPage: DetailsPage | undefined;
 
 let showCheckTab: boolean = false;
 let providersUnsubscribe: Unsubscriber;
@@ -79,7 +79,7 @@ function updateImage() {
     image = tempImage;
   } else {
     // the image has been deleted
-    detailsPage.close();
+    detailsPage?.close();
   }
 }
 
@@ -164,20 +164,20 @@ onDestroy(() => {
       </Route>
     </svelte:fragment>
   </DetailsPage>
-{/if}
 
-{#if pushImageModal}
-  <PushImageModal
-    imageInfoToPush="{image}"
-    closeCallback="{() => {
-      closeModals();
-    }}" />
-{/if}
-{#if renameImageModal}
-  <RenameImageModal
-    imageInfoToRename="{image}"
-    detailed="{true}"
-    closeCallback="{() => {
-      closeModals();
-    }}" />
+  {#if pushImageModal}
+    <PushImageModal
+      imageInfoToPush="{image}"
+      closeCallback="{() => {
+        closeModals();
+      }}" />
+  {/if}
+  {#if renameImageModal}
+    <RenameImageModal
+      imageInfoToRename="{image}"
+      detailed="{true}"
+      closeCallback="{() => {
+        closeModals();
+      }}" />
+  {/if}
 {/if}