diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagement.schema.ts b/apps/studio/components/interfaces/DiskManagement/DiskManagement.schema.ts index 47b8607c96a..0a0f8c227d8 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagement.schema.ts +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagement.schema.ts @@ -37,7 +37,7 @@ export const CreateDiskStorageSchema = (defaultTotalSize: number) => { if (storageType === 'io2') { // Validation rules for io2 - if (provisionedIOPS > 256000) { + if (provisionedIOPS > IOPS_RANGE[DiskType.IO2].max) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: @@ -48,7 +48,7 @@ export const CreateDiskStorageSchema = (defaultTotalSize: number) => { const maxIOPSforDiskSizeWithio2 = calculateMaxIopsAllowedForDiskSizeWithio2(totalSize) - if (provisionedIOPS < 100) { + if (provisionedIOPS < IOPS_RANGE[DiskType.IO2].min) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Provisioned IOPS must be at least 100', diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx index 492836ad01b..9a36c28b5fe 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx @@ -343,7 +343,11 @@ export function DiskManagementForm() { - + {/* {isPlanUpgradeRequired && } */} disableInput: boolean + setAdvancedSettingsOpenState: (state: boolean) => void } -export function DiskSizeField({ form, disableInput }: DiskSizeFieldProps) { +export function DiskSizeField({ + form, + disableInput, + setAdvancedSettingsOpenState, +}: DiskSizeFieldProps) { const { ref: projectRef } = useParams() const { control, formState, setValue, trigger, getValues, resetField, watch } = form const org = useSelectedOrganization() @@ -141,6 +147,22 @@ export function DiskSizeField({ form, disableInput }: DiskSizeFieldProps) { subscription?.plan.id && `Your plan includes ${includedDiskGB} GB of disk size for ${watchedStorageType}.`} + { + setValue('storageType', 'io2') + trigger('provisionedIOPS') + trigger('totalSize') + setAdvancedSettingsOpenState(true) + }} + > + Change to High Performance SSD + + } + />
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx new file mode 100644 index 00000000000..1c88a541b0e --- /dev/null +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx @@ -0,0 +1,40 @@ +import { AnimatePresence, motion } from 'framer-motion' +import { UseFormReturn } from 'react-hook-form' +import { Admonition } from 'ui-patterns/admonition' +import { DiskStorageSchemaType } from '../DiskManagement.schema' +import { DISK_LIMITS, DISK_TYPE_OPTIONS, DiskType, IOPS_RANGE } from './DiskManagement.constants' + +export function DiskTypeReccomendationSection({ + actions, + form, +}: { + actions?: React.ReactNode + form: UseFormReturn +}) { + const { watch } = form + + const totalSize = watch('totalSize') + const storageType = watch('storageType') + const isVisible = storageType === DiskType.GP3 && totalSize > DISK_LIMITS[DiskType.GP3].maxStorage + const io2Option = DISK_TYPE_OPTIONS.find((option) => option.type === DiskType.IO2) + + return ( + + {isVisible && ( + + +
{actions &&
{actions}
}
+
+
+ )} +
+ ) +}