Split IC table into managers, gateways, simulators, services and equipment

- Tables appear only if ICs of this category are present
- IC creation has drop down to select manager (if managed externally is checked) closes #284

src/common/table.js

@@ -126,7 +126,7 @@ class CustomTable extends Component {
           inline
           disabled = {isDisabled}
           checked={checkboxKey ? data[checkboxKey] : null}
-          onChange={e => child.props.onChecked(index, e)}
+          onChange={e => child.props.onChecked(data, e)}
         />);
     }
 

src/ic/edit-ic.js

@@ -158,10 +158,10 @@ class EditICDialog extends React.Component {
             <FormLabel column={false}>Category</FormLabel>
             <FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
               <option>simulator</option>
-              <option>manager</option>
               <option>service</option>
               <option>gateway</option>
               <option>equipment</option>
+              <option>manager</option>
             </FormControl>
           </FormGroup>
           <FormGroup controlId="type">

src/ic/ics.js

@@ -75,17 +75,26 @@ class InfrastructureComponents extends Component {
       }
     });
 
-    let externalICs = ics.find(ic => ic.managedexternally === true)
+    // collect number of external ICs
+    let externalICs = ics.filter(ic => ic.managedexternally === true)
+    let numberOfExternalICs = externalICs.length;
+
+    // collect all IC categories
+    let managers = ics.filter(ic => ic.category === "manager")
+    let gateways = ics.filter(ic => ic.category === "gateway")
+    let simulators = ics.filter(ic => ic.category === "simulator")
+    let services = ics.filter(ic => ic.category === "service")
+    let equipment = ics.filter(ic => ic.category === "equipment")
 
-    let numberOfExternalICs = 0
-    if (externalICs !== undefined && !Array.isArray(externalICs)) {
-      externalICs = [externalICs];
-      numberOfExternalICs = externalICs.length;
-    }
 
     return {
       sessionToken: localStorage.getItem("token"),
       ics: ics,
+      managers: managers,
+      gateways: gateways,
+      simulators: simulators,
+      services: services,
+      equipment: equipment,
       numberOfExternalICs,
       modalIC: {},
       deleteModal: false,
@@ -205,7 +214,9 @@ class InfrastructureComponents extends Component {
     }
   }
 
-  onICChecked(index, event) {
+  onICChecked(ic, event) {
+
+    let index = this.state.ics.indexOf(ic);
     const selectedICs = Object.assign([], this.state.selectedICs);
     for (let key in selectedICs) {
       if (selectedICs[key] === index) {
@@ -377,12 +388,80 @@ class InfrastructureComponents extends Component {
     return ic.managedexternally
   }
 
+  getICCategoryTable(ics, editable, title){
+    if (ics && ics.length > 0) {
+      return (<div>
+        <h2>{title}</h2>
+        <Table data={ics}>
+          <TableColumn
+            checkbox
+            checkboxDisabled={(index) => this.isExternalIC(index)}
+            onChecked={(ic, event) => this.onICChecked(ic, event)}
+            width='30'
+          />
+          <TableColumn
+            title='Name'
+            dataKeys={['name']}
+            modifier={(name, component) => this.modifyNameColumn(name, component)}
+          />
+          <TableColumn
+            title='State'
+            labelKey='state'
+            tooltipKey='error'
+            labelStyle={(state, component) => this.stateLabelStyle(state, component)}
+          />
+          <TableColumn
+            title='Type'
+            dataKeys={['type']}
+          />
+          <TableColumn
+            title='Uptime'
+            dataKey='uptime'
+            modifier={(uptime, component) => this.modifyUptimeColumn(uptime, component)}
+          />
+          <TableColumn
+            title='Last Update'
+            dataKey='stateUpdateAt'
+            modifier={(stateUpdateAt, component) => this.stateUpdateModifier(stateUpdateAt, component)}
+          />
+
+          {this.state.currentUser.role === "Admin" && editable ?
+            <TableColumn
+              width='200'
+              editButton
+              exportButton
+              deleteButton
+              onEdit={index => this.setState({editModal: true, modalIC: ics[index], modalIndex: index})}
+              onExport={index => this.exportIC(index)}
+              onDelete={index => this.setState({deleteModal: true, modalIC: ics[index], modalIndex: index})}
+            />
+            :
+            <TableColumn
+              width='100'
+              exportButton
+              onExport={index => this.exportIC(index)}
+            />
+          }
+        </Table>
+      </div>);
+    } else {
+      return <div/>
+    }
+
+  }
+
   render() {
 
     const buttonStyle = {
       marginLeft: '10px'
     };
 
+    let managerTable = this.getICCategoryTable(this.state.managers, false, "IC Managers")
+    let simulatorTable = this.getICCategoryTable(this.state.simulators, true, "Simulators")
+    let gatewayTable = this.getICCategoryTable(this.state.gateways, true, "Gateways")
+    let serviceTable = this.getICCategoryTable(this.state.services, true, "Services")
+    let equipmentTable = this.getICCategoryTable(this.state.equipment, true, "Equipment")
+
     return (
       <div className='section'>
         <h1>Infrastructure Components
@@ -407,61 +486,12 @@ class InfrastructureComponents extends Component {
             (<span> </span>)
           }
         </h1>
-        <Table data={this.state.ics}>
-          <TableColumn
-            checkbox
-            checkboxDisabled={(index) => this.isExternalIC(index)}
-            onChecked={(index, event) => this.onICChecked(index, event)}
-            width='30'
-          />
-          <TableColumn
-            title='Name'
-            dataKeys={['name']}
-            modifier={(name, component) => this.modifyNameColumn(name, component)}
-          />
-          <TableColumn
-            title='State'
-            labelKey='state'
-            tooltipKey='error'
-            labelStyle={(state, component) => this.stateLabelStyle(state, component)}
-          />
-          <TableColumn
-            title='Category'
-            dataKeys={['category']}
-          />
-          <TableColumn
-            title='Type'
-            dataKeys={['type']}
-          />
-          <TableColumn
-            title='Uptime'
-            dataKey='uptime'
-            modifier={(uptime, component) => this.modifyUptimeColumn(uptime, component)}
-          />
-          <TableColumn
-            title='Last Update'
-            dataKey='stateUpdateAt'
-            modifier={(stateUpdateAt, component) => this.stateUpdateModifier(stateUpdateAt, component)}
-          />
 
-          {this.state.currentUser.role === "Admin" ?
-          <TableColumn
-            width='200'
-            editButton
-            exportButton
-            deleteButton
-            onEdit={index => this.setState({editModal: true, modalIC: this.state.ics[index], modalIndex: index})}
-            onExport={index => this.exportIC(index)}
-            onDelete={index => this.setState({deleteModal: true, modalIC: this.state.ics[index], modalIndex: index})}
-          />
-          :
-          <TableColumn
-            width='100'
-            exportButton
-            onExport={index => this.exportIC(index)}
-          />
-          }
-        </Table>
+        {managerTable}
+        {simulatorTable}
+        {gatewayTable}
+        {serviceTable}
+        {equipmentTable}
 
         {this.state.currentUser.role === "Admin" && this.state.numberOfExternalICs > 0 ?
           <div style={{float: 'left'}}>
@@ -481,9 +511,10 @@ class InfrastructureComponents extends Component {
 
         <div style={{ clear: 'both' }} />
 
-        <NewICDialog show={this.state.newModal} onClose={data => this.closeNewModal(data)} />
+        <NewICDialog show={this.state.newModal} onClose={data => this.closeNewModal(data)} managers={this.state.managers} />
         <EditICDialog show={this.state.editModal} onClose={data => this.closeEditModal(data)} ic={this.state.modalIC} />
         <ImportICDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} />
+        <DeleteDialog title="infrastructure-component" name={this.state.modalIC.name || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
         <ICDialog
           show={this.state.icModal}
           onClose={data => this.closeICModal(data)}
@@ -492,8 +523,8 @@ class InfrastructureComponents extends Component {
           userRole={this.state.currentUser.role}
           sendControlCommand={(command, ic) => this.sendControlCommand(command, ic)}/>
 
-        <DeleteDialog title="infrastructure-component" name={this.state.modalIC.name || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
       </div>
+
     );
   }
 }

src/ic/new-ic.js

@@ -34,7 +34,8 @@ class NewICDialog extends React.Component {
       category: '',
       managedexternally: false,
       description: '',
-      location: ''
+      location: '',
+      manager: ''
     };
   }
 
@@ -48,7 +49,8 @@ class NewICDialog extends React.Component {
           uuid: this.state.uuid,
           managedexternally: this.state.managedexternally,
           location: this.state.location,
-          description: this.state.description
+          description: this.state.description,
+          manager: this.state.manager
         };
 
         if (this.state.websocketurl != null && this.state.websocketurl !== "" && this.state.websocketurl !== 'http://') {
@@ -88,6 +90,7 @@ class NewICDialog extends React.Component {
     let websocketurl = true;
     let type = true;
     let category = true;
+    let manager = true;
 
     if (this.state.name === '') {
       name = false;
@@ -97,6 +100,10 @@ class NewICDialog extends React.Component {
       uuid = false;
     }
 
+    if(this.state.managedexternally && manager === ''){
+      manager = false;
+    }
+
     if (this.state.type === '') {
       type = false;
     }
@@ -105,7 +112,7 @@ class NewICDialog extends React.Component {
       category = false;
     }
 
-    this.valid = name && uuid && websocketurl && type && category;
+    this.valid = name && uuid && websocketurl && type && category && manager;
 
     // return state to control
     if (target === 'name') return name ? "success" : "error";
@@ -113,6 +120,7 @@ class NewICDialog extends React.Component {
     if (target === 'websocketurl') return websocketurl ? "success" : "error";
     if (target === 'type') return type ? "success" : "error";
     if (target === 'category') return category ? "success" : "error";
+    if (target === 'manager') return manager ? "success" : "error";
 
     return this.valid;
   }
@@ -149,30 +157,49 @@ 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.validateForm()}>
         <form>
-          <FormGroup controlId="managedexternally">
-            <OverlayTrigger key="3" placement={'left'} overlay={<Tooltip id={`tooltip-${"me"}`}>An externally managed component will show up in the list only after a manager for the component type has created the component and cannot be edited by users</Tooltip>} >
-              <FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
-              </FormCheck>
-            </OverlayTrigger>
-          </FormGroup>
+          {this.props.managers.length > 0 ?
+            <>
+              <FormGroup controlId="managedexternally">
+                <OverlayTrigger key="3" placement={'left'} overlay={<Tooltip id={`tooltip-${"me"}`}>An externally managed component is created and managed by an IC manager via AMQP</Tooltip>} >
+                  <FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
+                  </FormCheck>
+                </OverlayTrigger>
+              </FormGroup>
+              {this.state.managedexternally === true ?
+                <FormGroup controlId="manager" valid={this.validateForm('manager')}>
+                  <OverlayTrigger key="0" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
+                    <FormLabel>Manager to create new IC *</FormLabel>
+                  </OverlayTrigger>
+                  <FormControl as="select" value={this.state.manager} onChange={(e) => this.handleChange(e)}>
+                    {this.props.managers.map((m) => (
+                      <option key={m.id} value={m.uuid}>{m.name}</option>
+                    ))}
+                  </FormControl>
+                </FormGroup>
+                : <div/>
+
+              }
+            </>
+            : <div/>
+          }
           <FormGroup controlId="name" valid={this.validateForm('name')}>
-          <OverlayTrigger key="0" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
+          <OverlayTrigger key="1" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
             <FormLabel>Name *</FormLabel>
           </OverlayTrigger>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
           <FormGroup controlId="category" valid={this.validateForm('category')}>
-            <OverlayTrigger key="1" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
+            <OverlayTrigger key="2" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
               <FormLabel>Category of component *</FormLabel>
             </OverlayTrigger>
             <FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
               <option default>Select category</option>
               <option>simulator</option>
-              <option>manager</option>
               <option>service</option>
               <option>gateway</option>
               <option>equipment</option>
+              <option>manager</option>
             </FormControl>
           </FormGroup>
           <FormGroup controlId="type" valid={this.validateForm('type')}>
@@ -206,11 +233,15 @@ class NewICDialog extends React.Component {
             <FormControl type="text" placeholder="Enter Description" value={this.state.description} 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 />
-          </FormGroup>
+          {this.state.managedexternally === false ?
+            <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/>
+            </FormGroup>
+            : <div/>
+          }
         </form>
       </Dialog>
     );