chore: add page rendering for images/imageId/engineId (podman-desktop…

…#8249) * chore: add page rendering for images/imageId/engineId Signed-off-by: Sonia Sandler <[email protected]> * chore: add tests Signed-off-by: Sonia Sandler <[email protected]> * refactor: commit suggested change Co-authored-by: Florent BENOIT <[email protected]> Signed-off-by: SoniaSandler <[email protected]> * refactor: fix wording Co-authored-by: Florent BENOIT <[email protected]> Signed-off-by: SoniaSandler <[email protected]> --------- Signed-off-by: SoniaSandler <[email protected]> Co-authored-by: Florent BENOIT <[email protected]>
feloy · Jul 29, 2024 · 25245a6 · 25245a6
1 parent 23759a2
commit 25245a6
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 0 deletions.
diff --git a/packages/renderer/src/App.svelte b/packages/renderer/src/App.svelte
@@ -132,6 +132,9 @@ window.events?.receive('navigate', (navigationRequest: unknown) => {
         <Route path="/images" breadcrumb="Images" navigationHint="root">
           <ImagesList />
         </Route>
+        <Route path="/images/:id/:engineId" breadcrumb="Images" let:meta navigationHint="root">
+          <ImagesList searchTerm={meta.params.id} imageEngineId={meta.params.engineId} />
+        </Route>
         <Route
           path="/manifests/:id/:engineId/:base64RepoTag/*"
           breadcrumb="Manifest Details"

diff --git a/packages/renderer/src/lib/image/ImagesList.spec.ts b/packages/renderer/src/lib/image/ImagesList.spec.ts
@@ -196,6 +196,95 @@ test('Expect filter empty screen', async () => {
   expect(filterButton).toBeInTheDocument();
 });
 
+test('Expect two images in list given image id and engine id', async () => {
+  getProviderInfosMock.mockResolvedValue([
+    {
+      name: 'podman',
+      status: 'started',
+      internalId: 'podman-internal-id',
+      containerConnections: [
+        {
+          name: 'podman-machine-default',
+          status: 'started',
+        },
+      ],
+    },
+  ]);
+
+  listImagesMock.mockResolvedValue([
+    {
+      Id: 'sha256:1234567890123',
+      RepoTags: ['fedora:old'],
+      Created: 1644009612,
+      Size: 123,
+      Status: 'Running',
+      engineId: 'podman',
+      engineName: 'podman',
+    },
+    {
+      Id: 'sha256:1234567890123',
+      RepoTags: ['fedora:1'],
+      Created: 1644009612,
+      Size: 123,
+      Status: 'Running',
+      engineId: 'docker',
+      engineName: 'docker',
+    },
+    {
+      Id: 'sha256:1234567890123',
+      RepoTags: ['fedora:2'],
+      Created: 1644009612,
+      Size: 123,
+      Status: 'Running',
+      engineId: 'podman',
+      engineName: 'podman',
+    },
+    {
+      Id: 'sha256:2345678901234',
+      RepoTags: ['fedora:3'],
+      Created: 1644009612,
+      Size: 123,
+      Status: 'Running',
+      engineId: 'podman',
+      engineName: 'podman',
+    },
+    {
+      Id: 'sha256:3456789012345',
+      RepoTags: ['fedora:4'],
+      Created: 1644009612,
+      Size: 123,
+      Status: 'Running',
+      engineId: 'podman',
+      engineName: 'podman',
+    },
+  ]);
+
+  window.dispatchEvent(new CustomEvent('extensions-already-started'));
+  window.dispatchEvent(new CustomEvent('provider-lifecycle-change'));
+  window.dispatchEvent(new CustomEvent('image-build'));
+
+  // wait store are populated
+  while (get(imagesInfos).length === 0) {
+    await new Promise(resolve => setTimeout(resolve, 500));
+  }
+  while (get(providerInfos).length === 0) {
+    await new Promise(resolve => setTimeout(resolve, 500));
+  }
+
+  await waitRender({ searchTerm: 'sha256:1234567890123', imageEngineId: 'podman' });
+
+  const image1 = screen.queryByRole('cell', { name: 'fedora 123456789012 old' });
+  expect(image1).toBeInTheDocument();
+  const image2 = screen.queryByRole('cell', { name: 'fedora 123456789012 2' });
+  expect(image2).toBeInTheDocument();
+  const image3 = screen.queryByRole('cell', { name: 'fedora 123456789012 1' });
+  expect(image3).not.toBeInTheDocument();
+  const image4 = screen.queryByRole('cell', { name: 'fedora 234567890123 3' });
+  expect(image4).not.toBeInTheDocument();
+  const image5 = screen.queryByRole('cell', { name: 'fedora 345678901234 4' });
+  expect(image5).not.toBeInTheDocument();
+});
+
 describe('Contributions', () => {
   test.each([{ viewIdContrib: IMAGE_VIEW_ICONS }, { viewIdContrib: IMAGE_LIST_VIEW_ICONS }])(
     'Expect image status being changed with %s contribution',

diff --git a/packages/renderer/src/lib/image/ImagesList.svelte b/packages/renderer/src/lib/image/ImagesList.svelte
@@ -40,6 +40,7 @@ import type { ImageInfoUI } from './ImageInfoUI';
 import NoContainerEngineEmptyScreen from './NoContainerEngineEmptyScreen.svelte';
 
 export let searchTerm = '';
+export let imageEngineId = '';
 $: searchPattern.set(searchTerm);
 
 let images: ImageInfoUI[] = [];
@@ -87,6 +88,9 @@ function updateImages(globalContext: ContextUI) {
   });
 
   images = computedImages;
+  if (imageEngineId) {
+    images = images.filter(image => image.engineId === imageEngineId);
+  }
 
   // Map engineName, engineId and engineType from currentContainers to EngineInfoUI[]
   const engines = images.map(container => {