From 00c32e7cdf4dde518adf4cd00c3f4c4dd767f6b4 Mon Sep 17 00:00:00 2001 From: Joe Monk Date: Sat, 6 Sep 2025 16:22:22 +0100 Subject: [PATCH] Switch to cards --- src/app/_components/docker-table.tsx | 215 ++++++++------------------- src/app/page.tsx | 6 +- src/server/api/routers/docker.ts | 1 + src/styles/globals.css | 2 +- 4 files changed, 68 insertions(+), 156 deletions(-) diff --git a/src/app/_components/docker-table.tsx b/src/app/_components/docker-table.tsx index 3f6cd55..3de4e03 100644 --- a/src/app/_components/docker-table.tsx +++ b/src/app/_components/docker-table.tsx @@ -4,188 +4,101 @@ import type { dockerRouterType } from "@/server/api/routers/docker"; import { api } from "@/trpc/react"; import type { JSX } from "react"; -function DockerRow({ - containerInfo, -}: { - containerInfo: dockerRouterType["list"][number]; -}) { - const { data: latest, isError, isLoading } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false }); - const outdated = containerInfo.image.current.hash !== latest?.latest.hash; - - let latestFragment: JSX.Element | null = null; - if (isError) { - latestFragment = ( - <> - {"Error"} - {"Error"} - - ); - } else if (isLoading) { - latestFragment = ( - <> - - - - - - - - ); - } else if (latest) { - latestFragment = ( - <> - {latest?.latest.tag} - {latest?.latest.hash} - - ); - } - - return ( - - {containerInfo.container.name} - {containerInfo.image.name} - {containerInfo.image.current.tag} - {containerInfo.image.current.hash} - {latestFragment} - - ); -} - function DockerCard({ containerInfo, }: { containerInfo: dockerRouterType["list"][number]; }) { - const { data: latest, isError, isLoading } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false }); - const outdated = containerInfo.image.current.hash !== latest?.latest.hash; + const { data: latest, isError, isLoading, error } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false }); let latestFragment: JSX.Element | null = null; if (isError) { latestFragment = ( - <> - {"Error"} - {"Error"} - +
+
Tag
+
Error: {error.message}
+ +
Short Hash
+
Error: {error.message}
+
); } else if (isLoading) { latestFragment = ( - <> - - - - - - - +
+
Tag
+
+ +
Short Hash
+
+
); } else if (latest) { latestFragment = ( - <> - {latest?.latest.tag} - {latest?.latest.hash} - +
+
Tag
+
{latest?.latest.tag ?? "Unknown"}
+ +
Short Hash
+
{latest?.latest.hash ?? "Unknown"}
+
); } + const outdated = containerInfo.image.current.hash !== latest?.latest.hash; + const showWarning = isLoading || (!isError && !isLoading && (!latest?.latest.tag || !latest?.latest.hash)); + return ( -
-
-

{containerInfo.container.name}

-
-
-
Image
-
{containerInfo.image.name}
-
-
-
-
-
Tag
-
{containerInfo.image.name}
-
-
-
-
-
Short Hash
-
{containerInfo.image.name}
-
-
-
-
-
Tag
-
{containerInfo.image.name}
-
-
-
-
-
Short Hash
-
{containerInfo.image.name}
-
-
-
-
+
+
+

{containerInfo.container.name}

+

{containerInfo.image.name}

+
+

Current

+
+
Tag
+
{containerInfo.image.current.tag}
+
Short Hash
+
{containerInfo.image.current.hash}
+
+
+

Latest

+ {latestFragment} +
+
); } - export function DockerTable() { - const { data: list, isLoading: listLoading } = api.docker.list.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false }); + const { data: list, isLoading: listLoading, error } = api.docker.list.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false }); return ( <> {listLoading ? ( - <>Loading data... + <>Loading docker container list... ) : ( <> -
- {list - ? list - .sort((ca, cb) => { - if (ca.container.name && cb.container.name) { - if (ca.container.name < cb.container.name) { - return -1; - } - if (ca.container.name > cb.container.name) { - return 1; - } +
+ {list ? ( + list + .sort((ca, cb) => { + if (ca.container.name && cb.container.name) { + if (ca.container.name < cb.container.name) { + return -1; } - return 0; - }) - .map((containerInfo) => ( - - )) - : null} + if (ca.container.name > cb.container.name) { + return 1; + } + } + return 0; + }) + .map((containerInfo) => ) + ) : ( + <>Error loading docker container list: {error?.message} + )}
- {/*
- - - - - - - - - - - - - {list - ? list - .sort((ca, cb) => { - if (ca.container.name && cb.container.name) { - if (ca.container.name < cb.container.name) { - return -1; - } - if (ca.container.name > cb.container.name) { - return 1; - } - } - return 0; - }) - .map((containerInfo) => ) - : null} - -
NameImageTagShort HashTagShort Hash
-
*/} )} diff --git a/src/app/page.tsx b/src/app/page.tsx index 654d0a6..69de2b4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,10 +5,8 @@ export default async function Home() { void api.docker.list.prefetch(); return ( -
-
- -
+
+
); } diff --git a/src/server/api/routers/docker.ts b/src/server/api/routers/docker.ts index 55fa5ff..498d2ca 100644 --- a/src/server/api/routers/docker.ts +++ b/src/server/api/routers/docker.ts @@ -188,6 +188,7 @@ async function getLatest(image: string, tag?: string): Promise<{ hash: string; t return { hash, + tag, }; } diff --git a/src/styles/globals.css b/src/styles/globals.css index 7689669..acb7040 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -6,4 +6,4 @@ @theme { --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} +} \ No newline at end of file