Merge pull request #275 from axel7083/feature/report/containers-table

feat(report-page): containers table

Author: axel7083

packages/backend/src/services/alternative-service.ts

@@ -332,7 +332,10 @@ export class AlternativeService extends Publisher<void> implements AsyncInit, Di
   }
 
   public async getOptimisationReport(engineId: string, imageId: string): Promise<OptimisationReport> {
-    const imageInspectInfo = await containerEngineAPI.getImageInspect(engineId, imageId);
+    const [imageInspectInfo, containers] = await Promise.all([
+      containerEngineAPI.getImageInspect(engineId, imageId),
+      containerEngineAPI.listContainers(),
+    ]);
 
     const alternative = await this.findAlternative(imageInspectInfo);
     const sbom = await this.getSBOMReport(imageInspectInfo);
@@ -343,6 +346,14 @@ export class AlternativeService extends Publisher<void> implements AsyncInit, Di
         inspect: imageInspectInfo,
         sbom,
         vulnerabilities,
+        containers: containers
+          .filter(({ ImageID }) => ImageID === imageId)
+          .map(container => ({
+            engineId: container.engineId,
+            id: container.Id,
+            name: container.Names[0],
+            imageID: container.ImageID,
+          })),
       },
       alternative: alternative,
     };

packages/frontend/src/lib/columns/LocalContainerNameColumn.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { LocalContainer } from '@podman-desktop/extension-hummingbird-core-api';
+
+interface Props {
+  object: LocalContainer;
+}
+
+let { object }: Props = $props();
+</script>
+
+<div class="text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+  {object.name.startsWith('/') ? object.name.substring(1) : object.name}
+</div>
+<div class="flex flex-row text-sm gap-1">
+  <div class="text-[var(--pd-table-body-text)]">
+    {object.id.substring(0, 8)}
+  </div>
+</div>

packages/frontend/src/routes/alternatives/(components)/columns/NameColumn.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Row } from '/@/routes/alternatives/(components)/row';
+import LocalContainerNameColumn from '$lib/columns/LocalContainerNameColumn.svelte';
 
 interface Props {
   object: Row;
@@ -19,12 +20,5 @@ let { object }: Props = $props();
     </span>
   </div>
 {:else}
-  <div class="text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
-    {object.name.startsWith('/') ? object.name.substring(1) : object.name}
-  </div>
-  <div class="flex flex-row text-sm gap-1">
-    <div class="text-[var(--pd-table-body-text)]">
-      {object.id.substring(0, 8)}
-    </div>
-  </div>
+  <LocalContainerNameColumn object={object} />
 {/if}

packages/frontend/src/routes/images/[engineId]/[imageId]/report/(components)/report/OptimisationReport.spec.ts

@@ -32,6 +32,7 @@ test('Expect that OptimisationReport displays RawReport when alternative is pres
         Created: '2024-01-01T00:00:00Z',
       },
       vulnerabilities: { total: 20, critical: 2, high: 4, medium: 8, low: 6 },
+      containers: [],
     },
     alternative: {
       image: {
@@ -60,6 +61,7 @@ test('Expect that OptimisationReport displays empty screen when no alternative i
         Created: '2024-01-01T00:00:00Z',
       },
       vulnerabilities: { total: 20 },
+      containers: [],
     },
     alternative: undefined,
   };

packages/frontend/src/routes/images/[engineId]/[imageId]/report/(components)/report/RawReport.spec.ts

@@ -42,6 +42,7 @@ test('Expect that RawReport displays both image cards', async () => {
       Created: '2024-01-01T00:00:00Z',
     },
     vulnerabilities: { total: 20, critical: 2, high: 4, medium: 8, low: 6 },
+    containers: [],
   };
 
   render(RawReport, {

packages/frontend/src/routes/images/[engineId]/[imageId]/report/(components)/report/RawReport.svelte

@@ -6,6 +6,7 @@ import type { AlternativeReport, ImageReport, Tag } from '@podman-desktop/extens
 import ReportBanner from './ReportBanner.svelte';
 import ReportImageCard from './ReportImageCard.svelte';
 import ReportComparison from './ReportComparison.svelte';
+import ClonableContainerTable from '/@/routes/images/[engineId]/[imageId]/report/(components)/table/ClonableContainerTable.svelte';
 
 interface Props {
   alternative: AlternativeReport;
@@ -43,7 +44,7 @@ const imageRepoTag = $derived(image.inspect?.RepoTags?.[0] ?? 'Unknown');
 const imageVersion = $derived(imageRepoTag.split(':')[1] ?? '-');
 </script>
 
-<div class="flex flex-col gap-5 overflow-auto">
+<div class="flex flex-col gap-5 overflow-auto px-5">
   <!-- Alternate Image Found Banner -->
   <ReportBanner
     cveReductionCount={cveReduction?.count}
@@ -92,3 +93,12 @@ const imageVersion = $derived(imageRepoTag.split(':')[1] ?? '-');
     altSize={altSize}
     imageSize={image.inspect.Size} />
 </div>
+
+<div class="px-5 pt-4">
+  <span class="text-base font-bold text-[var(--pd-content-header)]"
+    >Container{image.containers.length > 1 ? 's' : ''} using {image.inspect.RepoTags[0]} image</span>
+</div>
+
+<div class="flex w-full">
+  <ClonableContainerTable containers={image.containers} />
+</div>

packages/frontend/src/routes/images/[engineId]/[imageId]/report/(components)/table/ClonableContainerTable.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { LocalContainer } from '@podman-desktop/extension-hummingbird-core-api/src';
+import { Table, TableColumn, TableRow } from '@podman-desktop/ui-svelte';
+import LocalContainerNameColumn from '$lib/columns/LocalContainerNameColumn.svelte';
+import HardenAction from '/@/routes/images/[engineId]/[imageId]/report/(components)/table/columns/HardenAction.svelte';
+import ContainerStatus from '/@/routes/images/[engineId]/[imageId]/report/(components)/table/columns/ContainerStatus.svelte';
+
+interface Props {
+  containers: Array<LocalContainer>;
+}
+
+const { containers }: Props = $props();
+
+const row: TableRow<LocalContainer> = new TableRow<LocalContainer>({});
+
+let columns = $derived([
+  new TableColumn<LocalContainer>('Status', {
+    align: 'center',
+    width: '70px',
+    renderer: ContainerStatus,
+    overflow: true,
+  }),
+  new TableColumn<LocalContainer>('Name', {
+    width: '2fr',
+    renderer: LocalContainerNameColumn,
+    overflow: false,
+  }),
+  new TableColumn<LocalContainer>('Actions', {
+    align: 'right',
+    width: '250px',
+    renderer: HardenAction,
+    overflow: true,
+  }),
+]);
+</script>
+
+<Table kind="containers" data={containers} columns={columns} row={row} />

packages/frontend/src/routes/images/[engineId]/[imageId]/report/(components)/table/columns/ContainerStatus.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
+import { StatusIcon } from '@podman-desktop/ui-svelte';
+import type { LocalContainer } from '@podman-desktop/extension-hummingbird-core-api/src';
+
+interface Props {
+  object: LocalContainer;
+}
+
+let { object: _ }: Props = $props();
+</script>
+
+<StatusIcon icon={ContainerIcon} />

packages/frontend/src/routes/images/[engineId]/[imageId]/report/(components)/table/columns/HardenAction.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { LocalContainer } from '@podman-desktop/extension-hummingbird-core-api';
+import { Button } from '@podman-desktop/ui-svelte';
+import { faHammer } from '@fortawesome/free-solid-svg-icons/faHammer';
+import { resolve } from '$app/paths';
+import { goto } from '$app/navigation';
+
+interface Props {
+  object: LocalContainer;
+}
+
+let { object }: Props = $props();
+
+function navigateToClone(): Promise<void> {
+  return goto(
+    resolve(`/containers/[engineId]/[id]/clone`, {
+      engineId: object.engineId,
+      id: object.id,
+    }),
+  );
+}
+</script>
+
+<Button onclick={navigateToClone} icon={faHammer}>Harden with Hummingbird</Button>

packages/frontend/src/routes/images/[engineId]/[imageId]/report/+page.svelte

@@ -22,7 +22,7 @@ function close(): Promise<void> {
     {#await data.report}
       <span>Loading...</span>
     {:then report}
-      <div class="px-5 pt-5 w-full">
+      <div class="pt-5 w-full">
         <OptimisationReport object={report} />
       </div>
     {/await}