jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 18:56:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

add image name to containers table (#1302)

Browse Source
This commit is contained in:
henrygd
2025-10-20 17:11:26 -04:00
parent 1df08801a2
commit dfd1fc8fda
8 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
internal/site/src/components/containers-table/containers-table-columns.tsx
View File

@@ -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,

11
internal/site/src/components/containers-table/containers-table.tsx
View File

@@ -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]}