konnosDashboard
ComputeSizeRecommendationSection.tsx64 lines · main
1import { AnimatePresence, motion } from 'framer-motion'
2import { ReactNode } from 'react'
3import { UseFormReturn } from 'react-hook-form'
4import { COMPUTE_BASELINE_IOPS, COMPUTE_MAX_IOPS } from 'shared-data'
5import { Admonition } from 'ui-patterns/admonition'
6
7import { DiskStorageSchemaType } from '../DiskManagement.schema'
8import {
9 calculateComputeSizeRequiredForIops,
10 calculateMaxIopsForComputeSize,
11 mapAddOnVariantIdToComputeSize,
12} from '../DiskManagement.utils'
13import { RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3 } from './DiskManagement.constants'
14
15interface ComputeSizeRecommendationSectionProps {
16 actions?: ReactNode
17 form: UseFormReturn<DiskStorageSchemaType>
18}
19
20export function ComputeSizeRecommendationSection({
21 actions,
22 form,
23}: ComputeSizeRecommendationSectionProps) {
24 const { watch } = form
25 const computeSize = watch('computeSize')
26 const iops = watch('provisionedIOPS')
27
28 const computeSizeRecommendedForIops = calculateComputeSizeRequiredForIops(iops)
29 const maxIopsForComputeSize = calculateMaxIopsForComputeSize(computeSize ?? 'ci_micro')
30 const isVisible =
31 iops > maxIopsForComputeSize &&
32 !RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3.includes(computeSize ?? 'ci_micro')
33
34 return (
35 <AnimatePresence initial={false}>
36 {isVisible && (
37 <motion.div
38 initial={{ opacity: 0, height: 0 }}
39 animate={{ opacity: 1, height: 'auto' }}
40 exit={{ opacity: 0, height: 0 }}
41 transition={{ duration: 0.15 }}
42 >
43 <Admonition
44 type="default"
45 title={`Your compute size baseline is ${COMPUTE_BASELINE_IOPS[computeSize ?? 'ci_micro']} IOPS (max ${COMPUTE_MAX_IOPS[computeSize ?? 'ci_micro'] ?? maxIopsForComputeSize} IOPS)`}
46 >
47 <div className="flex flex-col gap-2">
48 <div>
49 <p className="text-sm text-foreground-light">
50 To achieve higher IOPS performance we recommend using the{' '}
51 <span className="text-foreground">
52 {mapAddOnVariantIdToComputeSize(computeSizeRecommendedForIops)}
53 </span>{' '}
54 compute size.
55 </p>
56 </div>
57 {actions && <div>{actions}</div>}
58 </div>
59 </Admonition>
60 </motion.div>
61 )}
62 </AnimatePresence>
63 )
64}