Skip to content

Commit

Permalink
different form for sandbox
Browse files Browse the repository at this point in the history
  • Loading branch information
Feroze Mohideen committed May 8, 2024
1 parent 5c09d8a commit a6f3132
Show file tree
Hide file tree
Showing 5 changed files with 325 additions and 142 deletions.
1 change: 1 addition & 0 deletions dashboard/src/components/porter/BlockSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ const Block = styled.div<{ selected?: boolean; disabled?: boolean }>`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: left;
user-select: none;
font-size: 13px;
Expand Down
18 changes: 16 additions & 2 deletions dashboard/src/main/home/database-dashboard/forms/CreateDatastore.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
import React from "react";
import React, { useContext } from "react";
import { match } from "ts-pattern";

import Loading from "components/Loading";

import { Context } from "shared/Context";

import DatastoreFormContextProvider from "../DatastoreFormContextProvider";
import DatastoreForm from "./DatastoreForm";
import SandboxDatastoreForm from "./SandboxDatastoreForm";

const CreateDatastore: React.FC = () => {
const { currentProject } = useContext(Context);

if (!currentProject) {
return <Loading />;
}
return (
<DatastoreFormContextProvider>
<DatastoreForm />
{match(currentProject)
.with({ sandbox_enabled: true }, () => <SandboxDatastoreForm />)
.with({ sandbox_enabled: false }, () => <DatastoreForm />)
.exhaustive()}
</DatastoreFormContextProvider>
);
};
Expand Down
154 changes: 71 additions & 83 deletions dashboard/src/main/home/database-dashboard/forms/DatastoreForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import {
DATASTORE_TEMPLATE_AWS_RDS,
DATASTORE_TEMPLATE_MANAGED_POSTGRES,
DATASTORE_TEMPLATE_MANAGED_REDIS,
DATASTORE_TEMPLATE_NEON,
SUPPORTED_DATASTORE_TEMPLATES,
} from "../constants";
import { useDatastoreFormContext } from "../DatastoreFormContextProvider";
Expand Down Expand Up @@ -74,7 +73,8 @@ const DatastoreForm: React.FC = () => {

const availableEngines: BlockSelectOption[] = useMemo(() => {
return [DATASTORE_ENGINE_POSTGRES, DATASTORE_ENGINE_REDIS];
}, [awsClusters, watchClusterId]);
}, [watchClusterId]);

const availableWorkloadTypes: BlockSelectOption[] = useMemo(() => {
return [
{
Expand Down Expand Up @@ -106,7 +106,6 @@ const DatastoreForm: React.FC = () => {
DATASTORE_TEMPLATE_AWS_RDS,
DATASTORE_TEMPLATE_AWS_AURORA,
DATASTORE_TEMPLATE_AWS_ELASTICACHE,
DATASTORE_TEMPLATE_NEON,
]
: [
DATASTORE_TEMPLATE_MANAGED_POSTGRES,
Expand Down Expand Up @@ -289,14 +288,6 @@ const DatastoreForm: React.FC = () => {
setValue("config.masterUsername", "postgres");
setValue("config.engineVersion", "15.4");
}
)
.with(
{
name: DATASTORE_TEMPLATE_NEON.name,
},
() => {
setValue("config.type", "neon");
}
);
setValue("config.instanceClass", "unspecified");
setValue("config.masterUserPassword", uuidv4());
Expand Down Expand Up @@ -326,78 +317,75 @@ const DatastoreForm: React.FC = () => {
</>
)}
</>,
template !== DATASTORE_TEMPLATE_NEON ? (
<>
<Text size={16}>Specify resources</Text>
{template && (
<>
<Spacer y={0.5} />
<Text color="helper">
Specify your datastore CPU and RAM.
</Text>
{errors.config?.instanceClass?.message && (
<AppearingErrorContainer>
<Spacer y={0.5} />
<ErrorComponent
message={errors.config.instanceClass.message}
/>
</AppearingErrorContainer>
)}
<Spacer y={0.5} />
<Text>Select an instance tier:</Text>
<Spacer height="20px" />
<Resources
options={template.instanceTiers}
selected={watchTier}
onSelect={(option: ResourceOption) => {
setValue("config.instanceClass", option.tier);
setValue(
"config.allocatedStorageGigabytes",
option.storageGigabytes
);
setCurrentStep(6);
}}
highlight={watchEngine === "REDIS" ? "ram" : "storage"}
/>
</>
)}
</>
) : null,
template !== DATASTORE_TEMPLATE_NEON ? (
<>
<Text size={16}>Credentials</Text>
{watchInstanceClass !== "unspecified" && template && (
<>
<Spacer y={0.5} />
<Text color="helper">
These credentials never leave your own cloud environment.
Your app will use them to connect to this datastore.
</Text>
<Spacer height="20px" />
<ConnectionInfo
connectionInfo={
watchEngine === "REDIS"
? {
host: "(determined after creation)",
port: 6379,
password: watchDbPassword,
username: "",
database_name: "",
}
: {
host: "(determined after creation)",
port: 5432,
password: watchDbPassword,
username: watchDbUsername,
database_name: watchDbName,
}
}
template={template}
/>
</>
)}
</>
) : null,

<>
<Text size={16}>Specify resources</Text>
{template && (
<>
<Spacer y={0.5} />
<Text color="helper">
Specify your datastore CPU and RAM.
</Text>
{errors.config?.instanceClass?.message && (
<AppearingErrorContainer>
<Spacer y={0.5} />
<ErrorComponent
message={errors.config.instanceClass.message}
/>
</AppearingErrorContainer>
)}
<Spacer y={0.5} />
<Text>Select an instance tier:</Text>
<Spacer height="20px" />
<Resources
options={template.instanceTiers}
selected={watchTier}
onSelect={(option: ResourceOption) => {
setValue("config.instanceClass", option.tier);
setValue(
"config.allocatedStorageGigabytes",
option.storageGigabytes
);
setCurrentStep(6);
}}
highlight={watchEngine === "REDIS" ? "ram" : "storage"}
/>
</>
)}
</>,
<>
<Text size={16}>Credentials</Text>
{watchInstanceClass !== "unspecified" && template && (
<>
<Spacer y={0.5} />
<Text color="helper">
These credentials never leave your own cloud environment.
Your app will use them to connect to this datastore.
</Text>
<Spacer height="20px" />
<ConnectionInfo
connectionInfo={
watchEngine === "REDIS"
? {
host: "(determined after creation)",
port: 6379,
password: watchDbPassword,
username: "",
database_name: "",
}
: {
host: "(determined after creation)",
port: 5432,
password: watchDbPassword,
username: watchDbUsername,
database_name: watchDbName,
}
}
template={template}
/>
</>
)}
</>,
<>
<Text size={16}>Create datastore instance</Text>
<Spacer y={0.5} />
Expand Down
Loading

0 comments on commit a6f3132

Please sign in to comment.