display image files

packages/main/src/plugin/color-registry.ts

@@ -477,6 +477,11 @@ export class ColorRegistry {
       light: colorPalette.purple[200],
     });
 
+    this.registerColor(`${ct}card-selected-bg`, {
+      dark: colorPalette.charcoal[400],
+      light: colorPalette.purple[100],
+    });
+
     this.registerColor(`${ct}card-text`, {
       dark: colorPalette.gray[400],
       light: colorPalette.purple[900],

packages/renderer/src/lib/image/FilesystemLayerView.svelte

@@ -0,0 +1,87 @@
+<script context="module" lang="ts">
+const expansionState = new Map<string, boolean>();
+</script>
+
+<script lang="ts">
+import type { ImageFile, ImageFileSymlink } from '@podman-desktop/api';
+
+import type { FilesystemNode } from './filesystem-tree';
+import { ImageUtils } from './image-utils';
+import { isExec, modeString } from './imageDetailsFiles';
+
+export let tree: FilesystemNode<ImageFile>;
+export let margin = 0;
+export let root = true;
+export let layerMode = false;
+
+$: label = tree.name;
+$: children = tree?.children;
+$: file = tree?.data;
+$: colorClass = getColor(tree);
+function getColor(tree: FilesystemNode<ImageFile>) {
+  if (tree.hidden) {
+    return 'text-red-500';
+  }
+  if (!tree.data) {
+    if (tree.children.size) {
+      return 'text-sky-500';
+    }
+    return '';
+  }
+  if (tree.data.type === 'symlink') {
+    return 'text-sky-300';
+  }
+  if (tree.data.type === 'directory') {
+    return 'text-sky-500';
+  }
+  if (isExec(tree.data)) {
+    return 'text-green-500';
+  }
+  return '';
+}
+$: expanded = expansionState.get(label) ?? false;
+const toggleExpansion = () => {
+  expanded = !expanded;
+  expansionState.set(label, expanded);
+};
+$: arrowDown = expanded;
+function getLink(file: ImageFile | undefined): string {
+  if (!file) {
+    return '';
+  }
+  if (file.type === 'symlink') {
+    return ' → ' + (file as ImageFileSymlink).linkPath;
+  }
+  return '';
+}
+</script>
+
+{#if layerMode || !tree.hidden}
+  {#if root}
+    {#if children}
+      {#each children as [_, child]}
+        <svelte:self root="{false}" margin="{margin + 2}" tree="{child}" layerMode="{layerMode}" />
+      {/each}
+    {/if}
+  {:else}
+    <div class="font-mono">{tree.data && !tree.hidden ? modeString(tree.data) : ''}</div>
+    <div class="text-right">{tree.data && !tree.hidden ? tree.data.uid + ':' + tree.data.gid : ''}</div>
+    <span class="text-right">{!tree.hidden ? new ImageUtils().getHumanSize(tree.size) : ''}</span>
+    {#if children?.size || (file && file.type === 'directory')}
+      <button class="{`text-left ml-${margin} ${colorClass}`}" on:click="{toggleExpansion}">
+        <span class="cursor-pointer inline-block mr-1" class:rotate-90="{arrowDown}">&gt;</span>
+        {label}<span class="text-gray-900">{getLink(tree?.data)}</span>
+      </button>
+      {#if expanded && children}
+        {#each children as [_, child]}
+          <svelte:self root="{false}" margin="{margin + 2}" tree="{child}" layerMode="{layerMode}" />
+        {/each}
+      {/if}
+    {:else}
+      <div class="{`${colorClass}`}">
+        <span class="{`pl-4 ml-${margin}`}"></span>
+        {label}<span class="text-gray-900">{getLink(tree?.data)}</span>
+      </div>
+    {/if}
+  {/if}
+{/if}

packages/renderer/src/lib/image/ImageDetails.svelte

@@ -8,6 +8,7 @@ import { router } from 'tinro';
 import { containersInfos } from '/@/stores/containers';
 import { context } from '/@/stores/context';
 import { imageCheckerProviders } from '/@/stores/image-checker-providers';
+import { imageFilesProviders } from '/@/stores/image-files-providers';
 import { viewsContributions } from '/@/stores/views';
 import type { ViewInfoUI } from '/@api/view-info';
 
@@ -27,6 +28,7 @@ import {
 import { ImageUtils } from './image-utils';
 import ImageActions from './ImageActions.svelte';
 import ImageDetailsCheck from './ImageDetailsCheck.svelte';
+import ImageDetailsFiles from './ImageDetailsFiles.svelte';
 import ImageDetailsHistory from './ImageDetailsHistory.svelte';
 import ImageDetailsInspect from './ImageDetailsInspect.svelte';
 import ImageDetailsSummary from './ImageDetailsSummary.svelte';
@@ -64,7 +66,9 @@ let image: ImageInfoUI | undefined;
 let detailsPage: DetailsPage | undefined;
 
 let showCheckTab: boolean = false;
-let providersUnsubscribe: Unsubscriber;
+let showFilesTab: boolean = false;
+let checkerProvidersUnsubscribe: Unsubscriber;
+let filesProvidersUnsubscribe: Unsubscriber;
 let viewsUnsubscribe: Unsubscriber;
 let contextsUnsubscribe: Unsubscriber;
 
@@ -86,10 +90,14 @@ function updateImage() {
 }
 
 onMount(() => {
-  providersUnsubscribe = imageCheckerProviders.subscribe(providers => {
+  checkerProvidersUnsubscribe = imageCheckerProviders.subscribe(providers => {
     showCheckTab = providers.length > 0;
   });
 
+  filesProvidersUnsubscribe = imageFilesProviders.subscribe(providers => {
+    showFilesTab = providers.length > 0;
+  });
+
   viewsUnsubscribe = viewsContributions.subscribe(value => {
     viewContributions =
       value.filter(
@@ -116,7 +124,8 @@ onMount(() => {
 
 onDestroy(() => {
   // unsubscribe from the store
-  providersUnsubscribe?.();
+  checkerProvidersUnsubscribe?.();
+  filesProvidersUnsubscribe?.();
   viewsUnsubscribe?.();
   contextsUnsubscribe?.();
 });
@@ -159,6 +168,9 @@ onDestroy(() => {
       {#if showCheckTab}
         <Tab title="Check" selected="{isTabSelected($router.path, 'check')}" url="{getTabUrl($router.path, 'check')}" />
       {/if}
+      {#if showFilesTab}
+        <Tab title="Files" selected="{isTabSelected($router.path, 'files')}" url="{getTabUrl($router.path, 'files')}" />
+      {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
@@ -173,6 +185,9 @@ onDestroy(() => {
       <Route path="/check" breadcrumb="Check" navigationHint="tab">
         <ImageDetailsCheck imageInfo="{imageInfo}" />
       </Route>
+      <Route path="/files" breadcrumb="Files" navigationHint="tab">
+        <ImageDetailsFiles imageInfo="{imageInfo}" />
+      </Route>
     </svelte:fragment>
   </DetailsPage>
 

packages/renderer/src/lib/image/ImageDetailsFiles.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+import type { ImageFilesystemLayers, ImageInfo } from '@podman-desktop/api';
+import { Checkbox } from '@podman-desktop/ui-svelte';
+import { onDestroy, onMount } from 'svelte';
+import type { Unsubscriber } from 'svelte/store';
+
+import { imageFilesProviders } from '/@/stores/image-files-providers';
+import type { ImageFilesInfo } from '/@api/image-files-info';
+
+import FilesystemLayerView from './FilesystemLayerView.svelte';
+import { type ImageFilesystemLayerUI, toImageFilesystemLayerUIs } from './imageDetailsFiles';
+import ImageDetailsFilesLayers from './ImageDetailsFilesLayers.svelte';
+
+export let imageInfo: ImageInfo | undefined;
+
+let imageLayers: ImageFilesystemLayers | undefined;
+let filesProvidersUnsubscribe: Unsubscriber;
+let filesProvider: ImageFilesInfo;
+let selectedLayer: ImageFilesystemLayerUI;
+let showLayerOnly: boolean;
+
+function onSelectedLayer(event: CustomEvent<ImageFilesystemLayerUI>) {
+  selectedLayer = event.detail;
+}
+
+onMount(async () => {
+  filesProvidersUnsubscribe = imageFilesProviders.subscribe(providers => {
+    if (providers.length === 1 && imageInfo) {
+      filesProvider = providers[0];
+      window.imageGetFilesystemLayers(filesProvider.id, imageInfo).then(layers => {
+        imageLayers = layers;
+      });
+    }
+  });
+});
+
+onDestroy(() => {
+  filesProvidersUnsubscribe?.();
+});
+</script>
+
+{#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" />
+    </div>
+    <div class="mb-2 flex flex-row pr-12 pb-2">
+      <span class="grow">Layers</span>
+      <span><Checkbox bind:checked="{showLayerOnly}">Show layer only</Checkbox></span>
+    </div>
+    <div class="h-full flex flex-row space-x-8">
+      <div role="list" aria-label="layers" class="h-full overflow-y-auto w-3/4">
+        <ImageDetailsFilesLayers
+          on:selected="{onSelectedLayer}"
+          layers="{toImageFilesystemLayerUIs(imageLayers.layers)}" />
+      </div>
+      <div aria-label="tree" class="h-full w-full pr-4 overflow-y-auto pb-16">
+        {#if selectedLayer}
+          <div class="text-xs grid grid-cols-[90px_60px_70px_1fr]">
+            <FilesystemLayerView
+              tree="{showLayerOnly ? selectedLayer.layerTree.root : selectedLayer.stackTree.root}"
+              layerMode="{showLayerOnly}" />
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { createEventDispatcher } from 'svelte';
+
+import { ImageUtils } from './image-utils';
+import type { ImageFilesystemLayerUI } from './imageDetailsFiles';
+
+const dispatch = createEventDispatcher();
+
+export let layers: ImageFilesystemLayerUI[];
+let currentLayerId: string | undefined;
+
+function onLayerSelected(layer: ImageFilesystemLayerUI) {
+  currentLayerId = layer.id;
+  dispatch('selected', layer);
+}
+</script>
+
+{#each layers as layer}
+  <button
+    on:click="{() => onLayerSelected(layer)}"
+    role="row"
+    aria-label="{layer.id}"
+    class="rounded-lg mb-4 p-4 flex flex-col w-full text-left truncate hover:bg-[var(--pd-content-card-hover-bg)]"
+    class:bg-[var(--pd-content-card-bg)]="{layer.id !== currentLayerId}"
+    class:bg-[var(--pd-content-card-selected-bg)]="{layer.id === currentLayerId}">
+    <div>
+      <div class="text-sm">{layer.createdBy}</div>
+      <div class="text-xs text-gray-700">{layer.id}</div>
+      <div class="text-xs text-gray-700">
+        <span>{new ImageUtils().getHumanSize(layer.sizeInArchive)}</span>
+        <span> | </span>
+        <span>{new ImageUtils().getHumanSize(layer.sizeInContainer)}</span>
+        <span> | </span>
+        <span>{new ImageUtils().getHumanSize(layer.stackTree.size)}</span>
+      </div>
+    </div>
+  </button>
+{/each}