mirror of
https://github.com/andwati/dokploy.git
synced 2026-10-18 03:02:56 +00:00
Merge pull request #5061 from Dokploy/feat/docker-images-disk-usage-tabs
feat: add Images and Disk Usage tabs to docker dashboard
This commit is contained in:
Mauricio Siu
@@ -0,0 +1,428 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
type ColumnDef,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
type PaginationState,
|
||||||
|
type SortingState,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import type { inferRouterOutputs } from "@trpc/server";
|
||||||
|
import {
|
||||||
|
ArrowUpDown,
|
||||||
|
Boxes,
|
||||||
|
Database,
|
||||||
|
Gauge,
|
||||||
|
HardDrive,
|
||||||
|
Layers,
|
||||||
|
Loader2,
|
||||||
|
type LucideIcon,
|
||||||
|
Trash2,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { AppRouter } from "@/server/api/root";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
type DiskUsageItem =
|
||||||
|
inferRouterOutputs<AppRouter>["dockerDiskUsage"]["getDiskUsage"][number];
|
||||||
|
type BuildCacheBase =
|
||||||
|
inferRouterOutputs<AppRouter>["dockerDiskUsage"]["getBuildCache"][number];
|
||||||
|
type BuildCacheRow = BuildCacheBase & { key: string };
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STAT_CARDS: { type: string; title: string; icon: LucideIcon }[] = [
|
||||||
|
{ type: "Images", title: "Images", icon: Layers },
|
||||||
|
{ type: "Containers", title: "Containers", icon: Boxes },
|
||||||
|
{ type: "Local Volumes", title: "Volumes", icon: HardDrive },
|
||||||
|
{ type: "Build Cache", title: "Build Cache", icon: Database },
|
||||||
|
];
|
||||||
|
|
||||||
|
const SortableHeader = ({
|
||||||
|
column,
|
||||||
|
title,
|
||||||
|
}: {
|
||||||
|
column: {
|
||||||
|
getIsSorted: () => false | "asc" | "desc";
|
||||||
|
toggleSorting: (asc: boolean) => void;
|
||||||
|
};
|
||||||
|
title: string;
|
||||||
|
}) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="-ml-3 h-8"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
<ArrowUpDown className="ml-2 size-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
const StatCard = ({
|
||||||
|
icon: Icon,
|
||||||
|
title,
|
||||||
|
item,
|
||||||
|
isLoading,
|
||||||
|
}: {
|
||||||
|
icon: LucideIcon;
|
||||||
|
title: string;
|
||||||
|
item?: DiskUsageItem;
|
||||||
|
isLoading: boolean;
|
||||||
|
}) => (
|
||||||
|
<Card className="p-4">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
<Icon className="size-4" />
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="mt-3 flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
<Loader2 className="size-4 animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="mt-2 text-2xl font-semibold">{item?.size ?? "-"}</div>
|
||||||
|
<div className="mt-1 flex flex-wrap gap-x-3 text-xs text-muted-foreground">
|
||||||
|
<span>{item?.totalCount ?? 0} total</span>
|
||||||
|
<span>{item?.active ?? 0} active</span>
|
||||||
|
<span>{item?.reclaimable ?? "-"} reclaimable</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ShowDiskUsage = ({ serverId }: Props) => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const [sorting, setSorting] = useState<SortingState>([
|
||||||
|
{ id: "Size", desc: true },
|
||||||
|
]);
|
||||||
|
const [globalFilter, setGlobalFilter] = useState("");
|
||||||
|
const [pagination, setPagination] = useState<PaginationState>({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: diskUsage, isLoading: isLoadingDiskUsage } =
|
||||||
|
api.dockerDiskUsage.getDiskUsage.useQuery({ serverId });
|
||||||
|
const { data: buildCache, isLoading: isLoadingBuildCache } =
|
||||||
|
api.dockerDiskUsage.getBuildCache.useQuery({ serverId });
|
||||||
|
const { mutateAsync: pruneBuildCache, isPending: isPruning } =
|
||||||
|
api.dockerDiskUsage.pruneBuildCache.useMutation();
|
||||||
|
|
||||||
|
const usageByType = useMemo(
|
||||||
|
() => new Map((diskUsage ?? []).map((item) => [item.type, item])),
|
||||||
|
[diskUsage],
|
||||||
|
);
|
||||||
|
|
||||||
|
const rows = useMemo<BuildCacheRow[]>(
|
||||||
|
() =>
|
||||||
|
(buildCache ?? []).map((entry) => ({
|
||||||
|
...entry,
|
||||||
|
key: entry.id,
|
||||||
|
})),
|
||||||
|
[buildCache],
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredData = useMemo(() => {
|
||||||
|
if (!globalFilter.trim()) {
|
||||||
|
return rows;
|
||||||
|
}
|
||||||
|
const query = globalFilter.toLowerCase();
|
||||||
|
return rows.filter(
|
||||||
|
(entry) =>
|
||||||
|
entry.id.toLowerCase().includes(query) ||
|
||||||
|
entry.description.toLowerCase().includes(query) ||
|
||||||
|
entry.type.toLowerCase().includes(query),
|
||||||
|
);
|
||||||
|
}, [rows, globalFilter]);
|
||||||
|
|
||||||
|
const handlePrune = async () => {
|
||||||
|
try {
|
||||||
|
await pruneBuildCache({ serverId });
|
||||||
|
toast.success("Build cache pruned");
|
||||||
|
await Promise.all([
|
||||||
|
utils.dockerDiskUsage.getBuildCache.invalidate(),
|
||||||
|
utils.dockerDiskUsage.getDiskUsage.invalidate(),
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error pruning build cache", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<BuildCacheRow>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
accessorKey: "id",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Cache ID" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="font-mono text-xs text-muted-foreground">
|
||||||
|
{row.original.id.slice(0, 16)}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "type",
|
||||||
|
header: ({ column }) => <SortableHeader column={column} title="Type" />,
|
||||||
|
cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "description",
|
||||||
|
header: "Description",
|
||||||
|
enableSorting: false,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div
|
||||||
|
className="max-w-[360px] truncate text-xs text-muted-foreground"
|
||||||
|
title={row.original.description}
|
||||||
|
>
|
||||||
|
{row.original.description || "-"}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Size",
|
||||||
|
accessorFn: (entry) => entry.sizeBytes,
|
||||||
|
header: ({ column }) => <SortableHeader column={column} title="Size" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground">{row.original.size}</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "created",
|
||||||
|
accessorKey: "createdSince",
|
||||||
|
header: "Created",
|
||||||
|
enableSorting: false,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||||
|
{row.original.createdSince}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "lastUsed",
|
||||||
|
accessorKey: "lastUsedSince",
|
||||||
|
header: "Last Used",
|
||||||
|
enableSorting: false,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||||
|
{row.original.lastUsedSince}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "usageCount",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Usage" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{row.original.usageCount}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "flags",
|
||||||
|
enableSorting: false,
|
||||||
|
header: "Flags",
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{row.original.inUse && <Badge variant="blue">In use</Badge>}
|
||||||
|
{row.original.shared && <Badge variant="outline">Shared</Badge>}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: filteredData,
|
||||||
|
columns,
|
||||||
|
getRowId: (row) => row.key,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full space-y-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{STAT_CARDS.map((stat) => (
|
||||||
|
<StatCard
|
||||||
|
key={stat.type}
|
||||||
|
icon={stat.icon}
|
||||||
|
title={stat.title}
|
||||||
|
item={usageByType.get(stat.type)}
|
||||||
|
isLoading={isLoadingDiskUsage}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
|
||||||
|
<div className="rounded-xl bg-background shadow-md">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-xl flex flex-row gap-2">
|
||||||
|
<Gauge className="size-6 text-muted-foreground self-center" />
|
||||||
|
Build Cache
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Cache layers kept by the Docker builder on the selected
|
||||||
|
server.
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<DialogAction
|
||||||
|
title="Prune build cache"
|
||||||
|
description="This will remove all build cache entries that are not currently in use. This action cannot be undone."
|
||||||
|
onClick={handlePrune}
|
||||||
|
disabled={isPruning}
|
||||||
|
>
|
||||||
|
<Button variant="outline" size="sm" disabled={isPruning}>
|
||||||
|
<Trash2 className="size-4 mr-1" />
|
||||||
|
Prune build cache
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 py-8 border-t">
|
||||||
|
{isLoadingBuildCache ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
|
||||||
|
<span>Loading...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : !buildCache?.length ? (
|
||||||
|
<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
|
||||||
|
<div className="rounded-full bg-muted p-4">
|
||||||
|
<Database className="size-10 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 text-center">
|
||||||
|
<p className="text-sm font-medium">No build cache found</p>
|
||||||
|
<p className="max-w-sm text-sm text-muted-foreground">
|
||||||
|
Layers cached by "docker build" on this server will appear
|
||||||
|
here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Search by id, type or description..."
|
||||||
|
value={globalFilter}
|
||||||
|
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||||
|
className="max-w-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border overflow-x-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext(),
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow key={row.id}>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(
|
||||||
|
cell.column.columnDef.cell,
|
||||||
|
cell.getContext(),
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={columns.length}
|
||||||
|
className="h-24 text-center text-muted-foreground"
|
||||||
|
>
|
||||||
|
No build cache entries match your filters.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
{table.getPageCount() > 1 && (
|
||||||
|
<div className="flex items-center justify-end gap-4">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
||||||
|
{table.getPageCount()}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,470 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
type ColumnDef,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
type PaginationState,
|
||||||
|
type SortingState,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import type { inferRouterOutputs } from "@trpc/server";
|
||||||
|
import { ArrowUpDown, Eye, Layers, Loader2, Trash2 } from "lucide-react";
|
||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { CodeEditor } from "@/components/shared/code-editor";
|
||||||
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { AppRouter } from "@/server/api/root";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
type ImageBase =
|
||||||
|
inferRouterOutputs<AppRouter>["dockerImage"]["getImages"][number];
|
||||||
|
type ImageRow = ImageBase & { key: string };
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SIZE_UNITS: Record<string, number> = {
|
||||||
|
b: 1,
|
||||||
|
kb: 1e3,
|
||||||
|
mb: 1e6,
|
||||||
|
gb: 1e9,
|
||||||
|
tb: 1e12,
|
||||||
|
};
|
||||||
|
|
||||||
|
const parseSize = (size?: string) => {
|
||||||
|
if (!size) return -1;
|
||||||
|
const match = /^([\d.]+)\s*([a-zA-Z]+)$/.exec(size.trim());
|
||||||
|
if (!match?.[1] || !match[2]) return -1;
|
||||||
|
return Number(match[1]) * (SIZE_UNITS[match[2].toLowerCase()] ?? 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getReference = (image: ImageBase) =>
|
||||||
|
image.Repository !== "<none>" && image.Tag !== "<none>"
|
||||||
|
? `${image.Repository}:${image.Tag}`
|
||||||
|
: image.ID;
|
||||||
|
|
||||||
|
const FORCE_HINT_REGEX =
|
||||||
|
/must be forced|image is being used|referenced in multiple repositories/i;
|
||||||
|
|
||||||
|
const SortableHeader = ({
|
||||||
|
column,
|
||||||
|
title,
|
||||||
|
}: {
|
||||||
|
column: {
|
||||||
|
getIsSorted: () => false | "asc" | "desc";
|
||||||
|
toggleSorting: (asc: boolean) => void;
|
||||||
|
};
|
||||||
|
title: string;
|
||||||
|
}) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="-ml-3 h-8"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
<ArrowUpDown className="ml-2 size-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ShowImageConfig = ({
|
||||||
|
imageRef,
|
||||||
|
serverId,
|
||||||
|
}: {
|
||||||
|
imageRef: string;
|
||||||
|
serverId?: string;
|
||||||
|
}) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const { data, isLoading, error } = api.dockerImage.getImageConfig.useQuery(
|
||||||
|
{ imageRef, serverId },
|
||||||
|
{ enabled: open },
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon-sm" aria-label="View image config">
|
||||||
|
<Eye className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Image Config</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
docker image inspect output for "{imageRef}"
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{error ? (
|
||||||
|
<AlertBlock type="error">{error.message}</AlertBlock>
|
||||||
|
) : isLoading ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||||
|
<span>Loading...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
|
||||||
|
<code>
|
||||||
|
<pre className="whitespace-pre-wrap wrap-break-word">
|
||||||
|
<CodeEditor
|
||||||
|
language="json"
|
||||||
|
lineWrapping
|
||||||
|
lineNumbers={false}
|
||||||
|
readOnly
|
||||||
|
value={JSON.stringify(data, null, 2)}
|
||||||
|
/>
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ShowImages = ({ serverId }: Props) => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const [sorting, setSorting] = useState<SortingState>([
|
||||||
|
{ id: "Repository", desc: false },
|
||||||
|
]);
|
||||||
|
const [globalFilter, setGlobalFilter] = useState("");
|
||||||
|
const [pagination, setPagination] = useState<PaginationState>({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
const [forcePrompt, setForcePrompt] = useState<{
|
||||||
|
image: ImageRow;
|
||||||
|
message: string;
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
const { data: images, isLoading } = api.dockerImage.getImages.useQuery({
|
||||||
|
serverId,
|
||||||
|
});
|
||||||
|
const { mutateAsync: removeImage } =
|
||||||
|
api.dockerImage.removeImage.useMutation();
|
||||||
|
|
||||||
|
const rows = useMemo<ImageRow[]>(
|
||||||
|
() =>
|
||||||
|
(images ?? []).map((image) => ({
|
||||||
|
...image,
|
||||||
|
key: `${image.ID}-${image.Repository}-${image.Tag}`,
|
||||||
|
})),
|
||||||
|
[images],
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredData = useMemo(() => {
|
||||||
|
if (!globalFilter.trim()) {
|
||||||
|
return rows;
|
||||||
|
}
|
||||||
|
const query = globalFilter.toLowerCase();
|
||||||
|
return rows.filter(
|
||||||
|
(image) =>
|
||||||
|
image.Repository.toLowerCase().includes(query) ||
|
||||||
|
image.Tag.toLowerCase().includes(query) ||
|
||||||
|
image.ID.toLowerCase().includes(query),
|
||||||
|
);
|
||||||
|
}, [rows, globalFilter]);
|
||||||
|
|
||||||
|
const handleDelete = async (image: ImageRow, force = false) => {
|
||||||
|
try {
|
||||||
|
await removeImage({
|
||||||
|
repository: image.Repository,
|
||||||
|
tag: image.Tag,
|
||||||
|
id: image.ID,
|
||||||
|
force,
|
||||||
|
serverId,
|
||||||
|
});
|
||||||
|
toast.success("Image deleted");
|
||||||
|
setForcePrompt(null);
|
||||||
|
await utils.dockerImage.getImages.invalidate();
|
||||||
|
} catch (error) {
|
||||||
|
const message = error instanceof Error ? error.message : "Unknown error";
|
||||||
|
if (!force && FORCE_HINT_REGEX.test(message)) {
|
||||||
|
setForcePrompt({ image, message });
|
||||||
|
} else {
|
||||||
|
toast.error("Error deleting image", { description: message });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<ImageRow>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
accessorKey: "Repository",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Repository" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div
|
||||||
|
className="max-w-[280px] truncate font-medium"
|
||||||
|
title={row.original.Repository}
|
||||||
|
>
|
||||||
|
{row.original.Repository}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "Tag",
|
||||||
|
header: ({ column }) => <SortableHeader column={column} title="Tag" />,
|
||||||
|
cell: ({ row }) => <Badge variant="outline">{row.original.Tag}</Badge>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "ID",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Image ID" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="font-mono text-xs text-muted-foreground">
|
||||||
|
{row.original.ID}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Size",
|
||||||
|
accessorFn: (image) => parseSize(image.Size),
|
||||||
|
header: ({ column }) => <SortableHeader column={column} title="Size" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground">{row.original.Size}</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Created",
|
||||||
|
accessorFn: (image) => new Date(image.CreatedAt).getTime() || 0,
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Created" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground whitespace-nowrap">
|
||||||
|
{row.original.CreatedSince}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
enableSorting: false,
|
||||||
|
header: () => <div className="text-right">Actions</div>,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex items-center justify-end gap-3">
|
||||||
|
<ShowImageConfig
|
||||||
|
imageRef={getReference(row.original)}
|
||||||
|
serverId={serverId}
|
||||||
|
/>
|
||||||
|
<DialogAction
|
||||||
|
title="Delete image"
|
||||||
|
description={`The image "${getReference(row.original)}" will be removed from Docker. This action cannot be undone.`}
|
||||||
|
onClick={() => handleDelete(row.original)}
|
||||||
|
>
|
||||||
|
<Button variant="ghost" size="icon-sm" aria-label="Delete image">
|
||||||
|
<Trash2 className="size-4 text-destructive" />
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[serverId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: filteredData,
|
||||||
|
columns,
|
||||||
|
getRowId: (row) => row.key,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
|
||||||
|
<div className="rounded-xl bg-background shadow-md ">
|
||||||
|
<CardHeader className="">
|
||||||
|
<CardTitle className="text-xl flex flex-row gap-2">
|
||||||
|
<Layers className="size-6 text-muted-foreground self-center" />
|
||||||
|
Images
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Manage the Docker images of the selected server.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="space-y-4 py-8 border-t">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
|
||||||
|
<span>Loading...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : !images?.length ? (
|
||||||
|
<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
|
||||||
|
<div className="rounded-full bg-muted p-4">
|
||||||
|
<Layers className="size-10 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 text-center">
|
||||||
|
<p className="text-sm font-medium">No images found</p>
|
||||||
|
<p className="max-w-sm text-sm text-muted-foreground">
|
||||||
|
Docker images pulled or built on this server will appear
|
||||||
|
here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Search by repository, tag or id..."
|
||||||
|
value={globalFilter}
|
||||||
|
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||||
|
className="max-w-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border overflow-x-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext(),
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow key={row.id}>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(
|
||||||
|
cell.column.columnDef.cell,
|
||||||
|
cell.getContext(),
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={columns.length}
|
||||||
|
className="h-24 text-center text-muted-foreground"
|
||||||
|
>
|
||||||
|
No images match your filters.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
{table.getPageCount() > 1 && (
|
||||||
|
<div className="flex items-center justify-end gap-4">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
||||||
|
{table.getPageCount()}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<AlertDialog
|
||||||
|
open={!!forcePrompt}
|
||||||
|
onOpenChange={(open) => !open && setForcePrompt(null)}
|
||||||
|
>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Image is in use</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
{forcePrompt?.message} Do you want to force the deletion? This may
|
||||||
|
affect containers still using this image.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel onClick={() => setForcePrompt(null)}>
|
||||||
|
Cancel
|
||||||
|
</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
variant="destructive"
|
||||||
|
onClick={() =>
|
||||||
|
forcePrompt && handleDelete(forcePrompt.image, true)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Force delete
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -4,7 +4,9 @@ import type { GetServerSidePropsContext } from "next";
|
|||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import type { ReactElement } from "react";
|
import type { ReactElement } from "react";
|
||||||
import superjson from "superjson";
|
import superjson from "superjson";
|
||||||
|
import { ShowDiskUsage } from "@/components/dashboard/docker/disk-usage/show-disk-usage";
|
||||||
import { ShowDockerEvents } from "@/components/dashboard/docker/events/show-docker-events";
|
import { ShowDockerEvents } from "@/components/dashboard/docker/events/show-docker-events";
|
||||||
|
import { ShowImages } from "@/components/dashboard/docker/images/show-images";
|
||||||
import { ShowContainers } from "@/components/dashboard/docker/show/show-containers";
|
import { ShowContainers } from "@/components/dashboard/docker/show/show-containers";
|
||||||
import { ShowVolumes } from "@/components/dashboard/docker/volumes/show-volumes";
|
import { ShowVolumes } from "@/components/dashboard/docker/volumes/show-volumes";
|
||||||
import { ShowNetworks } from "@/components/dashboard/networks/show-networks";
|
import { ShowNetworks } from "@/components/dashboard/networks/show-networks";
|
||||||
@@ -63,9 +65,11 @@ const Dashboard = () => {
|
|||||||
<TabsList>
|
<TabsList>
|
||||||
<TabsTrigger value="containers">Containers</TabsTrigger>
|
<TabsTrigger value="containers">Containers</TabsTrigger>
|
||||||
<TabsTrigger value="swarm">Swarm</TabsTrigger>
|
<TabsTrigger value="swarm">Swarm</TabsTrigger>
|
||||||
|
<TabsTrigger value="images">Images</TabsTrigger>
|
||||||
<TabsTrigger value="volumes">Volumes</TabsTrigger>
|
<TabsTrigger value="volumes">Volumes</TabsTrigger>
|
||||||
<TabsTrigger value="networks">Networks</TabsTrigger>
|
<TabsTrigger value="networks">Networks</TabsTrigger>
|
||||||
<TabsTrigger value="events">Events</TabsTrigger>
|
<TabsTrigger value="events">Events</TabsTrigger>
|
||||||
|
<TabsTrigger value="disk-usage">Disk Usage</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
<TabsContent value="containers">
|
<TabsContent value="containers">
|
||||||
<ShowContainers serverId={serverId} />
|
<ShowContainers serverId={serverId} />
|
||||||
@@ -92,6 +96,9 @@ const Dashboard = () => {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
<TabsContent value="images">
|
||||||
|
<ShowImages serverId={serverId} />
|
||||||
|
</TabsContent>
|
||||||
<TabsContent value="volumes">
|
<TabsContent value="volumes">
|
||||||
<ShowVolumes serverId={serverId} />
|
<ShowVolumes serverId={serverId} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
@@ -101,6 +108,9 @@ const Dashboard = () => {
|
|||||||
<TabsContent value="events">
|
<TabsContent value="events">
|
||||||
<ShowDockerEvents serverId={serverId} />
|
<ShowDockerEvents serverId={serverId} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
<TabsContent value="disk-usage">
|
||||||
|
<ShowDiskUsage serverId={serverId} />
|
||||||
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
)}
|
)}
|
||||||
</ServerFilter>
|
</ServerFilter>
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ import { deploymentRouter } from "./routers/deployment";
|
|||||||
import { destinationRouter } from "./routers/destination";
|
import { destinationRouter } from "./routers/destination";
|
||||||
import { dnsProviderRouter } from "./routers/dns-provider";
|
import { dnsProviderRouter } from "./routers/dns-provider";
|
||||||
import { dockerRouter } from "./routers/docker";
|
import { dockerRouter } from "./routers/docker";
|
||||||
|
import { dockerDiskUsageRouter } from "./routers/docker-disk-usage";
|
||||||
|
import { dockerImageRouter } from "./routers/docker-image";
|
||||||
import { dockerVolumeRouter } from "./routers/docker-volume";
|
import { dockerVolumeRouter } from "./routers/docker-volume";
|
||||||
import { domainRouter } from "./routers/domain";
|
import { domainRouter } from "./routers/domain";
|
||||||
import { environmentRouter } from "./routers/environment";
|
import { environmentRouter } from "./routers/environment";
|
||||||
@@ -72,6 +74,8 @@ export const appRouter = createTRPCRouter({
|
|||||||
destination: destinationRouter,
|
destination: destinationRouter,
|
||||||
dnsProvider: dnsProviderRouter,
|
dnsProvider: dnsProviderRouter,
|
||||||
docker: dockerRouter,
|
docker: dockerRouter,
|
||||||
|
dockerDiskUsage: dockerDiskUsageRouter,
|
||||||
|
dockerImage: dockerImageRouter,
|
||||||
dockerVolume: dockerVolumeRouter,
|
dockerVolume: dockerVolumeRouter,
|
||||||
domain: domainRouter,
|
domain: domainRouter,
|
||||||
gitea: giteaRouter,
|
gitea: giteaRouter,
|
||||||
|
|||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import {
|
||||||
|
cleanupBuilders,
|
||||||
|
findServerById,
|
||||||
|
getBuildCache,
|
||||||
|
getDockerDiskUsage,
|
||||||
|
} from "@dokploy/server";
|
||||||
|
import { TRPCError } from "@trpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { audit } from "@/server/api/utils/audit";
|
||||||
|
import { createTRPCRouter, withPermission } from "../trpc";
|
||||||
|
|
||||||
|
export const dockerDiskUsageRouter = createTRPCRouter({
|
||||||
|
getDiskUsage: withPermission("docker", "read")
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
serverId: z.string().optional(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.query(async ({ input, ctx }) => {
|
||||||
|
if (input.serverId) {
|
||||||
|
const server = await findServerById(input.serverId);
|
||||||
|
if (server.organizationId !== ctx.session?.activeOrganizationId) {
|
||||||
|
throw new TRPCError({ code: "UNAUTHORIZED" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return await getDockerDiskUsage(input.serverId);
|
||||||
|
}),
|
||||||
|
|
||||||
|
getBuildCache: withPermission("docker", "read")
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
serverId: z.string().optional(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.query(async ({ input, ctx }) => {
|
||||||
|
if (input.serverId) {
|
||||||
|
const server = await findServerById(input.serverId);
|
||||||
|
if (server.organizationId !== ctx.session?.activeOrganizationId) {
|
||||||
|
throw new TRPCError({ code: "UNAUTHORIZED" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return await getBuildCache(input.serverId);
|
||||||
|
}),
|
||||||
|
|
||||||
|
pruneBuildCache: withPermission("docker", "read")
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
serverId: z.string().optional(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.mutation(async ({ input, ctx }) => {
|
||||||
|
if (input.serverId) {
|
||||||
|
const server = await findServerById(input.serverId);
|
||||||
|
if (server.organizationId !== ctx.session?.activeOrganizationId) {
|
||||||
|
throw new TRPCError({ code: "UNAUTHORIZED" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await cleanupBuilders(input.serverId);
|
||||||
|
await audit(ctx, {
|
||||||
|
action: "delete",
|
||||||
|
resourceType: "docker",
|
||||||
|
resourceId: "build-cache",
|
||||||
|
resourceName: "Docker build cache",
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
});
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import {
|
||||||
|
findServerById,
|
||||||
|
getImageConfig,
|
||||||
|
getImages,
|
||||||
|
removeImage,
|
||||||
|
} from "@dokploy/server";
|
||||||
|
import { TRPCError } from "@trpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { audit } from "@/server/api/utils/audit";
|
||||||
|
import { createTRPCRouter, withPermission } from "../trpc";
|
||||||
|
|
||||||
|
export const dockerImageRouter = createTRPCRouter({
|
||||||
|
getImages: withPermission("docker", "read")
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
serverId: z.string().optional(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.query(async ({ input, ctx }) => {
|
||||||
|
if (input.serverId) {
|
||||||
|
const server = await findServerById(input.serverId);
|
||||||
|
if (server.organizationId !== ctx.session?.activeOrganizationId) {
|
||||||
|
throw new TRPCError({ code: "UNAUTHORIZED" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return await getImages(input.serverId);
|
||||||
|
}),
|
||||||
|
|
||||||
|
getImageConfig: withPermission("docker", "read")
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
imageRef: z.string().min(1),
|
||||||
|
serverId: z.string().optional(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.query(async ({ input, ctx }) => {
|
||||||
|
if (input.serverId) {
|
||||||
|
const server = await findServerById(input.serverId);
|
||||||
|
if (server.organizationId !== ctx.session?.activeOrganizationId) {
|
||||||
|
throw new TRPCError({ code: "UNAUTHORIZED" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return await getImageConfig(input.imageRef, input.serverId);
|
||||||
|
}),
|
||||||
|
|
||||||
|
removeImage: withPermission("docker", "read")
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
repository: z.string(),
|
||||||
|
tag: z.string(),
|
||||||
|
id: z.string().min(1),
|
||||||
|
force: z.boolean().optional(),
|
||||||
|
serverId: z.string().optional(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.mutation(async ({ input, ctx }) => {
|
||||||
|
if (input.serverId) {
|
||||||
|
const server = await findServerById(input.serverId);
|
||||||
|
if (server.organizationId !== ctx.session?.activeOrganizationId) {
|
||||||
|
throw new TRPCError({ code: "UNAUTHORIZED" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await removeImage(
|
||||||
|
{
|
||||||
|
repository: input.repository,
|
||||||
|
tag: input.tag,
|
||||||
|
id: input.id,
|
||||||
|
force: input.force,
|
||||||
|
},
|
||||||
|
input.serverId,
|
||||||
|
);
|
||||||
|
await audit(ctx, {
|
||||||
|
action: "delete",
|
||||||
|
resourceType: "docker",
|
||||||
|
resourceId: input.id,
|
||||||
|
resourceName:
|
||||||
|
input.repository !== "<none>" && input.tag !== "<none>"
|
||||||
|
? `${input.repository}:${input.tag}`
|
||||||
|
: input.id,
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
});
|
||||||
@@ -18,6 +18,7 @@ export * from "./services/deployment";
|
|||||||
export * from "./services/destination";
|
export * from "./services/destination";
|
||||||
export * from "./services/dns-provider";
|
export * from "./services/dns-provider";
|
||||||
export * from "./services/docker";
|
export * from "./services/docker";
|
||||||
|
export * from "./services/docker-image";
|
||||||
export * from "./services/docker-volume";
|
export * from "./services/docker-volume";
|
||||||
export * from "./services/domain";
|
export * from "./services/domain";
|
||||||
export * from "./services/environment";
|
export * from "./services/environment";
|
||||||
@@ -104,7 +105,6 @@ export * from "./utils/docker/compose/volume";
|
|||||||
export * from "./utils/docker/domain";
|
export * from "./utils/docker/domain";
|
||||||
export * from "./utils/docker/types";
|
export * from "./utils/docker/types";
|
||||||
export * from "./utils/docker/utils";
|
export * from "./utils/docker/utils";
|
||||||
export * from "./utils/vault";
|
|
||||||
export * from "./utils/filesystem/directory";
|
export * from "./utils/filesystem/directory";
|
||||||
export * from "./utils/filesystem/ssh";
|
export * from "./utils/filesystem/ssh";
|
||||||
export * from "./utils/git-branch-validation";
|
export * from "./utils/git-branch-validation";
|
||||||
@@ -141,6 +141,7 @@ export * from "./utils/traefik/redirect";
|
|||||||
export * from "./utils/traefik/security";
|
export * from "./utils/traefik/security";
|
||||||
export * from "./utils/traefik/types";
|
export * from "./utils/traefik/types";
|
||||||
export * from "./utils/traefik/web-server";
|
export * from "./utils/traefik/web-server";
|
||||||
|
export * from "./utils/vault";
|
||||||
export * from "./utils/volume-backups/index";
|
export * from "./utils/volume-backups/index";
|
||||||
export * from "./utils/watch-paths/should-deploy";
|
export * from "./utils/watch-paths/should-deploy";
|
||||||
export * from "./verification/send-verification-email";
|
export * from "./verification/send-verification-email";
|
||||||
|
|||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import {
|
||||||
|
execAsync,
|
||||||
|
execAsyncRemote,
|
||||||
|
} from "@dokploy/server/utils/process/execAsync";
|
||||||
|
import { quote } from "shell-quote";
|
||||||
|
|
||||||
|
export interface DockerImage {
|
||||||
|
Repository: string;
|
||||||
|
Tag: string;
|
||||||
|
ID: string;
|
||||||
|
Digest?: string;
|
||||||
|
CreatedAt: string;
|
||||||
|
CreatedSince: string;
|
||||||
|
Size: string;
|
||||||
|
SharedSize?: string;
|
||||||
|
UniqueSize?: string;
|
||||||
|
VirtualSize?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getImages = async (serverId?: string) => {
|
||||||
|
try {
|
||||||
|
const command = "docker images --format '{{json .}}'";
|
||||||
|
const { stdout } = serverId
|
||||||
|
? await execAsyncRemote(serverId, command)
|
||||||
|
: await execAsync(command);
|
||||||
|
|
||||||
|
return stdout
|
||||||
|
.trim()
|
||||||
|
.split("\n")
|
||||||
|
.filter(Boolean)
|
||||||
|
.map((line) => JSON.parse(line) as DockerImage);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getImageConfig = async (imageRef: string, serverId?: string) => {
|
||||||
|
const command = `docker image inspect ${quote([String(imageRef ?? "")])}`;
|
||||||
|
const { stdout } = serverId
|
||||||
|
? await execAsyncRemote(serverId, command)
|
||||||
|
: await execAsync(command);
|
||||||
|
|
||||||
|
return JSON.parse(stdout.trim())[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
interface RemoveImageParams {
|
||||||
|
repository: string;
|
||||||
|
tag: string;
|
||||||
|
id: string;
|
||||||
|
force?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const removeImage = async (
|
||||||
|
{ repository, tag, id, force }: RemoveImageParams,
|
||||||
|
serverId?: string,
|
||||||
|
) => {
|
||||||
|
const hasTaggedReference =
|
||||||
|
repository && tag && repository !== "<none>" && tag !== "<none>";
|
||||||
|
const reference = hasTaggedReference ? `${repository}:${tag}` : id;
|
||||||
|
const command = `docker rmi ${force ? "-f " : ""}${quote([String(reference ?? "")])}`;
|
||||||
|
|
||||||
|
if (serverId) {
|
||||||
|
await execAsyncRemote(serverId, command);
|
||||||
|
} else {
|
||||||
|
await execAsync(command);
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -291,9 +291,13 @@ const parseSizeToBytes = (size: string): number => {
|
|||||||
return value * (multipliers[unit] || 0);
|
return value * (multipliers[unit] || 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getDockerDiskUsage = async (): Promise<DockerDiskUsageItem[]> => {
|
export const getDockerDiskUsage = async (
|
||||||
|
serverId?: string,
|
||||||
|
): Promise<DockerDiskUsageItem[]> => {
|
||||||
const command = "docker system df --format '{{json .}}'";
|
const command = "docker system df --format '{{json .}}'";
|
||||||
const { stdout } = await execAsync(command);
|
const { stdout } = serverId
|
||||||
|
? await execAsyncRemote(serverId, command)
|
||||||
|
: await execAsync(command);
|
||||||
|
|
||||||
const lines = stdout.trim().split("\n").filter(Boolean);
|
const lines = stdout.trim().split("\n").filter(Boolean);
|
||||||
return lines.map((line) => {
|
return lines.map((line) => {
|
||||||
@@ -309,6 +313,49 @@ export const getDockerDiskUsage = async (): Promise<DockerDiskUsageItem[]> => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export interface DockerBuildCacheItem {
|
||||||
|
id: string;
|
||||||
|
type: string;
|
||||||
|
description: string;
|
||||||
|
size: string;
|
||||||
|
sizeBytes: number;
|
||||||
|
createdSince: string;
|
||||||
|
lastUsedSince: string;
|
||||||
|
usageCount: number;
|
||||||
|
shared: boolean;
|
||||||
|
inUse: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getBuildCache = async (
|
||||||
|
serverId?: string,
|
||||||
|
): Promise<DockerBuildCacheItem[]> => {
|
||||||
|
try {
|
||||||
|
const command = "docker system df -v --format '{{json .}}'";
|
||||||
|
const { stdout } = serverId
|
||||||
|
? await execAsyncRemote(serverId, command)
|
||||||
|
: await execAsync(command);
|
||||||
|
|
||||||
|
const diskUsage = JSON.parse(stdout.trim());
|
||||||
|
return ((diskUsage?.BuildCache ?? []) as Record<string, string>[]).map(
|
||||||
|
(entry) => ({
|
||||||
|
id: entry.ID ?? "",
|
||||||
|
type: entry.CacheType ?? "",
|
||||||
|
description: entry.Description ?? "",
|
||||||
|
size: entry.Size ?? "",
|
||||||
|
sizeBytes: parseSizeToBytes(entry.Size ?? ""),
|
||||||
|
createdSince: entry.CreatedSince ?? "",
|
||||||
|
lastUsedSince: entry.LastUsedSince ?? "",
|
||||||
|
usageCount: Number.parseInt(entry.UsageCount ?? "0", 10) || 0,
|
||||||
|
shared: entry.Shared === "true",
|
||||||
|
inUse: entry.InUse === "true",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Volume cleanup should always be performed manually by the user. The reason is that during automatic cleanup, a volume may be deleted due to a stopped container, which is a dangerous situation.
|
* Volume cleanup should always be performed manually by the user. The reason is that during automatic cleanup, a volume may be deleted due to a stopped container, which is a dangerous situation.
|
||||||
*
|
*
|
||||||
|
|||||||
Reference in New Issue
Block a user