Component Config import and export working #216

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 (
-      <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>

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',

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');
   }
 

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;
 

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',