Skip to content

Commit f559bd7

Browse files
amrita019amrita019
committed
Add 404 Page not found
1 parent a49a87f commit f559bd7

8 files changed

Lines changed: 316 additions & 16 deletions

File tree

‎client/src/App/App.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ 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 { PageNotFound } from "../_helpers/PageNotFound.js";
1113

1214
class App extends React.Component {
1315
constructor(props) {
@@ -32,6 +34,8 @@ class App extends React.Component {
3234
<Route path="/login" component={LoginPage} />
3335
<Route path="/home" component={HomePage} />
3436
<Route path="/signup" component={SignupPage} />
37+
<Route path="/virtualmachines" component={VirtualMachine} />
38+
<Route component={PageNotFound} />
3539
</Router>
3640
</div>
3741
);

‎client/src/CreateAzureServices/VirtualMachine.js‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
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 VirtualMachine 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: "Virtual machine name",
28+
name: "Virtual machine name",
29+
input_type: "text",
30+
required: true
31+
},
32+
{
33+
placeholder: "Region",
34+
name: "region",
35+
input_type: "dropdown",
36+
required: true,
37+
values: [
38+
{ value: "centralus", text: "Central US" },
39+
{ value: "northus", text: "northus" }
40+
]
41+
}
42+
]
43+
};
44+
45+
this.handleChange = this.handleChange.bind(this);
46+
this.handleServiceCreate = this.handleServiceCreate.bind(this);
47+
this.changeSelectedDashboardService = this.changeSelectedDashboardService.bind(
48+
this
49+
);
50+
}
51+
52+
submitForm(event) {
53+
const { fields, ...inputFields } = this.state;
54+
console.log(inputFields);
55+
event.preventDefault();
56+
}
57+
58+
_handleChange(event) {
59+
this.setState({
60+
[event.currentTarget.name]: event.currentTarget.value
61+
});
62+
}
63+
64+
openModal() {
65+
this.setState({ showModal: true });
66+
}
67+
closeModal() {
68+
this.setState({ showModal: false });
69+
}
70+
71+
handleServiceChange(serviceName) {
72+
this.setState({
73+
selectedService: serviceName
74+
});
75+
this.props.dispatch(userActions.getAll(serviceName));
76+
}
77+
78+
handleCreateModal() {
79+
this.setState({
80+
showModal: true
81+
});
82+
}
83+
84+
handleServiceCreate(event) {
85+
event.preventDefault();
86+
const { virtualMachine } = this.state;
87+
this.props.dispatch(userActions.createVM(virtualMachine));
88+
this.setState({ showModal: false });
89+
}
90+
91+
handleChange(event) {
92+
const { name, value } = event.target;
93+
const { virtualMachine } = this.state;
94+
this.setState({
95+
virtualMachine: {
96+
...virtualMachine,
97+
[name]: value
98+
}
99+
});
100+
}
101+
102+
handleDeleteService(name) {
103+
this.props.dispatch(userActions.delete(name));
104+
}
105+
106+
handleShowSideBar() {
107+
this.setState({
108+
showSideBar: !this.state.showSideBar
109+
});
110+
}
111+
112+
changeSelectedDashboardService(serviceName) {
113+
this.setState({
114+
selectedDashboardService: serviceName
115+
});
116+
}
117+
118+
render() {
119+
const {
120+
fields,
121+
selectedService,
122+
showModal,
123+
virtualMachine,
124+
showSideBar
125+
} = this.state;
126+
return (
127+
<div>
128+
<NavBar
129+
handleCreateModal={() => this.handleCreateModal()}
130+
handleShowSideBar={() => this.handleShowSideBar()}
131+
/>
132+
<div style={{ margin: 20 }}>
133+
<Modal open={showModal} id="test">
134+
<i class="close icon" onClick={() => this.closeModal()} />
135+
<div class="header">
136+
{/* <div class="ui tiny image">
137+
<img src={require("../media/azure.png")} />
138+
</div> */}
139+
Create
140+
</div>
141+
<div class="image content">
142+
<div class="description">
143+
<Form>
144+
<Form.Input
145+
fluid
146+
name="resourceGroupName"
147+
label="Resource group"
148+
placeholder="Resource group"
149+
onChange={this.handleChange}
150+
/>
151+
<Form.Input
152+
fluid
153+
name="vmName"
154+
label="Virtual machine name"
155+
placeholder="Virtual machine name"
156+
onChange={this.handleChange}
157+
/>
158+
<Form.Input
159+
fluid
160+
name="location"
161+
label="Region"
162+
placeholder="Region"
163+
onChange={this.handleChange}
164+
/>
165+
</Form>
166+
</div>
167+
</div>
168+
<div class="actions">
169+
<div
170+
class="ui positive right labeled icon button"
171+
onClick={this.handleServiceCreate}
172+
>
173+
Create Service
174+
<i class="checkmark icon" />
175+
</div>
176+
</div>
177+
</Modal>
178+
179+
{showSideBar && (
180+
<SideBar
181+
changeSelectedDashboardService={serviceName =>
182+
this.changeSelectedDashboardService(serviceName)
183+
}
184+
/>
185+
)}
186+
<div style={{ margin: 50 }}>
187+
<h1>Virtual Machine </h1>
188+
<Form onSubmit={this.submitForm}>
189+
{fields.map(form => {
190+
if (form.input_type === "text") {
191+
return (
192+
<InputTextField
193+
name={form.name}
194+
placeholder={form.placeholder}
195+
required={form.required}
196+
key={form.placeholder}
197+
_handleChange={this._handleChange}
198+
/>
199+
);
200+
}
201+
if (form.input_type === "dropdown") {
202+
return (
203+
<DropdownSelect
204+
name={form.name}
205+
placeholder={form.placeholder}
206+
required={form.required}
207+
val={form.values}
208+
key={form.placeholder}
209+
_handleChange={this._handleChange}
210+
/>
211+
);
212+
}
213+
})}
214+
<input type="submit" />
215+
</Form>
216+
</div>
217+
</div>
218+
</div>
219+
);
220+
}
221+
}
222+
223+
const mapStateToProps = state => {
224+
return {
225+
users: state.users
226+
};
227+
};
228+
229+
const connectedVirtualMachine = connect(mapStateToProps)(VirtualMachine);
230+
export { connectedVirtualMachine as VirtualMachine };

‎client/src/HomePage/HomePage.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ class HomePage extends React.Component {
4545
this.props.dispatch(userActions.getAll(this.state.selectedService));
4646
}
4747

48-
componentWillUnmount() {
49-
this.props.onRef(undefined);
50-
}
48+
// componentWillUnmount() {
49+
// this.props.onRef(undefined);
50+
// }
5151

5252
handleServiceChange(serviceName) {
5353
this.setState({

‎client/src/_components/NavBar.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
import React, { Component } from "react";
22
import "./NavBar.css";
3-
import HomePage from "../HomePage/HomePage.js";
4-
import {
5-
Button,
6-
Header,
7-
Icon,
8-
Image,
9-
Menu,
10-
Segment,
11-
Sidebar
12-
} from "semantic-ui-react";
133

144
class NavBar extends Component {
155
constructor(props) {

‎client/src/_components/SideBar.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from "react";
22
import "./SideBar.css";
3+
import { history } from "../_helpers/history.js";
34

45
class SideBar extends Component {
56
constructor(props) {
@@ -12,6 +13,7 @@ class SideBar extends Component {
1213
}
1314

1415
changeSelectedDashboardService(serviceName) {
16+
history.push("/virtualmachines");
1517
this.props.changeSelectedDashboardService(serviceName);
1618
}
1719

@@ -29,23 +31,23 @@ class SideBar extends Component {
2931
<a
3032
class="item"
3133
onClick={() =>
32-
this.changeSelectedDashboardService("virtualMachines")
34+
this.changeSelectedDashboardService("virtualmachines")
3335
}
3436
>
3537
Virtual Machines
3638
</a>
3739
<a
3840
class="item"
3941
onClick={() =>
40-
this.changeSelectedDashboardService("virtualNetworks")
42+
this.changeSelectedDashboardService("virtualnetworks")
4143
}
4244
>
4345
Virtual Networks
4446
</a>
4547
<a
4648
class="item"
4749
onClick={() =>
48-
this.changeSelectedDashboardService("loadBalancers")
50+
this.changeSelectedDashboardService("loadbalancers")
4951
}
5052
>
5153
Load Balancers

‎client/src/_components/_formcomponents/DropdownSelect.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
import { Form } from "semantic-ui-react";
3+
4+
function DropdownSelect({ name, placeholder, required, val, _handleChange }) {
5+
return (
6+
<div>
7+
{/* <label>{placeholder}</label>
8+
<select name={name} required={required} onChange={_handleChange}>
9+
<option value="">Select an option</option>
10+
{val.map(values => (
11+
<option value={values} key={values}>
12+
{values}
13+
</option>
14+
))}
15+
</select> */}
16+
<Form.Select
17+
label={name}
18+
placeholder={name}
19+
options={val}
20+
search
21+
required={required}
22+
autoComplete="off"
23+
/>
24+
</div>
25+
);
26+
}
27+
28+
export default DropdownSelect;

‎client/src/_components/_formcomponents/InputTextField.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { Component } from "react";
2+
import { Form } from "semantic-ui-react";
3+
4+
function InputTextField({ name, placeholder, required, _handleChange }) {
5+
return (
6+
<div>
7+
<Form.Input
8+
type="text"
9+
name={name}
10+
label={name}
11+
required={required}
12+
autoComplete="off"
13+
placeholder={placeholder}
14+
onChange={_handleChange}
15+
/>
16+
</div>
17+
);
18+
}
19+
20+
export default InputTextField;

‎client/src/_helpers/PageNotFound.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import { Icon } from "semantic-ui-react";
4+
import "../LoginPage/LoginPage.css";
5+
6+
class PageNotFound extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
}
10+
11+
render() {
12+
return (
13+
<div class="main">
14+
<div>
15+
<Icon name="search" color="blue" size="big" />
16+
<h1>404 Page Not Found!</h1>
17+
<Link to="/home" class="ui primary button">
18+
Go to Home
19+
</Link>
20+
</div>
21+
</div>
22+
);
23+
}
24+
}
25+
26+
export { PageNotFound };

0 commit comments

Comments
 (0)