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(volumes): rework files volumes to be more simple and persistent

Browse Source
This commit is contained in:
Mauricio Siu
2024-07-21 18:55:57 -06:00
parent 2e79c7230f
commit 8454e4f781
11 changed files with 126 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/dashboard/application/advanced/volumes/add-volumes.tsx
View File

@@ -330,7 +330,7 @@ export const AddVolumes = ({
/>
</>
)}
{serviceType === "application" && (
{serviceType !== "compose" && (
<FormField
control={form.control}
name="mountPath"

25
components/dashboard/application/advanced/volumes/show-volumes.tsx
View File

@@ -73,8 +73,7 @@ export const ShowVolumes = ({ applicationId }: Props) => {
key={mount.mountId}
className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
>
{/* <Package className="size-8 self-center text-muted-foreground" /> */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
<div className="flex flex-col gap-1">
<span className="font-medium">Mount Type</span>
<span className="text-sm text-muted-foreground">
@@ -91,12 +90,21 @@ export const ShowVolumes = ({ applicationId }: Props) => {
)}
{mount.type === "file" && (
<div className="flex flex-col gap-1">
<span className="font-medium">Content</span>
<span className="text-sm text-muted-foreground">
{mount.content}
</span>
</div>
<>
<div className="flex flex-col gap-1">
<span className="font-medium">Content</span>
<span className="text-sm text-muted-foreground">
{mount.content}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="font-medium">File Path</span>
<span className="text-sm text-muted-foreground">
{mount.filePath}
</span>
</div>
</>
)}
{mount.type === "bind" && (
<div className="flex flex-col gap-1">
@@ -118,6 +126,7 @@ export const ShowVolumes = ({ applicationId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="application"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>

94
components/dashboard/application/advanced/volumes/update-volume.tsx
View File

@@ -48,6 +48,7 @@ const mySchema = z.discriminatedUnion("type", [
.object({
type: z.literal("file"),
content: z.string().optional(),
filePath: z.string().min(1, "File path required"),
})
.merge(mountSchema),
]);
@@ -58,9 +59,23 @@ interface Props {
mountId: string;
type: "bind" | "volume" | "file";
refetch: () => void;
serviceType:
| "application"
| "postgres"
| "redis"
| "mongo"
| "redis"
| "mysql"
| "mariadb"
| "compose";
}
export const UpdateVolume = ({ mountId, type, refetch }: Props) => {
export const UpdateVolume = ({
mountId,
type,
refetch,
serviceType,
}: Props) => {
const utils = api.useUtils();
const { data } = api.mounts.one.useQuery(
{
@@ -103,6 +118,7 @@ export const UpdateVolume = ({ mountId, type, refetch }: Props) => {
form.reset({
content: data.content || "",
mountPath: data.mountPath,
filePath: data.filePath || "",
type: "file",
});
}
@@ -141,6 +157,7 @@ export const UpdateVolume = ({ mountId, type, refetch }: Props) => {
content: data.content,
mountPath: data.mountPath,
type: data.type,
filePath: data.filePath,
mountId,
})
.then(() => {
@@ -166,6 +183,11 @@ export const UpdateVolume = ({ mountId, type, refetch }: Props) => {
<DialogDescription>Update the mount</DialogDescription>
</DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
{type === "file" && (
<AlertBlock type="warning">
Updating the mount will recreate the file or directory.
</AlertBlock>
)}
<Form {...form}>
<form
@@ -211,40 +233,62 @@ export const UpdateVolume = ({ mountId, type, refetch }: Props) => {
)}
{type === "file" && (
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormLabel>Content</FormLabel>
<FormControl>
<>
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormLabel>Content</FormLabel>
<FormControl>
<Textarea
placeholder="Any content"
className="h-64"
<FormControl>
<Textarea
placeholder="Any content"
className="h-64"
{...field}
/>
</FormControl>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="filePath"
render={({ field }) => (
<FormItem>
<FormLabel>File Path</FormLabel>
<FormControl>
<Input
disabled
placeholder="Name of the file"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{serviceType !== "compose" && (
<FormField
control={form.control}
name="mountPath"
render={({ field }) => (
<FormItem>
<FormLabel>Mount Path (In the container)</FormLabel>
<FormControl>
<Input placeholder="Mount Path" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<FormField
control={form.control}
name="mountPath"
render={({ field }) => (
<FormItem>
<FormLabel>Mount Path</FormLabel>
<FormControl>
<Input placeholder="Mount Path" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<DialogFooter>
<Button

1
components/dashboard/compose/advanced/show-volumes.tsx
View File

@@ -126,6 +126,7 @@ export const ShowVolumesCompose = ({ composeId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="compose"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>

1
components/dashboard/mariadb/volumes/show-volumes.tsx
View File

@@ -117,6 +117,7 @@ export const ShowVolumes = ({ mariadbId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="mariadb"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>

1
components/dashboard/mongo/volumes/show-volumes.tsx
View File

@@ -113,6 +113,7 @@ export const ShowVolumes = ({ mongoId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="mongo"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>

1
components/dashboard/mysql/volumes/show-volumes.tsx
View File

@@ -115,6 +115,7 @@ export const ShowVolumes = ({ mysqlId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="mysql"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>

1
components/dashboard/postgres/volumes/show-volumes.tsx
View File

@@ -118,6 +118,7 @@ export const ShowVolumes = ({ postgresId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="postgres"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>

1
components/dashboard/redis/volumes/show-volumes.tsx
View File

@@ -115,6 +115,7 @@ export const ShowVolumes = ({ redisId }: Props) => {
mountId={mount.mountId}
type={mount.type}
refetch={refetch}
serviceType="redis"
/>
<DeleteVolume mountId={mount.mountId} refetch={refetch} />
</div>