Clean up a little, quick things are quick, slow things show a loader
All checks were successful
Build and deploy / deploy (push) Successful in 1m23s
All checks were successful
Build and deploy / deploy (push) Successful in 1m23s
This commit is contained in:
89
src/app/_components/docker-table.tsx
Normal file
89
src/app/_components/docker-table.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -6,8 +6,8 @@ import { Geist } from "next/font/google";
|
||||
import { TRPCReactProvider } from "@/trpc/react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create T3 App",
|
||||
description: "Generated by create-t3-app",
|
||||
title: "DVDash",
|
||||
description: "Docker version dashboard",
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
};
|
||||
|
||||
|
||||
@@ -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 ? (
|
||||
<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>
|
||||
<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">
|
||||
<DockerTable />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,123 +1,203 @@
|
||||
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 () => {
|
||||
const docker = new Docker({ socketPath: "/var/run/docker.sock" });
|
||||
const containers = await docker.listContainers();
|
||||
latest: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input }) => {
|
||||
const docker = getDocker();
|
||||
const containers = await getContainers(docker);
|
||||
|
||||
// curl -fsSL -v "https://quay.io/token?service=quay.io&scope=repository:linuxserver/code-server:pull"
|
||||
// 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
|
||||
const container = containers.find((container) => container.Id === input.id);
|
||||
if (!container) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: `Container with id ${input.id} not found`,
|
||||
});
|
||||
}
|
||||
|
||||
// curl -fsSL -v -H "Accept: application/vnd.docker.distribution.manifest.list.v2+json" quay.io/v2/linuxserver.io/code-server/tags/list
|
||||
// link: </v2/linuxserver.io/code-server/tags/list?n=100&last=4.18.0-ls180>; rel="next"
|
||||
// link: </v2/linuxserver.io/code-server/tags/list?n=100&last=4.90.1-ls217>; rel="next"
|
||||
try {
|
||||
const imageData = await getImageData(docker, container);
|
||||
|
||||
// curl -fsSL -v -H "Accept: application/json" "hub.docker.com/v2/repositories/linuxserver/code-server/tags?n=25&ordering=last_updated"
|
||||
return {
|
||||
latest: await getLatest(imageData.name, imageData.tag),
|
||||
};
|
||||
} 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);
|
||||
|
||||
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);
|
||||
// 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");
|
||||
}
|
||||
|
||||
let imageTag = imageInspect.RepoTags[0]?.split(":")[1];
|
||||
const imageData = await getImageData(docker, container);
|
||||
|
||||
let imageName = imageDigest?.split("@")?.[0];
|
||||
imageName ??= container.Image.split(":")[0] ?? undefined;
|
||||
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;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
const imageHash = imageDigest?.split("@")?.[1]?.split(":")?.[1];
|
||||
imageTag ??= (await containerInspect.inspect()).Config.Image.split(":")[1] ?? undefined;
|
||||
dockerInfo = dockerInfo.filter((info) => !!info);
|
||||
|
||||
const current = {
|
||||
hash: imageHash?.substring(0, 12),
|
||||
tag: imageTag,
|
||||
};
|
||||
if (dockerInfo.length === 0) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "No docker containers could be found, check logs for more information",
|
||||
});
|
||||
}
|
||||
|
||||
let latest: {
|
||||
hash?: string;
|
||||
tag?: string;
|
||||
} = {
|
||||
hash: "",
|
||||
tag: "",
|
||||
};
|
||||
if (imageName) {
|
||||
latest = await getLatest(imageName, current.tag);
|
||||
}
|
||||
|
||||
return {
|
||||
containerName: container.Names[0]?.replace("/", ""),
|
||||
imageName,
|
||||
current,
|
||||
latest,
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
return dockerInfo;
|
||||
}),
|
||||
return dockerInfo as unknown as NonNullable<(typeof dockerInfo)[number]>[];
|
||||
}),
|
||||
});
|
||||
|
||||
function isSemver(tag: string): boolean {
|
||||
const removeV = tag.replace(/^v/i, "");
|
||||
return !!semver.valid(removeV);
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
async function getLatestSemverTag(image: string, tag?: string): Promise<{ hash: string; tag?: string }> {
|
||||
try {
|
||||
const latest = {
|
||||
hash: "",
|
||||
tag: "",
|
||||
};
|
||||
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",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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));
|
||||
const newestTag = semver.rsort(semverTags)[0];
|
||||
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",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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";
|
||||
function isSemver(tag: string): boolean {
|
||||
const removeV = tag.replace(/^v/i, "");
|
||||
return !!semver.valid(removeV);
|
||||
}
|
||||
|
||||
return latest;
|
||||
} catch (ex) {
|
||||
console.error((ex as unknown as Error).message);
|
||||
return {
|
||||
hash: "Error",
|
||||
tag: "Error",
|
||||
};
|
||||
}
|
||||
async function getHash(image: string) {
|
||||
const latestImage = await $`bin/regctl image digest ${image}`.text();
|
||||
const hash = latestImage.split(":")?.[1]?.substring(0, 12);
|
||||
if (!hash) {
|
||||
throw new Error("Hash not found", {
|
||||
cause: {
|
||||
imageDigest: latestImage,
|
||||
},
|
||||
});
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
async function getLatest(image: string, tag?: string): Promise<{ hash: string; tag?: string }> {
|
||||
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",
|
||||
};
|
||||
}
|
||||
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));
|
||||
const newestTag = semver.rsort(semverTags)[0];
|
||||
|
||||
let imageSh = image;
|
||||
if (newestTag) {
|
||||
imageSh += `:${newestTag}`;
|
||||
return {
|
||||
hash: await getHash(imageSh),
|
||||
tag: newestTag,
|
||||
};
|
||||
}
|
||||
return {
|
||||
hash: await getHash(imageSh),
|
||||
};
|
||||
}
|
||||
|
||||
export type dockerRouterType = inferRouterOutputs<typeof dockerRouter>;
|
||||
Reference in New Issue
Block a user