adapting IC to revised infrastructure component model

src/ic/edit-ic.js

@@ -30,23 +30,38 @@ class EditICDialog extends React.Component {
 
     this.state = {
       name: '',
-      endpoint: ''
+      host: '',
+      type: '',
+      category: '',
+      properties: {},
     };
   }
 
   onClose(canceled) {
     if (canceled === false) {
       if (this.valid) {
-        let data = this.props.ic.properties;
+        let data = this.props.ic;
 
-        if (this.state.name != null && this.state.name !== "" && this.state.name !== _.get(this.props.ic, 'rawProperties.name')) {
+        if (this.state.name != null && this.state.name !== "" && this.state.name !== this.props.ic.name) {
           data.name = this.state.name;
         }
 
-        if (this.state.endpoint != null && this.state.endpoint !== "" && this.state.endpoint !== "http://" && this.state.endpoint !== _.get(this.props.ic, 'rawProperties.endpoint')) {
-          data.endpoint = this.state.endpoint;
+        if (this.state.host != null && this.state.host !== "" && this.state.host !== "http://" && this.state.host !== this.props.ic.host) {
+          data.host = this.state.host;
         }
 
+        if (this.state.type != null && this.state.type !== "" && this.state.type !== this.props.ic.type) {
+          data.type = this.state.type;
+        }
+
+        if (this.state.category != null && this.state.category !== "" && this.state.category !== this.props.ic.category) {
+          data.category = this.state.category;
+        }
+        if (this.state.properties !== {}) {
+          data.properties = this.state.properties
+        }
+
+
         this.props.onClose(data);
       }
     } else {
@@ -60,8 +75,11 @@ class EditICDialog extends React.Component {
 
   resetState() {
     this.setState({
-      name: _.get(this.props.ic, 'properties.name') || _.get(this.props.ic, 'rawProperties.name'),
-      endpoint: _.get(this.props.ic, 'properties.endpoint') || _.get(this.props.ic, 'rawProperties.endpoint')
+      name: this.props.ic.name,
+      host: this.props.ic.host,
+      type: this.props.ic.type,
+      category: this.props.ic.category,
+      properties: _.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))
     });
   }
 
@@ -71,17 +89,27 @@ class EditICDialog extends React.Component {
         <form>
           <FormGroup controlId="name">
             <FormLabel column={false}>Name</FormLabel>
-            <FormControl type="text" placeholder={_.get(this.props.ic, 'properties.name')} value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="endpoint">
-            <FormLabel column={false}>Endpoint</FormLabel>
-            <FormControl type="text" placeholder={_.get(this.props.ic, 'properties.endpoint')} value={this.state.endpoint || 'http://' } onChange={(e) => this.handleChange(e)} />
+          <FormGroup controlId="host">
+            <FormLabel column={false}>Host</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.host} value={this.state.host || 'http://' } onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="category">
+            <FormLabel column={false}>Category (e.g. Simulator, Gateway, ...)</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.category} value={this.state.category} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="type">
+            <FormLabel column={false}>Type (e.g. RTDS, VILLASnode, ...)</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.type} value={this.state.type} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
           <FormGroup controlId='properties'>
             <FormLabel column={false}>Properties</FormLabel>
-            <ParametersEditor content={_.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))} disabled={true} />
+            <ParametersEditor content={this.state.properties} disabled={false} />
           </FormGroup>
         </form>
       </Dialog>

src/ic/ics.js

@@ -127,13 +127,13 @@ class InfrastructureComponents extends Component {
     this.setState({ editModal : false });
 
     if (data) {
-      let ic = this.state.ics[this.state.modalIndex];
-      ic.properties = data;
-      this.setState({ ic: ic });
+      //let ic = this.state.ics[this.state.modalIndex];
+      //ic = data;
+      //this.setState({ ic: ic });
 
       AppDispatcher.dispatch({
         type: 'ics/start-edit',
-        data: ic,
+        data: data,
         token: this.state.sessionToken,
       });
     }
@@ -272,10 +272,10 @@ class InfrastructureComponents extends Component {
 
         <Table data={this.state.ics}>
           <TableColumn checkbox onChecked={(index, event) => this.onICChecked(index, event)} width='30' />
-          <TableColumn title='Name' dataKeys={['properties.name', 'rawProperties.name']} />
+          <TableColumn title='Name' dataKeys={['name', 'rawProperties.name']} />
           <TableColumn title='State' labelKey='state' tooltipKey='error' labelModifier={InfrastructureComponents.stateLabelModifier} labelStyle={InfrastructureComponents.stateLabelStyle} />
-          <TableColumn title='Category' dataKeys={['properties.category', 'rawProperties.category']} />
-          <TableColumn title='Type' dataKeys={['properties.type', 'rawProperties.type']} />
+          <TableColumn title='Category' dataKeys={['category', 'rawProperties.category']} />
+          <TableColumn title='Type' dataKeys={['type', 'rawProperties.type']} />
           <TableColumn title='Location' dataKeys={['properties.location', 'rawProperties.location']} />
           {/* <TableColumn title='Realm' dataKeys={['properties.realm', 'rawProperties.realm']} /> */}
           <TableColumn title='Host' dataKey='host' />

src/ic/import-ic.js

@@ -123,9 +123,9 @@ class ImportICDialog extends React.Component {
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="endpoint">
+          <FormGroup controlId="host">
             <FormLabel>Endpoint</FormLabel>
-            <FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
+            <FormControl type="text" placeholder="Enter host" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
           <FormGroup controlId="uuid" validationState={this.validateForm('uuid')}>

src/ic/new-ic.js

@@ -28,8 +28,10 @@ class NewICDialog extends React.Component {
 
     this.state = {
       name: '',
-      endpoint: '',
-      uuid: ''
+      host: '',
+      uuid: '',
+      type: '',
+      category: '',
     };
   }
 
@@ -37,14 +39,14 @@ class NewICDialog extends React.Component {
     if (canceled === false) {
       if (this.valid) {
         const data = {
-          properties: {
-            name: this.state.name
-          },
+          name: this.state.name,
+          type: this.state.type,
+          category: this.state.category,
           uuid: this.state.uuid
         };
 
-        if (this.state.endpoint != null && this.state.endpoint !== "" && this.state.endpoint !== 'http://') {
-          data.properties.endpoint = this.state.endpoint;
+        if (this.state.host != null && this.state.host !== "" && this.state.host !== 'http://') {
+          data.host = this.state.host;
         }
 
         this.props.onClose(data);
@@ -59,13 +61,16 @@ class NewICDialog extends React.Component {
   }
 
   resetState() {
-    this.setState({ name: '', endpoint: 'http://', uuid: this.uuidv4()});
+    this.setState({ name: '', host: 'http://', uuid: this.uuidv4(), type: '', category: ''});
   }
 
   validateForm(target) {
     // check all controls
     let name = true;
     let uuid = true;
+    let host = true;
+    let type = true;
+    let category = true;
 
     if (this.state.name === '') {
       name = false;
@@ -75,11 +80,26 @@ class NewICDialog extends React.Component {
       uuid = false;
     }
 
-    this.valid = name && uuid;
+    if (this.state.host === '') {
+      host = false;
+    }
+
+    if (this.state.type === '') {
+      type = false;
+    }
+
+    if (this.state.category === '') {
+      category = false;
+    }
+
+    this.valid = name && uuid && host && type && category;
 
     // return state to control
     if (target === 'name') return name ? "success" : "error";
     if (target === 'uuid') return uuid ? "success" : "error";
+    if (target === 'host') return host ? "success" : "error";
+    if (target === 'type') return type ? "success" : "error";
+    if (target === 'category') return category ? "success" : "error";
   }
 
   uuidv4() {
@@ -94,17 +114,27 @@ class NewICDialog extends React.Component {
     return (
       <Dialog show={this.props.show} title="New Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
         <form>
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+          <FormGroup controlId="name" valid={this.validateForm('name')}>
             <FormLabel>Name</FormLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="endpoint">
-            <FormLabel>Endpoint</FormLabel>
-            <FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
+          <FormGroup controlId="host">
+            <FormLabel>Host</FormLabel>
+            <FormControl type="text" placeholder="Enter host" value={this.state.host} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="uuid" validationState={this.validateForm('uuid')}>
+          <FormGroup controlId="category">
+            <FormLabel>Category of component (e.g. Simulator, Gateway, ...)</FormLabel>
+            <FormControl type="text" placeholder="Enter category" value={this.state.category} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="type">
+            <FormLabel>Type of component (e.g. RTDS, VILLASnode, ...)</FormLabel>
+            <FormControl type="text" placeholder="Enter type" value={this.state.type} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
             <FormLabel>UUID</FormLabel>
             <FormControl type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />