feat: add docker container table

apps/nextjs/next.config.mjs

@@ -1,6 +1,6 @@
 // Importing env files here to validate on build
-import "./src/env.mjs";
 import "@homarr/auth/env.mjs";
+import "./src/env.mjs";
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -9,6 +9,15 @@ const config = {
  /** We already do linting and typechecking as separate tasks in CI */
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
+ webpack: (config) => {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+ config.module.rules.push({
+ test: /\.node$/,
+ loader: "node-loader",
+ });
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+ return config;
+ },
  experimental: {
  optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
  },

apps/nextjs/package.json

@@ -48,11 +48,13 @@
  "@xterm/addon-fit": "0.10.0",
  "@xterm/xterm": "^5.5.0",
  "chroma-js": "^2.4.2",
+ "clsx": "^2.1.1",
  "dayjs": "^1.11.11",
  "dotenv": "^16.4.5",
  "flag-icons": "^7.2.3",
  "glob": "^10.4.1",
  "jotai": "^2.8.2",
+ "mantine-react-table": "2.0.0-beta.3",
  "next": "^14.2.3",
  "postcss-preset-mantine": "^1.15.0",
  "react": "18.3.1",
@@ -72,6 +74,7 @@
  "@types/react-dom": "^18.3.0",
  "concurrently": "^8.2.2",
  "eslint": "^8.57.0",
+ "node-loader": "^2.0.0",
  "prettier": "^3.2.5",
  "tsx": "4.11.0",
  "typescript": "^5.4.5"

apps/nextjs/src/app/[locale]/manage/tools/docker/DockerTable.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import type { ButtonProps, MantineColor } from "@mantine/core";
+import { Avatar, Badge, Box, Button, Group, Stack, Text, Title } from "@mantine/core";
+import { IconPlayerPlay, IconPlayerStop, IconRotateClockwise, IconTrash } from "@tabler/icons-react";
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+
+import type { RouterOutputs } from "@homarr/api";
+import { useTimeAgo } from "@homarr/common";
+import type { DockerContainerState } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+import { OverflowBadge } from "@homarr/ui";
+
+const columns: MRT_ColumnDef<RouterOutputs["docker"]["getContainers"]["containers"][number]>[] = [
+ {
+ accessorKey: "name",
+ header: "Name",
+ Cell({ renderedCellValue, row }) {
+ return (
+ <Group gap="xs">
+ <Avatar variant="outline" radius="lg" size="md" src={row.original.iconUrl}>
+ {row.original.name.at(0)?.toUpperCase()}
+ </Avatar>
+ <Text>{renderedCellValue}</Text>
+ </Group>
+ );
+ },
+ },
+ {
+ accessorKey: "state",
+ header: "Status",
+ size: 120,
+ Cell({ cell }) {
+ return <ContainerStateBadge state={cell.row.original.state} />;
+ },
+ },
+ {
+ accessorKey: "image",
+ header: "Image",
+ maxSize: 200,
+ Cell({ renderedCellValue }) {
+ return (
+ <Box maw={200}>
+ <Text truncate="end">{renderedCellValue}</Text>
+ </Box>
+ );
+ },
+ },
+ {
+ accessorKey: "ports",
+ header: "Ports",
+ Cell({ cell }) {
+ return (
+ <OverflowBadge overflowCount={1} data={cell.row.original.ports.map((port) => port.PrivatePort.toString())} />
+ );
+ },
+ },
+];
+
+export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["getContainers"]) {
+ const tDocker = useScopedI18n("docker");
+ const relativeTime = useTimeAgo(timestamp);
+ const table = useMantineReactTable({
+ data: containers,
+ enableDensityToggle: false,
+ enableColumnActions: false,
+ enableColumnFilters: false,
+ enablePagination: false,
+ enableRowSelection: true,
+ positionToolbarAlertBanner: "top",
+ enableTableFooter: false,
+ enableBottomToolbar: false,
+ positionGlobalFilter: "right",
+ mantineSearchTextInputProps: {
+ placeholder: tDocker("table.search", { count: containers.length }),
+ style: { minWidth: 300 },
+ autoFocus: true,
+ },
+
+ initialState: { density: "xs", showGlobalFilter: true },
+ renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
+ return (
+ <Group gap={"sm"}>
+ {groupedAlert}
+ <Text fw={500}>
+ {tDocker("table.selected", {
+ selectCount: table.getSelectedRowModel().rows.length,
+ totalCount: table.getRowCount(),
+ })}
+ </Text>
+ <ContainerActionBar />
+ </Group>
+ );
+ },
+
+ columns,
+ });
+ return (
+ <Stack>
+ <Title order={3}>{tDocker("title")}</Title>
+ <Text>{tDocker("table.updated", { when: relativeTime })}</Text>
+ <MantineReactTable table={table} />
+ </Stack>
+ );
+}
+
+const ContainerActionBar = () => {
+ const t = useScopedI18n("docker.action");
+ const sharedButtonProps = {
+ variant: "light",
+ radius: "md",
+ } satisfies Partial<ButtonProps>;
+
+ return (
+ <Group gap="xs">
+ <Button leftSection={<IconPlayerPlay />} color="green" {...sharedButtonProps}>
+ {t("start")}
+ </Button>
+ <Button leftSection={<IconPlayerStop />} color="red" {...sharedButtonProps}>
+ {t("stop")}
+ </Button>
+ <Button leftSection={<IconRotateClockwise />} color="orange" {...sharedButtonProps}>
+ {t("restart")}
+ </Button>
+ <Button leftSection={<IconTrash />} color="red" {...sharedButtonProps}>
+ {t("remove")}
+ </Button>
+ </Group>
+ );
+};
+
+const containerStates = {
+ created: "cyan",
+ running: "green",
+ paused: "yellow",
+ restarting: "orange",
+ exited: "red",
+ removing: "pink",
+ dead: "dark",
+} satisfies Record<DockerContainerState, MantineColor>;
+
+const ContainerStateBadge = ({ state }: { state: DockerContainerState }) => {
+ const t = useScopedI18n("docker.field.state.option");
+
+ return (
+ <Badge size="lg" radius="sm" variant="light" w={120} color={containerStates[state]}>
+ {t(state)}
+ </Badge>
+ );
+};

apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx

@@ -0,0 +1,15 @@
+import { Box } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+
+import { DockerTable } from "./DockerTable";
+
+export default async function DockerPage() {
+ const { containers, timestamp } = await api.docker.getContainers();
+ return (
+ <Box style={{ borderRadius: 6 }} p="md" bg="black">
+ <h2>Welcome to docker !</h2>
+ <DockerTable containers={containers} timestamp={timestamp} />
+ </Box>
+ );
+}

apps/nextjs/src/env.mjs

@@ -27,6 +27,9 @@ export const env = createEnv({
  DB_USER: isUsingDbCredentials ? z.string() : z.string().optional(),
  DB_PASSWORD: isUsingDbCredentials ? z.string() : z.string().optional(),
  DB_NAME: isUsingDbUrl ? z.string().optional() : z.string(),
+ // Comma separated list of docker hostnames that can be used to connect to query the docker endpoints (localhost:2375,host.docker.internal:2375, ...)
+ DOCKER_HOSTNAMES: z.string().optional(),
+ DOCKER_PORTS: z.number().optional(),
  },
  /**
  * Specify your client-side environment variables schema here.
@@ -49,6 +52,8 @@ export const env = createEnv({
  DB_PORT: process.env.DB_PORT,
  DB_DRIVER: process.env.DB_DRIVER,
  NODE_ENV: process.env.NODE_ENV,
+ DOCKER_HOSTNAMES: process.env.DOCKER_HOSTNAMES,
+ DOCKER_PORTS: process.env.DOCKER_PORTS,
  // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
  },
  skipValidation:

apps/websocket/package.json

@@ -8,7 +8,7 @@
  "type": "module",
  "scripts": {
  "dev": "pnpm with-env tsx ./src/main.ts",
- "build": "esbuild src/main.ts --bundle --platform=node --outfile=wssServer.cjs --external:bcrypt --loader:.html=text",
+ "build": "esbuild src/main.ts --bundle --platform=node --outfile=wssServer.cjs --external:bcrypt --loader:.html=text --loader:.node=text",
  "clean": "rm -rf .turbo node_modules",
  "lint": "eslint .",
  "format": "prettier --check . --ignore-path ../../.gitignore",

packages/api/package.json

@@ -31,12 +31,14 @@
  "@homarr/server-settings": "workspace:^0.1.0",
  "@trpc/client": "next",
  "@trpc/server": "next",
+ "dockerode": "^4.0.2",
  "superjson": "2.2.1"
  },
  "devDependencies": {
  "@homarr/eslint-config": "workspace:^0.2.0",
  "@homarr/prettier-config": "workspace:^0.1.0",
  "@homarr/tsconfig": "workspace:^0.1.0",
+ "@types/dockerode": "^3.3.29",
  "eslint": "^8.57.0",
  "prettier": "^3.2.5",
  "typescript": "^5.4.5"

packages/api/src/root.ts

@@ -1,5 +1,6 @@
 import { appRouter as innerAppRouter } from "./router/app";
 import { boardRouter } from "./router/board";
+import { dockerRouter } from "./router/docker/docker-router";
 import { groupRouter } from "./router/group";
 import { homeRouter } from "./router/home";
 import { iconsRouter } from "./router/icons";
@@ -24,6 +25,7 @@ export const appRouter = createTRPCRouter({
  log: logRouter,
  icon: iconsRouter,
  home: homeRouter,
+ docker: dockerRouter,
  serverSettings: serverSettingsRouter,
 });
 

packages/api/src/router/docker/docker-router.ts

@@ -0,0 +1,84 @@
+import type Docker from "dockerode";
+
+import { db, like, or } from "@homarr/db";
+import { icons } from "@homarr/db/schema/sqlite";
+import type { DockerContainerState } from "@homarr/definitions";
+import { createCacheChannel } from "@homarr/redis";
+
+import { createTRPCRouter, publicProcedure } from "../../trpc";
+import { DockerSingleton } from "./docker-singleton";
+
+const dockerCache = createCacheChannel<{
+ containers: (Docker.ContainerInfo & { instance: string; iconUrl: string | null })[];
+}>("docker-containers", 5 * 60 * 1000);
+
+export const dockerRouter = createTRPCRouter({
+ getContainers: publicProcedure.query(async () => {
+ const { timestamp, data } = await dockerCache.consumeAsync(async () => {
+ const dockerInstances = DockerSingleton.getInstance();
+ const containers = await Promise.all(
+ // Return all the containers of all the instances into only one item
+ dockerInstances.map(({ instance, host: key }) =>
+ instance.listContainers({ all: true }).then((containers) =>
+ containers.map((container) => ({
+ ...container,
+ instance: key,
+ })),
+ ),
+ ),
+ ).then((containers) => containers.flat());
+
+ const extractImage = (container: Docker.ContainerInfo) =>
+ container.Image.split("/").at(-1)?.split(":").at(0) ?? "";
+ const likeQueries = containers.map((container) => like(icons.name, `%${extractImage(container)}%`));
+ const dbIcons =
+ likeQueries.length >= 1
+ ? await db.query.icons.findMany({
+ where: or(...likeQueries),
+ })
+ : [];
+
+ return {
+ containers: containers.map((container) => ({
+ ...container,
+ iconUrl:
+ dbIcons.find((icon) => {
+ const extractedImage = extractImage(container);
+ if (!extractedImage) return false;
+ return icon.name.toLowerCase().includes(extractedImage.toLowerCase());
+ })?.url ?? null,
+ })),
+ };
+ });
+
+ return {
+ containers: sanitizeContainers(data.containers),
+ timestamp,
+ };
+ }),
+});
+
+interface DockerContainer {
+ name: string;
+ id: string;
+ state: DockerContainerState;
+ image: string;
+ ports: Docker.Port[];
+ iconUrl: string | null;
+}
+
+function sanitizeContainers(
+ containers: (Docker.ContainerInfo & { instance: string; iconUrl: string | null })[],
+): DockerContainer[] {
+ return containers.map((container) => {
+ return {
+ name: container.Names[0]?.split("/")[1] || "Unknown",
+ id: container.Id,
+ instance: container.instance,
+ state: container.State as DockerContainerState,
+ image: container.Image,
+ ports: container.Ports,
+ iconUrl: container.iconUrl,
+ };
+ });
+}