mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
feat: add domains
This commit is contained in:
Mauricio Siu
parent
08ab18eebf
commit
87546b4558
@ -1,90 +0,0 @@
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import type { StepProps } from "./step-two";
|
||||
|
||||
export const StepFour = ({
|
||||
prevStep,
|
||||
templateInfo,
|
||||
setOpen,
|
||||
setTemplateInfo,
|
||||
}: StepProps) => {
|
||||
const handleSubmit = () => {
|
||||
setTemplateInfo(templateInfo); // Update the template info
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-grow">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-semibold">Step 4: Review and Finalize</h2>
|
||||
<ScrollArea className="h-[400px] p-5">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Name</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{templateInfo?.details?.name}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Description</h3>
|
||||
<ReactMarkdown className="text-sm text-muted-foreground">
|
||||
{templateInfo?.details?.description}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-md font-semibold">Server</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{templateInfo?.serverId || "Dokploy Server"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Docker Compose</h3>
|
||||
<CodeEditor
|
||||
lineWrapping
|
||||
value={templateInfo?.details?.dockerCompose}
|
||||
disabled
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Environment Variables</h3>
|
||||
<ul className="list-disc pl-5">
|
||||
{templateInfo?.details?.envVariables.map(
|
||||
(
|
||||
env: {
|
||||
name: string;
|
||||
value: string;
|
||||
},
|
||||
index: number,
|
||||
) => (
|
||||
<li key={index}>
|
||||
<strong className="text-sm font-semibold">
|
||||
{env.name}
|
||||
</strong>
|
||||
:
|
||||
<span className="text-sm ml-2 text-muted-foreground">
|
||||
{env.value}
|
||||
</span>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sticky bottom-0 bg-background pt-2 border-t">
|
||||
<div className="flex justify-between">
|
||||
<Button onClick={prevStep} variant="outline">
|
||||
Back
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -3,7 +3,17 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useState } from "react";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const examples = [
|
||||
"Make a personal blog",
|
||||
@ -16,8 +26,14 @@ const examples = [
|
||||
export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
|
||||
const [userInput, setUserInput] = useState(templateInfo.userInput);
|
||||
|
||||
// Get servers from the API
|
||||
const { data: servers } = api.server.withSSHKey.useQuery();
|
||||
|
||||
const handleNext = () => {
|
||||
setTemplateInfo({ ...templateInfo, userInput });
|
||||
setTemplateInfo({
|
||||
...templateInfo,
|
||||
userInput,
|
||||
});
|
||||
nextStep();
|
||||
};
|
||||
|
||||
@ -26,9 +42,9 @@ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-grow overflow-auto">
|
||||
<div className="space-y-4 pb-20">
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
<div className="">
|
||||
<div className="space-y-4 ">
|
||||
<h2 className="text-lg font-semibold">Step 1: Describe Your Needs</h2>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="user-needs">Describe your template needs</Label>
|
||||
@ -40,6 +56,39 @@ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="server-deploy">
|
||||
Select the server where you want to deploy (optional)
|
||||
</Label>
|
||||
<Select
|
||||
value={templateInfo.server?.serverId}
|
||||
onValueChange={(value) => {
|
||||
const server = servers?.find((s) => s.serverId === value);
|
||||
if (server) {
|
||||
setTemplateInfo({
|
||||
...templateInfo,
|
||||
server: server,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<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>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Examples:</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
@ -57,7 +106,7 @@ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sticky bottom-0 bg-background pt-2 border-t">
|
||||
<div className="">
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleNext} disabled={!userInput.trim()}>
|
||||
Next
|
||||
|
||||
@ -1,93 +1,104 @@
|
||||
"use client";
|
||||
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { api } from "@/utils/api";
|
||||
import { useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import type { StepProps } from "./step-two";
|
||||
|
||||
export const StepThree = ({
|
||||
nextStep,
|
||||
prevStep,
|
||||
templateInfo,
|
||||
setTemplateInfo,
|
||||
}: StepProps) => {
|
||||
const [server, setServer] = useState(templateInfo.serverId);
|
||||
const { data: servers } = api.server.withSSHKey.useQuery();
|
||||
|
||||
const handleNext = () => {
|
||||
const updatedInfo = { ...templateInfo, name };
|
||||
if (server?.trim()) {
|
||||
updatedInfo.serverId = server;
|
||||
}
|
||||
setTemplateInfo(updatedInfo);
|
||||
nextStep();
|
||||
};
|
||||
|
||||
onSubmit,
|
||||
}: StepProps & { onSubmit: () => void }) => {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-grow overflow-auto">
|
||||
<div className="space-y-4 pb-20">
|
||||
<h2 className="text-lg font-semibold">Step 3: Additional Details</h2>
|
||||
<div className="flex-grow">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-semibold">Step 3: Review and Finalize</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">App Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={templateInfo?.details?.name || ""}
|
||||
onChange={(e) => {
|
||||
setTemplateInfo({
|
||||
...templateInfo,
|
||||
details: {
|
||||
...templateInfo?.details,
|
||||
name: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="Enter app name"
|
||||
className="mt-1"
|
||||
<h3 className="text-sm font-semibold">Name</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{templateInfo?.details?.name}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Description</h3>
|
||||
<ReactMarkdown className="text-sm text-muted-foreground">
|
||||
{templateInfo?.details?.description}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-md font-semibold">Server</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{templateInfo?.server?.name || "Dokploy Server"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-semibold">Docker Compose</h3>
|
||||
<CodeEditor
|
||||
lineWrapping
|
||||
value={templateInfo?.details?.dockerCompose}
|
||||
disabled
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="server">Server Attachment (Optional)</Label>
|
||||
<Select value={server} onValueChange={setServer}>
|
||||
<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>
|
||||
<h3 className="text-sm font-semibold">Environment Variables</h3>
|
||||
<ul className="list-disc pl-5">
|
||||
{templateInfo?.details?.envVariables.map(
|
||||
(
|
||||
env: {
|
||||
name: string;
|
||||
value: string;
|
||||
},
|
||||
index: number,
|
||||
) => (
|
||||
<li key={index}>
|
||||
<strong className="text-sm font-semibold">
|
||||
{env.name}
|
||||
</strong>
|
||||
:
|
||||
<span className="text-sm ml-2 text-muted-foreground">
|
||||
{env.value}
|
||||
</span>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Domains</h3>
|
||||
<ul className="list-disc pl-5">
|
||||
{templateInfo?.details?.domains.map(
|
||||
(
|
||||
domain: {
|
||||
host: string;
|
||||
port: number;
|
||||
serviceName: string;
|
||||
},
|
||||
index: number,
|
||||
) => (
|
||||
<li key={index}>
|
||||
<strong className="text-sm font-semibold">
|
||||
{domain.host}
|
||||
</strong>
|
||||
:
|
||||
<span className="text-sm ml-2 text-muted-foreground">
|
||||
{domain.port} - {domain.serviceName}
|
||||
</span>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sticky bottom-0 bg-background pt-2 border-t">
|
||||
</div>
|
||||
<div className="pt-6">
|
||||
<div className="flex justify-between">
|
||||
<Button onClick={prevStep} variant="outline">
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
disabled={!templateInfo?.details?.name?.trim()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
<Button onClick={onSubmit}>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,8 @@ export const StepTwo = ({
|
||||
useEffect(() => {
|
||||
mutateAsync({
|
||||
aiId: templateInfo.aiId,
|
||||
prompt: templateInfo.userInput,
|
||||
serverId: templateInfo.server?.serverId || "",
|
||||
input: templateInfo.userInput,
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
@ -62,59 +63,98 @@ export const StepTwo = ({
|
||||
nextStep();
|
||||
};
|
||||
|
||||
const handleEnvVariableChange = (
|
||||
index: number,
|
||||
field: string,
|
||||
value: string,
|
||||
) => {
|
||||
// const updatedEnvVariables = [...envVariables];
|
||||
// if (updatedEnvVariables[index]) {
|
||||
// updatedEnvVariables[index] = {
|
||||
// ...updatedEnvVariables[index],
|
||||
// [field]: value,
|
||||
// };
|
||||
// setEnvVariables(updatedEnvVariables);
|
||||
// }
|
||||
};
|
||||
|
||||
// const addEnvVariable = () => {
|
||||
// setEnvVariables([...envVariables, { name: "", value: "" }]);
|
||||
// setShowValues((prev) => ({ ...prev, "": false }));
|
||||
// };
|
||||
|
||||
// const removeEnvVariable = (index: number) => {
|
||||
// const updatedEnvVariables = envVariables.filter((_, i) => i !== index);
|
||||
// setEnvVariables(updatedEnvVariables);
|
||||
// };
|
||||
|
||||
// const handleDomainChange = (
|
||||
// index: number,
|
||||
// field: string,
|
||||
// value: string | number,
|
||||
// ) => {
|
||||
// const updatedDomains = [...domains];
|
||||
// if (updatedDomains[index]) {
|
||||
// updatedDomains[index] = {
|
||||
// ...updatedDomains[index],
|
||||
// [field]: value,
|
||||
// };
|
||||
// setDomains(updatedDomains);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const addDomain = () => {
|
||||
// setDomains([...domains, { host: "", port: 0, serviceName: "" }]);
|
||||
// };
|
||||
|
||||
// const removeDomain = (index: number) => {
|
||||
// const updatedDomains = domains.filter((_, i) => i !== index);
|
||||
// setDomains(updatedDomains);
|
||||
// };
|
||||
|
||||
const toggleShowValue = (name: string) => {
|
||||
setShowValues((prev) => ({ ...prev, [name]: !prev[name] }));
|
||||
};
|
||||
|
||||
const handleEnvVariableChange = (
|
||||
index: number,
|
||||
field: "name" | "value",
|
||||
value: string,
|
||||
) => {
|
||||
if (!selectedVariant) return;
|
||||
|
||||
const updatedEnvVariables = [...selectedVariant.envVariables];
|
||||
updatedEnvVariables[index] = {
|
||||
...updatedEnvVariables[index],
|
||||
[field]: value,
|
||||
};
|
||||
|
||||
setSelectedVariant({
|
||||
...selectedVariant,
|
||||
envVariables: updatedEnvVariables,
|
||||
});
|
||||
};
|
||||
|
||||
const removeEnvVariable = (index: number) => {
|
||||
if (!selectedVariant) return;
|
||||
|
||||
const updatedEnvVariables = selectedVariant.envVariables.filter(
|
||||
(_, i) => i !== index,
|
||||
);
|
||||
|
||||
setSelectedVariant({
|
||||
...selectedVariant,
|
||||
envVariables: updatedEnvVariables,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDomainChange = (
|
||||
index: number,
|
||||
field: "host" | "port" | "serviceName",
|
||||
value: string | number,
|
||||
) => {
|
||||
if (!selectedVariant) return;
|
||||
|
||||
const updatedDomains = [...selectedVariant.domains];
|
||||
updatedDomains[index] = {
|
||||
...updatedDomains[index],
|
||||
[field]: value,
|
||||
};
|
||||
|
||||
setSelectedVariant({
|
||||
...selectedVariant,
|
||||
domains: updatedDomains,
|
||||
});
|
||||
};
|
||||
|
||||
const removeDomain = (index: number) => {
|
||||
if (!selectedVariant) return;
|
||||
|
||||
const updatedDomains = selectedVariant.domains.filter(
|
||||
(_, i) => i !== index,
|
||||
);
|
||||
|
||||
setSelectedVariant({
|
||||
...selectedVariant,
|
||||
domains: updatedDomains,
|
||||
});
|
||||
};
|
||||
|
||||
const addEnvVariable = () => {
|
||||
if (!selectedVariant) return;
|
||||
|
||||
setSelectedVariant({
|
||||
...selectedVariant,
|
||||
envVariables: [
|
||||
...selectedVariant.envVariables,
|
||||
{ name: "", value: "" },
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const addDomain = () => {
|
||||
if (!selectedVariant) return;
|
||||
|
||||
setSelectedVariant({
|
||||
...selectedVariant,
|
||||
domains: [
|
||||
...selectedVariant.domains,
|
||||
{ host: "", port: 80, serviceName: "" },
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full space-y-4">
|
||||
@ -131,7 +171,7 @@ export const StepTwo = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex flex-col h-full gap-6">
|
||||
<div className="flex-grow overflow-auto pb-8">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-semibold">Step 2: Choose a Variant</h2>
|
||||
@ -207,7 +247,7 @@ export const StepTwo = ({
|
||||
<AccordionItem value="env-variables">
|
||||
<AccordionTrigger>Environment Variables</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<ScrollArea className="h-[300px] w-full rounded-md border">
|
||||
<ScrollArea className=" w-full rounded-md border">
|
||||
<div className="p-4 space-y-4">
|
||||
{selectedVariant?.envVariables.map((env, index) => (
|
||||
<div
|
||||
@ -270,7 +310,7 @@ export const StepTwo = ({
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
// onClick={addEnvVariable}
|
||||
onClick={addEnvVariable}
|
||||
>
|
||||
<PlusCircle className="h-4 w-4 mr-2" />
|
||||
Add Variable
|
||||
@ -308,7 +348,7 @@ export const StepTwo = ({
|
||||
handleDomainChange(
|
||||
index,
|
||||
"port",
|
||||
parseInt(e.target.value),
|
||||
Number.parseInt(e.target.value),
|
||||
)
|
||||
}
|
||||
placeholder="Port"
|
||||
@ -341,7 +381,7 @@ export const StepTwo = ({
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
// onClick={addDomain}
|
||||
onClick={addDomain}
|
||||
>
|
||||
<PlusCircle className="h-4 w-4 mr-2" />
|
||||
Add Domain
|
||||
@ -356,7 +396,7 @@ export const StepTwo = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="sticky bottom-0 bg-background pt-5 border-t">
|
||||
<div className="">
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
onClick={() =>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@ -17,14 +17,12 @@ import {
|
||||
} from "@/components/ui/select";
|
||||
import { api } from "@/utils/api";
|
||||
import { Bot } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { StepFour } from "./step-four";
|
||||
import { StepOne } from "./step-one";
|
||||
import { StepThree } from "./step-three";
|
||||
import { StepTwo } from "./step-two";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import Link from "next/link";
|
||||
|
||||
interface EnvVariable {
|
||||
name: string;
|
||||
@ -37,9 +35,7 @@ interface Domain {
|
||||
serviceName: string;
|
||||
}
|
||||
export interface TemplateInfo {
|
||||
id: string;
|
||||
userInput: string;
|
||||
type: string;
|
||||
details?: {
|
||||
name: string;
|
||||
id: string;
|
||||
@ -49,15 +45,17 @@ export interface TemplateInfo {
|
||||
shortDescription: string;
|
||||
domains: Domain[];
|
||||
};
|
||||
serverId?: string;
|
||||
server?: {
|
||||
serverId: string;
|
||||
name: string;
|
||||
};
|
||||
aiId: string;
|
||||
}
|
||||
|
||||
const defaultTemplateInfo: TemplateInfo = {
|
||||
id: "",
|
||||
aiId: "",
|
||||
userInput: "",
|
||||
type: "",
|
||||
server: undefined,
|
||||
details: {
|
||||
id: "",
|
||||
name: "",
|
||||
@ -83,7 +81,7 @@ export const TemplateGenerator = ({ projectId }: Props) => {
|
||||
useState<TemplateInfo>(defaultTemplateInfo);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const totalSteps = 4;
|
||||
const totalSteps = 3;
|
||||
|
||||
const nextStep = () => setStep((prev) => Math.min(prev + 1, totalSteps));
|
||||
const prevStep = () => setStep((prev) => Math.max(prev - 1, 1));
|
||||
@ -118,7 +116,7 @@ export const TemplateGenerator = ({ projectId }: Props) => {
|
||||
Create a custom template based on your needs
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="mt-4 flex-grow overflow-auto">
|
||||
<div className="mt-4 ">
|
||||
{step === 1 && (
|
||||
<>
|
||||
{!haveAtleasOneProviderEnabled && (
|
||||
@ -192,29 +190,25 @@ export const TemplateGenerator = ({ projectId }: Props) => {
|
||||
)}
|
||||
{step === 3 && (
|
||||
<StepThree
|
||||
prevStep={prevStep}
|
||||
templateInfo={templateInfo}
|
||||
nextStep={nextStep}
|
||||
prevStep={prevStep}
|
||||
templateInfo={templateInfo}
|
||||
setTemplateInfo={setTemplateInfo}
|
||||
/>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<StepFour
|
||||
prevStep={prevStep}
|
||||
templateInfo={templateInfo}
|
||||
setTemplateInfo={async (data: any) => {
|
||||
console.log("Submitting template:", data);
|
||||
setTemplateInfo(data);
|
||||
onSubmit={async () => {
|
||||
console.log("Submitting template:", templateInfo);
|
||||
await mutateAsync({
|
||||
projectId,
|
||||
id: templateInfo.details?.id || "",
|
||||
name: templateInfo?.details?.name || "",
|
||||
description: data?.details?.shortDescription || "",
|
||||
dockerCompose: data?.details?.dockerCompose || "",
|
||||
envVariables: (data?.details?.envVariables || [])
|
||||
description: templateInfo?.details?.shortDescription || "",
|
||||
dockerCompose: templateInfo?.details?.dockerCompose || "",
|
||||
envVariables: (templateInfo?.details?.envVariables || [])
|
||||
.map((env: any) => `${env.name}=${env.value}`)
|
||||
.join("\n"),
|
||||
serverId: data.server || "",
|
||||
domains: templateInfo?.details?.domains || [],
|
||||
...(templateInfo.server?.serverId && {
|
||||
serverId: templateInfo.server?.serverId || "",
|
||||
}),
|
||||
})
|
||||
.then(async () => {
|
||||
toast.success("Compose Created");
|
||||
@ -227,7 +221,6 @@ export const TemplateGenerator = ({ projectId }: Props) => {
|
||||
toast.error("Error creating the compose");
|
||||
});
|
||||
}}
|
||||
setOpen={setOpen}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
@ -12,7 +13,6 @@ import { api } from "@/utils/api";
|
||||
import { BotIcon, Loader2, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { HandleAi } from "./handle-ai";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
|
||||
export const AiForm = () => {
|
||||
const { data: aiConfigs, refetch, isLoading } = api.ai.getAll.useQuery();
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
"use client";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@ -18,22 +27,13 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { PenBoxIcon, PlusIcon } from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "@/utils/api";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { PenBoxIcon, PlusIcon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { z } from "zod";
|
||||
|
||||
const Schema = z.object({
|
||||
name: z.string().min(1, { message: "Name is required" }),
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
Bell,
|
||||
BlocksIcon,
|
||||
BookIcon,
|
||||
BotIcon,
|
||||
Boxes,
|
||||
ChevronRight,
|
||||
CircleHelp,
|
||||
@ -19,7 +20,6 @@ import {
|
||||
GitBranch,
|
||||
HeartIcon,
|
||||
KeyRound,
|
||||
BotIcon,
|
||||
type LucideIcon,
|
||||
Package,
|
||||
PieChart,
|
||||
|
||||
@ -11,11 +11,12 @@ import {
|
||||
apiUpdateAi,
|
||||
deploySuggestionSchema,
|
||||
} from "@dokploy/server/db/schema/ai";
|
||||
import { createDomain } from "@dokploy/server/index";
|
||||
import {
|
||||
getAiSettingsByAdminId,
|
||||
getAiSettingById,
|
||||
saveAiSettings,
|
||||
deleteAiSettings,
|
||||
getAiSettingById,
|
||||
getAiSettingsByAdminId,
|
||||
saveAiSettings,
|
||||
suggestVariants,
|
||||
} from "@dokploy/server/services/ai";
|
||||
import { createComposeByTemplate } from "@dokploy/server/services/compose";
|
||||
@ -84,11 +85,15 @@ export const aiRouter = createTRPCRouter({
|
||||
.input(
|
||||
z.object({
|
||||
aiId: z.string(),
|
||||
prompt: z.string(),
|
||||
input: z.string(),
|
||||
serverId: z.string().optional(),
|
||||
})
|
||||
)
|
||||
.mutation(async ({ ctx, input }) => {
|
||||
return await suggestVariants(ctx.user.adminId, input.aiId, input.prompt);
|
||||
return await suggestVariants({
|
||||
...input,
|
||||
adminId: ctx.user.adminId,
|
||||
});
|
||||
}),
|
||||
deploy: protectedProcedure
|
||||
.input(deploySuggestionSchema)
|
||||
@ -108,6 +113,8 @@ export const aiRouter = createTRPCRouter({
|
||||
|
||||
const projectName = slugify(`${project.name} ${input.id}`);
|
||||
|
||||
console.log(input);
|
||||
|
||||
const compose = await createComposeByTemplate({
|
||||
...input,
|
||||
composeFile: input.dockerCompose,
|
||||
@ -118,6 +125,17 @@ export const aiRouter = createTRPCRouter({
|
||||
appName: `${projectName}-${generatePassword(6)}`,
|
||||
});
|
||||
|
||||
if (input.domains && input.domains?.length > 0) {
|
||||
for (const domain of input.domains) {
|
||||
await createDomain({
|
||||
...domain,
|
||||
domainType: "compose",
|
||||
certificateType: "none",
|
||||
composeId: compose.composeId,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (ctx.user.rol === "user") {
|
||||
await addNewService(ctx.user.authId, compose.composeId);
|
||||
}
|
||||
|
||||
@ -3,13 +3,13 @@ import { boolean, integer, pgTable, text } from "drizzle-orm/pg-core";
|
||||
import { createInsertSchema } from "drizzle-zod";
|
||||
import { nanoid } from "nanoid";
|
||||
import { z } from "zod";
|
||||
import { ai } from "./ai";
|
||||
import { auth } from "./auth";
|
||||
import { certificates } from "./certificate";
|
||||
import { registry } from "./registry";
|
||||
import { certificateType } from "./shared";
|
||||
import { sshKeys } from "./ssh-key";
|
||||
import { users } from "./user";
|
||||
import { ai } from "./ai";
|
||||
|
||||
export const admins = pgTable("admin", {
|
||||
adminId: text("adminId")
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { relations } from "drizzle-orm";
|
||||
import { boolean, pgTable, text } from "drizzle-orm/pg-core";
|
||||
import { createInsertSchema } from "drizzle-zod";
|
||||
import { nanoid } from "nanoid";
|
||||
import { z } from "zod";
|
||||
import { admins } from "./admin";
|
||||
import { relations } from "drizzle-orm";
|
||||
import { nanoid } from "nanoid";
|
||||
|
||||
export const ai = pgTable("ai", {
|
||||
aiId: text("aiId")
|
||||
@ -63,4 +63,13 @@ export const deploySuggestionSchema = z.object({
|
||||
serverId: z.string().optional(),
|
||||
name: z.string().min(1),
|
||||
description: z.string(),
|
||||
domains: z
|
||||
.array(
|
||||
z.object({
|
||||
host: z.string().min(1),
|
||||
port: z.number().min(1),
|
||||
serviceName: z.string().min(1),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
});
|
||||
|
||||
@ -7,6 +7,7 @@ import { desc, eq } from "drizzle-orm";
|
||||
import { z } from "zod";
|
||||
import { IS_CLOUD } from "../constants";
|
||||
import { findAdminById } from "./admin";
|
||||
import { findServerById } from "./server";
|
||||
|
||||
export const getAiSettingsByAdminId = async (adminId: string) => {
|
||||
const aiSettings = await db.query.ai.findMany({
|
||||
@ -51,11 +52,19 @@ export const deleteAiSettings = async (aiId: string) => {
|
||||
return db.delete(ai).where(eq(ai.aiId, aiId));
|
||||
};
|
||||
|
||||
export const suggestVariants = async (
|
||||
adminId: string,
|
||||
aiId: string,
|
||||
input: string
|
||||
) => {
|
||||
interface Props {
|
||||
adminId: string;
|
||||
aiId: string;
|
||||
input: string;
|
||||
serverId?: string | undefined;
|
||||
}
|
||||
|
||||
export const suggestVariants = async ({
|
||||
adminId,
|
||||
aiId,
|
||||
input,
|
||||
serverId,
|
||||
}: Props) => {
|
||||
try {
|
||||
const aiSettings = await getAiSettingById(aiId);
|
||||
if (!aiSettings || !aiSettings.isEnabled) {
|
||||
@ -74,6 +83,13 @@ export const suggestVariants = async (
|
||||
ip = admin?.serverIp || "";
|
||||
}
|
||||
|
||||
if (serverId) {
|
||||
const server = await findServerById(serverId);
|
||||
ip = server.ipAddress;
|
||||
} else if (process.env.NODE_ENV === "development") {
|
||||
ip = "127.0.0.1";
|
||||
}
|
||||
|
||||
const { object } = await generateObject({
|
||||
model,
|
||||
output: "array",
|
||||
@ -122,13 +138,13 @@ export const suggestVariants = async (
|
||||
2. Use complex values for passwords/secrets variables
|
||||
3. Don't set container_name field in services
|
||||
4. Don't set version field in the docker compose
|
||||
5. Don't set ports like 'ports: 3000:3000', use 'ports: ["3000"]' instead
|
||||
5. Don't set ports like 'ports: 3000:3000', use 'ports: "3000"' instead
|
||||
6. Use dokploy-network in all services
|
||||
7. Add dokploy-network at the end and mark it as external: true
|
||||
|
||||
For each service that needs to be exposed to the internet:
|
||||
1. Define a domain configuration with:
|
||||
- host: the domain name for the service
|
||||
- host: the domain name for the service in format: {service-name}-{random-3-chars-hex}-${ip ? ip.replaceAll(".", "-") : ""}.traefik.me
|
||||
- port: the internal port the service runs on
|
||||
- serviceName: the name of the service in the docker-compose
|
||||
2. Make sure the service is properly configured in the docker-compose to work with the specified port
|
||||
@ -145,7 +161,6 @@ export const suggestVariants = async (
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error in docker compose generation:", error);
|
||||
console.error("Error details:", error.cause?.issues || error);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user