Add location as field in db and display the same on dashboard

Design improvements

Author: amrita019

react-frontend/src/App/App.js

@@ -25,7 +25,7 @@ class App extends React.Component {
     return (
       <div>
         {alert.message && (
-          <div className={`alert ${alert.type}`}>{alert.message}</div>
+          <div className={`ui ${alert.type} message`}>{alert.message}</div>
         )}
         <Router history={history}>
           <PrivateRoute exact path="/" component={HomePage} />

react-frontend/src/HomePage/HomePage.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { userActions } from "../_actions/user.actions.js";
 import "./HomePage.css";
 import ServiceTable from "./ServiceTable";
+import { Loader } from "semantic-ui-react";
 
 class HomePage extends React.Component {
   constructor(props) {
@@ -21,8 +22,11 @@ class HomePage extends React.Component {
     this.props.dispatch(userActions.getAll(this.state.selectedService));
   }
 
-  handleDeleteUser(id) {
-    return e => this.props.dispatch(userActions.delete(id));
+  handleServiceChange(serviceName) {
+    this.setState({
+      selectedService: serviceName
+    });
+    this.props.dispatch(userActions.getAll(serviceName));
   }
 
   render() {
@@ -54,7 +58,7 @@ class HomePage extends React.Component {
         <div class="ui center aligned page grid" style={{ marginTop: 50 }}>
           <div
             class="three wide left floated column"
-            onClick={() => this.setState({ selectedService: "azure" })}
+            onClick={() => this.handleServiceChange("azure")}
           >
             <div
               className="serviceChooser"
@@ -76,7 +80,7 @@ class HomePage extends React.Component {
           </div>
           <div
             class="three wide column"
-            onClick={() => this.setState({ selectedService: "aws" })}
+            onClick={() => this.handleServiceChange("aws")}
           >
             <div
               className="serviceChooser"
@@ -98,7 +102,7 @@ class HomePage extends React.Component {
           </div>
           <div
             class="three wide right floated column"
-            onClick={() => this.setState({ selectedService: "gcp" })}
+            onClick={() => this.handleServiceChange("gcp")}
           >
             <div
               className="serviceChooser"
@@ -120,7 +124,11 @@ class HomePage extends React.Component {
           </div>
         </div>
         <div style={{ margin: 50 }}>
-          {this.props.users.loading && <p> Data is loading</p>}
+          {this.props.users.loading && (
+            <Loader active inline="centered">
+              Loading {selectedService} services...
+            </Loader>
+          )}
           {!this.props.users.loading && (
             <ServiceTable service={this.props.users.items} />
           )}

react-frontend/src/HomePage/ServiceTable.js

@@ -5,13 +5,14 @@ class ServiceTable extends Component {
   renderTableData() {
     if (this.props.service) {
       return this.props.service.map((service, index) => {
-        const { id, serviceid, name, type } = service; //destructuring
+        const { id, serviceid, name, type, location } = service; //destructuring
         return (
           <Table.Row key={id}>
             <Table.Cell>{id}</Table.Cell>
             <Table.Cell>{serviceid}</Table.Cell>
             <Table.Cell>{name}</Table.Cell>
             <Table.Cell>{type}</Table.Cell>
+            <Table.Cell>{location}</Table.Cell>
           </Table.Row>
         );
       });
@@ -32,10 +33,10 @@ class ServiceTable extends Component {
       <div>
         {this.props.service && (
           <Table id="users">
-            <Table.Body>
+            <Table.Header>
               <Table.Row>{this.renderTableHeader()}</Table.Row>
-              {this.renderTableData()}
-            </Table.Body>
+            </Table.Header>
+            <Table.Body>{this.renderTableData()}</Table.Body>
           </Table>
         )}
       </div>

react-frontend/src/_actions/user.actions.js

@@ -75,6 +75,7 @@ function getAll(serviceProvider) {
     userService.getAll(serviceProvider).then(res => {
       if (res.success) {
         dispatch(success(res.data));
+        dispatch(alertActions.clear());
       } else {
         dispatch(failure(res.message));
         dispatch(alertActions.error(res.message));

react-frontend/src/_reducers/alert.reducer.js

@@ -4,12 +4,12 @@ export function alert(state = {}, action) {
   switch (action.type) {
     case alertConstants.SUCCESS:
       return {
-        type: "alert-success",
+        type: "success",
         message: action.message
       };
     case alertConstants.ERROR:
       return {
-        type: "alert-danger",
+        type: "error",
         message: action.message
       };
     case alertConstants.CLEAR:

react-frontend/src/_reducers/authentication.reducer.js

@@ -11,13 +11,11 @@ export function authentication(state = initialState, action) {
         user: action.user
       };
     case userConstants.LOGIN_SUCCESS:
-      console.log("REDUCERS SUCCESS", action.user);
       return {
         loggedIn: true,
         user: action.user
       };
     case userConstants.LOGIN_FAILURE:
-      console.log("REDUCERS FAIL", action);
       return {};
     case userConstants.LOGOUT:
       return {};

react-frontend/src/_services/user.services.js

@@ -18,7 +18,6 @@ function login(username, password) {
     body: JSON.stringify({ username, password })
   };
 
-  console.log("USERSERVICE REQUESTOPTIONS", requestOptions);
   return fetch(`http://localhost:4000/login`, requestOptions)
     .then(handleResponse)
     .then(user => {

server/db.js

@@ -45,6 +45,7 @@ const createTableService = () => {
       t.string("serviceid").notNullable();
       t.string("name").notNullable();
       t.string("type").notNullable();
+      t.string("location").notNullable();
     })
     .then(console.log("Service Table created"));
 

server/routes/getservices.js

@@ -63,6 +63,18 @@ router.get("/home", jsonParser, function(req, response) {
         store.serviceList().then(res => response.json(res));
       }
     );
+  } else if (req.query.serviceProvider === "aws") {
+    res = {
+      success: false,
+      message: "AWS Services are Under development, Please try again later!"
+    };
+    response.json(res);
+  } else if (req.query.serviceProvider === "gcp") {
+    res = {
+      success: false,
+      message: "GCP Services are Under development, Please try again later!"
+    };
+    response.json(res);
   }
 });
 module.exports = router;

server/store.js

@@ -66,7 +66,8 @@ module.exports = {
       .insert({
         serviceId: serviceDetails.id,
         name: serviceDetails.name,
-        type: serviceDetails.type
+        type: serviceDetails.type,
+        location: serviceDetails.location
       })
       .then(console.log("Inserted"));