Skip to content

Commit a179daf

Browse files
rajikaimalrajikaimal
authored
Merge pull request #4 from amrita019/create-azure-services
Fixes #3 : Options to create azure services
2 parents 3fdd9ad + 47082f3 commit a179daf

27 files changed

Lines changed: 1320 additions & 159 deletions

‎client/src/App/App.js‎

Lines changed: 15 additions & 5 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";
@@ -8,6 +8,10 @@ import { PrivateRoute } from "../_components/PrivateRoute.js";
88
import { HomePage } from "../HomePage/HomePage.js";
99
import { LoginPage } from "../LoginPage/LoginPage.js";
1010
import { SignupPage } from "../SignupPage/SignupPage.js";
11+
import { VirtualMachine } from "../CreateAzureServices/VirtualMachine.js";
12+
import { VirtualNetwork } from "../CreateAzureServices/VirtualNetwork.js";
13+
import { Database } from "../CreateAzureServices/Database.js";
14+
import { PageNotFound } from "../_helpers/PageNotFound.js";
1115

1216
class App extends React.Component {
1317
constructor(props) {
@@ -28,10 +32,16 @@ class App extends React.Component {
2832
<div className={`ui ${alert.type} message`}>{alert.message}</div>
2933
)}
3034
<Router history={history}>
31-
<PrivateRoute exact path="/" component={HomePage} />
32-
<Route path="/login" component={LoginPage} />
33-
<Route path="/home" component={HomePage} />
34-
<Route path="/signup" component={SignupPage} />
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>
3545
</Router>
3646
</div>
3747
);

‎client/src/CreateAzureServices/Database.js‎

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

‎client/src/CreateAzureServices/VirtualMachine.js‎

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

0 commit comments

Comments
 (0)