v0.1.0 (#112)

* feat: add schema for registry and routes

* feat: add docker registry upload

* feat: add show cluster

* refactor: set the registry url in image in case we have a registry asociated

* feat: add update registry and fix the docker url markup

* chore: remove --advertise-ip on swarm script

* refactor: remove listen address of swarm initialize

* feat: add table to show nodes and add dropdown to add manager & workers

* refactor: improve interface for cluster

* refactor: improve UI

* feat: add experimental swarm settings

* refactor: remove comments

* refactor: prettify json of each setting

* refactor: add interface tooltip

* refactor: delete static form self registry

* refactor: allow to se a empty registry

* fix: remove text area warnings

* feat: add network swarm json

* refactor: update ui

* revert: go back to swarm init config

* refactor: remove initialization on server, only on setup script

* Update LICENSE.MD

* feat: appearance theme support system config

* refactor: remove logs

* fix(README-ru): hyperlink-ed docs url

* feat: (#107) webhook listener filter docker events based on image tag.

Fixes #107

* refactor: simplify comparison docker tags

* refactor: remove return in res status

* refactor: prevent to updates download automatically

* feat: support code editor (#105)

* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>

* fix: select the right image from sourcetype (#109)

* chore: bump minor version

---------

Co-authored-by: hehehai <riverhohai@gmail.com>
Co-authored-by: Bayram Tagiev <bayram.tagiev.a@gmail.com>
Co-authored-by: Paulo Santana <30875229+hikinine@users.noreply.github.com>

components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -0,0 +1,756 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Textarea } from "@/components/ui/textarea";
+import { HelpCircle, Settings } from "lucide-react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const HealthCheckSwarmSchema = z
+	.object({
+		Test: z.array(z.string()).optional(),
+		Interval: z.number().optional(),
+		Timeout: z.number().optional(),
+		StartPeriod: z.number().optional(),
+		Retries: z.number().optional(),
+	})
+	.strict();
+
+const RestartPolicySwarmSchema = z
+	.object({
+		Condition: z.string().optional(),
+		Delay: z.number().optional(),
+		MaxAttempts: z.number().optional(),
+		Window: z.number().optional(),
+	})
+	.strict();
+
+const PreferenceSchema = z
+	.object({
+		Spread: z.object({
+			SpreadDescriptor: z.string(),
+		}),
+	})
+	.strict();
+
+const PlatformSchema = z
+	.object({
+		Architecture: z.string(),
+		OS: z.string(),
+	})
+	.strict();
+
+const PlacementSwarmSchema = z
+	.object({
+		Constraints: z.array(z.string()).optional(),
+		Preferences: z.array(PreferenceSchema).optional(),
+		MaxReplicas: z.number().optional(),
+		Platforms: z.array(PlatformSchema).optional(),
+	})
+	.strict();
+
+const UpdateConfigSwarmSchema = z
+	.object({
+		Parallelism: z.number(),
+		Delay: z.number().optional(),
+		FailureAction: z.string().optional(),
+		Monitor: z.number().optional(),
+		MaxFailureRatio: z.number().optional(),
+		Order: z.string(),
+	})
+	.strict();
+
+const ReplicatedSchema = z
+	.object({
+		Replicas: z.number().optional(),
+	})
+	.strict();
+
+const ReplicatedJobSchema = z
+	.object({
+		MaxConcurrent: z.number().optional(),
+		TotalCompletions: z.number().optional(),
+	})
+	.strict();
+
+const ServiceModeSwarmSchema = z
+	.object({
+		Replicated: ReplicatedSchema.optional(),
+		Global: z.object({}).optional(),
+		ReplicatedJob: ReplicatedJobSchema.optional(),
+		GlobalJob: z.object({}).optional(),
+	})
+	.strict();
+
+const NetworkSwarmSchema = z.array(
+	z
+		.object({
+			Target: z.string().optional(),
+			Aliases: z.array(z.string()).optional(),
+			DriverOpts: z.object({}).optional(),
+		})
+		.strict(),
+);
+
+const LabelsSwarmSchema = z.record(z.string());
+
+const createStringToJSONSchema = (schema: z.ZodTypeAny) => {
+	return z
+		.string()
+		.transform((str, ctx) => {
+			if (str === null || str === "") {
+				return null;
+			}
+			try {
+				return JSON.parse(str);
+			} catch (e) {
+				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
+				return z.NEVER;
+			}
+		})
+		.superRefine((data, ctx) => {
+			if (data === null) {
+				return;
+			}
+
+			if (Object.keys(data).length === 0) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					message: "Object cannot be empty",
+				});
+				return;
+			}
+
+			const parseResult = schema.safeParse(data);
+			if (!parseResult.success) {
+				for (const error of parseResult.error.issues) {
+					const path = error.path.join(".");
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: `${path} ${error.message}`,
+					});
+				}
+			}
+		});
+};
+
+const addSwarmSettings = z.object({
+	healthCheckSwarm: createStringToJSONSchema(HealthCheckSwarmSchema).nullable(),
+	restartPolicySwarm: createStringToJSONSchema(
+		RestartPolicySwarmSchema,
+	).nullable(),
+	placementSwarm: createStringToJSONSchema(PlacementSwarmSchema).nullable(),
+	updateConfigSwarm: createStringToJSONSchema(
+		UpdateConfigSwarmSchema,
+	).nullable(),
+	rollbackConfigSwarm: createStringToJSONSchema(
+		UpdateConfigSwarmSchema,
+	).nullable(),
+	modeSwarm: createStringToJSONSchema(ServiceModeSwarmSchema).nullable(),
+	labelsSwarm: createStringToJSONSchema(LabelsSwarmSchema).nullable(),
+	networkSwarm: createStringToJSONSchema(NetworkSwarmSchema).nullable(),
+});
+
+type AddSwarmSettings = z.infer<typeof addSwarmSettings>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const AddSwarmSettings = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
+	const { mutateAsync, isError, error, isLoading } =
+		api.application.update.useMutation();
+
+	const form = useForm<AddSwarmSettings>({
+		defaultValues: {
+			healthCheckSwarm: null,
+			restartPolicySwarm: null,
+			placementSwarm: null,
+			updateConfigSwarm: null,
+			rollbackConfigSwarm: null,
+			modeSwarm: null,
+			labelsSwarm: null,
+			networkSwarm: null,
+		},
+		resolver: zodResolver(addSwarmSettings),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				healthCheckSwarm: data.healthCheckSwarm
+					? JSON.stringify(data.healthCheckSwarm, null, 2)
+					: null,
+				restartPolicySwarm: data.restartPolicySwarm
+					? JSON.stringify(data.restartPolicySwarm, null, 2)
+					: null,
+				placementSwarm: data.placementSwarm
+					? JSON.stringify(data.placementSwarm, null, 2)
+					: null,
+				updateConfigSwarm: data.updateConfigSwarm
+					? JSON.stringify(data.updateConfigSwarm, null, 2)
+					: null,
+				rollbackConfigSwarm: data.rollbackConfigSwarm
+					? JSON.stringify(data.rollbackConfigSwarm, null, 2)
+					: null,
+				modeSwarm: data.modeSwarm
+					? JSON.stringify(data.modeSwarm, null, 2)
+					: null,
+				labelsSwarm: data.labelsSwarm
+					? JSON.stringify(data.labelsSwarm, null, 2)
+					: null,
+				networkSwarm: data.networkSwarm
+					? JSON.stringify(data.networkSwarm, null, 2)
+					: null,
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: AddSwarmSettings) => {
+		await mutateAsync({
+			applicationId,
+			healthCheckSwarm: data.healthCheckSwarm,
+			restartPolicySwarm: data.restartPolicySwarm,
+			placementSwarm: data.placementSwarm,
+			updateConfigSwarm: data.updateConfigSwarm,
+			rollbackConfigSwarm: data.rollbackConfigSwarm,
+			modeSwarm: data.modeSwarm,
+			labelsSwarm: data.labelsSwarm,
+			networkSwarm: data.networkSwarm,
+		})
+			.then(async () => {
+				toast.success("Swarm settings updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to update the swarm settings");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="secondary" className="cursor-pointer w-fit">
+					<Settings className="size-4 text-muted-foreground" />
+					Swarm Settings
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-5xl p-0">
+				<DialogHeader className="p-6">
+					<DialogTitle>Swarm Settings</DialogTitle>
+					<DialogDescription>
+						Update certain settings using a json object.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-permissions"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4 relative"
+					>
+						<FormField
+							control={form.control}
+							name="healthCheckSwarm"
+							render={({ field }) => (
+								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Health Check</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Test?: string[] | undefined;
+	Interval?: number | undefined;
+	Timeout?: number | undefined;
+	StartPeriod?: number | undefined;
+	Retries?: number | undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;] min-h-[11.2rem]"
+											placeholder={`{
+	"Test" : ["CMD-SHELL", "curl -f http://localhost:3000/health"],
+	"Interval" : 10000,
+	"Timeout" : 10000,
+	"StartPeriod" : 10000,
+	"Retries" : 10
+}`}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="restartPolicySwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Restart Policy</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Condition?: string | undefined;
+	Delay?: number | undefined;
+	MaxAttempts?: number | undefined;
+	Window?: number | undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;]  min-h-[11.2rem]"
+											placeholder={`{
+	"Condition" : "on-failure",
+	"Delay" : 10000,
+	"MaxAttempts" : 10,
+	"Window" : 10000
+}                                                  `}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="placementSwarm"
+							render={({ field }) => (
+								<FormItem className="relative   max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Placement</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Constraints?: string[] | undefined;
+	Preferences?: Array<{ Spread: { SpreadDescriptor: string } }> | undefined;
+	MaxReplicas?: number | undefined;
+	Platforms?:
+		| Array<{
+				Architecture: string;
+				OS: string;
+		  }>
+		| undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;]  min-h-[18.7rem]"
+											placeholder={`{
+	"Constraints" : ["node.role==manager"],
+	"Preferences" : [{
+		"Spread" : {
+			"SpreadDescriptor" : "node.labels.region"
+		}
+	}],
+	"MaxReplicas" : 10,
+	"Platforms" : [{
+		"Architecture" : "amd64",
+		"OS" : "linux"
+	}]
+}                                                `}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="updateConfigSwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Update Config</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Parallelism?: number;
+	Delay?: number | undefined;
+	FailureAction?: string | undefined;
+	Monitor?: number | undefined;
+	MaxFailureRatio?: number | undefined;
+	Order: string;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;] min-h-[18.7rem]"
+											placeholder={`{
+	"Parallelism" : 1,
+	"Delay" : 10000,
+	"FailureAction" : "continue",
+	"Monitor" : 10000,
+	"MaxFailureRatio" : 10,
+	"Order" : "start-first"
+}`}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="rollbackConfigSwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Rollback Config</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Parallelism?: number;
+	Delay?: number | undefined;
+	FailureAction?: string | undefined;
+	Monitor?: number | undefined;
+	MaxFailureRatio?: number | undefined;
+	Order: string;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;] min-h-[14.8rem]"
+											placeholder={`{
+	"Parallelism" : 1,
+	"Delay" : 10000,
+	"FailureAction" : "continue",
+	"Monitor" : 10000,
+	"MaxFailureRatio" : 10,
+	"Order" : "start-first"
+}`}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="modeSwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Mode</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="center"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Replicated?: { Replicas?: number | undefined } | undefined;
+	Global?: {} | undefined;
+	ReplicatedJob?:
+		| {
+				MaxConcurrent?: number | undefined;
+				TotalCompletions?: number | undefined;
+		  }
+		| undefined;
+	GlobalJob?: {} | undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;] min-h-[14.8rem]"
+											placeholder={`{
+	"Replicated" : {
+		"Replicas" : 1
+	},
+	"Global" : {},
+	"ReplicatedJob" : {
+		"MaxConcurrent" : 1,
+		"TotalCompletions" : 1
+	},
+	"GlobalJob" : {}
+}`}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="networkSwarm"
+							render={({ field }) => (
+								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Network</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`[
+  {
+	"Target" : string | undefined;
+	"Aliases" : string[] | undefined;
+	"DriverOpts" : { [key: string]: string } | undefined;
+  }
+]`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;] min-h-[18.5rem]"
+											placeholder={`[
+ {
+	"Target" : "dokploy-network",
+	"Aliases" : ["dokploy-network"],
+	"DriverOpts" : {
+		"com.docker.network.driver.mtu" : "1500",
+		"com.docker.network.driver.host_binding" : "true",
+		"com.docker.network.driver.mtu" : "1500",
+		"com.docker.network.driver.host_binding" : "true"
+	}
+ }
+]`}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="labelsSwarm"
+							render={({ field }) => (
+								<FormItem className="relative max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Labels</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	[name: string]: string;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+									<FormControl>
+										<Textarea
+											className="font-mono [field-sizing:content;] min-h-[18.5rem]"
+											placeholder={`{
+	"com.example.app.name" : "my-app",
+	"com.example.app.version" : "1.0.0"
+}`}
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border p-2 ">
+							<Button
+								isLoading={isLoading}
+								form="hook-form-add-permissions"
+								type="submit"
+							>
+								Update
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/application/advanced/cluster/show-cluster-settings.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { z } from "zod";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { toast } from "sonner";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import Link from "next/link";
+import { Server } from "lucide-react";
+import { AddSwarmSettings } from "./modify-swarm-settings";
+
+interface Props {
+	applicationId: string;
+}
+
+const AddRedirectchema = z.object({
+	replicas: z.number(),
+	registryId: z.string(),
+});
+
+type AddCommand = z.infer<typeof AddRedirectchema>;
+
+export const ShowClusterSettings = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { data: registries } = api.registry.all.useQuery();
+
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+
+	const form = useForm<AddCommand>({
+		defaultValues: {
+			registryId: data?.registryId || "",
+			replicas: data?.replicas || 1,
+		},
+		resolver: zodResolver(AddRedirectchema),
+	});
+
+	useEffect(() => {
+		if (data?.command) {
+			form.reset({
+				registryId: data?.registryId || "",
+				replicas: data?.replicas || 1,
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data?.command]);
+
+	const onSubmit = async (data: AddCommand) => {
+		await mutateAsync({
+			applicationId,
+			registryId: data?.registryId === "none" ? null : data?.registryId,
+			replicas: data?.replicas,
+		})
+			.then(async () => {
+				toast.success("Command Updated");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the command");
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Cluster Settings</CardTitle>
+					<CardDescription>
+						Add the registry and the replicas of the application
+					</CardDescription>
+				</div>
+				<AddSwarmSettings applicationId={applicationId} />
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="replicas"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Replicas</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1"
+												{...field}
+												onChange={(e) => {
+													field.onChange(Number(e.target.value));
+												}}
+												type="number"
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						{registries && registries?.length === 0 ? (
+							<div className="pt-10">
+								<div className="flex flex-col items-center gap-3">
+									<Server className="size-8 text-muted-foreground" />
+									<span className="text-base text-muted-foreground">
+										To use a cluster feature, you need to configure at least a
+										registry first. Please, go to{" "}
+										<Link
+											href="/dashboard/settings/cluster"
+											className="text-foreground"
+										>
+											Settings
+										</Link>{" "}
+										to do so.
+									</span>
+								</div>
+							</div>
+						) : (
+							<>
+								<FormField
+									control={form.control}
+									name="registryId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Select a registry</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a registry" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														{registries?.map((registry) => (
+															<SelectItem
+																key={registry.registryId}
+																value={registry.registryId}
+															>
+																{registry.registryName}
+															</SelectItem>
+														))}
+														<SelectItem value={"none"}>None</SelectItem>
+														<SelectLabel>
+															Registries ({registries?.length})
+														</SelectLabel>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+
+						<div className="flex justify-end">
+							<Button isLoading={isLoading} type="submit" className="w-fit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/application/advanced/ports/update-port.tsx

@@ -20,7 +20,7 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Pencil } from "lucide-react";
+import { PenBoxIcon, Pencil } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -99,7 +99,7 @@ export const UpdatePort = ({ portId }: Props) => {
 		<Dialog>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<Pencil className="size-4  text-muted-foreground" />
+					<PenBoxIcon className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">

components/dashboard/application/advanced/redirects/update-redirect.tsx

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Pencil } from "lucide-react";
+import { PenBoxIcon, Pencil } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -94,7 +94,7 @@ export const UpdateRedirect = ({ redirectId }: Props) => {
 		<Dialog>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<Pencil className="size-4  text-muted-foreground" />
+					<PenBoxIcon className="size-4  text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">

components/dashboard/application/advanced/security/update-security.tsx

@@ -20,7 +20,7 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Pencil } from "lucide-react";
+import { PenBoxIcon, Pencil } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -89,7 +89,7 @@ export const UpdateSecurity = ({ securityId }: Props) => {
 		<Dialog>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<Pencil className="size-4  text-muted-foreground" />
+					<PenBoxIcon className="size-4  text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">

components/dashboard/application/advanced/traefik/show-traefik-config.tsx

@@ -9,6 +9,7 @@ import {
 import { api } from "@/utils/api";
 import { File } from "lucide-react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
+import { CodeEditor } from "@/components/shared/code-editor";
 interface Props {
 	applicationId: string;
 }
@@ -43,11 +44,13 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 relative">
-						<div className="flex flex-col  gap-6 bg-input p-4 rounded-md max-h-[35rem] min-h-[10rem] overflow-y-auto">
-							<div>
-								<pre className="font-sans">{data || "Empty"}</pre>
-							</div>
-							<div className="flex justify-end absolute z-50 right-6">
+						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
+							<CodeEditor
+								value={data || "Empty"}
+								disabled
+								className="font-mono"
+							/>
+							<div className="flex justify-end absolute z-50 right-6 top-6">
 								<UpdateTraefikConfig applicationId={applicationId} />
 							</div>
 						</div>

components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,6 +24,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import jsyaml from "js-yaml";
+import { CodeEditor } from "@/components/shared/code-editor";
 
 const UpdateTraefikConfigSchema = z.object({
 	traefikConfig: z.string(),
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 					<form
 						id="hook-form-update-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4"
+						className="grid w-full py-4 overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -132,8 +132,8 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 									<FormItem>
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:

components/dashboard/application/delete-application.tsx

@@ -25,8 +25,8 @@ export const DeleteApplication = ({ applicationId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="destructive" isLoading={isLoading}>
-					<TrashIcon className="size-4 " />
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>

components/dashboard/application/domains/delete-domain.tsx

@@ -24,8 +24,8 @@ export const DeleteDomain = ({ domainId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="destructive" isLoading={isLoading}>
-					<TrashIcon className="size-4 " />
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
 				</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>

components/dashboard/application/domains/show-domains.tsx

@@ -40,7 +40,9 @@ export const ShowDomains = ({ applicationId }: Props) => {
 					</div>
 
 					{data && data?.length > 0 && (
-						<AddDomain applicationId={applicationId} />
+						<AddDomain applicationId={applicationId}>
+							<GlobeIcon className="size-4" /> Add Domain
+						</AddDomain>
 					)}
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
@@ -51,7 +53,9 @@ export const ShowDomains = ({ applicationId }: Props) => {
 								To access to the application is required to set at least 1
 								domain
 							</span>
-							<AddDomain applicationId={applicationId}>Add Domain</AddDomain>
+							<AddDomain applicationId={applicationId}>
+								<GlobeIcon className="size-4" /> Add Domain
+							</AddDomain>
 						</div>
 					) : (
 						<div className="flex w-full flex-col gap-4">
@@ -75,8 +79,10 @@ export const ShowDomains = ({ applicationId }: Props) => {
 										<Button variant="outline" disabled>
 											{item.https ? "HTTPS" : "HTTP"}
 										</Button>
-										<UpdateDomain domainId={item.domainId} />
-										<DeleteDomain domainId={item.domainId} />
+										<div className="flex flex-row gap-1">
+											<UpdateDomain domainId={item.domainId} />
+											<DeleteDomain domainId={item.domainId} />
+										</div>
 									</div>
 								);
 							})}

components/dashboard/application/domains/update-domain.tsx

@@ -115,8 +115,8 @@ export const UpdateDomain = ({ domainId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger className="" asChild>
-				<Button>
-					<PenBoxIcon className="size-4" />
+				<Button variant="ghost">
+					<PenBoxIcon className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">

components/dashboard/application/update-application.tsx

@@ -90,7 +90,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 		<Dialog>
 			<DialogTrigger asChild>
 				<Button variant="ghost">
-					<SquarePen className="size-4" />
+					<SquarePen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">