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

Merge pull request #1021 from Dokploy/fix/memory-reservation

Browse Source 
Fix/memory reservation
This commit is contained in:
Mauricio Siu
2024-12-29 15:36:14 -06:00
committed by GitHub
parent 9aa49ce9be 46a5adf793
commit 69576988eb
6 changed files with 464 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
apps/dokploy/components/dashboard/application/advanced/show-application-advanced-settings.tsx
View File

@@ -22,6 +22,13 @@ import React, { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { InfoIcon } from "lucide-react";
const addResourcesApplication = z.object({ const addResourcesApplication = z.object({
memoryReservation: z.number().nullable().optional(), memoryReservation: z.number().nullable().optional(),
@@ -101,10 +108,25 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
name="memoryReservation" name="memoryReservation"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Memory Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory soft limit in bytes. Example: 256MB =
268435456 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder="256 MB" placeholder="268435456 (256MB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
@@ -120,7 +142,6 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
}} }}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -132,10 +153,25 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Memory Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory hard limit in bytes. Example: 1GB =
1073741824 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1024 MB"} placeholder="1073741824 (1GB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
@@ -163,21 +199,36 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU quota in units of 10^-9 CPUs. Example: 2
CPUs = 2000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"2"} placeholder="2000000000 (2 CPUs)"
{...field} {...field}
type="number"
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if ( if (value === "") {
value === "" || field.onChange(null);
/^[0-9]*\.?[0-9]*$/.test(value) } else {
) { const number = Number.parseInt(value, 10);
const float = Number.parseFloat(value); if (!Number.isNaN(number)) {
field.onChange(float); field.onChange(number);
}
} }
}} }}
/> />
@@ -193,21 +244,36 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU shares (relative weight). Example: 1 CPU =
1000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1"} placeholder="1000000000 (1 CPU)"
{...field} {...field}
type="number"
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if ( if (value === "") {
value === "" || field.onChange(null);
/^[0-9]*\.?[0-9]*$/.test(value) } else {
) { const number = Number.parseInt(value, 10);
const float = Number.parseFloat(value); if (!Number.isNaN(number)) {
field.onChange(float); field.onChange(number);
}
} }
}} }}
/> />

92
apps/dokploy/components/dashboard/mariadb/advanced/show-mariadb-resources.tsx
View File

@@ -18,6 +18,13 @@ import {
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import {
TooltipProvider,
TooltipTrigger,
TooltipContent,
Tooltip,
} from "@/components/ui/tooltip";
import { InfoIcon } from "lucide-react";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -100,28 +107,40 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
name="memoryReservation" name="memoryReservation"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Memory Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory soft limit in bytes. Example: 256MB =
268435456 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder="256 MB" placeholder="268435456 (256MB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
}} }}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -133,21 +152,34 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Memory Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory hard limit in bytes. Example: 1GB =
1073741824 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1024 MB"} placeholder="1073741824 (1GB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -166,21 +198,34 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU quota in units of 10^-9 CPUs. Example: 2
CPUs = 2000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"2"} placeholder="2000000000 (2 CPUs)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -198,21 +243,34 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU shares (relative weight). Example: 1 CPU =
1000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1"} placeholder="1000000000 (1 CPU)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }

96
apps/dokploy/components/dashboard/mongo/advanced/show-mongo-resources.tsx
View File

@@ -19,6 +19,13 @@ import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import {
TooltipProvider,
TooltipTrigger,
TooltipContent,
Tooltip,
} from "@/components/ui/tooltip";
import { InfoIcon } from "lucide-react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
@@ -89,10 +96,6 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
the changes. the changes.
</AlertBlock> </AlertBlock>
<Form {...form}> <Form {...form}>
<AlertBlock type="info">
Please remember to click Redeploy after modify the resources to
apply the changes.
</AlertBlock>
<form <form
id="hook-form" id="hook-form"
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}
@@ -104,28 +107,40 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
name="memoryReservation" name="memoryReservation"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Memory Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory soft limit in bytes. Example: 256MB =
268435456 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder="256 MB" placeholder="268435456 (256MB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
}} }}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -137,21 +152,34 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Memory Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory hard limit in bytes. Example: 1GB =
1073741824 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1024 MB"} placeholder="1073741824 (1GB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -170,21 +198,34 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU quota in units of 10^-9 CPUs. Example: 2
CPUs = 2000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"2"} placeholder="2000000000 (2 CPUs)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -202,21 +243,34 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU shares (relative weight). Example: 1 CPU =
1000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1"} placeholder="1000000000 (1 CPU)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }

92
apps/dokploy/components/dashboard/mysql/advanced/show-mysql-resources.tsx
View File

@@ -20,6 +20,13 @@ import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import {
TooltipProvider,
TooltipTrigger,
TooltipContent,
Tooltip,
} from "@/components/ui/tooltip";
import { InfoIcon } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
@@ -100,28 +107,40 @@ export const ShowMysqlResources = ({ mysqlId }: Props) => {
name="memoryReservation" name="memoryReservation"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Memory Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory soft limit in bytes. Example: 256MB =
268435456 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder="256 MB" placeholder="268435456 (256MB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
}} }}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -133,21 +152,34 @@ export const ShowMysqlResources = ({ mysqlId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Memory Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory hard limit in bytes. Example: 1GB =
1073741824 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1024 MB"} placeholder="1073741824 (1GB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -166,21 +198,34 @@ export const ShowMysqlResources = ({ mysqlId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU quota in units of 10^-9 CPUs. Example: 2
CPUs = 2000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"2"} placeholder="2000000000 (2 CPUs)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -198,21 +243,34 @@ export const ShowMysqlResources = ({ mysqlId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU shares (relative weight). Example: 1 CPU =
1000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1"} placeholder="1000000000 (1 CPU)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }

84
apps/dokploy/components/dashboard/postgres/advanced/show-postgres-resources.tsx
View File

@@ -21,6 +21,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import {
TooltipProvider,
TooltipTrigger,
TooltipContent,
Tooltip,
} from "@/components/ui/tooltip";
import { InfoIcon } from "lucide-react";
import { z } from "zod"; import { z } from "zod";
const addResourcesPostgres = z.object({ const addResourcesPostgres = z.object({
@@ -100,10 +107,25 @@ export const ShowPostgresResources = ({ postgresId }: Props) => {
name="memoryReservation" name="memoryReservation"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Memory Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory soft limit in bytes. Example: 256MB =
268435456 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder="256 MB" placeholder="268435456 (256MB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
@@ -119,7 +141,6 @@ export const ShowPostgresResources = ({ postgresId }: Props) => {
}} }}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -131,10 +152,25 @@ export const ShowPostgresResources = ({ postgresId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Memory Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory hard limit in bytes. Example: 1GB =
1073741824 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1024 MB"} placeholder="1073741824 (1GB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
@@ -162,10 +198,25 @@ export const ShowPostgresResources = ({ postgresId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU quota in units of 10^-9 CPUs. Example: 2
CPUs = 2000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"2"} placeholder="2000000000 (2 CPUs)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
@@ -192,10 +243,25 @@ export const ShowPostgresResources = ({ postgresId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU shares (relative weight). Example: 1 CPU =
1000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1"} placeholder="1000000000 (1 CPU)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {

92
apps/dokploy/components/dashboard/redis/advanced/show-redis-resources.tsx
View File

@@ -21,6 +21,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import {
TooltipProvider,
TooltipTrigger,
TooltipContent,
Tooltip,
} from "@/components/ui/tooltip";
import { InfoIcon } from "lucide-react";
import { z } from "zod"; import { z } from "zod";
const addResourcesRedis = z.object({ const addResourcesRedis = z.object({
@@ -100,28 +107,40 @@ export const ShowRedisResources = ({ redisId }: Props) => {
name="memoryReservation" name="memoryReservation"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Memory Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory soft limit in bytes. Example: 256MB =
268435456 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder="256 MB" placeholder="268435456 (256MB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
}} }}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -133,21 +152,34 @@ export const ShowRedisResources = ({ redisId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Memory Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>Memory Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
Memory hard limit in bytes. Example: 1GB =
1073741824 bytes
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1024 MB"} placeholder="1073741824 (1GB in bytes)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -166,21 +198,34 @@ export const ShowRedisResources = ({ redisId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Limit</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Limit</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU quota in units of 10^-9 CPUs. Example: 2
CPUs = 2000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"2"} placeholder="2000000000 (2 CPUs)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }
@@ -198,21 +243,34 @@ export const ShowRedisResources = ({ redisId }: Props) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem> <FormItem>
<FormLabel>Cpu Reservation</FormLabel> <div className="flex items-center gap-2">
<FormLabel>CPU Reservation</FormLabel>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger>
<InfoIcon className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>
CPU shares (relative weight). Example: 1 CPU =
1000000000
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormControl> <FormControl>
<Input <Input
placeholder={"1"} placeholder="1000000000 (1 CPU)"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
if (value === "") { if (value === "") {
// Si el campo está vacío, establece el valor como null.
field.onChange(null); field.onChange(null);
} else { } else {
const number = Number.parseInt(value, 10); const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) { if (!Number.isNaN(number)) {
// Solo actualiza el valor si se convierte a un número válido.
field.onChange(number); field.onChange(number);
} }
} }