add new elasticache and db types and slight form refactor (#4530)

dashboard/src/lib/databases/types.ts

@@ -182,7 +182,9 @@ const instanceTierValidator = z.enum([
   "db.t4g.medium",
   "db.t4g.large",
   "db.m6g.large",
+  "db.r6g.4xlarge",
   "cache.t4g.micro",
+  "cache.t4g.small",
   "cache.t4g.medium",
   "cache.r6g.large",
   "cache.r6g.xlarge",

dashboard/src/main/home/database-dashboard/constants.ts

@@ -95,6 +95,13 @@ export const DATASTORE_TEMPLATE_AWS_RDS: DatastoreTemplate = Object.freeze({
       ramGigabytes: 8,
       storageGigabytes: 512,
     },
+    {
+      tier: "db.r6g.4xlarge" as const,
+      label: "Extra Large",
+      cpuCores: 16,
+      ramGigabytes: 128,
+      storageGigabytes: 2048,
+    },
   ],
   formTitle: "Create an RDS PostgreSQL instance",
   creationStateProgression: [
@@ -169,6 +176,13 @@ export const DATASTORE_TEMPLATE_AWS_ELASTICACHE: DatastoreTemplate =
         ramGigabytes: 0.5,
         storageGigabytes: 0,
       },
+      {
+        tier: "cache.t4g.small" as const,
+        label: "Small",
+        cpuCores: 2,
+        ramGigabytes: 1.37,
+        storageGigabytes: 0,
+      },
       {
         tier: "cache.t4g.medium" as const,
         label: "Medium",

dashboard/src/main/home/database-dashboard/forms/DatastoreForm.tsx

@@ -41,7 +41,7 @@ import ConnectionInfo from "../shared/ConnectionInfo";
 import Resources from "../shared/Resources";
 
 const DatastoreForm: React.FC = () => {
-  const [currentStep, setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(0);
   const [template, setTemplate] = useState<DatastoreTemplate | undefined>(
     undefined
   );
@@ -132,42 +132,7 @@ const DatastoreForm: React.FC = () => {
         <VerticalSteps
           steps={[
             <>
-              <Text size={16}>Datastore name</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                Lowercase letters, numbers, and &quot;-&quot; only.
-              </Text>
-              <Spacer y={0.5} />
-              <ControlledInput
-                placeholder="ex: academic-sophon-db"
-                type="text"
-                width="300px"
-                error={errors.name?.message}
-                {...register("name")}
-              />
-              {clusters.length > 1 && (
-                <>
-                  <Spacer y={1} />
-                  <Selector<string>
-                    activeValue={watchClusterId.toString()}
-                    width="300px"
-                    options={clusters.map((c) => ({
-                      value: c.id.toString(),
-                      label: c.vanity_name,
-                      key: c.id.toString(),
-                    }))}
-                    setActiveValue={(value: string) => {
-                      setValue("clusterId", parseInt(value));
-                      setValue("engine", "UNKNOWN");
-                      setCurrentStep(1);
-                    }}
-                    label={"Cluster"}
-                  />
-                </>
-              )}
-            </>,
-            <>
-              <Text size={16}>Datastore engine</Text>
+              <Text size={16}>Datastore type</Text>
               <Spacer y={0.5} />
               <Controller
                 name="engine"
@@ -181,15 +146,58 @@ const DatastoreForm: React.FC = () => {
                       onChange(opt.name);
                       setValue("workloadType", "unspecified");
                       setTemplate(undefined);
-                      setCurrentStep(2);
+                      setCurrentStep(1);
                     }}
                   />
                 )}
               />
             </>,
             <>
-              <Text size={16}>Workload type</Text>
+              <Text size={16}>Datastore name</Text>
               {watchEngine !== "UNKNOWN" && (
+                <>
+                  <Spacer y={0.5} />
+                  <Text color="helper">
+                    Lowercase letters, numbers, and &quot;-&quot; only.
+                  </Text>
+                  <Spacer y={0.5} />
+                  <ControlledInput
+                    placeholder="ex: academic-sophon-db"
+                    type="text"
+                    width="300px"
+                    error={errors.name?.message}
+                    {...register("name")}
+                    onChange={(e) => {
+                      setValue("name", e.target.value);
+                      setCurrentStep(Math.max(2, currentStep));
+                    }}
+                  />
+                  {clusters.length > 1 && (
+                    <>
+                      <Spacer y={1} />
+                      <Selector<string>
+                        activeValue={watchClusterId.toString()}
+                        width="300px"
+                        options={clusters.map((c) => ({
+                          value: c.id.toString(),
+                          label: c.vanity_name,
+                          key: c.id.toString(),
+                        }))}
+                        setActiveValue={(value: string) => {
+                          setValue("clusterId", parseInt(value));
+                          setValue("workloadType", "unspecified");
+                          setCurrentStep(2);
+                        }}
+                        label={"Cluster"}
+                      />
+                    </>
+                  )}
+                </>
+              )}
+            </>,
+            <>
+              <Text size={16}>Workload type</Text>
+              {currentStep >= 2 && (
                 <>
                   <Spacer y={0.5} />
                   <Controller

dashboard/src/main/home/database-dashboard/shared/Resources.tsx

@@ -39,7 +39,13 @@ const Resources: React.FC<Props> = ({
                     - {o.cpuCores} CPU, {o.ramGigabytes} GB RAM
                   </Text>
                 </Container>
-                <StorageTag>{o.storageGigabytes} GB Storage</StorageTag>
+                {o.storageGigabytes > 1024 ? (
+                  <StorageTag>
+                    {Math.round(o.storageGigabytes / 1024)} TB Storage
+                  </StorageTag>
+                ) : (
+                  <StorageTag>{o.storageGigabytes} GB Storage</StorageTag>
+                )}
               </>
             ) : (
               <>