Skip to content

Commit ac3ec98

Browse files
sarhirisarhiri
authored
Merge pull request #10 from oslabs-beta/stephenfeature
modularized AwsModal, deleted unnecessary code in other modals
2 parents 72125a5 + 2c8157e commit ac3ec98

8 files changed

Lines changed: 310 additions & 209 deletions

File tree

‎app/modals/AddModal/AddModal.tsx‎

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -63,69 +63,7 @@ const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
6363
<form onSubmit={handleSubmit}>
6464
<p>Required*</p>
6565
<ServiceDBType typeOfService={typeOfService} handleChange={handleChange} database={database}/>
66-
{/* <div>
67-
<label htmlFor="serv-type">
68-
Type of Service<span>*</span>
69-
</label>
70-
<select
71-
id="serv-type"
72-
name="typeOfService"
73-
value={typeOfService}
74-
onChange={e => handleChange(e)}
75-
>
76-
<option value="Docker">Docker</option>
77-
<option value="gRPC">gRPC</option>
78-
<option value="Kubernetes">Kubernetes</option>
79-
<option value="Microservices">Microservices</option>
80-
</select>
81-
</div>
82-
<div>
83-
<label htmlFor="db-type">
84-
Type of Database<span>*</span>
85-
</label>
86-
<select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
87-
<option value="SQL">SQL</option>
88-
<option value="MongoDB">MongoDB</option>
89-
</select>
90-
</div> */}
91-
<ServicesDescription URI={URI} name={name} description={description}/>
92-
{/* <div>
93-
<label htmlFor="db-uri">
94-
URI<span>*</span>
95-
</label>
96-
<input
97-
id="db-uri"
98-
name="URI"
99-
value={URI}
100-
onChange={e => handleChange(e)}
101-
placeholder="Database URI"
102-
required
103-
/>
104-
</div>
105-
<div>
106-
<label htmlFor="db-name">
107-
Name<span>*</span>
108-
</label>
109-
<input
110-
id="db-name"
111-
type="text"
112-
name="name"
113-
value={name}
114-
onChange={e => handleChange(e)}
115-
placeholder="Add a name for your new service"
116-
required
117-
/>
118-
</div>
119-
<div>
120-
<label htmlFor="db-desc">Description</label>
121-
<textarea
122-
id="db-desc"
123-
name="description"
124-
value={description}
125-
onChange={e => handleChange(e)}
126-
placeholder="Add a short description"
127-
/>
128-
</div> */}
66+
<ServicesDescription URI={URI} name={name} description={description} handleChange={handleChange}/>
12967
<button>Submit</button>
13068
</form>
13169
</div>

‎app/modals/AwsModal/AwsDescription.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
3+
const AwsDescription = (props) => {
4+
return (
5+
<>
6+
<div>
7+
<label htmlFor="aws-name">
8+
Name<span>*</span>
9+
</label>
10+
<input
11+
id="aws-name"
12+
type="text"
13+
name="name"
14+
value={props.name}
15+
onChange={e => props.handleChange(e)}
16+
placeholder="Add a name for your new service"
17+
required
18+
/>
19+
</div>
20+
<div>
21+
<label htmlFor="db-desc">Description</label>
22+
<textarea
23+
id="db-desc"
24+
name="description"
25+
value={props.description}
26+
onChange={e => props.handleChange(e)}
27+
placeholder="Add a short description"
28+
/>
29+
</div>
30+
</>
31+
)
32+
}
33+
34+
export default AwsDescription;

‎app/modals/AwsModal/AwsKeyUrl.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
3+
const AwsKeyUrl = (props) => {
4+
return (
5+
<>
6+
<div>
7+
<label htmlFor="aws-access-key">{(props.typeOfService === 'AWS/EKS') ? 'Bearer Token' : 'Access Key'} <span>*</span>
8+
</label>
9+
<input
10+
id="aws-access-key"
11+
type="password"
12+
name="accessKey"
13+
value={props.accessKey}
14+
onChange={e => props.handleChange(e)}
15+
placeholder={props.typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
16+
required
17+
/>
18+
</div>
19+
{(props.typeOfService !== 'AWS/EKS') && (
20+
<div>
21+
<label htmlFor="aws-secret-access-key">
22+
Secret Access Key<span>*</span>
23+
</label>
24+
<input
25+
id="aws-secret-access-key"
26+
type="password"
27+
name="secretAccessKey"
28+
value={props.secretAccessKey}
29+
onChange={e => props.handleChange(e)}
30+
placeholder="AWS Secret Access Key"
31+
required
32+
/>
33+
</div>
34+
)}
35+
<div>
36+
<label htmlFor="aws-url">
37+
{(props.typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
38+
</label>
39+
<input
40+
id="aws-url"
41+
type="string"
42+
name="awsUrl"
43+
value={props.awsUrl}
44+
onChange={e => props.handleChange(e)}
45+
placeholder={props.typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
46+
/>
47+
</div>
48+
</>
49+
)
50+
};
51+
52+
export default AwsKeyUrl;

‎app/modals/AwsModal/AwsModal.tsx‎

Lines changed: 11 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import { DashboardContext } from '../../context/DashboardContext';
44
import './AwsModal.scss';
55

66
import { TModalSetter } from '../../components/Occupied/types/Occupied';
7+
import AwsServiceInstance from './AwsServiceInstance';
8+
import AwsRegion from './AwsRegion';
9+
import AwsKeyUrl from './AwsKeyUrl';
10+
import AwsDescription from './AwsDescription';
711

812
interface AwsFields {
913
typeOfService: string;
@@ -20,9 +24,9 @@ interface IDashboard {
2024
addAwsApp: (fields: AwsFields) => void;
2125
}
2226

23-
interface AddModalProps {
24-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
25-
}
27+
// interface AddModalProps {
28+
// setOpen: React.Dispatch<React.SetStateAction<boolean>>;
29+
// }
2630

2731
type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
2832
type FormElement = React.FormEvent<HTMLFormElement>;
@@ -69,146 +73,10 @@ const AwsModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
6973
</div>
7074
<form onSubmit={handleSubmit}>
7175
<p>Required*</p>
72-
<div>
73-
<label htmlFor="serv-type">Type of Service</label>
74-
<select
75-
id="serv-type"
76-
name="typeOfService"
77-
value={typeOfService}
78-
onChange={e => handleChange(e)}
79-
>
80-
<option value="AWS/EC2">Elastic Compute Cloud (EC2)</option>
81-
<option value="AWS/ECS">Elastic Container Service (ECS)</option>
82-
<option value="AWS/EKS">Elastic Kubernetes Service (EKS)</option>
83-
</select>
84-
</div>
85-
{typeOfService === 'AWS/EC2' && (
86-
<div>
87-
<label htmlFor="instance">
88-
AWS Instance ID<span>*</span>
89-
</label>
90-
<input
91-
id="aws-instance"
92-
name="instance"
93-
value={instance}
94-
onChange={e => handleChange(e)}
95-
placeholder="AWS Instance ID"
96-
required
97-
/>
98-
</div>
99-
)}
100-
<div>
101-
<label htmlFor="region">
102-
Region<span>*</span>
103-
</label>
104-
<select
105-
id="aws-region"
106-
name="region"
107-
value={region}
108-
onChange={e => handleChange(e)}
109-
placeholder="AWS Region"
110-
required
111-
>
112-
<option value="us-east-1">US East (N. Virginia) / us-east-1</option>
113-
<option value="us-east-2">US East (Ohio) / us-east-2</option>
114-
<option value="us-west-1">US West (N.California) / us-west-1</option>
115-
<option value="us-west-2">US West (Oregon) / us-west-2</option>
116-
<option value="ap-south-1">Asia Pacific (Mumbai) / ap-south-1</option>
117-
<option value="ap-northeast-3">Asia Pacific (Osaka) / ap-northeast-3</option>
118-
<option value="ap-northeast-2">Asia Pacific (Seoul) / ap-northeast-2</option>
119-
<option value="ap-southeast-1">Asia Pacific (Singapore) / ap-southeast-1</option>
120-
<option value="ap-southeast-2">Asia Pacific (Sydney) / ap-southeast-2</option>
121-
<option value="ap-northeast-1">Asia Pacific (Tokyo) / ap-northeast-1</option>
122-
<option value="ca-central-1">Canada (Central) / ca-central-1</option>
123-
<option value="eu-central-1">Europe (Frankfurt) / eu-central-1</option>
124-
<option value="eu-west-1">Europe (Ireland) / eu-west-1</option>
125-
<option value="eu-west-2">Europe (London) / eu-west-2</option>
126-
<option value="eu-west-3">Europe (Paris) / eu-west-3</option>
127-
<option value="eu-north-1">Europe (Stockholm) / eu-north-1</option>
128-
<option value="sa-east-1">South America (Sao Paulo) / sa-east-1</option>
129-
</select>
130-
</div>
131-
<div>
132-
<label htmlFor="aws-access-key">{(typeOfService === 'AWS/EKS') ? 'Bearer Token' : 'Access Key'} <span>*</span>
133-
</label>
134-
<input
135-
id="aws-access-key"
136-
type="password"
137-
name="accessKey"
138-
value={accessKey}
139-
onChange={e => handleChange(e)}
140-
placeholder={typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
141-
required
142-
/>
143-
</div>
144-
{(typeOfService !== 'AWS/EKS') && (
145-
<div>
146-
<label htmlFor="aws-secret-access-key">
147-
Secret Access Key<span>*</span>
148-
</label>
149-
<input
150-
id="aws-secret-access-key"
151-
type="password"
152-
name="secretAccessKey"
153-
value={secretAccessKey}
154-
onChange={e => handleChange(e)}
155-
placeholder="AWS Secret Access Key"
156-
required
157-
/>
158-
</div>
159-
)}
160-
{/* <div>
161-
<label htmlFor="aws-secret-access-key">
162-
Secret Access Key<span>*</span>
163-
</label>
164-
<input
165-
id="aws-secret-access-key"
166-
type="password"
167-
name="secretAccessKey"
168-
value={secretAccessKey}
169-
onChange={e => handleChange(e)}
170-
placeholder="AWS Secret Access Key"
171-
required
172-
/>
173-
</div> */}
174-
175-
<div>
176-
<label htmlFor="aws-url">
177-
{(typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
178-
</label>
179-
<input
180-
id="aws-url"
181-
type="string"
182-
name="awsUrl"
183-
value={awsUrl}
184-
onChange={e => handleChange(e)}
185-
placeholder={typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
186-
/>
187-
</div>
188-
<div>
189-
<label htmlFor="aws-name">
190-
Name<span>*</span>
191-
</label>
192-
<input
193-
id="aws-name"
194-
type="text"
195-
name="name"
196-
value={name}
197-
onChange={e => handleChange(e)}
198-
placeholder="Add a name for your new service"
199-
required
200-
/>
201-
</div>
202-
<div>
203-
<label htmlFor="db-desc">Description</label>
204-
<textarea
205-
id="db-desc"
206-
name="description"
207-
value={description}
208-
onChange={e => handleChange(e)}
209-
placeholder="Add a short description"
210-
/>
211-
</div>
76+
<AwsServiceInstance typeOfService={typeOfService} handleChange={handleChange} instance={instance} />
77+
<AwsRegion region={region} handleChange={handleChange} />
78+
<AwsKeyUrl typeOfService={typeOfService} accessKey={accessKey} handleChange={handleChange} secretAccessKey={secretAccessKey} awsUrl={awsUrl}/>
79+
<AwsDescription handleChange={handleChange} description={description} name={name}/>
21280
<button>Submit</button>
21381
</form>
21482
</div>

‎app/modals/AwsModal/AwsRegion.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
3+
const AwsRegion = (props) => {
4+
return (
5+
<div>
6+
<label htmlFor="region">
7+
Region<span>*</span>
8+
</label>
9+
<select
10+
id="aws-region"
11+
name="region"
12+
value={props.region}
13+
onChange={e => props.handleChange(e)}
14+
placeholder="AWS Region"
15+
required
16+
>
17+
<option value="us-east-1">US East (N. Virginia) / us-east-1</option>
18+
<option value="us-east-2">US East (Ohio) / us-east-2</option>
19+
<option value="us-west-1">US West (N.California) / us-west-1</option>
20+
<option value="us-west-2">US West (Oregon) / us-west-2</option>
21+
<option value="ap-south-1">Asia Pacific (Mumbai) / ap-south-1</option>
22+
<option value="ap-northeast-3">Asia Pacific (Osaka) / ap-northeast-3</option>
23+
<option value="ap-northeast-2">Asia Pacific (Seoul) / ap-northeast-2</option>
24+
<option value="ap-southeast-1">Asia Pacific (Singapore) / ap-southeast-1</option>
25+
<option value="ap-southeast-2">Asia Pacific (Sydney) / ap-southeast-2</option>
26+
<option value="ap-northeast-1">Asia Pacific (Tokyo) / ap-northeast-1</option>
27+
<option value="ca-central-1">Canada (Central) / ca-central-1</option>
28+
<option value="eu-central-1">Europe (Frankfurt) / eu-central-1</option>
29+
<option value="eu-west-1">Europe (Ireland) / eu-west-1</option>
30+
<option value="eu-west-2">Europe (London) / eu-west-2</option>
31+
<option value="eu-west-3">Europe (Paris) / eu-west-3</option>
32+
<option value="eu-north-1">Europe (Stockholm) / eu-north-1</option>
33+
<option value="sa-east-1">South America (Sao Paulo) / sa-east-1</option>
34+
</select>
35+
</div>
36+
)
37+
}
38+
39+
export default AwsRegion;

0 commit comments

Comments
 (0)