Db instances (#4360)

Co-authored-by: Feroze Mohideen <feroze@porter.run>

dashboard/src/lib/databases/types.ts

@@ -147,6 +147,7 @@ export type DatastoreTemplate = {
   description: string;
   disabled: boolean;
   instanceTiers: ResourceOption[];
+  supportedEngineVersions: EngineVersion[];
   formTitle: string;
   creationStateProgression: DatastoreState[];
   deletionStateProgression: DatastoreState[];
@@ -157,6 +158,7 @@ const instanceTierValidator = z.enum([
   "db.t4g.small",
   "db.t4g.medium",
   "db.t4g.large",
+  "db.m6g.large",
   "cache.t4g.micro",
   "cache.t4g.medium",
   "cache.r6g.large",
@@ -164,6 +166,12 @@ const instanceTierValidator = z.enum([
 ]);
 export type InstanceTier = z.infer<typeof instanceTierValidator>;
 
+const engineVersionValidator = z.enum(["15.4", "14.11"]);
+export type EngineVersion = {
+  name: z.infer<typeof engineVersionValidator>;
+  displayName: string;
+};
+
 const rdsPostgresConfigValidator = z.object({
   type: z.literal("rds-postgres"),
   instanceClass: instanceTierValidator
@@ -176,6 +184,7 @@ const rdsPostgresConfigValidator = z.object({
     .int()
     .positive("Allocated storage must be a positive integer")
     .default(30),
+  engineVersion: engineVersionValidator,
   // the following three are not yet specified by the user during creation - only parsed from the backend after the form is submitted
   databaseName: z
     .string()

dashboard/src/lib/hooks/useDatabaseMethods.ts

@@ -40,6 +40,7 @@ const clientDbToCreateInput = (values: DbFormData): CreateDatastoreInput => {
             masterUserPassword: values.config.masterUserPassword,
             allocatedStorage: values.config.allocatedStorageGigabytes,
             instanceClass: values.config.instanceClass,
+            engineVersion: values.config.engineVersion,
           },
         },
         type: "RDS",

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

@@ -27,6 +27,10 @@ export const SUPPORTED_DATASTORE_TEMPLATES: DatastoreTemplate[] = [
     name: "Amazon RDS",
     type: DATASTORE_TYPE_RDS,
     engine: DATASTORE_ENGINE_POSTGRES,
+    supportedEngineVersions: [
+      { name: "15.4" as const, displayName: "PostgreSQL 15.4" },
+      { name: "14.11" as const, displayName: "PostgreSQL 14.11" },
+    ],
     icon: awsRDS as string,
     description:
       "Amazon Relational Database Service (RDS) is a web service that makes it easier to set up, operate, and scale a relational database in the cloud.",
@@ -53,6 +57,13 @@ export const SUPPORTED_DATASTORE_TEMPLATES: DatastoreTemplate[] = [
         ramGigabytes: 8,
         storageGigabytes: 256,
       },
+      {
+        tier: "db.m6g.large" as const,
+        label: "Large (High Performance)",
+        cpuCores: 2,
+        ramGigabytes: 8,
+        storageGigabytes: 512,
+      },
     ],
     formTitle: "Create an RDS PostgreSQL instance",
     creationStateProgression: [
@@ -73,6 +84,7 @@ export const SUPPORTED_DATASTORE_TEMPLATES: DatastoreTemplate[] = [
     name: "Amazon Aurora",
     type: DATASTORE_TYPE_RDS,
     engine: DATASTORE_ENGINE_AURORA_POSTGRES,
+    supportedEngineVersions: [],
     icon: awsRDS as string,
     description:
       "Amazon Aurora PostgreSQL is an ACID–compliant relational database engine that combines the speed, reliability, and manageability of Amazon Aurora with the simplicity and cost-effectiveness of open-source databases.",
@@ -108,6 +120,7 @@ export const SUPPORTED_DATASTORE_TEMPLATES: DatastoreTemplate[] = [
     name: "Amazon ElastiCache",
     type: DATASTORE_TYPE_ELASTICACHE,
     engine: DATASTORE_ENGINE_REDIS,
+    supportedEngineVersions: [],
     icon: awsElastiCache as string,
     description:
       "Amazon ElastiCache is a web service that makes it easy to deploy, operate, and scale an in-memory data store or cache in the cloud.",
@@ -160,6 +173,7 @@ export const SUPPORTED_DATASTORE_TEMPLATES: DatastoreTemplate[] = [
     name: "Amazon ElastiCache",
     type: DATASTORE_TYPE_ELASTICACHE,
     engine: DATASTORE_ENGINE_MEMCACHED,
+    supportedEngineVersions: [],
     icon: awsElastiCache as string,
     description:
       "Currently unavailable. Please contact support@porter.run for more details.",

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import _ from "lodash";
 import { useForm } from "react-hook-form";
@@ -10,12 +10,14 @@ import ClickToCopy from "components/porter/ClickToCopy";
 import Container from "components/porter/Container";
 import Error from "components/porter/Error";
 import Fieldset from "components/porter/Fieldset";
+import Selector from "components/porter/Selector";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import {
   dbFormValidator,
   type DatastoreTemplate,
   type DbFormData,
+  type EngineVersion,
   type ResourceOption,
 } from "lib/databases/types";
 
@@ -37,7 +39,6 @@ type Props = RouteComponentProps & {
 };
 
 const DatabaseFormRDSPostgres: React.FC<Props> = ({ history, template }) => {
-  const [currentStep, setCurrentStep] = useState<number>(0);
   const [isPasswordHidden, setIsPasswordHidden] = useState<boolean>(true);
 
   const dbForm = useForm<DbFormData>({
@@ -49,6 +50,7 @@ const DatabaseFormRDSPostgres: React.FC<Props> = ({ history, template }) => {
         databaseName: "postgres",
         masterUsername: "postgres",
         masterUserPassword: uuidv4(),
+        engineVersion: "15.4",
       },
     },
   });
@@ -59,23 +61,11 @@ const DatabaseFormRDSPostgres: React.FC<Props> = ({ history, template }) => {
     watch,
   } = dbForm;
 
-  const watchName = watch("name", "");
   const watchTier = watch("config.instanceClass", "unspecified");
-
   const watchDbName = watch("config.databaseName");
   const watchDbUsername = watch("config.masterUsername");
   const watchDbPassword = watch("config.masterUserPassword");
-
-  useEffect(() => {
-    let newStep = 0;
-    if (watchName) {
-      newStep = 1;
-    }
-    if (watchTier !== "unspecified") {
-      newStep = 3;
-    }
-    setCurrentStep(Math.max(newStep, currentStep));
-  }, [watchName, watchTier]);
+  const watchEngine = watch("config.engineVersion", "15.4");
 
   return (
     <CenterWrapper>
@@ -95,6 +85,22 @@ const DatabaseFormRDSPostgres: React.FC<Props> = ({ history, template }) => {
           <DarkMatter />
           <DatabaseForm
             steps={[
+              <>
+                <Text size={16}>Specify engine version</Text>
+                <Spacer y={0.5} />
+                <Selector<EngineVersion["name"]>
+                  activeValue={watchEngine}
+                  setActiveValue={(value) => {
+                    setValue("config.engineVersion", value);
+                  }}
+                  width="300px"
+                  options={template.supportedEngineVersions.map((v) => ({
+                    value: v.name,
+                    label: v.displayName,
+                    key: v.name,
+                  }))}
+                />
+              </>,
               <>
                 <Text size={16}>Specify resources</Text>
                 <Spacer y={0.5} />
@@ -185,7 +191,7 @@ const DatabaseFormRDSPostgres: React.FC<Props> = ({ history, template }) => {
                 </Fieldset>
               </>,
             ]}
-            currentStep={currentStep}
+            currentStep={100}
             form={dbForm}
           />
         </StyledConfigureTemplate>

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

@@ -70,7 +70,7 @@ const StyledResourceOption = styled.div<{ selected?: boolean }>`
   background: ${(props) => props.theme.clickable.bg};
   border: 1px solid
     ${(props) => (props.selected ? "#ffffff" : props.theme.border)};
-  width: 350px;
+  width: 600px;
   padding: 10px 15px;
   border-radius: 5px;
   display: flex;