Add OS and version columns to image lists

Author: charliepark

app/pages/SiloImagesPage.tsx

@@ -23,6 +23,7 @@ import { HL } from '~/components/HL'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
@@ -60,6 +61,13 @@ const staticCols = [
     cell: makeLinkCell((image) => pb.siloImageEdit({ image })),
   }),
   colHelper.accessor('description', Columns.description),
+  colHelper.accessor('os', {
+    header: 'OS',
+    cell: (info) => info.getValue() || <EmptyCell />,
+  }),
+  colHelper.accessor('version', {
+    cell: (info) => info.getValue() || <EmptyCell />,
+  }),
   colHelper.accessor('size', Columns.size),
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]

app/pages/project/images/ImagesPage.tsx

@@ -20,6 +20,7 @@ import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
@@ -98,6 +99,13 @@ export default function ImagesPage() {
         cell: makeLinkCell((image) => pb.projectImageEdit({ project, image })),
       }),
       colHelper.accessor('description', Columns.description),
+      colHelper.accessor('os', {
+        header: 'OS',
+        cell: (info) => info.getValue() || <EmptyCell />,
+      }),
+      colHelper.accessor('version', {
+        cell: (info) => info.getValue() || <EmptyCell />,
+      }),
       colHelper.accessor('size', Columns.size),
       colHelper.accessor('timeCreated', Columns.timeCreated),
       getActionsCol(makeActions),

test/e2e/images.e2e.ts

@@ -12,12 +12,31 @@ import {
   clipboardText,
   expect,
   expectNotVisible,
+  expectRowVisible,
   expectToast,
   expectVisible,
   getPageAsUser,
   selectOption,
 } from './utils'
 
+test('shows OS and Version columns', async ({ page }) => {
+  await page.goto('/images')
+  await expectRowVisible(page.getByRole('table'), {
+    name: 'ubuntu-22-04',
+    OS: 'ubuntu',
+    version: '22.04',
+    size: '1 GiB',
+  })
+
+  await page.goto('/projects/mock-project/images')
+  await expectRowVisible(page.getByRole('table'), {
+    name: 'image-1',
+    OS: 'alpine',
+    version: 'edge1',
+    size: '4 GiB',
+  })
+})
+
 test('can promote an image from silo', async ({ page }) => {
   await page.goto('/images')
   await page.click('role=button[name="Promote image"]')