From 7241e2c01b9884ebf9c35c91c98403a42de13382 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Fri, 29 May 2020 11:33:49 +0200 Subject: [PATCH] Component Config import and export working #216 --- src/componentconfig/import-config.js | 65 +++++++++----- src/dashboard/dashboards-data-manager.js | 1 - src/scenario/scenario.js | 108 ++++++++--------------- src/scenario/scenarios.js | 2 + src/signal/signals-data-manager.js | 1 - 5 files changed, 83 insertions(+), 94 deletions(-) diff --git a/src/componentconfig/import-config.js b/src/componentconfig/import-config.js index 89c1986..b11a69e 100644 --- a/src/componentconfig/import-config.js +++ b/src/componentconfig/import-config.js @@ -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 ( - this.onClose(c)} onReset={this.resetState} valid={this.imported}> + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} >
Component Configuration File - - Infrastructure Component - - {this.props.ics.map(ic => ( - - ))} - + + Name + this.handleChange(e)} + /> +
diff --git a/src/dashboard/dashboards-data-manager.js b/src/dashboard/dashboards-data-manager.js index 94c847f..451d3bf 100644 --- a/src/dashboard/dashboards-data-manager.js +++ b/src/dashboard/dashboards-data-manager.js @@ -30,7 +30,6 @@ class DashboardsDataManager extends RestDataManager{ data = [data]; } - console.log("onDashboardsLoad"); for (let dashboard of data){ AppDispatcher.dispatch({ type: 'widgets/start-load', diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 005b859..ed20600 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -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'); } diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js index 84fc34c..22711a7 100644 --- a/src/scenario/scenarios.js +++ b/src/scenario/scenarios.js @@ -190,6 +190,8 @@ class Scenarios extends Component { delete config.id; delete config.scenarioID; + delete config.inputLength; + delete config.outputLength; }) jsonObj["configs"] = configs; diff --git a/src/signal/signals-data-manager.js b/src/signal/signals-data-manager.js index 768bc7a..2e6cf98 100644 --- a/src/signal/signals-data-manager.js +++ b/src/signal/signals-data-manager.js @@ -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',