Skip to content

Commit b02dc0f

Browse files
amrita019amrita019
committed
Add Sidebar in home screen
1 parent 3fdd9ad commit b02dc0f

15 files changed

Lines changed: 349 additions & 62 deletions

File tree

‎client/src/HomePage/HomePage.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,9 @@
3434
font-size: 12px;
3535
font-weight: bold;
3636
}
37+
.ui.sidebar.vertical.left.menu {
38+
position: fixed;
39+
top: 65px;
40+
height: calc(100vh - 65px) !important;
41+
box-shadow: none;
42+
}

‎client/src/HomePage/HomePage.js‎

Lines changed: 114 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import "./HomePage.css";
77
import ServiceTable from "./ServiceTable";
88
import NavBar from "./NavBar";
99
import { Loader, Modal, Form } from "semantic-ui-react";
10-
import $ from "jquery";
1110

1211
class HomePage extends React.Component {
1312
constructor(props) {
@@ -16,9 +15,23 @@ class HomePage extends React.Component {
1615
this.state = {
1716
selectedService: "azure",
1817
user: "",
19-
showModal: false
18+
showModal: false,
19+
showSideBar: true,
20+
selectedDashboardService: "",
21+
virtualMachine: {
22+
resourceGroupName: "",
23+
vmName: "",
24+
location: ""
25+
}
2026
};
27+
28+
this.handleChange = this.handleChange.bind(this);
29+
this.handleServiceCreate = this.handleServiceCreate.bind(this);
30+
this.changeSelectedDashboardService = this.changeSelectedDashboardService.bind(
31+
this
32+
);
2133
}
34+
2235
openModal() {
2336
this.setState({ showModal: true });
2437
}
@@ -48,11 +61,53 @@ class HomePage extends React.Component {
4861
});
4962
}
5063

64+
handleServiceCreate(event) {
65+
event.preventDefault();
66+
const { virtualMachine } = this.state;
67+
this.props.dispatch(userActions.createVM(virtualMachine));
68+
this.setState({ showModal: false });
69+
}
70+
71+
handleChange(event) {
72+
const { name, value } = event.target;
73+
const { virtualMachine } = this.state;
74+
this.setState({
75+
virtualMachine: {
76+
...virtualMachine,
77+
[name]: value
78+
}
79+
});
80+
}
81+
82+
handleDeleteService(name) {
83+
this.props.dispatch(userActions.delete(name));
84+
}
85+
86+
handleShowSideBar() {
87+
this.setState({
88+
showSideBar: !this.state.showSideBar
89+
});
90+
}
91+
92+
changeSelectedDashboardService(serviceName) {
93+
this.setState({
94+
selectedDashboardService: serviceName
95+
});
96+
}
97+
5198
render() {
52-
const { selectedService, showModal } = this.state;
99+
const {
100+
selectedService,
101+
showModal,
102+
virtualMachine,
103+
showSideBar
104+
} = this.state;
53105
return (
54106
<div>
55-
<NavBar handleCreateModal={() => this.handleCreateModal()} />
107+
<NavBar
108+
handleCreateModal={() => this.handleCreateModal()}
109+
handleShowSideBar={() => this.handleShowSideBar()}
110+
/>
56111
<div style={{ margin: 20 }}>
57112
<Modal open={showModal} id="test">
58113
<i class="close icon" onClick={() => this.closeModal()} />
@@ -67,26 +122,75 @@ class HomePage extends React.Component {
67122
<Form>
68123
<Form.Input
69124
fluid
125+
name="resourceGroupName"
70126
label="Resource group"
71127
placeholder="Resource group"
128+
onChange={this.handleChange}
72129
/>
73130
<Form.Input
74131
fluid
132+
name="vmName"
75133
label="Virtual machine name"
76134
placeholder="Virtual machine name"
135+
onChange={this.handleChange}
136+
/>
137+
<Form.Input
138+
fluid
139+
name="location"
140+
label="Region"
141+
placeholder="Region"
142+
onChange={this.handleChange}
77143
/>
78-
<Form.Input fluid label="Region" placeholder="Region" />
79144
</Form>
80145
</div>
81146
</div>
82147
<div class="actions">
83-
<div class="ui positive right labeled icon button">
148+
<div
149+
class="ui positive right labeled icon button"
150+
onClick={this.handleServiceCreate}
151+
>
84152
Create Service
85153
<i class="checkmark icon" />
86154
</div>
87155
</div>
88156
</Modal>
89157

158+
{showSideBar && (
159+
<div
160+
class="ui sidebar vertical left menu overlay visible"
161+
display="none"
162+
>
163+
<div class="ui accordion">
164+
<a class="item">
165+
<b>Home</b>
166+
</a>
167+
<a
168+
class="item"
169+
onClick={() =>
170+
this.changeSelectedDashboardService("virtualMachines")
171+
}
172+
>
173+
Virtual Machines
174+
</a>
175+
<a
176+
class="item"
177+
onClick={() =>
178+
this.changeSelectedDashboardService("virtualNetworks")
179+
}
180+
>
181+
Virtual Networks
182+
</a>
183+
<a
184+
class="item"
185+
onClick={() =>
186+
this.changeSelectedDashboardService("loadBalancers")
187+
}
188+
>
189+
Load Balancers
190+
</a>
191+
</div>
192+
</div>
193+
)}
90194
<div class="ui center aligned page grid" />
91195
<div class="ui center aligned page grid" style={{ marginTop: 50 }}>
92196
<div
@@ -163,7 +267,10 @@ class HomePage extends React.Component {
163267
</Loader>
164268
)}
165269
{!this.props.users.loading && (
166-
<ServiceTable service={this.props.users.items} />
270+
<ServiceTable
271+
service={this.props.users.items}
272+
handleDeleteService={name => this.handleDeleteService(name)}
273+
/>
167274
)}
168275
</div>
169276
</div>

‎client/src/HomePage/NavBar.js‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,57 @@
11
import React, { Component } from "react";
22
import "./NavBar.css";
33
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";
413

514
class NavBar extends Component {
615
constructor(props) {
716
super(props);
817
// this._child = React.createRef();
18+
this.state = { visible: true };
19+
this.handleShowSideBar = this.handleShowSideBar.bind(this);
920
}
1021

1122
onCreateClick() {
1223
this.props.handleCreateModal();
1324
}
1425

26+
handleShowSideBar() {
27+
this.props.handleShowSideBar();
28+
}
29+
1530
render() {
1631
return (
17-
<div class="pusher">
18-
<div class="ui menu asd borderless">
19-
<a class="item openbtn">{/* <i class="icon content" /> */}</a>
20-
<img src={require("../media/nodecloudlogo.png")} class="nav-logo" />
21-
<a class="item"> Node Cloud</a>
22-
<div class="right menu">
23-
<div class="ui dropdown item">
24-
Options <i class="dropdown icon" />
25-
<div class="menu">
26-
<a class="item">Help</a>
27-
<a class="item">Logout</a>
32+
<div>
33+
<div class="pusher">
34+
<div class="ui menu asd borderless">
35+
<a class="item openbtn" onClick={this.handleShowSideBar.bind(this)}>
36+
<i class="icon content" />
37+
</a>
38+
<img src={require("../media/nodecloudlogo.png")} class="nav-logo" />
39+
<a class="item"> Node Cloud</a>
40+
<div class="right menu">
41+
<div class="ui dropdown item">
42+
Options <i class="dropdown icon" />
43+
<div class="menu">
44+
<a class="item">Help</a>
45+
<a class="item">Logout</a>
46+
</div>
2847
</div>
29-
</div>
30-
<div class="item">
31-
<div
32-
class="ui primary button"
33-
onClick={() => this.onCreateClick()}
34-
>
35-
Create
48+
<div class="item">
49+
<div
50+
class="ui primary button"
51+
onClick={() => this.onCreateClick()}
52+
>
53+
Create
54+
</div>
3655
</div>
3756
</div>
3857
</div>

‎client/src/HomePage/ServiceTable.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ class ServiceTable extends Component {
1313
<Table.Cell>{name}</Table.Cell>
1414
<Table.Cell>{type}</Table.Cell>
1515
<Table.Cell>{location}</Table.Cell>
16+
<Table.Cell onClick={() => this.onDelete(name)}>
17+
<i class="trash alternate icon" />
18+
</Table.Cell>
1619
</Table.Row>
1720
);
1821
});
@@ -28,6 +31,10 @@ class ServiceTable extends Component {
2831
});
2932
}
3033

34+
onDelete(name) {
35+
this.props.handleDeleteService(name);
36+
}
37+
3138
render() {
3239
return (
3340
<div>

‎client/src/_actions/user.actions.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const userActions = {
88
logout,
99
register,
1010
getAll,
11+
createVM,
1112
delete: _delete
1213
};
1314

@@ -94,6 +95,31 @@ function getAll(serviceProvider) {
9495
}
9596
}
9697

98+
function createVM(params) {
99+
return dispatch => {
100+
dispatch(request(params));
101+
userService.createVM(params).then(res => {
102+
if (res.success) {
103+
dispatch(success(res.data));
104+
dispatch(alertActions.success(res.message));
105+
} else {
106+
dispatch(failure(res.message));
107+
dispatch(alertActions.error(res.message));
108+
}
109+
});
110+
};
111+
112+
function request(params) {
113+
return { type: userConstants.CREATE_VM_REQUEST, params };
114+
}
115+
function success(response) {
116+
return { type: userConstants.CREATE_VM_SUCCESS, response };
117+
}
118+
function failure(error) {
119+
return { type: userConstants.CREATE_VM_FAILURE, error };
120+
}
121+
}
122+
97123
// prefixed function name with underscore because delete is a reserved word in javascript
98124
function _delete(id) {
99125
return dispatch => {
@@ -102,6 +128,7 @@ function _delete(id) {
102128
userService.delete(id).then(
103129
user => {
104130
dispatch(success(id));
131+
dispatch(alertActions.success(user.message));
105132
},
106133
error => {
107134
dispatch(failure(id, error));

‎client/src/_constants/user.constants.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,9 @@ export const userConstants = {
1616

1717
DELETE_REQUEST: "USERS_DELETE_REQUEST",
1818
DELETE_SUCCESS: "USERS_DELETE_SUCCESS",
19-
DELETE_FAILURE: "USERS_DELETE_FAILURE"
19+
DELETE_FAILURE: "USERS_DELETE_FAILURE",
20+
21+
CREATE_VM_REQUEST: "USERS_CREATE_VM_REQUEST",
22+
CREATE_VM_SUCCESS: "USERS_CREATE_VM_SUCCESS",
23+
CREATE_VM_FAILURE: "USERS_CREATE_VM_FAILURE"
2024
};

‎client/src/_helpers/urls.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@ export const Urls = {
22
BASE_URL: "http://localhost:4000/",
33
SUB_URL_LOGIN: "login",
44
SUB_URL_SIGNUP: "signup",
5-
SUB_URL_HOME: "home"
5+
SUB_URL_HOME: "home",
6+
SUB_URL_CREATE_VM: "create/azure/virtualmachine",
7+
SUB_URL_DELETE: "delete"
68
};

0 commit comments

Comments
 (0)