Skip to content

Commit

Permalink
Merge pull request #10 from oslabs-beta/stephenfeature
Browse files Browse the repository at this point in the history 
modularized AwsModal, deleted unnecessary code in other modals
  • Loading branch information
@sarhiri
sarhiri authored Apr 30, 2024
2 parents 72125a5 + 2c8157e commit ac3ec98
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 209 deletions.
64 changes: 1 addition & 63 deletions app/modals/AddModal/AddModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,69 +63,7 @@ const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
<form onSubmit={handleSubmit}>
<p>Required*</p>
<ServiceDBType typeOfService={typeOfService} handleChange={handleChange} database={database}/>
{/* <div>
<label htmlFor="serv-type">
Type of Service<span>*</span>
</label>
<select
id="serv-type"
name="typeOfService"
value={typeOfService}
onChange={e => handleChange(e)}
>
<option value="Docker">Docker</option>
<option value="gRPC">gRPC</option>
<option value="Kubernetes">Kubernetes</option>
<option value="Microservices">Microservices</option>
</select>
</div>
<div>
<label htmlFor="db-type">
Type of Database<span>*</span>
</label>
<select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
<option value="SQL">SQL</option>
<option value="MongoDB">MongoDB</option>
</select>
</div> */}
<ServicesDescription URI={URI} name={name} description={description}/>
{/* <div>
<label htmlFor="db-uri">
URI<span>*</span>
</label>
<input
id="db-uri"
name="URI"
value={URI}
onChange={e => handleChange(e)}
placeholder="Database URI"
required
/>
</div>
<div>
<label htmlFor="db-name">
Name<span>*</span>
</label>
<input
id="db-name"
type="text"
name="name"
value={name}
onChange={e => handleChange(e)}
placeholder="Add a name for your new service"
required
/>
</div>
<div>
<label htmlFor="db-desc">Description</label>
<textarea
id="db-desc"
name="description"
value={description}
onChange={e => handleChange(e)}
placeholder="Add a short description"
/>
</div> */}
<ServicesDescription URI={URI} name={name} description={description} handleChange={handleChange}/>
<button>Submit</button>
</form>
</div>
Expand Down
34 changes: 34 additions & 0 deletions app/modals/AwsModal/AwsDescription.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';

const AwsDescription = (props) => {
return (
<>
<div>
<label htmlFor="aws-name">
Name<span>*</span>
</label>
<input
id="aws-name"
type="text"
name="name"
value={props.name}
onChange={e => props.handleChange(e)}
placeholder="Add a name for your new service"
required
/>
</div>
<div>
<label htmlFor="db-desc">Description</label>
<textarea
id="db-desc"
name="description"
value={props.description}
onChange={e => props.handleChange(e)}
placeholder="Add a short description"
/>
</div>
</>
)
}

export default AwsDescription;
52 changes: 52 additions & 0 deletions app/modals/AwsModal/AwsKeyUrl.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';

const AwsKeyUrl = (props) => {
return (
<>
<div>
<label htmlFor="aws-access-key">{(props.typeOfService === 'AWS/EKS') ? 'Bearer Token' : 'Access Key'} <span>*</span>
</label>
<input
id="aws-access-key"
type="password"
name="accessKey"
value={props.accessKey}
onChange={e => props.handleChange(e)}
placeholder={props.typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
required
/>
</div>
{(props.typeOfService !== 'AWS/EKS') && (
<div>
<label htmlFor="aws-secret-access-key">
Secret Access Key<span>*</span>
</label>
<input
id="aws-secret-access-key"
type="password"
name="secretAccessKey"
value={props.secretAccessKey}
onChange={e => props.handleChange(e)}
placeholder="AWS Secret Access Key"
required
/>
</div>
)}
<div>
<label htmlFor="aws-url">
{(props.typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
</label>
<input
id="aws-url"
type="string"
name="awsUrl"
value={props.awsUrl}
onChange={e => props.handleChange(e)}
placeholder={props.typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
/>
</div>
</>
)
};

export default AwsKeyUrl;
154 changes: 11 additions & 143 deletions app/modals/AwsModal/AwsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import { DashboardContext } from '../../context/DashboardContext';
import './AwsModal.scss';

import { TModalSetter } from '../../components/Occupied/types/Occupied';
import AwsServiceInstance from './AwsServiceInstance';
import AwsRegion from './AwsRegion';
import AwsKeyUrl from './AwsKeyUrl';
import AwsDescription from './AwsDescription';

interface AwsFields {
typeOfService: string;
Expand All @@ -20,9 +24,9 @@ interface IDashboard {
addAwsApp: (fields: AwsFields) => void;
}

interface AddModalProps {
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
// interface AddModalProps {
// setOpen: React.Dispatch<React.SetStateAction<boolean>>;
// }

type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
type FormElement = React.FormEvent<HTMLFormElement>;
Expand Down Expand Up @@ -69,146 +73,10 @@ const AwsModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
</div>
<form onSubmit={handleSubmit}>
<p>Required*</p>
<div>
<label htmlFor="serv-type">Type of Service</label>
<select
id="serv-type"
name="typeOfService"
value={typeOfService}
onChange={e => handleChange(e)}
>
<option value="AWS/EC2">Elastic Compute Cloud (EC2)</option>
<option value="AWS/ECS">Elastic Container Service (ECS)</option>
<option value="AWS/EKS">Elastic Kubernetes Service (EKS)</option>
</select>
</div>
{typeOfService === 'AWS/EC2' && (
<div>
<label htmlFor="instance">
AWS Instance ID<span>*</span>
</label>
<input
id="aws-instance"
name="instance"
value={instance}
onChange={e => handleChange(e)}
placeholder="AWS Instance ID"
required
/>
</div>
)}
<div>
<label htmlFor="region">
Region<span>*</span>
</label>
<select
id="aws-region"
name="region"
value={region}
onChange={e => handleChange(e)}
placeholder="AWS Region"
required
>
<option value="us-east-1">US East (N. Virginia) / us-east-1</option>
<option value="us-east-2">US East (Ohio) / us-east-2</option>
<option value="us-west-1">US West (N.California) / us-west-1</option>
<option value="us-west-2">US West (Oregon) / us-west-2</option>
<option value="ap-south-1">Asia Pacific (Mumbai) / ap-south-1</option>
<option value="ap-northeast-3">Asia Pacific (Osaka) / ap-northeast-3</option>
<option value="ap-northeast-2">Asia Pacific (Seoul) / ap-northeast-2</option>
<option value="ap-southeast-1">Asia Pacific (Singapore) / ap-southeast-1</option>
<option value="ap-southeast-2">Asia Pacific (Sydney) / ap-southeast-2</option>
<option value="ap-northeast-1">Asia Pacific (Tokyo) / ap-northeast-1</option>
<option value="ca-central-1">Canada (Central) / ca-central-1</option>
<option value="eu-central-1">Europe (Frankfurt) / eu-central-1</option>
<option value="eu-west-1">Europe (Ireland) / eu-west-1</option>
<option value="eu-west-2">Europe (London) / eu-west-2</option>
<option value="eu-west-3">Europe (Paris) / eu-west-3</option>
<option value="eu-north-1">Europe (Stockholm) / eu-north-1</option>
<option value="sa-east-1">South America (Sao Paulo) / sa-east-1</option>
</select>
</div>
<div>
<label htmlFor="aws-access-key">{(typeOfService === 'AWS/EKS') ? 'Bearer Token' : 'Access Key'} <span>*</span>
</label>
<input
id="aws-access-key"
type="password"
name="accessKey"
value={accessKey}
onChange={e => handleChange(e)}
placeholder={typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
required
/>
</div>
{(typeOfService !== 'AWS/EKS') && (
<div>
<label htmlFor="aws-secret-access-key">
Secret Access Key<span>*</span>
</label>
<input
id="aws-secret-access-key"
type="password"
name="secretAccessKey"
value={secretAccessKey}
onChange={e => handleChange(e)}
placeholder="AWS Secret Access Key"
required
/>
</div>
)}
{/* <div>
<label htmlFor="aws-secret-access-key">
Secret Access Key<span>*</span>
</label>
<input
id="aws-secret-access-key"
type="password"
name="secretAccessKey"
value={secretAccessKey}
onChange={e => handleChange(e)}
placeholder="AWS Secret Access Key"
required
/>
</div> */}

<div>
<label htmlFor="aws-url">
{(typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
</label>
<input
id="aws-url"
type="string"
name="awsUrl"
value={awsUrl}
onChange={e => handleChange(e)}
placeholder={typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
/>
</div>
<div>
<label htmlFor="aws-name">
Name<span>*</span>
</label>
<input
id="aws-name"
type="text"
name="name"
value={name}
onChange={e => handleChange(e)}
placeholder="Add a name for your new service"
required
/>
</div>
<div>
<label htmlFor="db-desc">Description</label>
<textarea
id="db-desc"
name="description"
value={description}
onChange={e => handleChange(e)}
placeholder="Add a short description"
/>
</div>
<AwsServiceInstance typeOfService={typeOfService} handleChange={handleChange} instance={instance} />
<AwsRegion region={region} handleChange={handleChange} />
<AwsKeyUrl typeOfService={typeOfService} accessKey={accessKey} handleChange={handleChange} secretAccessKey={secretAccessKey} awsUrl={awsUrl}/>
<AwsDescription handleChange={handleChange} description={description} name={name}/>
<button>Submit</button>
</form>
</div>
Expand Down
39 changes: 39 additions & 0 deletions app/modals/AwsModal/AwsRegion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';

const AwsRegion = (props) => {
return (
<div>
<label htmlFor="region">
Region<span>*</span>
</label>
<select
id="aws-region"
name="region"
value={props.region}
onChange={e => props.handleChange(e)}
placeholder="AWS Region"
required
>
<option value="us-east-1">US East (N. Virginia) / us-east-1</option>
<option value="us-east-2">US East (Ohio) / us-east-2</option>
<option value="us-west-1">US West (N.California) / us-west-1</option>
<option value="us-west-2">US West (Oregon) / us-west-2</option>
<option value="ap-south-1">Asia Pacific (Mumbai) / ap-south-1</option>
<option value="ap-northeast-3">Asia Pacific (Osaka) / ap-northeast-3</option>
<option value="ap-northeast-2">Asia Pacific (Seoul) / ap-northeast-2</option>
<option value="ap-southeast-1">Asia Pacific (Singapore) / ap-southeast-1</option>
<option value="ap-southeast-2">Asia Pacific (Sydney) / ap-southeast-2</option>
<option value="ap-northeast-1">Asia Pacific (Tokyo) / ap-northeast-1</option>
<option value="ca-central-1">Canada (Central) / ca-central-1</option>
<option value="eu-central-1">Europe (Frankfurt) / eu-central-1</option>
<option value="eu-west-1">Europe (Ireland) / eu-west-1</option>
<option value="eu-west-2">Europe (London) / eu-west-2</option>
<option value="eu-west-3">Europe (Paris) / eu-west-3</option>
<option value="eu-north-1">Europe (Stockholm) / eu-north-1</option>
<option value="sa-east-1">South America (Sao Paulo) / sa-east-1</option>
</select>
</div>
)
}

export default AwsRegion;
Loading

0 comments on commit ac3ec98

Please sign in to comment.