refactor(multi-server): add deploy templates on different servers

This commit is contained in:
Mauricio Siu
2024-09-17 00:38:27 -06:00
parent abe787593c
commit a591e02ffa
9 changed files with 106 additions and 24 deletions

View File

@@ -73,7 +73,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const slug = slugify(projectName); const slug = slugify(projectName);
const { data: servers } = api.server.all.useQuery(); const { data: servers } = api.server.withSSHKey.useQuery();
const { mutateAsync, isLoading, error, isError } = const { mutateAsync, isLoading, error, isError } =
api.application.create.useMutation(); api.application.create.useMutation();

View File

@@ -72,7 +72,7 @@ interface Props {
export const AddCompose = ({ projectId, projectName }: Props) => { export const AddCompose = ({ projectId, projectName }: Props) => {
const utils = api.useUtils(); const utils = api.useUtils();
const slug = slugify(projectName); const slug = slugify(projectName);
const { data: servers } = api.server.all.useQuery(); const { data: servers } = api.server.withSSHKey.useQuery();
const { mutateAsync, isLoading, error, isError } = const { mutateAsync, isLoading, error, isError } =
api.compose.create.useMutation(); api.compose.create.useMutation();

View File

@@ -157,7 +157,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
const utils = api.useUtils(); const utils = api.useUtils();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const slug = slugify(projectName); const slug = slugify(projectName);
const { data: servers } = api.server.all.useQuery(); const { data: servers } = api.server.withSSHKey.useQuery();
const postgresMutation = api.postgres.create.useMutation(); const postgresMutation = api.postgres.create.useMutation();
const mongoMutation = api.mongo.create.useMutation(); const mongoMutation = api.mongo.create.useMutation();
const redisMutation = api.redis.create.useMutation(); const redisMutation = api.redis.create.useMutation();

View File

@@ -19,6 +19,21 @@ import {
CommandInput, CommandInput,
CommandItem, CommandItem,
} from "@/components/ui/command"; } from "@/components/ui/command";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -43,12 +58,14 @@ import {
Code, Code,
Github, Github,
Globe, Globe,
HelpCircle,
PuzzleIcon, PuzzleIcon,
SearchIcon, SearchIcon,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Label } from "@/components/ui/label";
interface Props { interface Props {
projectId: string; projectId: string;
} }
@@ -58,9 +75,12 @@ export const AddTemplate = ({ projectId }: Props) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const { data } = api.compose.templates.useQuery(); const { data } = api.compose.templates.useQuery();
const [selectedTags, setSelectedTags] = useState<string[]>([]); const [selectedTags, setSelectedTags] = useState<string[]>([]);
const { data: servers } = api.server.withSSHKey.useQuery();
const { data: tags, isLoading: isLoadingTags } = const { data: tags, isLoading: isLoadingTags } =
api.compose.getTags.useQuery(); api.compose.getTags.useQuery();
const utils = api.useUtils(); const utils = api.useUtils();
const [serverId, setServerId] = useState<string | undefined>(undefined);
const { mutateAsync, isLoading, error, isError } = const { mutateAsync, isLoading, error, isError } =
api.compose.deployTemplate.useMutation(); api.compose.deployTemplate.useMutation();
@@ -109,7 +129,6 @@ export const AddTemplate = ({ projectId }: Props) => {
role="combobox" role="combobox"
className={cn( className={cn(
"md:max-w-[15rem] w-full justify-between !bg-input", "md:max-w-[15rem] w-full justify-between !bg-input",
// !field.value && "text-muted-foreground",
)} )}
> >
{isLoadingTags {isLoadingTags
@@ -267,30 +286,79 @@ export const AddTemplate = ({ projectId }: Props) => {
This will deploy {template.name} template to This will deploy {template.name} template to
your project. your project.
</AlertDialogDescription> </AlertDialogDescription>
<div>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
Select a Server (Optional)
<HelpCircle className="size-4 text-muted-foreground" />
</Label>
</TooltipTrigger>
<TooltipContent
className="z-[999] w-[300px]"
align="start"
side="top"
>
<span>
If not server is selected, the
application will be deployed on the
server where the user is logged in.
</span>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Select
onValueChange={(e) => {
setServerId(e);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select a Server" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{servers?.map((server) => (
<SelectItem
key={server.serverId}
value={server.serverId}
>
{server.name}
</SelectItem>
))}
<SelectLabel>
Servers ({servers?.length})
</SelectLabel>
</SelectGroup>
</SelectContent>
</Select>
</div>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
disabled={isLoading}
onClick={async () => { onClick={async () => {
await mutateAsync({ const promise = mutateAsync({
projectId, projectId,
serverId: serverId || undefined,
id: template.id, id: template.id,
}) });
.then(async () => { toast.promise(promise, {
toast.success( loading: "Setting up...",
`${template.name} template created succesfully`, success: (data) => {
);
utils.project.one.invalidate({ utils.project.one.invalidate({
projectId, projectId,
}); });
setOpen(false); setOpen(false);
}) return `${template.name} template created succesfully`;
.catch(() => { },
toast.error( error: (err) => {
`Error to delete ${template.name} template`, return `Ocurred an error deploying ${template.name} template`;
); },
}); });
}} }}
> >
Confirm Confirm

View File

@@ -26,7 +26,7 @@ import { TerminalModal } from "../web-server/terminal-modal";
import { AddServer } from "./add-server"; import { AddServer } from "./add-server";
import { SetupServer } from "./setup-server"; import { SetupServer } from "./setup-server";
export const ShowServers = () => { export const ShowServers = () => {
const { data, refetch } = api.server.all.useQuery(); const { data, refetch } = api.server.withSSHKey.useQuery();
const { mutateAsync } = api.server.remove.useMutation(); const { mutateAsync } = api.server.remove.useMutation();
const { data: sshKeys } = api.sshKey.all.useQuery(); const { data: sshKeys } = api.sshKey.all.useQuery();

View File

@@ -37,7 +37,7 @@ import { eq } from "drizzle-orm";
import { dump } from "js-yaml"; import { dump } from "js-yaml";
import _ from "lodash"; import _ from "lodash";
import { nanoid } from "nanoid"; import { nanoid } from "nanoid";
import { findAdmin } from "../services/admin"; import { findAdmin, findAdminById } from "../services/admin";
import { import {
createCompose, createCompose,
createComposeByTemplate, createComposeByTemplate,
@@ -53,6 +53,7 @@ import { createMount } from "../services/mount";
import { findProjectById } from "../services/project"; import { findProjectById } from "../services/project";
import { addNewService, checkServiceAccess } from "../services/user"; import { addNewService, checkServiceAccess } from "../services/user";
import { createTRPCRouter, protectedProcedure } from "../trpc"; import { createTRPCRouter, protectedProcedure } from "../trpc";
import { findServerById } from "../services/server";
export const composeRouter = createTRPCRouter({ export const composeRouter = createTRPCRouter({
create: protectedProcedure create: protectedProcedure
@@ -235,7 +236,8 @@ export const composeRouter = createTRPCRouter({
const generate = await loadTemplateModule(input.id as TemplatesKeys); const generate = await loadTemplateModule(input.id as TemplatesKeys);
const admin = await findAdmin(); const admin = await findAdminById(ctx.user.adminId);
let serverIp = admin.serverIp;
if (!admin.serverIp) { if (!admin.serverIp) {
throw new TRPCError({ throw new TRPCError({
@@ -247,9 +249,14 @@ export const composeRouter = createTRPCRouter({
const project = await findProjectById(input.projectId); const project = await findProjectById(input.projectId);
if (input.serverId) {
const server = await findServerById(input.serverId);
serverIp = server.ipAddress;
}
const projectName = slugify(`${project.name} ${input.id}`); const projectName = slugify(`${project.name} ${input.id}`);
const { envs, mounts, domains } = generate({ const { envs, mounts, domains } = generate({
serverIp: admin.serverIp, serverIp: serverIp || "",
projectName: projectName, projectName: projectName,
}); });
@@ -257,6 +264,7 @@ export const composeRouter = createTRPCRouter({
...input, ...input,
composeFile: composeFile, composeFile: composeFile,
env: envs?.join("\n"), env: envs?.join("\n"),
serverId: input.serverId,
name: input.id, name: input.id,
sourceType: "raw", sourceType: "raw",
appName: `${projectName}-${generatePassword(6)}`, appName: `${projectName}-${generatePassword(6)}`,

View File

@@ -10,7 +10,7 @@ import {
} from "@/server/db/schema"; } from "@/server/db/schema";
import { setupServer } from "@/server/utils/servers/setup-server"; import { setupServer } from "@/server/utils/servers/setup-server";
import { TRPCError } from "@trpc/server"; import { TRPCError } from "@trpc/server";
import { desc } from "drizzle-orm"; import { desc, isNotNull } from "drizzle-orm";
import { removeDeploymentsByServerId } from "../services/deployment"; import { removeDeploymentsByServerId } from "../services/deployment";
import { import {
createServer, createServer,
@@ -46,6 +46,12 @@ export const serverRouter = createTRPCRouter({
orderBy: desc(server.createdAt), orderBy: desc(server.createdAt),
}); });
}), }),
withSSHKey: protectedProcedure.query(async ({ input, ctx }) => {
return await db.query.server.findMany({
orderBy: desc(server.createdAt),
where: isNotNull(server.sshKeyId),
});
}),
setup: protectedProcedure setup: protectedProcedure
.input(apiFindOneServer) .input(apiFindOneServer)
.mutation(async ({ input, ctx }) => { .mutation(async ({ input, ctx }) => {

View File

@@ -97,7 +97,6 @@ export const createComposeByTemplate = async (
.insert(compose) .insert(compose)
.values({ .values({
...input, ...input,
serverId: "y91z1__c4SJbBe1TwQuaN",
}) })
.returning() .returning()
.then((value) => value[0]); .then((value) => value[0]);
@@ -304,7 +303,6 @@ export const deployRemoteCompose = async ({
title: titleLog, title: titleLog,
description: descriptionLog, description: descriptionLog,
}); });
try { try {
if (compose.serverId) { if (compose.serverId) {
let command = "set -e;"; let command = "set -e;";
@@ -362,6 +360,7 @@ export const deployRemoteCompose = async ({
buildLink, buildLink,
}); });
} catch (error) { } catch (error) {
console.log(error);
await updateDeploymentStatus(deployment.deploymentId, "error"); await updateDeploymentStatus(deployment.deploymentId, "error");
await updateCompose(composeId, { await updateCompose(composeId, {
composeStatus: "error", composeStatus: "error",

View File

@@ -145,6 +145,7 @@ export const apiCreateComposeByTemplate = createSchema
}) })
.extend({ .extend({
id: z.string().min(1), id: z.string().min(1),
serverId: z.string().optional(),
}); });
export const apiFindCompose = z.object({ export const apiFindCompose = z.object({