feat: move layer size to the top (#9165)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
containers · Oct 2, 2024 · 7072189 · 7072189
1 parent 81c748c
commit 7072189
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 7 deletions.
diff --git a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts
@@ -56,12 +56,10 @@ test('render', async () => {
   render(ImageDetailsFilesLayers, { layers });
   const rows = screen.getAllByRole('row');
   expect(rows.length).toBe(2);
-  within(rows[0]).getByText('layer1');
-  within(rows[0]).getByText('on disk: 1 kB');
+  within(rows[0]).getByText('1 kB • layer1');
   within(rows[0]).getByText('contribute to FS: +900 B');
   within(rows[0]).getByText('total FS: 2 kB');
-  within(rows[1]).getByText('layer2');
-  within(rows[1]).getByText('on disk: 0 B');
+  within(rows[1]).getByText('0 B • layer2');
   within(rows[1]).getByText('contribute to FS: -300 B');
   within(rows[1]).getByText('total FS: 1.7 kB');
 });
diff --git a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte
@@ -26,11 +26,9 @@ function onLayerSelected(layer: ImageFilesystemLayerUI) {
     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 opacity-70">{new ImageUtils().getHumanSize(layer.sizeInArchive)} &bull; {layer.id}</div>
       <ImageDetailsFilesExpandableCommand command={layer.createdBy} />
-      <div class="text-sm opacity-70">{layer.id}</div>
       <div class="text-sm opacity-70">
-        <span>on disk: {new ImageUtils().getHumanSize(layer.sizeInArchive)}</span>
-        <span> | </span>
         <span>contribute to FS: {signedHumanSize(layer.sizeInContainer)}</span>
         <span> | </span>
         <span>total FS: {new ImageUtils().getHumanSize(layer.stackTree.size)}</span>