Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: remove services

Browse Source
This commit is contained in:
Mauricio Siu
2025-02-06 00:40:03 -06:00
parent a71de72a3c
commit 8379068fe3
1 changed files with 158 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
apps/dokploy/components/dashboard/compose/general/randomize-deployable.tsx
View File

@@ -3,21 +3,21 @@ import { CodeEditor } from "@/components/shared/code-editor";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { CardTitle } from "@/components/ui/card"; import { CardTitle } from "@/components/ui/card";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription, FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
@@ -30,166 +30,166 @@ import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
interface Props { interface Props {
composeId: string; composeId: string;
} }
const schema = z.object({ const schema = z.object({
deployable: z.boolean().optional(), deployable: z.boolean().optional(),
}); });
type Schema = z.infer<typeof schema>; type Schema = z.infer<typeof schema>;
export const RandomizeDeployable = ({ composeId }: Props) => { export const RandomizeDeployable = ({ composeId }: Props) => {
const utils = api.useUtils(); const utils = api.useUtils();
const [compose, setCompose] = useState<string>(""); const [compose, setCompose] = useState<string>("");
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, error, isError } = const { mutateAsync, error, isError } =
api.compose.randomizeDeployableCompose.useMutation(); api.compose.randomizeDeployableCompose.useMutation();
const { mutateAsync: updateCompose } = api.compose.update.useMutation(); const { mutateAsync: updateCompose } = api.compose.update.useMutation();
const { data, refetch } = api.compose.one.useQuery( const { data, refetch } = api.compose.one.useQuery(
{ composeId }, { composeId },
{ enabled: !!composeId } { enabled: !!composeId },
); );
const form = useForm<Schema>({ const form = useForm<Schema>({
defaultValues: { defaultValues: {
deployable: false, deployable: false,
}, },
resolver: zodResolver(schema), resolver: zodResolver(schema),
}); });
useEffect(() => { useEffect(() => {
if (data) { if (data) {
form.reset({ form.reset({
deployable: data?.deployable || false, deployable: data?.deployable || false,
}); });
} }
}, [form, form.reset, form.formState.isSubmitSuccessful, data]); }, [form, form.reset, form.formState.isSubmitSuccessful, data]);
const onSubmit = async (formData: Schema) => { const onSubmit = async (formData: Schema) => {
await updateCompose({ await updateCompose({
composeId, composeId,
deployable: formData?.deployable || false, deployable: formData?.deployable || false,
}) })
.then(async (data) => { .then(async (data) => {
randomizeCompose(); randomizeCompose();
refetch(); refetch();
toast.success("Compose updated"); toast.success("Compose updated");
}) })
.catch(() => { .catch(() => {
toast.error("Error randomizing the compose"); toast.error("Error randomizing the compose");
}); });
}; };
const randomizeCompose = async () => { const randomizeCompose = async () => {
await mutateAsync({ await mutateAsync({
composeId, composeId,
suffix: data?.appName || "", suffix: data?.appName || "",
}) })
.then(async (data) => { .then(async (data) => {
await utils.project.all.invalidate(); await utils.project.all.invalidate();
setCompose(data); setCompose(data);
toast.success("Compose randomized"); toast.success("Compose randomized");
}) })
.catch(() => { .catch(() => {
toast.error("Error randomizing the compose"); toast.error("Error randomizing the compose");
}); });
}; };
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild onClick={() => randomizeCompose()}> <DialogTrigger asChild onClick={() => randomizeCompose()}>
<Button className="max-lg:w-full" variant="outline"> <Button className="max-lg:w-full" variant="outline">
<Dices className="h-4 w-4" /> <Dices className="h-4 w-4" />
Randomize Deployable Randomize Deployable
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto"> <DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle>Randomize Deployable (Experimental)</DialogTitle> <DialogTitle>Randomize Deployable (Experimental)</DialogTitle>
<DialogDescription> <DialogDescription>
Use this in case you want to deploy the same compose file twice. Use this in case you want to deploy the same compose file twice.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="text-sm text-muted-foreground flex flex-col gap-2"> <div className="text-sm text-muted-foreground flex flex-col gap-2">
<span> <span>
This will randomize the compose file and will add a suffix to the This will randomize the compose file and will add a suffix to the
property to avoid conflicts property to avoid conflicts
</span> </span>
<ul className="list-disc list-inside"> <ul className="list-disc list-inside">
<li>volumes</li> <li>volumes</li>
<li>networks</li> <li>networks</li>
</ul> </ul>
<AlertBlock type="info"> <AlertBlock type="info">
When you activate this option, we will include a env When you activate this option, we will include a env
`DOKPLOY_SUFFIX` variable to the compose file so you can use it in `DOKPLOY_SUFFIX` variable to the compose file so you can use it in
your compose file, also we don't include the{" "} your compose file, also we don't include the{" "}
<code>dokploy-network</code> to any of the services by default. <code>dokploy-network</code> to any of the services by default.
</AlertBlock> </AlertBlock>
</div> </div>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>} {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}
id="hook-form-add-project" id="hook-form-add-project"
className="grid w-full gap-4" className="grid w-full gap-4"
> >
{isError && ( {isError && (
<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950"> <div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
<AlertTriangle className="text-red-600 dark:text-red-400" /> <AlertTriangle className="text-red-600 dark:text-red-400" />
<span className="text-sm text-red-600 dark:text-red-400"> <span className="text-sm text-red-600 dark:text-red-400">
{error?.message} {error?.message}
</span> </span>
</div> </div>
)} )}
<div className="flex flex-col lg:flex-col gap-4 w-full "> <div className="flex flex-col lg:flex-col gap-4 w-full ">
<div> <div>
<FormField <FormField
control={form.control} control={form.control}
name="deployable" name="deployable"
render={({ field }) => ( render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm"> <FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5"> <div className="space-y-0.5">
<FormLabel>Apply Randomize ({data?.appName})</FormLabel> <FormLabel>Apply Randomize ({data?.appName})</FormLabel>
<FormDescription> <FormDescription>
Apply randomize to the compose file. Apply randomize to the compose file.
</FormDescription> </FormDescription>
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end"> <div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
<Button <Button
form="hook-form-add-project" form="hook-form-add-project"
type="submit" type="submit"
className="lg:w-fit" className="lg:w-fit"
> >
Save Save
</Button> </Button>
</div> </div>
</div> </div>
<pre> <pre>
<CodeEditor <CodeEditor
value={compose || ""} value={compose || ""}
language="yaml" language="yaml"
readOnly readOnly
height="50rem" height="50rem"
/> />
</pre> </pre>
</form> </form>
</Form> </Form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
}; };