@@ -22,6 +22,13 @@ import React, { useEffect } from "react";
22
22
import { useForm } from "react-hook-form" ;
23
23
import { toast } from "sonner" ;
24
24
import { z } from "zod" ;
25
+ import {
26
+ Tooltip ,
27
+ TooltipContent ,
28
+ TooltipProvider ,
29
+ TooltipTrigger ,
30
+ } from "@/components/ui/tooltip" ;
31
+ import { InfoIcon } from "lucide-react" ;
25
32
26
33
const addResourcesApplication = z . object ( {
27
34
memoryReservation : z . number ( ) . nullable ( ) . optional ( ) ,
@@ -72,7 +79,7 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
72
79
await refetch ( ) ;
73
80
} )
74
81
. catch ( ( ) => {
75
- toast . error ( "Error to Update the resources" ) ;
82
+ toast . error ( "Error updating the resources" ) ;
76
83
} ) ;
77
84
} ;
78
85
return (
@@ -101,10 +108,25 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
101
108
name = "memoryReservation"
102
109
render = { ( { field } ) => (
103
110
< FormItem >
104
- < FormLabel > Memory Reservation</ FormLabel >
111
+ < div className = "flex items-center gap-2" >
112
+ < FormLabel > Memory Reservation</ FormLabel >
113
+ < TooltipProvider >
114
+ < Tooltip delayDuration = { 0 } >
115
+ < TooltipTrigger >
116
+ < InfoIcon className = "h-4 w-4 text-muted-foreground" />
117
+ </ TooltipTrigger >
118
+ < TooltipContent >
119
+ < p >
120
+ Memory soft limit in bytes. Example: 256MB =
121
+ 268435456 bytes
122
+ </ p >
123
+ </ TooltipContent >
124
+ </ Tooltip >
125
+ </ TooltipProvider >
126
+ </ div >
105
127
< FormControl >
106
128
< Input
107
- placeholder = "256 MB "
129
+ placeholder = "268435456 (256MB in bytes) "
108
130
{ ...field }
109
131
value = { field . value ?. toString ( ) || "" }
110
132
onChange = { ( e ) => {
@@ -120,7 +142,6 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
120
142
} }
121
143
/>
122
144
</ FormControl >
123
-
124
145
< FormMessage />
125
146
</ FormItem >
126
147
) }
@@ -132,10 +153,25 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
132
153
render = { ( { field } ) => {
133
154
return (
134
155
< FormItem >
135
- < FormLabel > Memory Limit</ FormLabel >
156
+ < div className = "flex items-center gap-2" >
157
+ < FormLabel > Memory Limit</ FormLabel >
158
+ < TooltipProvider >
159
+ < Tooltip delayDuration = { 0 } >
160
+ < TooltipTrigger >
161
+ < InfoIcon className = "h-4 w-4 text-muted-foreground" />
162
+ </ TooltipTrigger >
163
+ < TooltipContent >
164
+ < p >
165
+ Memory hard limit in bytes. Example: 1GB =
166
+ 1073741824 bytes
167
+ </ p >
168
+ </ TooltipContent >
169
+ </ Tooltip >
170
+ </ TooltipProvider >
171
+ </ div >
136
172
< FormControl >
137
173
< Input
138
- placeholder = { "1024 MB" }
174
+ placeholder = "1073741824 (1GB in bytes)"
139
175
{ ...field }
140
176
value = { field . value ?. toString ( ) || "" }
141
177
onChange = { ( e ) => {
@@ -163,21 +199,36 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
163
199
render = { ( { field } ) => {
164
200
return (
165
201
< FormItem >
166
- < FormLabel > Cpu Limit</ FormLabel >
202
+ < div className = "flex items-center gap-2" >
203
+ < FormLabel > CPU Limit</ FormLabel >
204
+ < TooltipProvider >
205
+ < Tooltip delayDuration = { 0 } >
206
+ < TooltipTrigger >
207
+ < InfoIcon className = "h-4 w-4 text-muted-foreground" />
208
+ </ TooltipTrigger >
209
+ < TooltipContent >
210
+ < p >
211
+ CPU quota in units of 10^-9 CPUs. Example: 2
212
+ CPUs = 2000000000
213
+ </ p >
214
+ </ TooltipContent >
215
+ </ Tooltip >
216
+ </ TooltipProvider >
217
+ </ div >
167
218
< FormControl >
168
219
< Input
169
- placeholder = { "2" }
220
+ placeholder = "2000000000 (2 CPUs)"
170
221
{ ...field }
171
- type = "number"
172
222
value = { field . value ?. toString ( ) || "" }
173
223
onChange = { ( e ) => {
174
224
const value = e . target . value ;
175
- if (
176
- value === "" ||
177
- / ^ [ 0 - 9 ] * \. ? [ 0 - 9 ] * $ / . test ( value )
178
- ) {
179
- const float = Number . parseFloat ( value ) ;
180
- field . onChange ( float ) ;
225
+ if ( value === "" ) {
226
+ field . onChange ( null ) ;
227
+ } else {
228
+ const number = Number . parseInt ( value , 10 ) ;
229
+ if ( ! Number . isNaN ( number ) ) {
230
+ field . onChange ( number ) ;
231
+ }
181
232
}
182
233
} }
183
234
/>
@@ -193,21 +244,36 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
193
244
render = { ( { field } ) => {
194
245
return (
195
246
< FormItem >
196
- < FormLabel > Cpu Reservation</ FormLabel >
247
+ < div className = "flex items-center gap-2" >
248
+ < FormLabel > CPU Reservation</ FormLabel >
249
+ < TooltipProvider >
250
+ < Tooltip delayDuration = { 0 } >
251
+ < TooltipTrigger >
252
+ < InfoIcon className = "h-4 w-4 text-muted-foreground" />
253
+ </ TooltipTrigger >
254
+ < TooltipContent >
255
+ < p >
256
+ CPU shares (relative weight). Example: 1 CPU =
257
+ 1000000000
258
+ </ p >
259
+ </ TooltipContent >
260
+ </ Tooltip >
261
+ </ TooltipProvider >
262
+ </ div >
197
263
< FormControl >
198
264
< Input
199
- placeholder = { "1" }
265
+ placeholder = "1000000000 (1 CPU)"
200
266
{ ...field }
201
- type = "number"
202
267
value = { field . value ?. toString ( ) || "" }
203
268
onChange = { ( e ) => {
204
269
const value = e . target . value ;
205
- if (
206
- value === "" ||
207
- / ^ [ 0 - 9 ] * \. ? [ 0 - 9 ] * $ / . test ( value )
208
- ) {
209
- const float = Number . parseFloat ( value ) ;
210
- field . onChange ( float ) ;
270
+ if ( value === "" ) {
271
+ field . onChange ( null ) ;
272
+ } else {
273
+ const number = Number . parseInt ( value , 10 ) ;
274
+ if ( ! Number . isNaN ( number ) ) {
275
+ field . onChange ( number ) ;
276
+ }
211
277
}
212
278
} }
213
279
/>
0 commit comments