feat(agent): Add docker image update available flag (#2211)

Co-authored-by: henrygd <hank@henrygd.me>

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

@@ -4,6 +4,7 @@ import { cn, decimalString, formatBytes, hourWithSeconds } from "@/lib/utils"
 import type { ContainerRecord } from "@/types"
 import { ContainerHealth, ContainerHealthLabels } from "@/lib/enums"
 import {
+	CircleArrowUpIcon,
 	ClockIcon,
 	ContainerIcon,
 	CpuIcon,
@@ -177,11 +178,25 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => (
 			<HeaderButton column={column} name={t({ message: "Image", context: "Docker image" })} Icon={LayersIcon} />
 		),
-		cell: ({ getValue }) => {
+		cell: ({ getValue, row }) => {
 			const val = getValue() as string
 			return (
-				<div className="ms-1 xl:w-40 truncate" title={val}>
-					{val}
+				<div className="ms-1 xl:w-40 flex items-center gap-2">
+					<span className="truncate" title={val}>
+						{val}
+					</span>
+					{row.original.updatable && (
+						<Tooltip>
+							<TooltipTrigger
+								className="shrink-0 rounded-sm text-emerald-600 dark:text-emerald-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								aria-label={t`Image update available`}
+								onClick={(event) => event.stopPropagation()}
+							>
+								<CircleArrowUpIcon className="size-4" aria-hidden="true" />
+							</TooltipTrigger>
+							<TooltipContent>{t`Image update available`}</TooltipContent>
+						</Tooltip>
+					)}
 				</div>
 			)
 		},

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

@@ -66,7 +66,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 		function fetchData(systemId?: string) {
 			pb.collection<ContainerRecord>("containers")
 				.getList(0, 2000, {
-					fields: "id,name,image,ports,cpu,memory,net,health,status,system,updated",
+					fields: "id,name,image,updatable,ports,cpu,memory,net,health,status,system,updated",
 					filter: systemId ? pb.filter("system={:system}", { system: systemId }) : undefined,
 				})
 				.then(({ items }) => {

internal/site/src/types.d.ts

@@ -335,6 +335,7 @@ export interface ContainerRecord extends RecordModel {
 	system: string
 	name: string
 	image: string
+	updatable?: boolean
 	ports: string
 	cpu: number
 	memory: number