mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Component Config import and export working #216
This commit is contained in:
parent
342ed5d83d
commit
7241e2c01b
5 changed files with 83 additions and 94 deletions
|
@ -17,18 +17,19 @@
|
|||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
|
||||
import _ from 'lodash';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
class ImportConfigDialog extends React.Component {
|
||||
imported = false;
|
||||
valid = false;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
config: {}
|
||||
config: {},
|
||||
name: '',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -39,12 +40,13 @@ class ImportConfigDialog extends React.Component {
|
|||
return;
|
||||
}
|
||||
|
||||
this.props.onClose(this.state.config);
|
||||
this.props.onClose(this.state);
|
||||
}
|
||||
|
||||
resetState = () => {
|
||||
this.setState({
|
||||
config: {}
|
||||
config: {},
|
||||
name: ''
|
||||
});
|
||||
|
||||
this.imported = false;
|
||||
|
@ -58,46 +60,65 @@ class ImportConfigDialog extends React.Component {
|
|||
}
|
||||
|
||||
// create file reader
|
||||
const reader = new FileReader();
|
||||
const self = this;
|
||||
let reader = new FileReader();
|
||||
let self = this;
|
||||
|
||||
reader.onload = event => {
|
||||
const config = JSON.parse(event.target.result);
|
||||
|
||||
config.icID = this.props.ics.length > 0 ? this.props.ics[0]._id : null;
|
||||
|
||||
self.imported = true;
|
||||
|
||||
this.setState({ config: config });
|
||||
self.valid = true;
|
||||
this.setState({name: config.name, config: config });
|
||||
};
|
||||
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
handleICChange = event => {
|
||||
const config = this.state.config;
|
||||
handleChange(e, index) {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
|
||||
config.icID = event.target.value;
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
let name = true;
|
||||
|
||||
this.setState({ config: config });
|
||||
if (this.state.name === '') {
|
||||
name = false;
|
||||
}
|
||||
this.valid = name;
|
||||
|
||||
// return state to control
|
||||
if (target === 'name'){
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Import Component Configuration" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={this.resetState} valid={this.imported}>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Import Component Configuration"
|
||||
buttonTitle="Import"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={this.valid} >
|
||||
<form>
|
||||
<FormGroup controlId='file'>
|
||||
<FormLabel>Component Configuration File</FormLabel>
|
||||
<FormControl type='file' onChange={this.loadFile} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup controlId='IC'>
|
||||
<FormLabel>Infrastructure Component</FormLabel>
|
||||
<FormControl disabled={this.imported === false} as='select' placeholder='Select infrastructure component' value={this.state.config.icID} onChange={this.handleICChange}>
|
||||
{this.props.ics.map(ic => (
|
||||
<option key={ic.id} value={ic.id}>{_.get(ic, 'properties.name') || _.get(ic, 'rawProperties.name')}</option>
|
||||
))}
|
||||
</FormControl>
|
||||
<FormGroup controlId="name" >
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl
|
||||
readOnly={!this.imported}
|
||||
isValid={this.validateForm('name')}
|
||||
type="text"
|
||||
placeholder="Enter name"
|
||||
value={this.state.name}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
|
|
@ -30,7 +30,6 @@ class DashboardsDataManager extends RestDataManager{
|
|||
data = [data];
|
||||
}
|
||||
|
||||
console.log("onDashboardsLoad");
|
||||
for (let dashboard of data){
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-load',
|
||||
|
|
|
@ -118,20 +118,6 @@ class Scenario extends React.Component {
|
|||
token: this.state.sessionToken
|
||||
});
|
||||
|
||||
// load component configurations for selected scenario
|
||||
AppDispatcher.dispatch({
|
||||
type: 'configs/start-load',
|
||||
token: this.state.sessionToken,
|
||||
param: '?scenarioID='+this.state.scenario.id
|
||||
});
|
||||
|
||||
// load dashboards of selected scenario
|
||||
AppDispatcher.dispatch({
|
||||
type: 'dashboards/start-load',
|
||||
token: this.state.sessionToken,
|
||||
param: '?scenarioID='+this.state.scenario.id
|
||||
});
|
||||
|
||||
// load ICs to enable that component configs and dashboards work with them
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/start-load',
|
||||
|
@ -139,36 +125,6 @@ class Scenario extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (this.state.dashboards.length > prevState.dashboards.length) {
|
||||
if (this.addWidgets) { // add widgets
|
||||
// this can only be true after dashboard import, so there is only one dashboard
|
||||
// (the newest) and this dashboards ID is used
|
||||
let dashboardID = this.state.dashboards[this.state.dashboards.length - 1].id;
|
||||
this.widgetsToAdd.forEach((widget) => {
|
||||
widget.dashboardID = dashboardID;
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-add',
|
||||
data: widget,
|
||||
token: this.state.sessionToken,
|
||||
})
|
||||
})
|
||||
this.addWidgets = false;
|
||||
this.widgetsToAdd = [];
|
||||
}
|
||||
else { // get widgets
|
||||
let dashboards = Object.assign([], this.state.dashboards);
|
||||
for (var i = prevState.dashboards.length; i < this.state.dashboards.length; i++) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-load',
|
||||
token: this.state.sessionToken,
|
||||
param: '?dashboardID=' + dashboards[i].id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ##############################################
|
||||
* Component Configuration modification methods
|
||||
|
@ -223,33 +179,47 @@ class Scenario extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
importConfig(config){
|
||||
importConfig(data){
|
||||
this.setState({ importConfigModal: false });
|
||||
|
||||
if (config == null) {
|
||||
if (data == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
config.scenario = this.state.scenario.id;
|
||||
let newConfig = JSON.parse(JSON.stringify(data.config))
|
||||
|
||||
newConfig["scenarioID"] = this.state.scenario.id;
|
||||
newConfig.name = data.name;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'configs/start-add',
|
||||
data: config,
|
||||
data: newConfig,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
|
||||
this.setState({ scenario: {} }, () => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'scenarios/start-load',
|
||||
data: this.props.match.params.scenario,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
exportConfig(index) {
|
||||
// filter properties
|
||||
const config = Object.assign({}, this.state.configs[index]);
|
||||
let config = JSON.parse(JSON.stringify(this.state.configs[index]));
|
||||
|
||||
let signals = JSON.parse(JSON.stringify(SignalStore.getState().filter(s => s.configID === parseInt(config.id, 10))));
|
||||
signals.forEach((signal) => {
|
||||
delete signal.configID;
|
||||
delete signal.id;
|
||||
})
|
||||
|
||||
// two separate lists for inputMapping and outputMapping
|
||||
let inputSignals = signals.filter(s => s.direction === 'in');
|
||||
let outputSignals = signals.filter(s => s.direction === 'out');
|
||||
|
||||
// add signal mappings to config
|
||||
config["inputMapping"] = inputSignals;
|
||||
config["outputMapping"] = outputSignals;
|
||||
|
||||
delete config.id;
|
||||
delete config.scenarioID;
|
||||
delete config.inputLength;
|
||||
delete config.outputLength;
|
||||
|
||||
// show save dialog
|
||||
const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
|
||||
|
@ -356,12 +326,7 @@ class Scenario extends React.Component {
|
|||
if (data) {
|
||||
let newDashboard = JSON.parse(JSON.stringify(data));
|
||||
newDashboard["scenarioID"] = this.state.scenario.id;
|
||||
// temporarily store widget data until dashboard is created
|
||||
if (data.widgets) {
|
||||
this.addWidgets = true;
|
||||
this.widgetsToAdd = data.widgets;
|
||||
}
|
||||
delete newDashboard.widgets;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'dashboards/start-add',
|
||||
data: newDashboard,
|
||||
|
@ -372,16 +337,19 @@ class Scenario extends React.Component {
|
|||
|
||||
exportDashboard(index) {
|
||||
// filter properties
|
||||
const dashboard = Object.assign({}, this.state.dashboards[index]);
|
||||
let dashboard = JSON.parse(JSON.stringify(this.state.dashboards[index]));
|
||||
|
||||
let widgets = WidgetStore.getState().filter(w => w.dashboardID === parseInt(dashboard.id, 10));
|
||||
let widgets = JSON.parse(JSON.stringify(WidgetStore.getState().filter(w => w.dashboardID === parseInt(dashboard.id, 10))));
|
||||
widgets.forEach((widget) => {
|
||||
delete widget.dashboardID;
|
||||
delete widget.id;
|
||||
})
|
||||
dashboard["widgets"] = widgets;
|
||||
delete dashboard.scenarioID;
|
||||
delete dashboard.id;
|
||||
|
||||
|
||||
var jsonObj = dashboard;
|
||||
jsonObj["widgets"] = widgets;
|
||||
|
||||
// show save dialog
|
||||
const blob = new Blob([JSON.stringify(jsonObj, null, 2)], { type: 'application/json' });
|
||||
const blob = new Blob([JSON.stringify(dashboard, null, 2)], { type: 'application/json' });
|
||||
FileSaver.saveAs(blob, 'dashboard - ' + dashboard.name + '.json');
|
||||
}
|
||||
|
||||
|
|
|
@ -190,6 +190,8 @@ class Scenarios extends Component {
|
|||
|
||||
delete config.id;
|
||||
delete config.scenarioID;
|
||||
delete config.inputLength;
|
||||
delete config.outputLength;
|
||||
})
|
||||
jsonObj["configs"] = configs;
|
||||
|
||||
|
|
|
@ -27,7 +27,6 @@ class SignalsDataManager extends RestDataManager{
|
|||
|
||||
reloadConfig(token, data){
|
||||
// request in signals
|
||||
console.log("Reloading component config due to signal add/remove")
|
||||
RestAPI.get(this.makeURL('/configs/' + data.configID), token).then(response => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'configs/edited',
|
||||
|
|
Loading…
Add table
Reference in a new issue