add image name to containers table (#1302)

internal/site/src/components/containers-table/containers-table-columns.tsx

@@ -8,7 +8,7 @@ import {
 	ClockIcon,
 	ContainerIcon,
 	CpuIcon,
-	HashIcon,
+	LayersIcon,
 	MemoryStickIcon,
 	ServerIcon,
 	ShieldCheckIcon,
@@ -58,15 +58,15 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 			return <span className="ms-1.5 xl:w-32 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
 		},
 	},
-	{
-		id: "id",
-		accessorFn: (record) => record.id,
-		sortingFn: (a, b) => a.original.id.localeCompare(b.original.id),
-		header: ({ column }) => <HeaderButton column={column} name="ID" Icon={HashIcon} />,
-		cell: ({ getValue }) => {
-			return <span className="ms-1.5 me-3 font-mono">{getValue() as string}</span>
-		},
-	},
+	// {
+	// 	id: "id",
+	// 	accessorFn: (record) => record.id,
+	// 	sortingFn: (a, b) => a.original.id.localeCompare(b.original.id),
+	// 	header: ({ column }) => <HeaderButton column={column} name="ID" Icon={HashIcon} />,
+	// 	cell: ({ getValue }) => {
+	// 		return <span className="ms-1.5 me-3 font-mono">{getValue() as string}</span>
+	// 	},
+	// },
 	{
 		id: "cpu",
 		accessorFn: (record) => record.cpu,
@@ -125,6 +125,15 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 			)
 		},
 	},
+	{
+		id: "image",
+		sortingFn: (a, b) => a.original.image.localeCompare(b.original.image),
+		accessorFn: (record) => record.image,
+		header: ({ column }) => <HeaderButton column={column} name={t({ message: "Image", context: "Docker image" })} Icon={LayersIcon} />,
+		cell: ({ getValue }) => {
+			return <span className="ms-1.5 xl:w-36 block truncate">{getValue() as string}</span>
+		},
+	},
 	{
 		id: "status",
 		accessorFn: (record) => record.status,

internal/site/src/components/containers-table/containers-table.tsx

@@ -48,7 +48,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 
 	useEffect(() => {
 		const pbOptions = {
-			fields: "id,name,cpu,memory,net,health,status,system,updated",
+			fields: "id,name,image,cpu,memory,net,health,status,system,updated",
 		}
 
 		const fetchData = (lastXMs: number) => {
@@ -123,7 +123,8 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 			const name = container.name ?? ""
 			const status = container.status ?? ""
 			const healthLabel = ContainerHealthLabels[container.health as ContainerHealth] ?? ""
-			const searchString = `${systemName} ${id} ${name} ${healthLabel} ${status}`.toLowerCase()
+			const image = container.image ?? ""
+			const searchString = `${systemName} ${id} ${name} ${healthLabel} ${status} ${image}`.toLowerCase()
 
 			return (filterValue as string)
 				.toLowerCase()
@@ -195,7 +196,7 @@ const AllContainersTable = memo(
 			>
 				{/* add header height to table size */}
 				<div style={{ height: `${virtualizer.getTotalSize() + 48}px`, paddingTop, paddingBottom }}>
-					<table className="text-sm w-full h-full">
+					<table className="text-sm w-full h-full text-nowrap">
 						<ContainersTableHead table={table} />
 						<TableBody>
 							{rows.length ? (
@@ -325,11 +326,13 @@ function ContainerSheet({ sheetOpen, setSheetOpen, activeContainer }: { sheetOpe
 				<SheetContent className="w-full sm:max-w-220 p-2">
 					<SheetHeader>
 						<SheetTitle>{container.name}</SheetTitle>
-						<SheetDescription className="flex items-center gap-2">
+						<SheetDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
 							<Link className="hover:underline" href={getPagePath($router, "system", { id: container.system })}>{$allSystemsById.get()[container.system]?.name ?? ""}</Link>
 							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
 							{container.status}
 							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+							{container.image}
+							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
 							{container.id}
 							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
 							{ContainerHealthLabels[container.health as ContainerHealth]}

internal/site/src/types.d.ts

@@ -240,6 +240,7 @@ export interface ContainerRecord extends RecordModel {
 	id: string
 	system: string
 	name: string
+	image: string
 	cpu: number
 	memory: number
 	net: number