Docker compose support (#111)

* feat(WIP): compose implementation

* feat: add volumes, networks, services name hash generate

* feat: add compose config test unique

* feat: add tests for each unique config

* feat: implement lodash for docker compose parsing

* feat: add tests for generating compose file

* refactor: implement logs docker compose

* refactor: composeFile set not empty

* feat: implement providers for compose deployments

* feat: add Files volumes to compose

* feat: add stop compose button

* refactor: change strategie of building compose

* feat: create .env file in composepath

* refactor: simplify git and github function

* chore: update deps

* refactor: update migrations and add badge to recognize compose type

* chore: update lock yaml

* refactor: use code editor

* feat: add monitoring for app types

* refactor: reset stats on change appName

* refactor: add option to clean monitoring folder

* feat: show current command that will run

* feat: add prefix

* fix: add missing types

* refactor: add docker provider and expose by default as false

* refactor: customize error page

* refactor: unified deployments to be a single one

* feat: add vitest to ci/cd

* revert: back to initial version

* refactor: add maxconcurrency vitest

* refactor: add pool forks to vitest

* feat: add pocketbase template

* fix: update path resolution compose

* removed

* feat: add template pocketbase

* feat: add pocketbase template

* feat: add support button

* feat: add plausible template

* feat: add calcom template

* feat: add version to each template

* feat: add code editor to enviroment variables and swarm settings json

* refactor: add loader when download the image

* fix: use base64 to generate keys plausible

* feat: add recognized domain names by enviroment compose

* refactor: show alert to redeploy in each card advanced tab

* refactor: add validation to prevent create compose if not have permissions

* chore: add templates section to contributing

* chore: add example contributing

components/dashboard/mongo/advanced/show-mongo-resources.tsx

@@ -1,18 +1,18 @@
 import { Button } from "@/components/ui/button";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
 } from "@/components/ui/card";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
@@ -21,213 +21,222 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
 
 const addResourcesMongo = z.object({
-  memoryReservation: z.number().nullable().optional(),
-  cpuLimit: z.number().nullable().optional(),
-  memoryLimit: z.number().nullable().optional(),
-  cpuReservation: z.number().nullable().optional(),
+	memoryReservation: z.number().nullable().optional(),
+	cpuLimit: z.number().nullable().optional(),
+	memoryLimit: z.number().nullable().optional(),
+	cpuReservation: z.number().nullable().optional(),
 });
 interface Props {
-  mongoId: string;
+	mongoId: string;
 }
 
 type AddResourcesMongo = z.infer<typeof addResourcesMongo>;
 export const ShowMongoResources = ({ mongoId }: Props) => {
-  const { data, refetch } = api.mongo.one.useQuery(
-    {
-      mongoId,
-    },
-    { enabled: !!mongoId },
-  );
-  const { mutateAsync, isLoading } = api.mongo.update.useMutation();
-  const form = useForm<AddResourcesMongo>({
-    defaultValues: {},
-    resolver: zodResolver(addResourcesMongo),
-  });
+	const { data, refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
+	const { mutateAsync, isLoading } = api.mongo.update.useMutation();
+	const form = useForm<AddResourcesMongo>({
+		defaultValues: {},
+		resolver: zodResolver(addResourcesMongo),
+	});
 
-  useEffect(() => {
-    if (data) {
-      form.reset({
-        cpuLimit: data?.cpuLimit || undefined,
-        cpuReservation: data?.cpuReservation || undefined,
-        memoryLimit: data?.memoryLimit || undefined,
-        memoryReservation: data?.memoryReservation || undefined,
-      });
-    }
-  }, [data, form, form.reset]);
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				cpuLimit: data?.cpuLimit || undefined,
+				cpuReservation: data?.cpuReservation || undefined,
+				memoryLimit: data?.memoryLimit || undefined,
+				memoryReservation: data?.memoryReservation || undefined,
+			});
+		}
+	}, [data, form, form.reset]);
 
-  const onSubmit = async (formData: AddResourcesMongo) => {
-    await mutateAsync({
-      mongoId,
-      cpuLimit: formData.cpuLimit || null,
-      cpuReservation: formData.cpuReservation || null,
-      memoryLimit: formData.memoryLimit || null,
-      memoryReservation: formData.memoryReservation || null,
-    })
-      .then(async () => {
-        toast.success("Resources Updated");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error to Update the resources");
-      });
-  };
-  return (
-    <Card className="bg-background">
-      <CardHeader>
-        <CardTitle className="text-xl">Resources</CardTitle>
-        <CardDescription>
-          If you want to decrease or increase the resources to a specific
-          application or database
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <Form {...form}>
-          <form
-            id="hook-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="grid w-full gap-8 "
-          >
-            <div className="grid w-full md:grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="memoryReservation"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Memory Reservation</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="256 MB"
-                        {...field}
-                        value={field.value?.toString() || ""}
-                        onChange={(e) => {
-                          const value = e.target.value;
-                          if (value === "") {
-                            // Si el campo está vacío, establece el valor como null.
-                            field.onChange(null);
-                          } else {
-                            const number = Number.parseInt(value, 10);
-                            if (!Number.isNaN(number)) {
-                              // Solo actualiza el valor si se convierte a un número válido.
-                              field.onChange(number);
-                            }
-                          }
-                        }}
-                      />
-                    </FormControl>
+	const onSubmit = async (formData: AddResourcesMongo) => {
+		await mutateAsync({
+			mongoId,
+			cpuLimit: formData.cpuLimit || null,
+			cpuReservation: formData.cpuReservation || null,
+			memoryLimit: formData.memoryLimit || null,
+			memoryReservation: formData.memoryReservation || null,
+		})
+			.then(async () => {
+				toast.success("Resources Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Resources</CardTitle>
+				<CardDescription>
+					If you want to decrease or increase the resources to a specific
+					application or database
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<AlertBlock type="info">
+					Please remember to click Redeploy after modify the resources to apply
+					the changes.
+				</AlertBlock>
+				<Form {...form}>
+					<AlertBlock type="info">
+						Please remember to click Redeploy after modify the resources to
+						apply the changes.
+					</AlertBlock>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="grid w-full md:grid-cols-2 gap-4">
+							<FormField
+								control={form.control}
+								name="memoryReservation"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Memory Reservation</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="256 MB"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														// Si el campo está vacío, establece el valor como null.
+														field.onChange(null);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															// Solo actualiza el valor si se convierte a un número válido.
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
 
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 
-              <FormField
-                control={form.control}
-                name="memoryLimit"
-                render={({ field }) => {
-                  return (
-                    <FormItem>
-                      <FormLabel>Memory Limit</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder={"1024 MB"}
-                          {...field}
-                          value={field.value?.toString() || ""}
-                          onChange={(e) => {
-                            const value = e.target.value;
-                            if (value === "") {
-                              // Si el campo está vacío, establece el valor como null.
-                              field.onChange(null);
-                            } else {
-                              const number = Number.parseInt(value, 10);
-                              if (!Number.isNaN(number)) {
-                                // Solo actualiza el valor si se convierte a un número válido.
-                                field.onChange(number);
-                              }
-                            }
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  );
-                }}
-              />
+							<FormField
+								control={form.control}
+								name="memoryLimit"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Memory Limit</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"1024 MB"}
+													{...field}
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
+															field.onChange(null);
+														} else {
+															const number = Number.parseInt(value, 10);
+															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
+																field.onChange(number);
+															}
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
 
-              <FormField
-                control={form.control}
-                name="cpuLimit"
-                render={({ field }) => {
-                  return (
-                    <FormItem>
-                      <FormLabel>Cpu Limit</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder={"2"}
-                          {...field}
-                          value={field.value?.toString() || ""}
-                          onChange={(e) => {
-                            const value = e.target.value;
-                            if (value === "") {
-                              // Si el campo está vacío, establece el valor como null.
-                              field.onChange(null);
-                            } else {
-                              const number = Number.parseInt(value, 10);
-                              if (!Number.isNaN(number)) {
-                                // Solo actualiza el valor si se convierte a un número válido.
-                                field.onChange(number);
-                              }
-                            }
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  );
-                }}
-              />
-              <FormField
-                control={form.control}
-                name="cpuReservation"
-                render={({ field }) => {
-                  return (
-                    <FormItem>
-                      <FormLabel>Cpu Reservation</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder={"1"}
-                          {...field}
-                          value={field.value?.toString() || ""}
-                          onChange={(e) => {
-                            const value = e.target.value;
-                            if (value === "") {
-                              // Si el campo está vacío, establece el valor como null.
-                              field.onChange(null);
-                            } else {
-                              const number = Number.parseInt(value, 10);
-                              if (!Number.isNaN(number)) {
-                                // Solo actualiza el valor si se convierte a un número válido.
-                                field.onChange(number);
-                              }
-                            }
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  );
-                }}
-              />
-            </div>
-            <div className="flex w-full justify-end">
-              <Button isLoading={isLoading} type="submit">
-                Save
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
-  );
+							<FormField
+								control={form.control}
+								name="cpuLimit"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Cpu Limit</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"2"}
+													{...field}
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
+															field.onChange(null);
+														} else {
+															const number = Number.parseInt(value, 10);
+															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
+																field.onChange(number);
+															}
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="cpuReservation"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Cpu Reservation</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"1"}
+													{...field}
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
+															field.onChange(null);
+														} else {
+															const number = Number.parseInt(value, 10);
+															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
+																field.onChange(number);
+															}
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+						<div className="flex w-full justify-end">
+							<Button isLoading={isLoading} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
 };

components/dashboard/mongo/environment/show-mongo-environment.tsx

@@ -1,3 +1,4 @@
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -13,7 +14,6 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { useEffect } from "react";
@@ -93,8 +93,11 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 								render={({ field }) => (
 									<FormItem className="w-full">
 										<FormControl>
-											<Textarea
-												placeholder="MONGO_PASSWORD=1234567678"
+											<CodeEditor
+												language="properties"
+												placeholder={`NODE_ENV=production
+PORT=3000
+`}
 												className="h-96 font-mono"
 												{...field}
 											/>

components/dashboard/mongo/volumes/show-volumes.tsx

@@ -10,6 +10,8 @@ import { api } from "@/utils/api";
 import { AlertTriangle, Package } from "lucide-react";
 import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
 import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+import { UpdateVolume } from "../../application/advanced/volumes/update-volume";
+import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	mongoId: string;
 }
@@ -55,15 +57,12 @@ export const ShowVolumes = ({ mongoId }: Props) => {
 						</AddVolumes>
 					</div>
 				) : (
-					<div className="flex flex-col pt-2">
-						<div className="flex flex-col sm:flex-row items-center gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
-							<AlertTriangle className="text-yellow-600 size-5 sm:size-8 dark:text-yellow-400" />
-							<span className="text-sm text-yellow-600 dark:text-yellow-400">
-								Please remember to click Redeploy after adding, editing, or
-								deleting a mount to apply the changes.
-							</span>
-						</div>
-						<div className="flex flex-col gap-6 pt-6">
+					<div className="flex flex-col pt-2 gap-4">
+						<AlertBlock type="info">
+							Please remember to click Redeploy after adding, editing, or
+							deleting a mount to apply the changes.
+						</AlertBlock>
+						<div className="flex flex-col gap-6">
 							{data?.mounts.map((mount) => (
 								<div key={mount.mountId}>
 									<div
@@ -109,7 +108,12 @@ export const ShowVolumes = ({ mongoId }: Props) => {
 												</span>
 											</div>
 										</div>
-										<div>
+										<div className="flex flex-row gap-1">
+											<UpdateVolume
+												mountId={mount.mountId}
+												type={mount.type}
+												refetch={refetch}
+											/>
 											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
 										</div>
 									</div>