feat(multi-server): add docker containers view to servers

apps/dokploy/components/dashboard/settings/servers/show-docker-containers-modal.tsx

@@ -0,0 +1,50 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ContainerIcon, FileTextIcon } from "lucide-react";
+import { useState } from "react";
+import { ShowTraefikSystem } from "../../file-system/show-traefik-system";
+import { ShowContainers } from "../../docker/show/show-containers";
+
+interface Props {
+	serverId: string;
+}
+
+export const ShowDockerContainersModal = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Docker Containers
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+				<DialogHeader>
+					<div className="flex flex-col gap-1.5">
+						<DialogTitle className="flex items-center gap-2">
+							<ContainerIcon className="size-5" /> Docker Containers
+						</DialogTitle>
+						<p className="text-muted-foreground text-sm">
+							See all the containers of your remote server
+						</p>
+					</div>
+				</DialogHeader>
+
+				<div className="grid w-full gap-1">
+					<ShowContainers serverId={serverId} />
+					{/* <ShowTraefikSystem serverId={serverId} /> */}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/show-server.tsx

@@ -0,0 +1,78 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { TraefikActions } from "./traefik-actions";
+interface Props {
+	serverId: string;
+}
+
+export const ShowServer = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					View Actions
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-6xl  overflow-y-auto max-h-screen ">
+				<DialogHeader>
+					<div className="flex flex-col gap-1.5">
+						<DialogTitle className="flex items-center gap-2">
+							Server Actions
+						</DialogTitle>
+						<p className="text-muted-foreground text-sm">
+							View all the actions you can do with this server remotely
+						</p>
+					</div>
+				</DialogHeader>
+
+				<div className="grid grid-cols-3 w-full gap-1">
+					<Card className="bg-transparent">
+						<CardHeader>
+							<CardTitle className="text-xl">Traefik</CardTitle>
+							<CardDescription>
+								Deploy your new project in one-click.
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<TraefikActions serverId={serverId} />
+						</CardContent>
+						<CardFooter className="flex justify-between">
+							<Button variant="outline">Cancel</Button>
+							<Button>Deploy</Button>
+						</CardFooter>
+					</Card>
+					{/* <ShowTraefikSystem serverId={serverId} /> */}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -31,6 +31,8 @@ import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { ShowModalLogs } from "../web-server/show-modal-logs";
 import { ToggleTraefikDashboard } from "./toggle-traefik-dashboard";
 import { EditTraefikEnv } from "../web-server/edit-traefik-env";
+import { ShowServer } from "./show-server";
+import { ShowDockerContainersModal } from "./show-docker-containers-modal";
 export const ShowServers = () => {
 	const { data, refetch } = api.server.all.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
@@ -171,6 +173,7 @@ export const ShowServers = () => {
 														<SetupServer serverId={server.serverId} />
 
 														<UpdateServer serverId={server.serverId} />
+														<ShowServer serverId={server.serverId} />
 														<DialogAction
 															title={"Delete Server"}
 															description="This will delete the server and all associated data"
@@ -196,6 +199,7 @@ export const ShowServers = () => {
 																Delete Server
 															</DropdownMenuItem>
 														</DialogAction>
+
 														<DropdownMenuSeparator />
 														<DropdownMenuLabel>Traefik</DropdownMenuLabel>
 														<DropdownMenuItem
@@ -216,6 +220,9 @@ export const ShowServers = () => {
 														<ShowTraefikFileSystemModal
 															serverId={server.serverId}
 														/>
+														<ShowDockerContainersModal
+															serverId={server.serverId}
+														/>
 														<ShowModalLogs
 															appName="dokploy-traefik"
 															serverId={server.serverId}

apps/dokploy/components/dashboard/settings/servers/traefik-actions.tsx

@@ -0,0 +1,135 @@
+import { api } from "@/utils/api";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { ShowModalLogs } from "../web-server/show-modal-logs";
+import { DockerTerminalModal } from "../web-server/docker-terminal-modal";
+import { EditTraefikEnv } from "../web-server/edit-traefik-env";
+import { ShowMainTraefikConfig } from "../web-server/show-main-traefik-config";
+
+interface Props {
+	serverId?: string;
+}
+export const TraefikActions = ({ serverId }: Props) => {
+	api.settings.reloadServer.useMutation();
+	const { mutateAsync: reloadTraefik, isLoading: reloadTraefikIsLoading } =
+		api.settings.reloadTraefik.useMutation();
+	const { mutateAsync: cleanAll, isLoading: cleanAllIsLoading } =
+		api.settings.cleanAll.useMutation();
+	const { mutateAsync: toggleDashboard, isLoading: toggleDashboardIsLoading } =
+		api.settings.toggleDashboard.useMutation();
+
+	const {
+		mutateAsync: cleanStoppedContainers,
+		isLoading: cleanStoppedContainersIsLoading,
+	} = api.settings.cleanStoppedContainers.useMutation();
+
+	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
+
+	const { mutateAsync: updateDockerCleanup } =
+		api.settings.updateDockerCleanup.useMutation();
+
+	const { data: haveTraefikDashboardPortEnabled, refetch: refetchDashboard } =
+		api.settings.haveTraefikDashboardPortEnabled.useQuery();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger
+				asChild
+				disabled={reloadTraefikIsLoading || toggleDashboardIsLoading}
+			>
+				<Button
+					isLoading={reloadTraefikIsLoading || toggleDashboardIsLoading}
+					variant="outline"
+				>
+					Traefik
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-56" align="start">
+				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					<DropdownMenuItem
+						onClick={async () => {
+							await reloadTraefik({
+								serverId: serverId,
+							})
+								.then(async () => {
+									toast.success("Traefik Reloaded");
+								})
+								.catch(() => {
+									toast.error("Error to reload the traefik");
+								});
+						}}
+					>
+						<span>Reload</span>
+					</DropdownMenuItem>
+					<ShowModalLogs appName="dokploy-traefik">
+						<span>Watch logs</span>
+					</ShowModalLogs>
+					{!serverId && (
+						<ShowMainTraefikConfig>
+							<DropdownMenuItem
+								onSelect={(e) => e.preventDefault()}
+								className="w-full cursor-pointer space-x-3"
+							>
+								<span>View Traefik config</span>
+							</DropdownMenuItem>
+						</ShowMainTraefikConfig>
+					)}
+
+					<EditTraefikEnv serverId={serverId}>
+						<DropdownMenuItem
+							onSelect={(e) => e.preventDefault()}
+							className="w-full cursor-pointer space-x-3"
+						>
+							<span>Modify Env</span>
+						</DropdownMenuItem>
+					</EditTraefikEnv>
+
+					<DropdownMenuItem
+						onClick={async () => {
+							await toggleDashboard({
+								enableDashboard: !haveTraefikDashboardPortEnabled,
+								serverId: serverId,
+							})
+								.then(async () => {
+									toast.success(
+										`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
+									);
+									refetchDashboard();
+								})
+								.catch(() => {
+									toast.error(
+										`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
+									);
+								});
+						}}
+						className="w-full cursor-pointer space-x-3"
+					>
+						<span>
+							{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"} Dashboard
+						</span>
+					</DropdownMenuItem>
+
+					<DockerTerminalModal appName="dokploy-traefik" serverId={serverId}>
+						<DropdownMenuItem
+							className="w-full cursor-pointer space-x-3"
+							onSelect={(e) => e.preventDefault()}
+						>
+							<span>Enter the terminal</span>
+						</DropdownMenuItem>
+					</DockerTerminalModal>
+				</DropdownMenuGroup>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+};