Clean up a little, quick things are quick, slow things show a loader

src/app/_components/docker-table.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+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 });
+	const outdated = containerInfo.image.current.hash !== latest?.latest.hash;
+
+  let latestFragment: JSX.Element | null = null;
+  if (isError) {
+    latestFragment = (
+      <>
+        <td>{"Error"}</td>
+        <td>{"Error"}</td>
+      </>
+    )
+  } else if (isLoading) {
+    latestFragment = (
+      <>
+        <td><span className="loading loading-dots loading-lg"></span></td>
+        <td><span className="loading loading-dots loading-lg"></span></td>
+      </>
+    )
+  } else if (latest) {
+    latestFragment = (
+      <>
+        <td>{latest?.latest.tag}</td>
+        <td>{latest?.latest.hash}</td>
+      </>
+    )
+  }
+
+	return (
+		<tr key={containerInfo.container.name} className={`${outdated ? "bg-base-200" : null}`}>
+			<td className={`border-l-8 ${isLoading ? "border-l-warning/80" : outdated ? "border-l-error/80" : "border-l-info/80"}`}>{containerInfo.container.name}</td>
+			<td>{containerInfo.image.name}</td>
+			<td>{containerInfo.image.current.tag}</td>
+			<td>{containerInfo.image.current.hash}</td>
+      {latestFragment}
+		</tr>
+	);
+}
+
+export function DockerTable() {
+	const { data: list, isLoading: listLoading } = api.docker.list.useQuery();
+	return (
+		<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
+			{!listLoading ? (
+				<table className="table-s table">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Image</th>
+							<th>Tag</th>
+							<th>Short Hash</th>
+							<th>Tag</th>
+							<th>Short Hash</th>
+						</tr>
+					</thead>
+					<tbody>
+						{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) => <DockerRow key={containerInfo.container.name} containerInfo={containerInfo} />)
+							: null}
+					</tbody>
+				</table>
+			) : (
+				<>Loading data...</>
+			)}
+		</div>
+	);
+}

src/app/layout.tsx

@@ -6,8 +6,8 @@ import { Geist } from "next/font/google";
 import { TRPCReactProvider } from "@/trpc/react";
 
 export const metadata: Metadata = {
-	title: "Create T3 App",
+	title: "DVDash",
-	description: "Generated by create-t3-app",
+	description: "Docker version dashboard",
 	icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 

src/app/page.tsx

@@ -1,61 +1,14 @@
-import { HydrateClient, api } from "@/trpc/server";
+import { DockerTable } from "@/app/_components/docker-table";
+import { api } from "@/trpc/server";
 
 export default async function Home() {
-	const list = await api.docker.list();
-
 	void api.docker.list.prefetch();
 
 	return (
-		<HydrateClient>
 		<main className="flex min-h-screen flex-col items-center justify-center">
 			<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-					{list ? (
+				<DockerTable />
-						<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
-							<table className="table-s table">
-								<thead>
-									<tr>
-										<th>Name</th>
-										<th>Image</th>
-										<th>Tag</th>
-										<th>Short Hash</th>
-										<th>Tag</th>
-										<th>Short Hash</th>
-									</tr>
-								</thead>
-								<tbody>
-									{list
-										.sort((ca, cb) => {
-											if (ca.containerName && cb.containerName) {
-												if (ca.containerName < cb.containerName) {
-													return -1;
-												}
-												if (ca.containerName > cb.containerName) {
-													return 1;
-												}
-											}
-											return 0;
-										})
-										.map((containerInfo) => {
-											const outdated = containerInfo.current.hash !== containerInfo.latest.hash;
-											return (
-												<tr key={containerInfo.containerName} className={`${outdated ? "bg-base-200" : null}`}>
-													<td className={`border-l-8 ${outdated ? "border-l-error/80" : "border-l-info/80"}`}>{containerInfo.containerName}</td>
-													<td>{containerInfo.imageName}</td>
-													<td>{containerInfo.current.tag}</td>
-													<td>{containerInfo.current.hash}</td>
-													<td>{containerInfo.latest.tag}</td>
-													<td>{containerInfo.latest.hash}</td>
-												</tr>
-											);
-										})}
-								</tbody>
-							</table>
-						</div>
-					) : (
-						"Loading tRPC query..."
-					)}
 			</div>
 		</main>
-		</HydrateClient>
 	);
 }

src/server/api/routers/docker.ts

@@ -1,78 +1,187 @@
 import Docker from "dockerode";
 import semver from "semver";
+import { z } from "zod";
 import { $ } from "zx";
 
 import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";
+import { TRPCError, type inferRouterOutputs } from "@trpc/server";
 
 export const dockerRouter = createTRPCRouter({
-	list: publicProcedure.query(async () => {
+  latest: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input }) => {
-		const docker = new Docker({ socketPath: "/var/run/docker.sock" });
+    const docker = getDocker();
-		const containers = await docker.listContainers();
+    const containers = await getContainers(docker);
 
-		// curl -fsSL -v "https://quay.io/token?service=quay.io&scope=repository:linuxserver/code-server:pull"
+    const container = containers.find((container) => container.Id === input.id);
-		// curl -fsSL -v -H "Accept: application/vnd.docker.distribution.manifest.list.v2+json" -H "Authorization: Bearer djE6bGludXhzZXJ2ZXIvY29kZS1zZXJ2ZXI6MTc0NTQ1NTk1MTY3NjM5ODA4Mg==" quay.io/v2/linuxserver.io/code-server/tags/list
+    if (!container) {
-
+      throw new TRPCError({
-		// curl -fsSL -v -H "Accept: application/vnd.docker.distribution.manifest.list.v2+json" quay.io/v2/linuxserver.io/code-server/tags/list
+        code: "NOT_FOUND",
-		// link: </v2/linuxserver.io/code-server/tags/list?n=100&last=4.18.0-ls180>; rel="next"
+        message: `Container with id ${input.id} not found`,
-		// link: </v2/linuxserver.io/code-server/tags/list?n=100&last=4.90.1-ls217>; rel="next"
+      });
-
-		// curl -fsSL -v -H "Accept: application/json" "hub.docker.com/v2/repositories/linuxserver/code-server/tags?n=25&ordering=last_updated"
-
-		const dockerInfo = await Promise.all(
-			containers.map(async (container) => {
-				const imageInspect = await docker.getImage(container.Image).inspect();
-				const imageDigest = imageInspect.RepoDigests[0];
-				const containerInspect = docker.getContainer(container.Id);
-
-				let imageTag = imageInspect.RepoTags[0]?.split(":")[1];
-
-				let imageName = imageDigest?.split("@")?.[0];
-				imageName ??= container.Image.split(":")[0] ?? undefined;
-
-				const imageHash = imageDigest?.split("@")?.[1]?.split(":")?.[1];
-				imageTag ??= (await containerInspect.inspect()).Config.Image.split(":")[1] ?? undefined;
-
-				const current = {
-					hash: imageHash?.substring(0, 12),
-					tag: imageTag,
-				};
-
-				let latest: {
-					hash?: string;
-					tag?: string;
-				} = {
-					hash: "",
-					tag: "",
-				};
-				if (imageName) {
-					latest = await getLatest(imageName, current.tag);
     }
 
+    try {
+      const imageData = await getImageData(docker, container);
+
       return {
-					containerName: container.Names[0]?.replace("/", ""),
+        latest: await getLatest(imageData.name, imageData.tag),
-					imageName,
-					current,
-					latest,
       };
+    } catch (ex) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: (ex as Error).message,
+        cause: (ex as Error).cause,
+      });
+    }
+  }),
+  list: publicProcedure.query(async () => {
+    const docker = getDocker();
+    const containers = await getContainers(docker);
+
+    // All this data should be local/from the local docker socket/api
+    let dockerInfo = await Promise.all(
+      containers.map(async (container) => {
+        try {
+          if (!container.Id) {
+            throw new Error("No container id could be found");
+          }
+
+          const imageData = await getImageData(docker, container);
+
+          const info = {
+            container: {
+              name: container.Names[0]?.replace("/", "") ?? "",
+              id: container.Id
+            },
+            image: {
+              name: imageData.name,
+              current: {
+                hash: imageData.hash.substring(0, 12),
+                tag: imageData.tag,
+              }
+            }
+          };
+          return info;
+        } catch (ex) {
+          console.error("Error getting container data:", {
+            ex: {
+              message: (ex as Error).message,
+              cause: (ex as Error).cause,
+            },
+            container: {
+              id: container.Id,
+            },
+          });
+          return null;
+        }
       }),
     );
 
-		return dockerInfo;
+    dockerInfo = dockerInfo.filter((info) => !!info);
+
+    if (dockerInfo.length === 0) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "No docker containers could be found, check logs for more information",
+      });
+    }
+
+    return dockerInfo as unknown as NonNullable<(typeof dockerInfo)[number]>[];
   }),
 });
 
+async function getImageData(docker: Docker, container: Docker.ContainerInfo) {
+  const inspect = await docker.getImage(container.Image).inspect();
+  const digest = inspect.RepoDigests[0];
+  const containerInspect = await docker.getContainer(container.Id).inspect();
+
+  let tag = inspect.RepoTags[0]?.split(":")[1];
+  tag ??= containerInspect.Config.Image.split(":")[1];
+
+  let name = digest?.split("@")?.[0];
+  name ??= container.Image.split(":")[0];
+
+  const hash = digest?.split("@")?.[1]?.split(":")?.[1];
+
+  if (!name) {
+    throw new Error("Container image name could not be found");
+  }
+  if (!hash) {
+    throw new Error("No image hash could be found");
+  }
+
+  return {
+    name,
+    tag,
+    hash
+  }
+}
+
+function getDocker() {
+  try {
+    const docker = new Docker({ socketPath: "/var/run/docker.sock" });
+    if (docker) {
+      return docker;
+    }
+    throw new Error("Could not connect to the docker socket");
+  } catch (error) {
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "Could not connect to docker socket",
+    });
+  }
+}
+
+async function getContainers(docker: Docker) {
+  try {
+    const containers = await docker.listContainers();
+    if (containers.length) {
+      return containers;
+    }
+    throw Error("No containers found");
+  } catch (error) {
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "Could not get containers from docker socket",
+    });
+  }
+}
+
 function isSemver(tag: string): boolean {
   const removeV = tag.replace(/^v/i, "");
   return !!semver.valid(removeV);
 }
 
-async function getLatestSemverTag(image: string, tag?: string): Promise<{ hash: string; tag?: string }> {
+async function getHash(image: string) {
-	try {
+  const latestImage = await $`bin/regctl image digest ${image}`.text();
-		const latest = {
+  const hash = latestImage.split(":")?.[1]?.substring(0, 12);
-			hash: "",
+  if (!hash) {
-			tag: "",
+    throw new Error("Hash not found", {
-		};
+      cause: {
+        imageDigest: latestImage,
+      },
+    });
+  }
+  return hash;
+}
 
+async function getLatest(image: string, tag?: string): Promise<{ hash: string; tag?: string }> {
+  if (tag && isSemver(tag)) {
+    return await getSemverTag(image);
+  }
+
+  let imageSh = image;
+  if (tag) {
+    imageSh += `:${tag}`;
+  }
+
+  const hash = await getHash(imageSh);
+
+  return {
+    hash,
+  };
+}
+
+async function getSemverTag(image: string): Promise<{ hash: string; tag?: string }> {
   const allTags = await $`bin/regctl tag ls --exclude 'version.*' --exclude 'unstable.*' --exclude '.*rc.*' --exclude 'lib.*' --exclude 'release.*' --exclude 'arm.*
 '  --exclude 'amd.*' ${image}`.text();
   const semverTags = allTags.split("\n").filter((tag) => isSemver(tag));
@@ -81,43 +190,14 @@ async function getLatestSemverTag(image: string, tag?: string): Promise<{ hash:
   let imageSh = image;
   if (newestTag) {
     imageSh += `:${newestTag}`;
-			latest.tag = newestTag;
-		}
-		const latestImage = await $`bin/regctl image digest ${imageSh}`.text();
-		latest.hash = latestImage.split(":")?.[1]?.substring(0, 12) ?? "Error";
-
-		return latest;
-	} catch (ex) {
-		console.error((ex as unknown as Error).message);
     return {
-			hash: "Error",
+      hash: await getHash(imageSh),
-			tag: "Error",
+      tag: newestTag,
     };
   }
+  return {
+    hash: await getHash(imageSh),
+  };
 }
 
-async function getLatest(image: string, tag?: string): Promise<{ hash: string; tag?: string }> {
+export type dockerRouterType = inferRouterOutputs<typeof dockerRouter>;
-	try {
-		let latest: { hash: string; tag?: string } = {
-			hash: "",
-			tag: tag,
-		};
-		if (tag && isSemver(tag)) {
-			latest = await getLatestSemverTag(image, tag);
-		} else {
-			let imageSh = image;
-			if (tag) {
-				imageSh += `:${tag}`;
-			}
-			const latestImage = await $`bin/regctl image digest ${imageSh}`.text();
-			latest.hash = latestImage.split(":")?.[1]?.substring(0, 12) ?? "Error";
-		}
-		return latest;
-	} catch (ex) {
-		console.error((ex as unknown as Error).message);
-		return {
-			hash: "Error",
-			tag: "Error",
-		};
-	}
-}