Skip to content

Commit 9bae59f

Browse files
amrita019amrita019
committed
Add screen to create Virtual Machine, Virtual Network and Database
1 parent f559bd7 commit 9bae59f

17 files changed

Lines changed: 920 additions & 206 deletions

File tree

‎client/src/App/App.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Router, Route } from "react-router-dom";
2+
import { Router, Route, Switch } from "react-router-dom";
33
import { connect } from "react-redux";
44

55
import { history } from "../_helpers/history.js";
@@ -9,6 +9,8 @@ import { HomePage } from "../HomePage/HomePage.js";
99
import { LoginPage } from "../LoginPage/LoginPage.js";
1010
import { SignupPage } from "../SignupPage/SignupPage.js";
1111
import { VirtualMachine } from "../CreateAzureServices/VirtualMachine.js";
12+
import { VirtualNetwork } from "../CreateAzureServices/VirtualNetwork.js";
13+
import { Database } from "../CreateAzureServices/Database.js";
1214
import { PageNotFound } from "../_helpers/PageNotFound.js";
1315

1416
class App extends React.Component {
@@ -30,12 +32,16 @@ class App extends React.Component {
3032
<div className={`ui ${alert.type} message`}>{alert.message}</div>
3133
)}
3234
<Router history={history}>
33-
<PrivateRoute exact path="/" component={HomePage} />
34-
<Route path="/login" component={LoginPage} />
35-
<Route path="/home" component={HomePage} />
36-
<Route path="/signup" component={SignupPage} />
37-
<Route path="/virtualmachines" component={VirtualMachine} />
38-
<Route component={PageNotFound} />
35+
<Switch>
36+
<PrivateRoute exact path="/" component={HomePage} />
37+
<Route path="/login" component={LoginPage} />
38+
<Route path="/home" component={HomePage} />
39+
<Route path="/signup" component={SignupPage} />
40+
<Route path="/virtualmachines" component={VirtualMachine} />
41+
<Route path="/virtualnetworks" component={VirtualNetwork} />
42+
<Route path="/database" component={Database} />
43+
<Route component={PageNotFound} />
44+
</Switch>
3945
</Router>
4046
</div>
4147
);

‎client/src/CreateAzureServices/Database.js‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import { connect } from "react-redux";
4+
5+
import { userActions } from "../_actions/user.actions.js";
6+
// import "./HomePage.css";
7+
// import ServiceTable from "./ServiceTable";
8+
import NavBar from "../_components/NavBar";
9+
import SideBar from "../_components/SideBar";
10+
import { Loader, Modal, Form } from "semantic-ui-react";
11+
import InputTextField from "../_components/_formcomponents/InputTextField";
12+
import DropdownSelect from "../_components/_formcomponents/DropdownSelect";
13+
14+
class Database extends React.Component {
15+
constructor(props) {
16+
super(props);
17+
18+
this.state = {
19+
fields: [
20+
{
21+
placeholder: "Resource group",
22+
name: "Resource group",
23+
input_type: "text",
24+
required: true
25+
},
26+
{
27+
placeholder: "Server name",
28+
name: "Server name",
29+
input_type: "text",
30+
required: true
31+
},
32+
{
33+
placeholder: "Database name",
34+
name: "Database name",
35+
input_type: "text",
36+
required: true
37+
},
38+
{
39+
placeholder: "Location",
40+
name: "Location",
41+
input_type: "dropdown",
42+
required: true,
43+
values: [
44+
{ value: "centralus", text: "Central US" },
45+
{ value: "northus", text: "North US" }
46+
]
47+
},
48+
{
49+
placeholder: "Administrator Login",
50+
name: "Administrator Login",
51+
input_type: "text",
52+
required: true
53+
},
54+
{
55+
placeholder: "Administrator Password",
56+
name: "Administrator Password",
57+
input_type: "text",
58+
required: true
59+
},
60+
{
61+
placeholder: "Ex: 1.0",
62+
name: "Version",
63+
input_type: "text",
64+
required: true
65+
}
66+
]
67+
};
68+
69+
this._handleChange = this._handleChange.bind(this);
70+
this.submitForm = this.submitForm.bind(this);
71+
this.changeSelectedDashboardService = this.changeSelectedDashboardService.bind(
72+
this
73+
);
74+
}
75+
76+
componentWillMount() {
77+
this.state.provider = localStorage.getItem("currentProvider");
78+
}
79+
80+
submitForm(event) {
81+
const { fields, ...inputFields } = this.state;
82+
event.preventDefault();
83+
this.props.dispatch(userActions.createDatabase(inputFields));
84+
}
85+
86+
_handleChange(event, { name, value }) {
87+
this.setState({
88+
[name]: value
89+
});
90+
}
91+
92+
handleServiceCreate(event) {
93+
this.setState({ showModal: false });
94+
}
95+
96+
handleShowSideBar() {
97+
this.setState({
98+
showSideBar: !this.state.showSideBar
99+
});
100+
}
101+
102+
changeSelectedDashboardService(serviceName) {
103+
this.setState({
104+
selectedDashboardService: serviceName
105+
});
106+
}
107+
108+
render() {
109+
const {
110+
fields,
111+
selectedService,
112+
showModal,
113+
virtualMachine,
114+
showSideBar,
115+
provider
116+
} = this.state;
117+
return (
118+
<div>
119+
<NavBar
120+
handleCreateModal={() => this.handleCreateModal()}
121+
handleShowSideBar={() => this.handleShowSideBar()}
122+
/>
123+
<div style={{ margin: 20 }}>
124+
{showSideBar && (
125+
<SideBar
126+
changeSelectedDashboardService={serviceName =>
127+
this.changeSelectedDashboardService(serviceName)
128+
}
129+
/>
130+
)}
131+
<div
132+
style={{
133+
margin: 50,
134+
width: "50%",
135+
marginLeft: showSideBar ? 250 : 0
136+
}}
137+
>
138+
<h1> Database </h1>
139+
{provider === "azure" ? (
140+
<Form onSubmit={this.submitForm}>
141+
{fields.map(form => {
142+
if (form.input_type === "text") {
143+
return (
144+
<InputTextField
145+
name={form.name}
146+
placeholder={form.placeholder}
147+
required={form.required}
148+
key={form.placeholder}
149+
_handleChange={this._handleChange}
150+
/>
151+
);
152+
}
153+
if (form.input_type === "dropdown") {
154+
return (
155+
<DropdownSelect
156+
name={form.name}
157+
placeholder={form.placeholder}
158+
required={form.required}
159+
val={form.values}
160+
key={form.placeholder}
161+
_handleChange={this._handleChange}
162+
/>
163+
);
164+
}
165+
})}
166+
<div
167+
class="actions"
168+
style={{
169+
float: "right"
170+
}}
171+
>
172+
<div
173+
style={{ marginTop: "10px" }}
174+
class="ui positive right labeled icon button"
175+
onClick={this.submitForm}
176+
>
177+
Create
178+
<i class="checkmark icon" />
179+
</div>
180+
</div>
181+
</Form>
182+
) : (
183+
<div> {provider} is under development</div>
184+
)}
185+
</div>
186+
</div>
187+
</div>
188+
);
189+
}
190+
}
191+
192+
const mapStateToProps = state => {
193+
return {
194+
users: state.users
195+
};
196+
};
197+
198+
const connectedDatabase = connect(mapStateToProps)(Database);
199+
export { connectedDatabase as Database };

0 commit comments

Comments
 (0)