From 5d97e1f32e71db2d554780431432a2fca6e15240 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Tue, 23 Jul 2019 17:16:50 +0200 Subject: [PATCH] started with adaptions for new package versions and new Go backend API --- package-lock.json | 8 +++++ package.json | 1 + src/api/rest-api.js | 11 +++---- src/components/dialogs/edit-simulator.js | 10 +++---- .../dialogs/import-simulation-model.js | 2 +- src/components/dialogs/new-user.js | 11 +++++-- src/components/header-menu.js | 5 ++-- src/components/header.js | 17 +++++++---- src/components/home.js | 24 +++++++++++---- src/components/login-form.js | 14 ++++----- src/components/menu-sidebar.js | 2 +- src/components/table-column.js | 5 +++- src/components/table.js | 16 ++++++---- src/containers/app.js | 20 +++++++++---- src/containers/login.js | 8 +++-- src/containers/select-simulator.js | 4 +-- src/containers/simulation.js | 4 +-- src/containers/simulators.js | 30 +++++++++++-------- src/containers/users.js | 2 +- src/data-managers/rest-data-manager.js | 4 +-- src/data-managers/simulators-data-manager.js | 2 +- src/data-managers/users-data-manager.js | 29 +++++++++--------- src/stores/array-store.js | 2 +- src/stores/simulator-store.js | 5 ++-- src/stores/user-store.js | 10 +++---- 25 files changed, 154 insertions(+), 92 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ed2120..dfcc0c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10920,6 +10920,14 @@ "react-display-name": "^0.2.0" } }, + "react-grid-system": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/react-grid-system/-/react-grid-system-4.4.10.tgz", + "integrity": "sha512-ZSmQ+284QOYqDKkb5kbaFUWsuczLMQmlkAYNVv2UorG1z177UxQPYcCwmzKXpuGascksImuLpitpMpnn0UacXg==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", diff --git a/package.json b/package.json index 909ec50..16782d4 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-dnd-html5-backend": "^9.3.2", "react-dom": "^16.8.6", "react-fullscreenable": "^2.5.1-0", + "react-grid-system": "^4.4.10", "react-json-view": "^1.19.1", "react-notification-system": "^0.2.17", "react-rnd": "^10.0.0", diff --git a/src/api/rest-api.js b/src/api/rest-api.js index 43af793..4fb5395 100644 --- a/src/api/rest-api.js +++ b/src/api/rest-api.js @@ -58,7 +58,8 @@ class RestAPI { var req = request.get(url); if (token != null) { - req.set('x-access-token', token); + req.set('Authorization', "Bearer " + token); + } req.end(function (error, res) { @@ -76,7 +77,7 @@ class RestAPI { var req = request.post(url).send(body).timeout({ response: 5000 }); // Simple response start timeout (3s) if (token != null) { - req.set('x-access-token', token); + req.set('Authorization', "Bearer " + token); } req.end(function (error, res) { @@ -97,7 +98,7 @@ class RestAPI { var req = request.delete(url); if (token != null) { - req.set('x-access-token', token); + req.set('Authorization', "Bearer " + token); } req.end(function (error, res) { @@ -115,7 +116,7 @@ class RestAPI { var req = request.put(url).send(body); if (token != null) { - req.set('x-access-token', token); + req.set('Authorization', "Bearer " + token); } req.end(function (error, res) { @@ -133,7 +134,7 @@ class RestAPI { const req = request.post(url).send(data).on('progress', progressCallback); if (token != null) { - req.set('x-access-token', token); + req.set('Authorization', "Bearer " + token); } req.end(function (error, res) { diff --git a/src/components/dialogs/edit-simulator.js b/src/components/dialogs/edit-simulator.js index de08938..74edcd2 100644 --- a/src/components/dialogs/edit-simulator.js +++ b/src/components/dialogs/edit-simulator.js @@ -74,17 +74,17 @@ class EditSimulatorDialog extends React.Component { this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
- Name - this.handleChange(e)} /> + Name + this.handleChange(e)} /> - Endpoint - this.handleChange(e)} /> + Endpoint + this.handleChange(e)} /> - Properties + Properties
diff --git a/src/components/dialogs/import-simulation-model.js b/src/components/dialogs/import-simulation-model.js index af9a7dc..55e7a2b 100644 --- a/src/components/dialogs/import-simulation-model.js +++ b/src/components/dialogs/import-simulation-model.js @@ -99,7 +99,7 @@ class ImportSimulationModelDialog extends React.Component { Simulator {this.props.simulators.map(simulator => ( - + ))} diff --git a/src/components/dialogs/new-user.js b/src/components/dialogs/new-user.js index 554e14f..a0c1ed0 100644 --- a/src/components/dialogs/new-user.js +++ b/src/components/dialogs/new-user.js @@ -34,7 +34,8 @@ class NewUserDialog extends React.Component { username: '', mail: '', role: 'admin', - password: '' + password: '', + id: 0 }; } @@ -57,7 +58,8 @@ class NewUserDialog extends React.Component { username: '', mail: '', role: 'admin', - password: '' + password: '', + id: 0 }); } @@ -65,8 +67,9 @@ class NewUserDialog extends React.Component { // check all controls let username = this.state.username !== '' && this.state.username.length >= 3; let password = this.state.password !== ''; + let id = this.state.id !== 0; - this.valid = username && password; + this.valid = username && password && id; // return state to control switch(target) { @@ -74,6 +77,8 @@ class NewUserDialog extends React.Component { return username ? "success" : "error"; case 'password': return password ? "success" : "error"; + case 'id': + return id ? "success" : "error"; default: return "success"; } diff --git a/src/components/header-menu.js b/src/components/header-menu.js index b2daf0e..0273407 100644 --- a/src/components/header-menu.js +++ b/src/components/header-menu.js @@ -26,14 +26,15 @@ import { NavLink } from 'react-router-dom'; export default class HeaderMenu extends React.Component { render() { return
- + +
  • Home
  • Projects
  • Simulations
  • Simulators
    • - { this.props.currentRole === 'admin' ? + { this.props.currentRole === 'Admin' ?
  • User Management
    • : '' }
  • Logout
    • diff --git a/src/components/header.js b/src/components/header.js index 710ea9b..7d72e0c 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -21,20 +21,25 @@ import React from 'react'; import { Col, Button } from 'react-bootstrap'; +import { Hidden } from 'react-grid-system' import Icon from './icon'; class Header extends React.Component { render() { return (
    - +

    VILLASweb

    - - {this.props.showMenuButton && - - } - + + + {this.props.showMenuButton && + + } + +
    ); } diff --git a/src/components/home.js b/src/components/home.js index b81bab7..63863fb 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -21,16 +21,24 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +//import { Link } from 'react-router-dom'; -import RestAPI from '../api/rest-api'; +//import RestAPI from '../api/rest-api'; import config from '../config'; +import UserStore from "../stores/user-store"; class Home extends React.Component { constructor(props) { super(props); - this.state = {}; + let currentUser = UserStore.getState().currentUser; + + this.state = { + currentRole: currentUser ? currentUser.role : '', + currentUsername: currentUser ? currentUser.username: '', + currentUserID: currentUser ? currentUser.id: 0, + token: UserStore.getState().token + }; } getCounts(type) { @@ -56,15 +64,21 @@ class Home extends React.Component { VILLASweb is a frontend for distributed real-time simulation hosted by {config.admin.name}.

    - This instance is hosting {this.getCounts('projects')} projects consisting of {this.getCounts('simulators')} simulators, {this.getCounts('visualizations')} visualizations and {this.getCounts('simulations')} simulations. - A total of {this.getCounts('users')} users are registered.
    + You are logged in as user {this.state.currentUsername} with ID {this.state.currentUserID} and role {this.state.currentRole}.

    + {/* +

    + This instance is hosting {this.getCounts('projects')} projects consisting of {this.getCounts('simulators')} simulators, {this.getCounts('visualizations')} visualizations and {this.getCounts('simulations')} simulations. + A total of {this.getCounts('users')} users are registered.
    +

    + */}

    Credits

    VILLASweb is developed by the Institute for Automation of Complex Power Systems at the RWTH Aachen University.

    Links

      diff --git a/src/components/login-form.js b/src/components/login-form.js index e2b48c6..7747723 100644 --- a/src/components/login-form.js +++ b/src/components/login-form.js @@ -61,20 +61,16 @@ class LoginForm extends Component { render() { return ( -
      + - - Username - + Username this.handleChange(e)} /> - - Password - + Password this.handleChange(e)} /> @@ -82,14 +78,14 @@ class LoginForm extends Component { {this.props.loginMessage &&
      - + Error: {this.props.loginMessage}
      } - + diff --git a/src/components/menu-sidebar.js b/src/components/menu-sidebar.js index 51d7d83..8ea2e8d 100644 --- a/src/components/menu-sidebar.js +++ b/src/components/menu-sidebar.js @@ -33,7 +33,7 @@ class SidebarMenu extends React.Component {
    • Projects
    • Simulations
    • Simulators
      • - { this.props.currentRole === 'admin' ? + { this.props.currentRole === 'Admin' ?
    • Users
      • : '' }
    • Logout
      • diff --git a/src/components/table-column.js b/src/components/table-column.js index 1aafc2e..151e3eb 100644 --- a/src/components/table-column.js +++ b/src/components/table-column.js @@ -36,7 +36,10 @@ class TableColumn extends Component { clickable: false, labelKey: null, checkbox: false, - checkboxKey: '' + checkboxKey: '', + labelStyle: null, + labelModifier: null + }; render() { diff --git a/src/components/table.js b/src/components/table.js index ed118a0..8d2d33d 100644 --- a/src/components/table.js +++ b/src/components/table.js @@ -74,7 +74,7 @@ class CustomTable extends Component { if (linkKey && data[linkKey] != null) { cell.push({content}); } else if (child.props.clickable) { - cell.push(); + cell.push(); } else { cell.push(content); } @@ -89,7 +89,13 @@ class CustomTable extends Component { labelContent = child.props.labelModifier(labelContent, data); } - cell.push( {labelContent.toString()}); + cell.push( +   + + {labelContent.toString()} + + + ); } if (child.props.dataIndex) { @@ -98,11 +104,11 @@ class CustomTable extends Component { // add buttons if (child.props.editButton) { - cell.push(); + cell.push(); } if (child.props.deleteButton) { - cell.push(); + cell.push(); } if (child.props.checkbox) { @@ -112,7 +118,7 @@ class CustomTable extends Component { } if (child.props.exportButton) { - cell.push(); + cell.push(); } return cell; diff --git a/src/containers/app.js b/src/containers/app.js index 5474190..763e012 100644 --- a/src/containers/app.js +++ b/src/containers/app.js @@ -26,6 +26,7 @@ import HTML5Backend from 'react-dnd-html5-backend'; import NotificationSystem from 'react-notification-system'; import { Redirect, Route } from 'react-router-dom'; import { Col } from 'react-bootstrap'; +import { Hidden } from 'react-grid-system' import AppDispatcher from '../app-dispatcher'; import SimulationStore from '../stores/simulation-store'; @@ -63,6 +64,8 @@ class App extends React.Component { simulators: SimulatorStore.getState(), simulations: SimulationStore.getState(), currentRole: currentUser ? currentUser.role : '', + currentUsername: currentUser ? currentUser.username: '', + currentUserID: UserStore.getState().userid, token: UserStore.getState().token, showSidebarMenu: false, @@ -72,6 +75,7 @@ class App extends React.Component { componentWillMount() { // if token stored locally, request user const token = localStorage.getItem('token'); + const userid = localStorage.getItem('userid'); if (token != null && token !== '') { // save token so we dont logout @@ -79,7 +83,8 @@ class App extends React.Component { AppDispatcher.dispatch({ type: 'users/logged-in', - token: token + token: token, + userid: userid }); } } @@ -115,17 +120,22 @@ class App extends React.Component { return (
      + {/* - - + */} + + + + +
      -
      +
      - + diff --git a/src/containers/login.js b/src/containers/login.js index ee613a6..93afa80 100644 --- a/src/containers/login.js +++ b/src/containers/login.js @@ -42,7 +42,8 @@ class Login extends Component { return { currentUser: UserStore.getState().currentUser, token: UserStore.getState().token, - loginMessage: UserStore.getState().loginMessage + loginMessage: UserStore.getState().loginMessage, + userid: UserStore.getState().userid }; } @@ -54,11 +55,13 @@ class Login extends Component { // if token stored locally, request user if (nextState.token == null) { const token = localStorage.getItem('token'); + const userid = localStorage.getItem('userid'); if (token != null && token !== '' && nextState.currentUser == null) { AppDispatcher.dispatch({ type: 'users/logged-in', - token: token + token: token, + userid: userid }); } } else { @@ -66,6 +69,7 @@ class Login extends Component { if (nextState.currentUser != null) { // save login in local storage localStorage.setItem('token', nextState.token); + localStorage.setItem('userid', nextState.userid); } } } diff --git a/src/containers/select-simulator.js b/src/containers/select-simulator.js index 88f7151..4b69ff1 100644 --- a/src/containers/select-simulator.js +++ b/src/containers/select-simulator.js @@ -46,7 +46,7 @@ class SelectSimulator extends React.Component { let selectedSimulator = nextProps.value; if (selectedSimulator == null) { if (this.state.simulators.length > 0) { - selectedSimulator = this.state.simulators[0]._id; + selectedSimulator = this.state.simulators[0].id; } else { selectedSimulator = ''; } @@ -60,7 +60,7 @@ class SelectSimulator extends React.Component { // send complete simulator to callback if (this.props.onChange != null) { - const simulator = this.state.simulators.find(s => s._id === event.target.value); + const simulator = this.state.simulators.find(s => s.id === event.target.value); this.props.onChange(simulator); } diff --git a/src/containers/simulation.js b/src/containers/simulation.js index 9f9a0f3..7a66ea1 100644 --- a/src/containers/simulation.js +++ b/src/containers/simulation.js @@ -101,7 +101,7 @@ class Simulation extends React.Component { const simulationModel = { simulation: this.state.simulation._id, name: 'New Simulation Model', - simulator: this.state.simulators.length > 0 ? this.state.simulators[0]._id : null, + simulator: this.state.simulators.length > 0 ? this.state.simulators[0].id : null, outputLength: 1, outputMapping: [{ name: 'Signal', type: 'Type' }], inputLength: 1, @@ -165,7 +165,7 @@ class Simulation extends React.Component { getSimulatorName(simulatorId) { for (let simulator of this.state.simulators) { - if (simulator._id === simulatorId) { + if (simulator.id === simulatorId) { return _.get(simulator, 'properties.name') || _.get(simulator, 'rawProperties.name') || simulator.uuid; } } diff --git a/src/containers/simulators.js b/src/containers/simulators.js index 20fb207..7972dfb 100644 --- a/src/containers/simulators.js +++ b/src/containers/simulators.js @@ -66,12 +66,15 @@ class Simulators extends Component { static calculateState() { const simulators = SimulatorStore.getState().sort((a, b) => { - if (a.state !== b.state) - return this.statePrio(a.state) > this.statePrio(b.state); - else if (a.name !== b.name) + if (a.state !== b.state) { + return Simulators.statePrio(a.state) > Simulators.statePrio(b.state); + } + else if (a.name !== b.name) { return a.name < b.name; - else + } + else { return a.stateUpdatedAt < b.stateUpdatedAt; + } }); return { @@ -123,6 +126,9 @@ class Simulators extends Component { if (data) { let simulator = this.state.simulators[this.state.modalIndex]; + console.log("modalIndex: " + this.state.modalIndex); + console.log("Simulator Host:" + simulator.host); + console.log("Simulator at index 1: " + this.state.simulators[1].host) simulator.properties = data; this.setState({ simulator }); @@ -151,7 +157,7 @@ class Simulators extends Component { exportSimulator(index) { // filter properties let simulator = Object.assign({}, this.state.simulators[index]); - delete simulator._id; + delete simulator.id; // show save dialog const blob = new Blob([JSON.stringify(simulator, null, 2)], { type: 'application/json' }); @@ -206,7 +212,7 @@ class Simulators extends Component { } } - isSimulatorOutdated(simulator) { + static isSimulatorOutdated(simulator) { if (!simulator.stateUpdatedAt) return true; @@ -215,10 +221,10 @@ class Simulators extends Component { return Date.now() - new Date(simulator.stateUpdatedAt) > fiveMinutes; } - stateLabelStyle = (state, simulator) => { + static stateLabelStyle(state, simulator){ var style = [ 'label' ]; - if (this.isSimulatorOutdated(simulator) && state !== 'shutdown') { + if (Simulators.isSimulatorOutdated(simulator) && state !== 'shutdown') { style.push('label-outdated'); } @@ -250,7 +256,7 @@ class Simulators extends Component { return style.join(' '); } - stateUpdateModifier = updatedAt => { + static stateUpdateModifier(updatedAt) { const date = new Date(updatedAt); return date.toLocaleString('de-DE'); @@ -268,15 +274,15 @@ class Simulators extends Component { this.onSimulatorChecked(index, event)} width='30' /> - + {/* */} - + { + RestAPI.delete(this.makeURL(this.url + '/' + object.id), token).then(response => { AppDispatcher.dispatch({ type: this.type + 's/removed', data: response[this.type], @@ -132,7 +132,7 @@ class RestDataManager { var obj = {}; obj[this.type] = this.filterKeys(object); - RestAPI.put(this.makeURL(this.url + '/' + object._id), obj, token).then(response => { + RestAPI.put(this.makeURL(this.url + '/' + object.id), obj, token).then(response => { AppDispatcher.dispatch({ type: this.type + 's/edited', data: response[this.type] diff --git a/src/data-managers/simulators-data-manager.js b/src/data-managers/simulators-data-manager.js index df45f34..4c34f51 100644 --- a/src/data-managers/simulators-data-manager.js +++ b/src/data-managers/simulators-data-manager.js @@ -30,7 +30,7 @@ class SimulatorsDataManager extends RestDataManager { doActions(simulator, action, token = null) { // TODO: Make only simulator id dependent - RestAPI.post(this.makeURL(this.url + '/' + simulator._id), action, token).then(response => { + RestAPI.post(this.makeURL(this.url + '/' + simulator.id), action, token).then(response => { AppDispatcher.dispatch({ type: 'simulators/action-started', data: response diff --git a/src/data-managers/users-data-manager.js b/src/data-managers/users-data-manager.js index 07d1b12..692b18b 100644 --- a/src/data-managers/users-data-manager.js +++ b/src/data-managers/users-data-manager.js @@ -33,7 +33,8 @@ class UsersDataManager extends RestDataManager { AppDispatcher.dispatch({ type: 'users/logged-in', token: response.token, - user: response.user + user: response.user, + userid: response.user.id }); }).catch(error => { AppDispatcher.dispatch({ @@ -43,19 +44,19 @@ class UsersDataManager extends RestDataManager { }); } - //getCurrentUser(token) { - // RestAPI.get(this.makeURL('/users/me'), token).then(response => { - // AppDispatcher.dispatch({ - // type: 'users/current-user', - // user: response.user - // }); - // }).catch(error => { - // AppDispatcher.dispatch({ - // type: 'users/current-user-error', - // error: error - // }); - // }); - //} + getCurrentUser(token, id) { + RestAPI.get(this.makeURL('/users/' + id), token).then(response => { + AppDispatcher.dispatch({ + type: 'users/current-user', + user: response.user + }); + }).catch(error => { + AppDispatcher.dispatch({ + type: 'users/current-user-error', + error: error + }); + }); + } } diff --git a/src/stores/array-store.js b/src/stores/array-store.js index ccd9689..2d4be7c 100644 --- a/src/stores/array-store.js +++ b/src/stores/array-store.js @@ -39,7 +39,7 @@ class ArrayStore extends ReduceStore { // search for existing element to update state.forEach((element, index, array) => { newElements = newElements.filter((updateElement, newIndex) => { - if (element._id === updateElement._id) { + if (element.id === updateElement.id) { // update each property for (var key in updateElement) { if (updateElement.hasOwnProperty(key)) { diff --git a/src/stores/simulator-store.js b/src/stores/simulator-store.js index 00b8635..03ecf73 100644 --- a/src/stores/simulator-store.js +++ b/src/stores/simulator-store.js @@ -38,7 +38,7 @@ class SimulatorStore extends ArrayStore { const endpoint = _.get(simulator, 'properties.endpoint') || _.get(simulator, 'rawProperties.endpoint'); if (endpoint != null && endpoint !== '') { - SimulatorDataDataManager.open(endpoint, simulator._id); + SimulatorDataDataManager.open(endpoint, simulator.id); } else { // console.warn('Endpoint not found for simulator at ' + endpoint); // console.log(simulator); @@ -53,7 +53,8 @@ class SimulatorStore extends ArrayStore { const endpoint = _.get(simulator, 'properties.endpoint') || _.get(simulator, 'rawProperties.endpoint'); if (endpoint != null && endpoint !== '') { - SimulatorDataDataManager.update(endpoint, simulator._id); + console.log("Updating simulatorid " + simulator.id); + SimulatorDataDataManager.update(endpoint, simulator.id); } return super.reduce(state, action); diff --git a/src/stores/user-store.js b/src/stores/user-store.js index ecaede5..c3c563f 100644 --- a/src/stores/user-store.js +++ b/src/stores/user-store.js @@ -35,6 +35,7 @@ class UserStore extends ReduceStore { users: [], currentUser: null, token: null, + userid: 0, loginMessage: null }; } @@ -54,14 +55,13 @@ class UserStore extends ReduceStore { case 'users/logged-in': // // request logged-in user data - //UsersDataManager.getCurrentUser(action.token); + UsersDataManager.getCurrentUser(action.token, action.userid); - //save token and logged-in user - return Object.assign({}, state, { token: action.token, currentUser: action.user }); + return Object.assign({}, state, { token: action.token, userid: action.userid}); - //case 'users/current-user': + case 'users/current-user': // // save logged-in user - // return Object.assign({}, state, { currentUser: action.user }); + return Object.assign({}, state, { currentUser: action.user}); case 'users/current-user-error': // discard user token