mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Merge branch 'feature-change-simulator-connection' into 'develop'
Feature change simulator connection See merge request !15
This commit is contained in:
Markus Grigull
commit
6a5a2c735f
29 changed files with 838 additions and 503 deletions
11
package.json
11
package.json
|
|
@ -5,9 +5,12 @@
|
|||
"dependencies": {
|
||||
"bootstrap": "^3.3.7",
|
||||
"classnames": "^2.2.5",
|
||||
"d3-scale": "^1.0.5",
|
||||
"es6-promise": "^4.0.5",
|
||||
"flux": "^3.1.2",
|
||||
"gaugeJS": "^1.3.2",
|
||||
"immutable": "^3.8.1",
|
||||
"rc-slider": "^7.0.1",
|
||||
"rd3": "^0.7.4",
|
||||
"react": "^15.4.2",
|
||||
"react-bootstrap": "^0.30.7",
|
||||
|
|
@ -19,12 +22,8 @@
|
|||
"react-notification-system": "^0.2.13",
|
||||
"react-rnd": "^4.2.2",
|
||||
"react-router": "^3.0.2",
|
||||
"superagent": "^3.5.0",
|
||||
"gaugeJS": "^1.3.2",
|
||||
"d3-scale": "^1.0.5",
|
||||
"rc-slider": "^7.0.1",
|
||||
"prop-types": "^15.0.0",
|
||||
"d3": "^3.5.0"
|
||||
"react-sortable-tree": "^0.1.19",
|
||||
"superagent": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "^3.5.0",
|
||||
|
|
|
|||
98
src/components/dialog/edit-node.js
Normal file
98
src/components/dialog/edit-node.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/**
|
||||
* File: edit-node.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 06.07.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
|
||||
|
||||
import Dialog from './dialog';
|
||||
|
||||
class NewNodeDialog extends React.Component {
|
||||
valid: false;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
endpoint: '',
|
||||
config: {},
|
||||
simulators: [],
|
||||
_id: ''
|
||||
};
|
||||
}
|
||||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
this.props.onClose(this.state);
|
||||
} else {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({ name: this.props.node.name, endpoint: this.props.node.endpoint, config: this.props.node.config, simulators: this.props.node.simulators, _id: this.props.node._id });
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
var endpoint = true;
|
||||
var name = true;
|
||||
|
||||
if (this.state.name === '' || this.props.nodes.find(node => node._id !== this.state._id && node.name === this.state.name) !== undefined) {
|
||||
name = false;
|
||||
}
|
||||
|
||||
if (this.state.endpoint === '' || this.props.nodes.find(node => node._id !== this.state._id && node.endpoint === this.state.endpoint) !== undefined) {
|
||||
endpoint = false;
|
||||
}
|
||||
|
||||
this.valid = endpoint && name;
|
||||
|
||||
// return state to control
|
||||
if (target === 'name') return name ? "success" : "error";
|
||||
else return endpoint ? "success" : "error";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit Node" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" validationState={this.validateForm('name')}>
|
||||
<ControlLabel>Name</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
|
||||
<ControlLabel>Endpoint</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewNodeDialog;
|
||||
|
|
@ -31,7 +31,7 @@ class EditSimulationModelDialog extends Component {
|
|||
show: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
data: PropTypes.object.isRequired,
|
||||
simulators: PropTypes.array.isRequired
|
||||
nodes: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
valid: false;
|
||||
|
|
@ -41,8 +41,9 @@ class EditSimulationModelDialog extends Component {
|
|||
|
||||
this.state = {
|
||||
name: '',
|
||||
simulator: '',
|
||||
length: 1
|
||||
simulator: { node: '', simulator: '' },
|
||||
length: 1,
|
||||
mapping: [{ name: 'Signal', type: 'Type' }]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +69,12 @@ class EditSimulationModelDialog extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
if (e.target.id === 'simulator') {
|
||||
var value = e.target.value.split("/");
|
||||
this.setState({ simulator: { node: value[0], simulator: value[1] } });
|
||||
} else {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleMappingChange(event, row, column) {
|
||||
|
|
@ -124,9 +130,11 @@ class EditSimulationModelDialog extends Component {
|
|||
</FormGroup>
|
||||
<FormGroup controlId="simulator" validationState={this.validateForm('simulator')}>
|
||||
<ControlLabel>Simulator</ControlLabel>
|
||||
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.simulator} onChange={(e) => this.handleChange(e)}>
|
||||
{this.props.simulators.map(simulator => (
|
||||
<option key={simulator._id} value={simulator._id}>{simulator.name}</option>
|
||||
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.simulator.node + '/' + this.state.simulator.simulator} onChange={(e) => this.handleChange(e)}>
|
||||
{this.props.nodes.map(node => (
|
||||
node.simulators.map((simulator, index) => (
|
||||
<option key={node._id + index} value={node.name + '/' + simulator.name}>{node.name}/{simulator.name}</option>
|
||||
))
|
||||
))}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -37,9 +37,7 @@ class EditSimulatorDialog extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
endpoint: '',
|
||||
_id: ''
|
||||
name: ''
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -57,30 +55,22 @@ class EditSimulatorDialog extends Component {
|
|||
|
||||
resetState() {
|
||||
this.setState({
|
||||
name: this.props.simulator.name,
|
||||
endpoint: this.props.simulator.endpoint,
|
||||
_id: this.props.simulator._id
|
||||
name: this.props.simulator.name
|
||||
});
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
var endpoint = true;
|
||||
var name = true;
|
||||
|
||||
if (this.state.name === '') {
|
||||
if (this.state.name === '' || this.props.node.simulators.find(simulator => this.props.simulator.name !== this.state.name && simulator.name === this.state.name) !== undefined) {
|
||||
name = false;
|
||||
}
|
||||
|
||||
if (this.state.endpoint === '') {
|
||||
endpoint = false;
|
||||
}
|
||||
|
||||
this.valid = endpoint && name;
|
||||
this.valid = name;
|
||||
|
||||
// return state to control
|
||||
if (target === 'name') return name ? "success" : "error";
|
||||
else return endpoint ? "success" : "error";
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -92,11 +82,6 @@ class EditSimulatorDialog extends Component {
|
|||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
|
||||
<ControlLabel>Endpoint</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ class EditWidgetSignalControl extends Component {
|
|||
|
||||
this.state = {
|
||||
widget: {
|
||||
simulator: ''
|
||||
simulator: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -43,10 +43,10 @@ class EditWidgetSignalControl extends Component {
|
|||
|
||||
if (this.props.simulation) {
|
||||
// get selected simulation model
|
||||
const simulationModel = this.props.simulation.models.find( model => model.simulator === this.state.widget.simulator );
|
||||
const simulationModel = this.props.simulation.models.find( model => model.simulator.node === this.state.widget.simulator.node && model.simulator.simulator === this.state.widget.simulator.simulator );
|
||||
|
||||
// If simulation model update the signals to render
|
||||
signalsToRender = simulationModel? simulationModel.mapping : [];
|
||||
signalsToRender = simulationModel ? simulationModel.mapping : [];
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -68,4 +68,4 @@ class EditWidgetSignalControl extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default EditWidgetSignalControl;
|
||||
export default EditWidgetSignalControl;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ class EditWidgetSignalsControl extends Component {
|
|||
|
||||
this.state = {
|
||||
widget: {
|
||||
simulator: ''
|
||||
simulator: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -58,12 +58,12 @@ class EditWidgetSignalsControl extends Component {
|
|||
|
||||
if (this.props.simulation) {
|
||||
// get selected simulation model
|
||||
const simulationModel = this.props.simulation.models.find( model => model.simulator === this.state.widget.simulator );
|
||||
const simulationModel = this.props.simulation.models.find( model => model.simulator.node === this.state.widget.simulator.node && model.simulator.simulator === this.state.widget.simulator.simulator );
|
||||
|
||||
// If simulation model update the signals to render
|
||||
signalsToRender = simulationModel? simulationModel.mapping : [];
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<FormGroup>
|
||||
<ControlLabel>Signals</ControlLabel>
|
||||
|
|
@ -81,4 +81,4 @@ class EditWidgetSignalsControl extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default EditWidgetSignalsControl;
|
||||
export default EditWidgetSignalsControl;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ class EditWidgetSimulatorControl extends Component {
|
|||
|
||||
this.state = {
|
||||
widget: {
|
||||
simulator: ''
|
||||
simulator: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -39,17 +39,16 @@ class EditWidgetSimulatorControl extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<FormGroup controlId="simulator">
|
||||
<ControlLabel>Simulator</ControlLabel>
|
||||
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator || '' } onChange={(e) => this.props.handleChange(e)}>
|
||||
<ControlLabel>Simulation Model</ControlLabel>
|
||||
<FormControl componentClass="select" placeholder="Select simulation model" value={JSON.stringify(this.state.widget.simulator) || '' } onChange={(e) => this.props.handleChange(e)}>
|
||||
{
|
||||
this.props.simulation.models.length === 0? (
|
||||
<option disabled value style={{ display: 'none' }}> No simulators available. </option>
|
||||
<option disabled value style={{ display: 'none' }}> No simulation models available. </option>
|
||||
) : (
|
||||
this.props.simulation.models.map((model, index) => (
|
||||
<option key={index} value={model.simulator}>{model.name}</option>
|
||||
<option key={index} value={JSON.stringify(model.simulator)}>{model.name}</option>
|
||||
)))
|
||||
}
|
||||
</FormControl>
|
||||
|
|
@ -58,4 +57,4 @@ class EditWidgetSimulatorControl extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default EditWidgetSimulatorControl;
|
||||
export default EditWidgetSimulatorControl;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ class EditWidgetDialog extends Component {
|
|||
this.state = {
|
||||
temporal: {
|
||||
name: '',
|
||||
simulator: '',
|
||||
simulator: {},
|
||||
signal: 0
|
||||
}
|
||||
};
|
||||
|
|
@ -58,11 +58,25 @@ class EditWidgetDialog extends Component {
|
|||
handleChange(e) {
|
||||
if (e.constructor === Array) {
|
||||
// Every property in the array will be updated
|
||||
let changes = e.reduce( (changesObject, event) => { changesObject[event.target.id] = event.target.value; return changesObject }, {});
|
||||
let changes = e.reduce( (changesObject, event) => {
|
||||
if (event.target.id === 'simulator') {
|
||||
changesObject[event.target.id] = JSON.parse(event.target.value);
|
||||
} else {
|
||||
changesObject[event.target.id] = event.target.value;
|
||||
}
|
||||
|
||||
return changesObject;
|
||||
}, {});
|
||||
|
||||
this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
|
||||
} else {
|
||||
let changeObject = {};
|
||||
changeObject[e.target.id] = e.target.value;
|
||||
if (e.target.id === 'simulator') {
|
||||
changeObject[e.target.id] = JSON.parse(e.target.value);
|
||||
} else {
|
||||
changeObject[e.target.id] = e.target.value;
|
||||
}
|
||||
|
||||
this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) });
|
||||
}
|
||||
}
|
||||
|
|
@ -87,7 +101,7 @@ class EditWidgetDialog extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
let controls = null;
|
||||
if (this.props.widget) {
|
||||
controls = createControls(
|
||||
|
|
|
|||
97
src/components/dialog/new-node.js
Normal file
97
src/components/dialog/new-node.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
* File: new-node.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 06.07.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
|
||||
|
||||
import Dialog from './dialog';
|
||||
|
||||
class NewNodeDialog extends React.Component {
|
||||
valid: false;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
endpoint: '',
|
||||
config: {},
|
||||
simulators: []
|
||||
};
|
||||
}
|
||||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
this.props.onClose(this.state);
|
||||
} else {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({ name: '', endpoint: '', config: {}, simulators: [] });
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
var endpoint = true;
|
||||
var name = true;
|
||||
|
||||
if (this.state.name === '' || this.props.nodes.find(node => node.name === this.state.name) !== undefined) {
|
||||
name = false;
|
||||
}
|
||||
|
||||
if (this.state.endpoint === '' || this.props.nodes.find(node => node.endpoint === this.state.endpoint) !== undefined) {
|
||||
endpoint = false;
|
||||
}
|
||||
|
||||
this.valid = endpoint && name;
|
||||
|
||||
// return state to control
|
||||
if (target === 'name') return name ? "success" : "error";
|
||||
else return endpoint ? "success" : "error";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="New Node" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" validationState={this.validateForm('name')}>
|
||||
<ControlLabel>Name</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
|
||||
<ControlLabel>Endpoint</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewNodeDialog;
|
||||
|
|
@ -30,7 +30,7 @@ class NewSimulationModelDialog extends Component {
|
|||
static propTypes = {
|
||||
show: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
simulators: PropTypes.array.isRequired
|
||||
nodes: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
valid: false;
|
||||
|
|
@ -40,7 +40,7 @@ class NewSimulationModelDialog extends Component {
|
|||
|
||||
this.state = {
|
||||
name: '',
|
||||
simulator: '',
|
||||
simulator: { node: '', simulator: '' },
|
||||
length: '1',
|
||||
mapping: [ { name: 'Signal', type: 'Type' } ]
|
||||
};
|
||||
|
|
@ -68,7 +68,11 @@ class NewSimulationModelDialog extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
if (e.target.id === 'simulator') {
|
||||
this.setState({ simulator: JSON.parse(e.target.value) });
|
||||
} else {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleMappingChange(event, row, column) {
|
||||
|
|
@ -86,7 +90,7 @@ class NewSimulationModelDialog extends Component {
|
|||
resetState() {
|
||||
this.setState({
|
||||
name: '',
|
||||
simulator: this.props.simulators[0] != null ? this.props.simulators[0]._id : '',
|
||||
simulator: { node: this.props.nodes[0] ? this.props.nodes[0]._id : '', simulator: this.props.nodes[0].simulators[0] ? 0 : '' },
|
||||
length: '1',
|
||||
mapping: [ { name: 'Signal', type: 'Type' } ]
|
||||
});
|
||||
|
|
@ -130,9 +134,11 @@ class NewSimulationModelDialog extends Component {
|
|||
</FormGroup>
|
||||
<FormGroup controlId="simulator" validationState={this.validateForm('simulator')}>
|
||||
<ControlLabel>Simulator</ControlLabel>
|
||||
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.simulator} onChange={(e) => this.handleChange(e)}>
|
||||
{this.props.simulators.map(simulator => (
|
||||
<option key={simulator._id} value={simulator._id}>{simulator.name}</option>
|
||||
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.simulator.node + '/' + this.state.simulator.simulator} onChange={(e) => this.handleChange(e)}>
|
||||
{this.props.nodes.map(node => (
|
||||
node.simulators.map((simulator, index) => (
|
||||
<option key={node._id + index} value={JSON.stringify({ node: node._id, simulator: index })}>{node.name}/{simulator.name}</option>
|
||||
))
|
||||
))}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -36,8 +36,7 @@ class NewSimulatorDialog extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
endpoint: ''
|
||||
name: ''
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -54,27 +53,21 @@ class NewSimulatorDialog extends Component {
|
|||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({ name: '', endpoint: '' });
|
||||
this.setState({ name: '' });
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
var endpoint = true;
|
||||
var name = true;
|
||||
|
||||
if (this.state.name === '') {
|
||||
if (this.state.name === '' || this.props.node.simulators.find(simulator => simulator.name === this.state.name) !== undefined) {
|
||||
name = false;
|
||||
}
|
||||
|
||||
if (this.state.endpoint === '') {
|
||||
endpoint = false;
|
||||
}
|
||||
|
||||
this.valid = endpoint && name;
|
||||
this.valid = name;
|
||||
|
||||
// return state to control
|
||||
if (target === 'name') return name ? "success" : "error";
|
||||
else return endpoint ? "success" : "error";
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -86,11 +79,6 @@ class NewSimulatorDialog extends Component {
|
|||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
|
||||
<ControlLabel>Endpoint</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
|||
125
src/components/node-tree.js
Normal file
125
src/components/node-tree.js
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
/**
|
||||
* File: node-tree.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 26.06.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import SortableTree from 'react-sortable-tree';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
|
||||
class NodeTree extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
treeData: []
|
||||
};
|
||||
}
|
||||
|
||||
canNodeDrag(node, path) {
|
||||
return (node.parentNode != null);
|
||||
}
|
||||
|
||||
canNodeDrop(node, prevPath) {
|
||||
return (node.nextParent != null);
|
||||
}
|
||||
|
||||
generateNodeProps(rowInfo) {
|
||||
var buttons = [];
|
||||
|
||||
if (rowInfo.parentNode == null) {
|
||||
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeAdd(rowInfo.node)}><Glyphicon glyph="plus" /></Button>);
|
||||
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeEdit(rowInfo.node)}><Glyphicon glyph="pencil" /></Button>);
|
||||
buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeDelete(rowInfo.node)}><Glyphicon glyph="trash" /></Button>);
|
||||
} else {
|
||||
// get child index
|
||||
var index = rowInfo.path[1] - rowInfo.path[0] - 1;
|
||||
|
||||
buttons.push(<Button bsSize="small" onClick={() => this.props.onSimulatorEdit(rowInfo.parentNode, index)}><Glyphicon glyph="pencil" /></Button>);
|
||||
buttons.push(<Button bsSize="small" onClick={() => this.props.onSimulatorDelete(rowInfo.parentNode, index)}><Glyphicon glyph="trash" /></Button>);
|
||||
}
|
||||
|
||||
return {
|
||||
buttons: buttons
|
||||
};
|
||||
}
|
||||
|
||||
nodesToTreeData(nodes) {
|
||||
var treeData = [];
|
||||
|
||||
nodes.forEach((node) => {
|
||||
var parent = { title: node.name, subtitle: node.endpoint, id: node._id, config: node.config, children: [], expanded: true };
|
||||
|
||||
node.simulators.forEach((simulator) => {
|
||||
parent.children.push({ title: simulator.name, subtitle: simulator.id != null ? 'Online' : 'Offline' });
|
||||
});
|
||||
|
||||
treeData.push(parent);
|
||||
});
|
||||
|
||||
return treeData;
|
||||
}
|
||||
|
||||
treeDataToNodes(treeData) {
|
||||
var nodes = [];
|
||||
|
||||
treeData.forEach((data) => {
|
||||
var node = { name: data.title, endpoint: data.subtitle, _id: data.id, config: data.config, simulators: [] };
|
||||
|
||||
data.children.forEach((child) => {
|
||||
node.simulators.push({ name: child.title });
|
||||
});
|
||||
|
||||
nodes.push(node);
|
||||
});
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// compare if data changed
|
||||
if (this.props.data == null || this.props.data !== nextProps.data) {
|
||||
// generate new state
|
||||
var treeData = this.nodesToTreeData(nextProps.data);
|
||||
this.setState({ treeData });
|
||||
}
|
||||
}
|
||||
|
||||
onDataChange(treeData) {
|
||||
this.setState({ treeData });
|
||||
|
||||
this.props.onDataChange(this.treeDataToNodes(treeData))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SortableTree
|
||||
treeData={this.state.treeData}
|
||||
onChange={(treeData) => this.onDataChange(treeData)}
|
||||
style={{ height: 400 }}
|
||||
maxDepth={ 2 }
|
||||
canDrag={(node, path) => this.canNodeDrag(node, path)}
|
||||
canDrop={(node, prevPath) => this.canNodeDrop(node, prevPath)}
|
||||
generateNodeProps={(rowInfo) => this.generateNodeProps(rowInfo)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NodeTree;
|
||||
|
|
@ -69,25 +69,27 @@ class WidgetGauge extends Component {
|
|||
return this.state.value !== nextState.value;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// update value
|
||||
const simulator = nextProps.widget.simulator;
|
||||
|
||||
if (nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].values == null) {
|
||||
if (nextProps.data == null || nextProps.data[simulator.node][simulator.simulator] == null || nextProps.data[simulator.node][simulator.simulator].values == null) {
|
||||
this.setState({ value: 0 });
|
||||
return;
|
||||
}
|
||||
|
||||
// check if value has changed
|
||||
const signal = nextProps.data[simulator].values[nextProps.widget.signal];
|
||||
const signal = nextProps.data[simulator.node][simulator.simulator].values[nextProps.widget.signal];
|
||||
// Take just 3 decimal positions
|
||||
// Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
|
||||
const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3;
|
||||
if (this.state.value !== new_value) {
|
||||
this.setState({ value: new_value });
|
||||
|
||||
// update gauge's value
|
||||
this.gauge.set(new_value);
|
||||
if (signal != null) {
|
||||
const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3;
|
||||
if (this.state.value !== new_value) {
|
||||
this.setState({ value: new_value });
|
||||
|
||||
// update gauge's value
|
||||
this.gauge.set(new_value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,8 +103,8 @@ class WidgetGauge extends Component {
|
|||
var signalType = null;
|
||||
|
||||
if (this.props.simulation) {
|
||||
var simulationModel = this.props.simulation.models.filter((model) => model.simulator === this.props.widget.simulator)[0];
|
||||
signalType = simulationModel && simulationModel.length > 0? simulationModel.mapping[this.props.widget.signal].type : '';
|
||||
var simulationModel = this.props.simulation.models.filter((model) => model.simulator.node === this.props.widget.simulator.node && model.simulator.simulator === this.props.widget.simulator.simulator)[0];
|
||||
signalType = (simulationModel != null && simulationModel.length > 0) ? simulationModel.mapping[this.props.widget.signal].type : '';
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ class WidgetPlotTable extends Component {
|
|||
|
||||
// Identify if there was a change in the preselected signals
|
||||
if (nextProps.simulation && (JSON.stringify(nextProps.widget.preselectedSignals) !== JSON.stringify(this.props.widget.preselectedSignals) || this.state.preselectedSignals.length === 0)) {
|
||||
|
||||
|
||||
// Update the currently selected signals by intersecting with the preselected signals
|
||||
// Do the same with the plot values
|
||||
var intersection = this.computeIntersection(nextProps.widget.preselectedSignals, nextProps.widget.signals);
|
||||
|
|
@ -54,20 +54,19 @@ class WidgetPlotTable extends Component {
|
|||
this.updatePreselectedSignalsState(nextProps);
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Perform the intersection of the lists, alternatively could be done with Sets ensuring unique values
|
||||
computeIntersection(preselectedSignals, selectedSignals) {
|
||||
return preselectedSignals.filter( s => selectedSignals.includes(s));
|
||||
}
|
||||
|
||||
|
||||
updatePreselectedSignalsState(nextProps) {
|
||||
const simulator = nextProps.widget.simulator;
|
||||
|
||||
// get simulation model
|
||||
const simulationModel = nextProps.simulation.models.find((model) => {
|
||||
return (model.simulator === simulator);
|
||||
return (model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator);
|
||||
});
|
||||
|
||||
let preselectedSignals = [];
|
||||
|
|
@ -89,13 +88,13 @@ class WidgetPlotTable extends Component {
|
|||
return accum;
|
||||
}, []);
|
||||
}
|
||||
|
||||
|
||||
this.setState({ preselectedSignals: preselectedSignals });
|
||||
}
|
||||
|
||||
updateSignalSelection(signal_index, checked) {
|
||||
// Update the selected signals and propagate to parent component
|
||||
var new_widget = Object.assign({}, this.props.widget, {
|
||||
var new_widget = Object.assign({}, this.props.widget, {
|
||||
signals: checked? this.state.signals.concat(signal_index) : this.state.signals.filter( (idx) => idx !== signal_index )
|
||||
});
|
||||
this.props.onWidgetChange(new_widget);
|
||||
|
|
@ -106,31 +105,37 @@ class WidgetPlotTable extends Component {
|
|||
|
||||
// Data passed to plot
|
||||
let simulator = this.props.widget.simulator;
|
||||
let simulatorData = this.props.data[simulator];
|
||||
let simulatorData = [];
|
||||
|
||||
if (this.props.data[simulator.node] != null && this.props.data[simulator.node][simulator.simulator] != null) {
|
||||
simulatorData = this.props.data[simulator.node][simulator.simulator];
|
||||
}
|
||||
|
||||
if (this.state.preselectedSignals && this.state.preselectedSignals.length > 0) {
|
||||
// Create checkboxes using the signal indices from simulation model
|
||||
checkBoxes = this.state.preselectedSignals.map( (signal) => {
|
||||
var checked = this.state.signals.indexOf(signal.index) > -1;
|
||||
var chkBxClasses = classNames({
|
||||
'btn': true,
|
||||
'btn-default': true,
|
||||
'active': checked
|
||||
});
|
||||
return <Checkbox key={signal.index} className={chkBxClasses} checked={checked} disabled={ this.props.editing } onChange={(e) => this.updateSignalSelection(signal.index, e.target.checked) } > { signal.name } </Checkbox>
|
||||
});
|
||||
var checked = this.state.signals.indexOf(signal.index) > -1;
|
||||
var chkBxClasses = classNames({
|
||||
'btn': true,
|
||||
'btn-default': true,
|
||||
'active': checked
|
||||
});
|
||||
return <Checkbox key={signal.index} className={chkBxClasses} checked={checked} disabled={ this.props.editing } onChange={(e) => this.updateSignalSelection(signal.index, e.target.checked) } > { signal.name } </Checkbox>
|
||||
});
|
||||
}
|
||||
|
||||
// Prepare an array with the signals to show in the legend
|
||||
var legendSignals = this.state.preselectedSignals.reduce( (accum, signal, i) => {
|
||||
if (this.state.signals.includes(signal.index)) {
|
||||
accum.push({
|
||||
index: signal.index,
|
||||
name: signal.name
|
||||
})
|
||||
}
|
||||
return accum;
|
||||
}, []);
|
||||
if (this.state.signals.includes(signal.index)) {
|
||||
accum.push({
|
||||
index: signal.index,
|
||||
name: signal.name
|
||||
});
|
||||
}
|
||||
return accum;
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="plot-table-widget" ref="wrapper">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ import PlotLegend from './widget-plot/plot-legend';
|
|||
class WidgetPlot extends Component {
|
||||
|
||||
render() {
|
||||
|
||||
const simulator = this.props.widget.simulator;
|
||||
const simulation = this.props.simulation;
|
||||
let legendSignals = [];
|
||||
|
|
@ -36,10 +35,10 @@ class WidgetPlot extends Component {
|
|||
// Proceed if a simulation with models and a simulator are available
|
||||
if (simulator && simulation && simulation.models.length > 0) {
|
||||
|
||||
const model = simulation.models.find( (model) => model.simulator === simulator );
|
||||
const model = simulation.models.find( model => model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator );
|
||||
const chosenSignals = this.props.widget.signals;
|
||||
|
||||
simulatorData = this.props.data[simulator];
|
||||
simulatorData = this.props.data[simulator.node][simulator.simulator];
|
||||
|
||||
// Query the signals that will be displayed in the legend
|
||||
legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {
|
||||
|
|
@ -53,7 +52,7 @@ class WidgetPlot extends Component {
|
|||
return (
|
||||
<div className="plot-widget" ref="wrapper">
|
||||
<h4>{this.props.widget.name}</h4>
|
||||
|
||||
|
||||
<div className="widget-plot">
|
||||
<Plot signals={ this.props.widget.signals } time={ this.props.widget.time } simulatorData={ simulatorData } yAxisLabel={ this.props.widget.ylabel } />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { scaleOrdinal, schemeCategory10 } from 'd3-scale';
|
|||
class Plot extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
||||
this.chartWrapper = null;
|
||||
|
||||
// Initialize plot size and data
|
||||
|
|
@ -24,7 +24,7 @@ class Plot extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
// Get an object with 'invisible' init data for the last minute.
|
||||
// Get an object with 'invisible' init data for the last minute.
|
||||
// Include start/end timestamps if required.
|
||||
getPlotInitData(withRangeTimestamps = false) {
|
||||
|
||||
|
|
@ -32,8 +32,8 @@ class Plot extends Component {
|
|||
const initFirstTime = initSecondTime - 1000 * 60; // Decrease 1 min
|
||||
const values = [{ values: [{x: initFirstTime, y: 0}], strokeWidth: 0 }];
|
||||
|
||||
let output = withRangeTimestamps?
|
||||
{ sequence: 0, values: values, firstTimestamp: initFirstTime, latestTimestamp: initSecondTime, } :
|
||||
let output = withRangeTimestamps?
|
||||
{ sequence: 0, values: values, firstTimestamp: initFirstTime, latestTimestamp: initSecondTime, } :
|
||||
{ sequence: 0, values: values };
|
||||
|
||||
return output;
|
||||
|
|
@ -58,19 +58,19 @@ class Plot extends Component {
|
|||
|
||||
// Identify simulation reset
|
||||
if (nextData == null || nextData.length === 0 || nextData.values[0].length === 0) { this.clearPlot(); return; }
|
||||
|
||||
|
||||
// check if new data, otherwise skip
|
||||
if (this.state.sequence >= nextData.sequence) { return; }
|
||||
|
||||
|
||||
this.updatePlotData(nextProps);
|
||||
|
||||
}
|
||||
|
||||
signalsWereJustCleared(nextProps) {
|
||||
|
||||
return this.props.signals &&
|
||||
nextProps.signals &&
|
||||
this.props.signals.length > 0 &&
|
||||
return this.props.signals &&
|
||||
nextProps.signals &&
|
||||
this.props.signals.length > 0 &&
|
||||
nextProps.signals.length === 0;
|
||||
}
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ class Plot extends Component {
|
|||
nextProps.signals.forEach((signal_index, i, arr) => (
|
||||
// Include signal index, useful to relate them to the signal selection
|
||||
values.push(
|
||||
{
|
||||
{
|
||||
index: signal_index,
|
||||
values: nextData.values[signal_index].slice(firstIndex, nextData.values[signal_index].length - 1)})
|
||||
));
|
||||
|
|
@ -138,4 +138,4 @@ class Plot extends Component {
|
|||
|
||||
}
|
||||
|
||||
export default Plot;
|
||||
export default Plot;
|
||||
|
|
|
|||
|
|
@ -38,33 +38,33 @@ class WidgetTable extends Component {
|
|||
// check data
|
||||
const simulator = nextProps.widget.simulator;
|
||||
|
||||
if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].length === 0 || nextProps.data[simulator].values[0].length === 0) {
|
||||
if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator.node][simulator.simulator] == null || nextProps.data[simulator.node][simulator.simulator].length === 0 || nextProps.data[simulator.node][simulator.simulator].values.length === 0 || nextProps.data[simulator.node][simulator.simulator].values[0].length === 0) {
|
||||
// clear values
|
||||
this.setState({ rows: [], sequence: null });
|
||||
return;
|
||||
}
|
||||
|
||||
// check if new data, otherwise skip
|
||||
if (this.state.sequence >= nextProps.data[simulator].sequence) {
|
||||
/*if (this.state.sequence >= nextProps.data[simulator.node][simulator.simulator].sequence) {
|
||||
return;
|
||||
}
|
||||
}*/
|
||||
|
||||
// get simulation model
|
||||
const simulationModel = nextProps.simulation.models.find((model) => {
|
||||
return (model.simulator === simulator);
|
||||
return (model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator);
|
||||
});
|
||||
|
||||
// get rows
|
||||
var rows = [];
|
||||
|
||||
nextProps.data[simulator].values.forEach((signal, index) => {
|
||||
nextProps.data[simulator.node][simulator.simulator].values.forEach((signal, index) => {
|
||||
rows.push({
|
||||
name: simulationModel.mapping[index].name,
|
||||
value: signal[signal.length - 1].y.toFixed(3)
|
||||
})
|
||||
});
|
||||
|
||||
this.setState({ rows: rows, sequence: nextProps.data[simulator].sequence });
|
||||
this.setState({ rows: rows, sequence: nextProps.data[simulator.node][simulator.simulator].sequence });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -32,16 +32,19 @@ class WidgetValue extends Component {
|
|||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// update value
|
||||
const simulator = nextProps.widget.simulator;
|
||||
const simulator = nextProps.widget.simulator.simulator;
|
||||
const node = nextProps.widget.simulator.node;
|
||||
|
||||
if (nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].values == null) {
|
||||
//console.log(nextProps.widget.simulator);
|
||||
|
||||
if (nextProps.data == null || nextProps.data[node] == null || nextProps.data[node][simulator] == null || nextProps.data[node][simulator].values == null) {
|
||||
this.setState({ value: '' });
|
||||
return;
|
||||
}
|
||||
|
||||
// check if value has changed
|
||||
const signal = nextProps.data[simulator].values[nextProps.widget.signal];
|
||||
if (this.state.value !== signal[signal.length - 1].y) {
|
||||
const signal = nextProps.data[node][simulator].values[nextProps.widget.signal];
|
||||
if (signal != null && this.state.value !== signal[signal.length - 1].y) {
|
||||
this.setState({ value: signal[signal.length - 1].y });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ import NotificationSystem from 'react-notification-system';
|
|||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
import SimulationStore from '../stores/simulation-store';
|
||||
import SimulatorStore from '../stores/simulator-store';
|
||||
import NodeStore from '../stores/node-store';
|
||||
import UserStore from '../stores/user-store';
|
||||
import NotificationsDataManager from '../data-managers/notifications-data-manager';
|
||||
|
||||
|
|
@ -40,12 +40,12 @@ import '../styles/app.css';
|
|||
|
||||
class App extends Component {
|
||||
static getStores() {
|
||||
return [ SimulationStore, SimulatorStore, UserStore ];
|
||||
return [ NodeStore, UserStore, SimulationStore ];
|
||||
}
|
||||
|
||||
static calculateState(prevState) {
|
||||
// get list of running simulators
|
||||
var simulators = SimulatorStore.getState().filter(simulator => {
|
||||
/*var simulators = SimulatorStore.getState().filter(simulator => {
|
||||
return simulator.running === true;
|
||||
});
|
||||
|
||||
|
|
@ -74,16 +74,17 @@ class App extends Component {
|
|||
if (equal) {
|
||||
simulators = prevState.runningSimulators;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
let currentUser = UserStore.getState().currentUser;
|
||||
|
||||
return {
|
||||
nodes: NodeStore.getState(),
|
||||
simulations: SimulationStore.getState(),
|
||||
currentRole: currentUser? currentUser.role : '',
|
||||
token: UserStore.getState().token,
|
||||
token: UserStore.getState().token/*,
|
||||
|
||||
runningSimulators: simulators
|
||||
runningSimulators: simulators*/
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -103,7 +104,7 @@ class App extends Component {
|
|||
|
||||
// load all simulators and simulations to fetch simulation data
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-load'
|
||||
type: 'nodes/start-load'
|
||||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
|
|
@ -126,52 +127,47 @@ class App extends Component {
|
|||
return;
|
||||
}
|
||||
|
||||
// open connection to each required simulator
|
||||
const requiredSimulators = this.requiredSimulatorsBySimulations();
|
||||
// open connection to each node
|
||||
/*const requiredNodes = this.requiredNodesBySimulations();
|
||||
|
||||
requiredSimulators.forEach(simulator => {
|
||||
this.connectSimulator(nextState, simulator);
|
||||
});
|
||||
requiredNodes.forEach(node => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulatorData/open',
|
||||
identifier: simulator._id,
|
||||
endpoint: node.endpoint,
|
||||
signals: data.signals
|
||||
});
|
||||
});*/
|
||||
}
|
||||
|
||||
requiredSimulatorsBySimulations() {
|
||||
var simulators = [];
|
||||
/*requiredNodesBySimulations() {
|
||||
var nodes = {};
|
||||
|
||||
this.state.simulations.forEach((simulation) => {
|
||||
simulation.models.forEach((simulationModel) => {
|
||||
// add simulator to list if not already part of
|
||||
const index = simulators.findIndex((element) => {
|
||||
return element.simulator === simulationModel.simulator;
|
||||
this.state.simulations.forEach(simulation => {
|
||||
simulation.models.forEach(model => {
|
||||
// get ID for node
|
||||
var node = this.state.nodes.find(element => {
|
||||
return element.name === model.simulator.node;
|
||||
});
|
||||
|
||||
if (index === -1) {
|
||||
simulators.push({ simulator: simulationModel.simulator, signals: simulationModel.length });
|
||||
} else {
|
||||
if (simulators[index].length < simulationModel.length) {
|
||||
simulators[index].length = simulationModel.length;
|
||||
// add empty node if not existing
|
||||
if (node !== undefined) {
|
||||
if (nodes[node._id] == null) {
|
||||
nodes[node._id] = { simulators: [] }
|
||||
}
|
||||
|
||||
// get simulator id
|
||||
var simulator = node.simulators.find(simulator => {
|
||||
return simulator.name === model.simulator.simulator;
|
||||
});
|
||||
|
||||
nodes[node._id].simulators.push({ id: simulator.id, signals: model.length });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return simulators;
|
||||
}
|
||||
|
||||
connectSimulator(state, data) {
|
||||
// get simulator object
|
||||
const simulator = state.runningSimulators.find(element => {
|
||||
return element._id === data.simulator;
|
||||
});
|
||||
|
||||
if (simulator != null) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulatorData/open',
|
||||
identifier: simulator._id,
|
||||
endpoint: simulator.endpoint,
|
||||
signals: data.signals
|
||||
});
|
||||
}
|
||||
}
|
||||
return nodes;
|
||||
}*/
|
||||
|
||||
render() {
|
||||
// get children
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import { Container } from 'flux/utils';
|
|||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
|
||||
import SimulationStore from '../stores/simulation-store';
|
||||
import SimulatorStore from '../stores/simulator-store';
|
||||
import NodeStore from '../stores/node-store';
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
||||
import Table from '../components/table';
|
||||
|
|
@ -34,13 +34,13 @@ import EditSimulationModelDialog from '../components/dialog/edit-simulation-mode
|
|||
|
||||
class Simulation extends Component {
|
||||
static getStores() {
|
||||
return [ SimulationStore, SimulatorStore ];
|
||||
return [ SimulationStore, NodeStore ];
|
||||
}
|
||||
|
||||
static calculateState() {
|
||||
return {
|
||||
simulations: SimulationStore.getState(),
|
||||
simulators: SimulatorStore.getState(),
|
||||
nodes: NodeStore.getState(),
|
||||
|
||||
newModal: false,
|
||||
deleteModal: false,
|
||||
|
|
@ -58,7 +58,7 @@ class Simulation extends Component {
|
|||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-load'
|
||||
type: 'nodes/start-load'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -119,14 +119,16 @@ class Simulation extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
getSimulatorName(id) {
|
||||
for (var i = 0; i < this.state.simulators.length; i++) {
|
||||
if (this.state.simulators[i]._id === id) {
|
||||
return this.state.simulators[i].name;
|
||||
}
|
||||
}
|
||||
getSimulatorName(simulator) {
|
||||
var name = "undefined";
|
||||
|
||||
return id;
|
||||
this.state.nodes.forEach(node => {
|
||||
if (node._id === simulator.node) {
|
||||
name = node.name + '/' + node.simulators[simulator.simulator].name;
|
||||
}
|
||||
});
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -136,16 +138,16 @@ class Simulation extends Component {
|
|||
|
||||
<Table data={this.state.simulation.models}>
|
||||
<TableColumn title='Name' dataKey='name' />
|
||||
<TableColumn title='Simulator' dataKey='simulator' width='180' modifier={(id) => this.getSimulatorName(id)} />
|
||||
<TableColumn title='Simulator' dataKey='simulator' width='180' modifier={(simulator) => this.getSimulatorName(simulator)} />
|
||||
<TableColumn title='Length' dataKey='length' width='100' />
|
||||
<TableColumn title='' width='70' editButton deleteButton onEdit={(index) => this.setState({ editModal: true, modalData: this.state.simulation.models[index], modalIndex: index })} onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulation.models[index], modalIndex: index })} />
|
||||
</Table>
|
||||
|
||||
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Simulation Model</Button>
|
||||
|
||||
<NewSimulationModelDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} simulators={this.state.simulators} />
|
||||
<NewSimulationModelDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} nodes={this.state.nodes} />
|
||||
|
||||
<EditSimulationModelDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} data={this.state.modalData} simulators={this.state.simulators} />
|
||||
<EditSimulationModelDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} data={this.state.modalData} nodes={this.state.nodes} />
|
||||
|
||||
<Modal show={this.state.deleteModal}>
|
||||
<Modal.Header>
|
||||
|
|
|
|||
|
|
@ -24,74 +24,168 @@ import { Container } from 'flux/utils';
|
|||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
import SimulatorStore from '../stores/simulator-store';
|
||||
import NodeStore from '../stores/node-store';
|
||||
|
||||
import Table from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewNodeDialog from '../components/dialog/new-node';
|
||||
import EditNodeDialog from '../components/dialog/edit-node';
|
||||
import NewSimulatorDialog from '../components/dialog/new-simulator';
|
||||
import EditSimulatorDialog from '../components/dialog/edit-simulator';
|
||||
import NodeTree from '../components/node-tree';
|
||||
|
||||
class Simulators extends Component {
|
||||
static getStores() {
|
||||
return [ SimulatorStore ];
|
||||
return [ NodeStore ];
|
||||
}
|
||||
|
||||
static calculateState() {
|
||||
return {
|
||||
simulators: SimulatorStore.getState(),
|
||||
nodes: NodeStore.getState(),
|
||||
|
||||
newModal: false,
|
||||
deleteModal: false,
|
||||
editModal: false,
|
||||
modalSimulator: {}
|
||||
newNodeModal: false,
|
||||
deleteNodeModal: false,
|
||||
editNodeModal: false,
|
||||
|
||||
addSimulatorModal: false,
|
||||
editSimulatorModal: false,
|
||||
deleteSimulatorModal: false,
|
||||
|
||||
modalData: {},
|
||||
modalIndex: 0,
|
||||
modalName: ''
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-load'
|
||||
type: 'nodes/start-load'
|
||||
});
|
||||
}
|
||||
|
||||
closeNewModal(data) {
|
||||
this.setState({ newModal : false });
|
||||
closeNewNodeModal(data) {
|
||||
this.setState({ newNodeModal: false });
|
||||
|
||||
if (data) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-add',
|
||||
type: 'nodes/start-add',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
showEditNodeModal(data) {
|
||||
// find node with id
|
||||
var node = this.state.nodes.find((element) => {
|
||||
return element._id === data.id;
|
||||
});
|
||||
|
||||
this.setState({ editNodeModal: true, modalData: node });
|
||||
}
|
||||
|
||||
closeEditNodeModal(data) {
|
||||
this.setState({ editNodeModal: false });
|
||||
|
||||
if (data) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'nodes/start-edit',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showDeleteNodeModal(data) {
|
||||
// find node with id
|
||||
var node = this.state.nodes.find((element) => {
|
||||
return element._id === data.id;
|
||||
});
|
||||
|
||||
this.setState({ deleteNodeModal: true, modalData: node });
|
||||
}
|
||||
|
||||
confirmDeleteNodeModal() {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-remove',
|
||||
data: this.state.modalSimulator
|
||||
type: 'nodes/start-remove',
|
||||
data: this.state.modalData
|
||||
});
|
||||
}
|
||||
|
||||
closeEditModal(data) {
|
||||
this.setState({ editModal : false });
|
||||
showAddSimulatorModal(data) {
|
||||
// find node with id
|
||||
var node = this.state.nodes.find((element) => {
|
||||
return element._id === data.id;
|
||||
});
|
||||
|
||||
this.setState({ addSimulatorModal: true, modalData: node });
|
||||
}
|
||||
|
||||
closeAddSimulatorModal(data) {
|
||||
this.setState({ addSimulatorModal: false });
|
||||
|
||||
if (data) {
|
||||
var node = this.state.modalData;
|
||||
node.simulators.push(data);
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-edit',
|
||||
data: data
|
||||
type: 'nodes/start-edit',
|
||||
data: node
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
labelStyle(value) {
|
||||
if (value === true) return 'success';
|
||||
else return 'warning';
|
||||
showEditSimulatorModal(data, index) {
|
||||
// find node with id
|
||||
var node = this.state.nodes.find((element) => {
|
||||
return element._id === data.id;
|
||||
});
|
||||
|
||||
this.setState({ editSimulatorModal: true, modalData: node, modalIndex: index });
|
||||
}
|
||||
|
||||
labelModifier(value) {
|
||||
if (value === true) return 'Running';
|
||||
else return 'Not running';
|
||||
closeEditSimulatorModal(data) {
|
||||
this.setState({ editSimulatorModal: false });
|
||||
|
||||
if (data) {
|
||||
var node = this.state.modalData;
|
||||
node.simulators[this.state.modalIndex] = data;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'nodes/start-edit',
|
||||
data: node
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showDeleteSimulatorModal(data, index) {
|
||||
// find node with id
|
||||
var node = this.state.nodes.find((element) => {
|
||||
return element._id === data.id;
|
||||
});
|
||||
|
||||
this.setState({ deleteSimulatorModal: true, modalData: node, modalIndex: index, modalName: data.children[index].title });
|
||||
}
|
||||
|
||||
confirmDeleteSimulatorModal() {
|
||||
this.setState({ deleteSimulatorModal: false });
|
||||
|
||||
// remove simulator
|
||||
var node = this.state.modalData;
|
||||
node.simulators.splice(this.state.modalIndex);
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'nodes/start-edit',
|
||||
data: node
|
||||
});
|
||||
}
|
||||
|
||||
onTreeDataChange(nodes) {
|
||||
// update all at once
|
||||
nodes.forEach((node) => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'nodes/start-edit',
|
||||
data: node
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -99,30 +193,50 @@ class Simulators extends Component {
|
|||
<div className='section'>
|
||||
<h1>Simulators</h1>
|
||||
|
||||
<Table data={this.state.simulators}>
|
||||
<TableColumn title='Name' dataKey='name' labelKey='running' labelStyle={(value) => this.labelStyle(value)} labelModifier={(value) => this.labelModifier(value)} />
|
||||
<TableColumn title='Endpoint' dataKey='endpoint' width='180' />
|
||||
<TableColumn title='' width='70' editButton deleteButton onEdit={(index) => this.setState({ editModal: true, modalSimulator: this.state.simulators[index] })} onDelete={(index) => this.setState({ deleteModal: true, modalSimulator: this.state.simulators[index] })} />
|
||||
</Table>
|
||||
<Button onClick={() => this.setState({ newNodeModal: true })}><Glyphicon glyph="plus" /> Node</Button>
|
||||
|
||||
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Simulator</Button>
|
||||
<br />
|
||||
<small><i>Hint: Node names must be unique. Simulator names must be unique on a node.</i></small>
|
||||
|
||||
<NewSimulatorDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
<NodeTree data={this.state.nodes} onDataChange={(treeData) => this.onTreeDataChange(treeData)} onNodeDelete={(node) => this.showDeleteNodeModal(node)} onNodeEdit={(node) => this.showEditNodeModal(node)} onNodeAdd={(node) => this.showAddSimulatorModal(node)} onSimulatorEdit={(node, index) => this.showEditSimulatorModal(node, index)} onSimulatorDelete={(node, index) => this.showDeleteSimulatorModal(node, index)} />
|
||||
|
||||
<EditSimulatorDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} simulator={this.state.modalSimulator} />
|
||||
<NewNodeDialog show={this.state.newNodeModal} onClose={(data) => this.closeNewNodeModal(data)} nodes={this.state.nodes} />
|
||||
<EditNodeDialog node={this.state.modalData} show={this.state.editNodeModal} onClose={(data) => this.closeEditNodeModal(data)} nodes={this.state.nodes} />
|
||||
<NewSimulatorDialog show={this.state.addSimulatorModal} onClose={(data) => this.closeAddSimulatorModal(data)} node={this.state.modalData}/>
|
||||
|
||||
<Modal show={this.state.deleteModal}>
|
||||
{this.state.editSimulatorModal &&
|
||||
<EditSimulatorDialog simulator={this.state.modalData.simulators[this.state.modalIndex]} show={this.state.editSimulatorModal} onClose={(data) => this.closeEditSimulatorModal(data)} node={this.state.modalData} />
|
||||
}
|
||||
|
||||
<Modal show={this.state.deleteNodeModal}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Node</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the node <strong>'{this.state.modalData.name}'</strong>?
|
||||
<br />
|
||||
This will delete all simulators assigned to this node.
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteNodeModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteNodeModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
|
||||
<Modal show={this.state.deleteSimulatorModal}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Simulator</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the simulator <strong>'{this.state.modalSimulator.name}'</strong>?
|
||||
Are you sure you want to delete the simulator <strong>'{this.state.modalName}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
<Button onClick={() => this.setState({ deleteSimulatorModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteSimulatorModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -65,13 +65,13 @@ class Visualization extends Component {
|
|||
editModal: prevState.editModal || false,
|
||||
modalData: prevState.modalData || null,
|
||||
modalIndex: prevState.modalIndex || null,
|
||||
|
||||
|
||||
maxWidgetHeight: prevState.maxWidgetHeight || 0,
|
||||
dropZoneHeight: prevState.dropZoneHeight || 0,
|
||||
last_widget_key: prevState.last_widget_key || 0
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
componentWillMount() {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-load'
|
||||
|
|
@ -167,7 +167,7 @@ class Visualization extends Component {
|
|||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
widgets: new_widgets
|
||||
});
|
||||
|
||||
|
||||
this.increaseHeightWithWidget(widget);
|
||||
this.setState({ visualization: visualization });
|
||||
}
|
||||
|
|
@ -185,7 +185,7 @@ class Visualization extends Component {
|
|||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
widgets: new_widgets
|
||||
});
|
||||
|
||||
|
||||
// Check if the height needs to be increased, the section may have shrunk if not
|
||||
if (!this.increaseHeightWithWidget(updated_widget)) {
|
||||
this.computeHeightWithWidgets(visualization.widgets);
|
||||
|
|
@ -201,12 +201,12 @@ class Visualization extends Component {
|
|||
let maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => {
|
||||
let thisWidget = widgets[widgetKey];
|
||||
let thisWidgetHeight = thisWidget.y + thisWidget.height;
|
||||
|
||||
|
||||
return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar;
|
||||
}, 0);
|
||||
|
||||
this.setState({
|
||||
maxWidgetHeight: maxHeight,
|
||||
this.setState({
|
||||
maxWidgetHeight: maxHeight,
|
||||
dropZoneHeight: maxHeight + 40
|
||||
});
|
||||
}
|
||||
|
|
@ -219,8 +219,8 @@ class Visualization extends Component {
|
|||
let thisWidgetHeight = widget.y + widget.height;
|
||||
if (thisWidgetHeight > this.state.maxWidgetHeight) {
|
||||
increased = true;
|
||||
this.setState({
|
||||
maxWidgetHeight: thisWidgetHeight,
|
||||
this.setState({
|
||||
maxWidgetHeight: thisWidgetHeight,
|
||||
dropZoneHeight: thisWidgetHeight + 40
|
||||
});
|
||||
}
|
||||
|
|
@ -235,7 +235,7 @@ class Visualization extends Component {
|
|||
if (data) {
|
||||
// save changes temporarily
|
||||
var widgets_update = {};
|
||||
widgets_update[this.state.modalIndex] = data;
|
||||
widgets_update[this.state.modalIndex] = data;
|
||||
|
||||
var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update);
|
||||
|
||||
|
|
|
|||
69
src/data-managers/nodes-data-manager.js
Normal file
69
src/data-managers/nodes-data-manager.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/**
|
||||
* File: nodes-data-manager.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 26.06.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import RestDataManager from './rest-data-manager';
|
||||
import RestAPI from '../api/rest-api';
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
||||
class NodesDataManager extends RestDataManager {
|
||||
constructor() {
|
||||
super('node', '/nodes');
|
||||
}
|
||||
|
||||
getSimulators(node) {
|
||||
RestAPI.post('http://' + node.endpoint + '/api/v1', {
|
||||
action: 'nodes',
|
||||
id: node._id
|
||||
}).then(response => {
|
||||
// assign IDs to simulators
|
||||
response.response.forEach(element => {
|
||||
if (element.type === "websocket") {
|
||||
// add the (villas-node) node ID to the simulator
|
||||
node.simulators = node.simulators.map(simulator => {
|
||||
if (simulator.name === element.name) {
|
||||
simulator.id = element.id;
|
||||
}
|
||||
|
||||
return simulator;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'nodes/edited',
|
||||
data: node
|
||||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulatorData/open',
|
||||
node: node,
|
||||
endpoint: node.endpoint,
|
||||
});
|
||||
}).catch(error => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'nodes/edit-error',
|
||||
error: error
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default new NodesDataManager();
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
import RestAPI from '../api/rest-api';
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
||||
const HOST = process.env.REACT_APP_HTTP_PROXY || "";
|
||||
const HOST = process.env.REACT_APP_HTTP_PROXY || "http://localhost:4000";
|
||||
const API_URL = HOST + '/api/v1';
|
||||
|
||||
class RestDataManager {
|
||||
|
|
|
|||
|
|
@ -27,21 +27,21 @@ class SimulatorDataDataManager {
|
|||
this._sockets = {};
|
||||
}
|
||||
|
||||
open(endpoint, identifier, signals) {
|
||||
open(endpoint, node) {
|
||||
// pass signals to onOpen callback
|
||||
if (this._sockets[identifier] != null) {
|
||||
if (this._sockets[identifier].url !== WebsocketAPI.getURL(endpoint)) {
|
||||
if (this._sockets[node._id] != null) {
|
||||
if (this._sockets[node._id].url !== WebsocketAPI.getURL(endpoint)) {
|
||||
// replace connection, since endpoint changed
|
||||
this._sockets.close();
|
||||
|
||||
this._sockets[identifier] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, identifier, signals), onClose: (event) => this.onClose(event, identifier), onMessage: (event) => this.onMessage(event, identifier) });
|
||||
this._sockets[node._id] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, node), onClose: (event) => this.onClose(event, node), onMessage: (event) => this.onMessage(event, node) });
|
||||
}
|
||||
} else {
|
||||
// set flag if a socket to this simulator was already create before
|
||||
if (this._sockets[identifier] === null) {
|
||||
this._sockets[identifier] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, identifier, signals, false), onClose: (event) => this.onClose(event, identifier), onMessage: (event) => this.onMessage(event, identifier) });
|
||||
if (this._sockets[node._id] === null) {
|
||||
this._sockets[node._id] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, node, false), onClose: (event) => this.onClose(event, node), onMessage: (event) => this.onMessage(event, node) });
|
||||
} else {
|
||||
this._sockets[identifier] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, identifier, signals, true), onClose: (event) => this.onClose(event, identifier), onMessage: (event) => this.onMessage(event, identifier) });
|
||||
this._sockets[node._id] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, node, true), onClose: (event) => this.onClose(event, node), onMessage: (event) => this.onMessage(event, node) });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -56,33 +56,32 @@ class SimulatorDataDataManager {
|
|||
}
|
||||
}
|
||||
|
||||
onOpen(event, identifier, signals, firstOpen) {
|
||||
onOpen(event, node, firstOpen) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulatorData/opened',
|
||||
identifier: identifier,
|
||||
signals: signals,
|
||||
node: node,
|
||||
firstOpen: firstOpen
|
||||
});
|
||||
}
|
||||
|
||||
onClose(event, identifier) {
|
||||
onClose(event, node) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulatorData/closed',
|
||||
identifier: identifier,
|
||||
node: node,
|
||||
notification: (event.code !== 4000)
|
||||
});
|
||||
|
||||
// remove from list, keep null reference for flag detection
|
||||
delete this._sockets[identifier];
|
||||
delete this._sockets[node._id];
|
||||
}
|
||||
|
||||
onMessage(event, identifier) {
|
||||
onMessage(event, node) {
|
||||
var message = this.bufferToMessage(event.data);
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulatorData/data-changed',
|
||||
data: message,
|
||||
identifier: identifier
|
||||
node: node
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -95,6 +94,7 @@ class SimulatorDataDataManager {
|
|||
|
||||
var bits = data.getUint8(0);
|
||||
var length = data.getUint16(0x02, 1);
|
||||
var id = data.getUint8(1);
|
||||
|
||||
var values = new Float32Array(data.buffer, data.byteOffset + 0x10, length);
|
||||
|
||||
|
|
@ -104,7 +104,8 @@ class SimulatorDataDataManager {
|
|||
length: length,
|
||||
sequence: data.getUint32(0x04, 1),
|
||||
timestamp: data.getUint32(0x08, 1) * 1e3 + data.getUint32(0x0C, 1) * 1e-6,
|
||||
values: values
|
||||
values: values,
|
||||
id: id
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
/**
|
||||
* File: simulators-data-manager.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 02.03.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import RestDataManager from './rest-data-manager';
|
||||
import RestAPI from '../api/rest-api';
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
||||
function isRunning(simulator) {
|
||||
// get path to nodes.json and simulator name
|
||||
var path = simulator.endpoint.substring(0, simulator.endpoint.lastIndexOf('/'));
|
||||
|
||||
var url = 'http://' + path + '/api/v1';
|
||||
var body = {
|
||||
action: 'nodes',
|
||||
id: '1234' /// @todo use random generated id
|
||||
};
|
||||
|
||||
// send request
|
||||
RestAPI.post(url, body).then(response => {
|
||||
// check if simulator is running
|
||||
simulator.running = false;
|
||||
|
||||
if (response.id === body.id) {
|
||||
response.response.forEach(sim => {
|
||||
if (sim.name === simulator.name) {
|
||||
simulator.running = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/running',
|
||||
simulator: simulator,
|
||||
running: simulator.running
|
||||
});
|
||||
}).catch(error => {
|
||||
simulator.running = false;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/running',
|
||||
simulator: simulator,
|
||||
running: simulator.running
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
class SimulatorsDataManager extends RestDataManager {
|
||||
constructor() {
|
||||
super('simulator', '/simulators', [ '_id', 'name', 'endpoint' ]);
|
||||
|
||||
this._timers = [];
|
||||
}
|
||||
|
||||
startRunningDetection(obj) {
|
||||
const simulator = JSON.parse(JSON.stringify(obj));
|
||||
|
||||
// check if timer is already running
|
||||
const index = this._timers.findIndex(timer => {
|
||||
return timer.simulator === simulator._id;
|
||||
});
|
||||
|
||||
if (index !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// do first request for fast response time
|
||||
isRunning(simulator);
|
||||
|
||||
// start new timer
|
||||
const timerID = setInterval(isRunning, 5000, simulator);
|
||||
this._timers.push({ id: timerID, simulator: simulator._id });
|
||||
}
|
||||
|
||||
stopRunningDetection(simulator) {
|
||||
// remove timer
|
||||
const index = this._timers.findIndex(timer => {
|
||||
return timer.simulator === simulator._id;
|
||||
});
|
||||
|
||||
if (index !== -1) {
|
||||
// stop timer and delete from list
|
||||
clearInterval(this._timers[index].id);
|
||||
this._timers.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new SimulatorsDataManager();
|
||||
50
src/stores/node-store.js
Normal file
50
src/stores/node-store.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* File: node-store.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 26.06.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import ArrayStore from './array-store';
|
||||
import NodesDataManager from '../data-managers/nodes-data-manager';
|
||||
|
||||
class NodeStore extends ArrayStore {
|
||||
constructor() {
|
||||
super('nodes', NodesDataManager);
|
||||
}
|
||||
|
||||
reduce(state, action) {
|
||||
switch(action.type) {
|
||||
case 'nodes/loaded':
|
||||
// get simulator IDs
|
||||
if (Array.isArray(action.data)) {
|
||||
action.data.forEach(node => {
|
||||
NodesDataManager.getSimulators(node);
|
||||
});
|
||||
} else {
|
||||
NodesDataManager.getSimulators(action.data);
|
||||
}
|
||||
|
||||
return super.reduce(state, action);
|
||||
|
||||
default:
|
||||
return super.reduce(state, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new NodeStore();
|
||||
|
|
@ -40,48 +40,57 @@ class SimulationDataStore extends ReduceStore {
|
|||
|
||||
switch (action.type) {
|
||||
case 'simulatorData/open':
|
||||
SimulatorDataDataManager.open(action.endpoint, action.identifier, action.signals);
|
||||
SimulatorDataDataManager.open(action.endpoint, action.node);
|
||||
return state;
|
||||
|
||||
case 'simulatorData/opened':
|
||||
// create entry for simulator
|
||||
state[action.identifier] = { signals: action.signals, values: [], sequence: null, timestamp: null };
|
||||
state[action.node._id] = {};
|
||||
|
||||
for (i = 0; i < action.signals; i++) {
|
||||
state[action.identifier].values.push([]);
|
||||
}
|
||||
action.node.simulators.forEach(simulator => {
|
||||
state[action.node._id][simulator.id] = { sequence: -1, values: [] };
|
||||
});
|
||||
|
||||
return state;
|
||||
|
||||
case 'simulatorData/data-changed':
|
||||
// check if data is required, otherwise discard
|
||||
if (state[action.node._id] == null || state[action.node._id][action.data.id] == null) {
|
||||
return state;
|
||||
}
|
||||
|
||||
// only add data, if newer than current
|
||||
if (state[action.identifier].sequence < action.data.sequence) {
|
||||
if (state[action.node._id][action.data.id].sequence < action.data.sequence) {
|
||||
// add data to simulator
|
||||
for (i = 0; i < state[action.identifier].signals; i++) {
|
||||
state[action.identifier].values[i].push({ x: action.data.timestamp, y: action.data.values[i] });
|
||||
for (i = 0; i < action.data.length; i++) {
|
||||
while (state[action.node._id][action.data.id].values.length < i + 1) {
|
||||
state[action.node._id][action.data.id].values.push([]);
|
||||
}
|
||||
|
||||
state[action.node._id][action.data.id].values[i].push({ x: action.data.timestamp, y: action.data.values[i] });
|
||||
|
||||
// erase old values
|
||||
if (state[action.identifier].values[i].length > MAX_VALUES) {
|
||||
const pos = state[action.identifier].values[i].length - MAX_VALUES;
|
||||
state[action.identifier].values[i].splice(0, pos);
|
||||
if (state[action.node._id][action.data.id].values[i].length > MAX_VALUES) {
|
||||
const pos = state[action.node._id][action.data.id].values[i].length - MAX_VALUES;
|
||||
state[action.node._id][action.data.id].values[i].splice(0, pos);
|
||||
}
|
||||
}
|
||||
|
||||
// update metadata
|
||||
state[action.identifier].timestamp = action.data.timestamp;
|
||||
state[action.identifier].sequence = action.data.sequence;
|
||||
state[action.node._id][action.data.id].timestamp = action.data.timestamp;
|
||||
state[action.node._id][action.data.id].sequence = action.data.sequence;
|
||||
|
||||
// explicit call to prevent array copy
|
||||
this.__emitChange();
|
||||
} else {
|
||||
console.log('same sequence ' + state[action.identifier].sequence + ' ' + action.data.sequence);
|
||||
console.log('same sequence ' + state[action.node._id][action.data.id].sequence + ' ' + action.data.sequence);
|
||||
}
|
||||
|
||||
return state;
|
||||
|
||||
case 'simulatorData/closed':
|
||||
// close and delete socket
|
||||
if (state[action.identifier] != null) {
|
||||
if (state[action.node] != null) {
|
||||
// delete data
|
||||
//delete state[action.identifier];
|
||||
//state[action.identifier] = null;
|
||||
|
|
|
|||
|
|
@ -1,128 +0,0 @@
|
|||
/**
|
||||
* File: villas-store.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 02.03.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import ArrayStore from './array-store';
|
||||
import SimulatorsDataManager from '../data-managers/simulators-data-manager';
|
||||
import NotificationsDataManager from '../data-managers/notifications-data-manager';
|
||||
|
||||
class SimulatorStore extends ArrayStore {
|
||||
constructor() {
|
||||
super('simulators', SimulatorsDataManager);
|
||||
}
|
||||
|
||||
reduce(state, action) {
|
||||
var simulator;
|
||||
|
||||
switch (action.type) {
|
||||
|
||||
case 'simulators/added':
|
||||
SimulatorsDataManager.startRunningDetection(action.data);
|
||||
|
||||
return super.reduce(state, action);
|
||||
|
||||
case 'simulators/removed':
|
||||
SimulatorsDataManager.stopRunningDetection(action.original);
|
||||
|
||||
return super.reduce(state, action);
|
||||
|
||||
case 'simulators/start-edit':
|
||||
// An update will be requested, stop the 'runningDetection' already
|
||||
SimulatorsDataManager.stopRunningDetection(action.data);
|
||||
|
||||
return super.reduce(state, action);
|
||||
|
||||
case 'simulators/edited':
|
||||
// The update was done, resume the 'runningDetection'
|
||||
SimulatorsDataManager.startRunningDetection(action.data);
|
||||
|
||||
return super.reduce(state, action);
|
||||
|
||||
case 'simulators/loaded':
|
||||
// get simulator running state
|
||||
if (Array.isArray(action.data)) {
|
||||
action.data.forEach((simulator) => {
|
||||
SimulatorsDataManager.startRunningDetection(simulator);
|
||||
});
|
||||
} else {
|
||||
SimulatorsDataManager.startRunningDetection(action.data);
|
||||
}
|
||||
|
||||
return super.reduce(state, action);
|
||||
|
||||
case 'simulators/running':
|
||||
// check if simulator running state changed
|
||||
simulator = state.find(element => element._id === action.simulator._id );
|
||||
|
||||
// is this simulator still in the state? update it only if state changed
|
||||
if (simulator && simulator.running !== action.simulator.running) {
|
||||
state = this.updateElements(state, [ action.simulator ]);
|
||||
}
|
||||
|
||||
return state;
|
||||
|
||||
case 'simulatorData/opened':
|
||||
// get simulator
|
||||
simulator = state.find(element => {
|
||||
return element._id === action.identifier;
|
||||
});
|
||||
|
||||
if (action.firstOpen === false) {
|
||||
NotificationsDataManager.addNotification({
|
||||
title: 'Simulator online',
|
||||
message: 'Simulator \'' + simulator.name + '\' went online.',
|
||||
level: 'info'
|
||||
});
|
||||
}
|
||||
|
||||
// restart requesting again
|
||||
SimulatorsDataManager.stopRunningDetection(simulator);
|
||||
|
||||
return state;
|
||||
|
||||
case 'simulatorData/closed':
|
||||
// get simulator
|
||||
simulator = state.find(element => {
|
||||
return element._id === action.identifier;
|
||||
});
|
||||
|
||||
// update running state
|
||||
simulator.running = false;
|
||||
|
||||
if (action.notification) {
|
||||
NotificationsDataManager.addNotification({
|
||||
title: 'Simulator offline',
|
||||
message: 'Simulator \'' + simulator.name + '\' went offline.',
|
||||
level: 'info'
|
||||
});
|
||||
|
||||
// restart requesting again
|
||||
SimulatorsDataManager.startRunningDetection(simulator);
|
||||
}
|
||||
|
||||
return this.updateElements(state, [ simulator ]);
|
||||
|
||||
default:
|
||||
return super.reduce(state, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new SimulatorStore();
|
||||
Loading…
Add table
Reference in a new issue