improve disabling of checkboxes for non-external ICs

src/common/table-column.js

@@ -35,6 +35,7 @@ class TableColumn extends Component {
     labelKey: null,
     checkbox: false,
     checkboxKey: '',
+    checkboxDisabled: null,
     labelStyle: null,
     labelModifier: null
 

src/common/table.js

@@ -116,12 +116,15 @@ class CustomTable extends Component {
 
     if (child.props.checkbox) {
       const checkboxKey = child.props.checkboxKey;
-
+      let isDisabled = false;
+      if (child.props.checkboxDisabled != null){
+        isDisabled = !child.props.checkboxDisabled(index)
+      }
       cell.push(
         <FormCheck
           className="table-control-checkbox"
           inline
-          disabled = {!data.managedexternally}
+          disabled = {isDisabled}
           checked={checkboxKey ? data[checkboxKey] : null}
           onChange={e => child.props.onChecked(index, e)}
         />);

src/ic/ics.js

@@ -372,6 +372,11 @@ class InfrastructureComponents extends Component {
 
   }
 
+  isExternalIC(index){
+    let ic = this.state.ics[index]
+    return ic.managedexternally
+  }
+
   render() {
 
     const buttonStyle = {
@@ -395,6 +400,7 @@ class InfrastructureComponents extends Component {
         <Table data={this.state.ics}>
           <TableColumn
             checkbox
+            checkboxDisabled={(index) => this.isExternalIC(index)}
             onChecked={(index, event) => this.onICChecked(index, event)}
             width='30'
           />

src/scenario/scenario.js

@@ -103,6 +103,7 @@ class Scenario extends React.Component {
       files: FileStore.getState().filter(file => file.scenarioID === parseInt(props.match.params.scenario, 10)),
 
       ics: ICStore.getState(),
+      ExternalICInUse: false,
 
       deleteConfigModal: false,
       importConfigModal: false,
@@ -361,6 +362,29 @@ class Scenario extends React.Component {
     this.setState({ selectedConfigs: selectedConfigs });
   }
 
+  usesExternalIC(index){
+    let icID = this.state.configs[index].icID;
+
+    let ic = null;
+    for (let component of this.state.ics) {
+      if (component.id === this.state.configs[index].icID) {
+        ic = component;
+      }
+    }
+
+    if (ic == null) {
+      return false;
+    }
+
+    if (ic.managedexternally === true){
+      this.setState({ExternalICInUse: true})
+      return true
+    }
+
+    return false
+
+  }
+
   runAction(action, delay) {
     // delay in seconds
 
@@ -780,7 +804,11 @@ class Scenario extends React.Component {
         <Button onClick={() => this.setState({ importConfigModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
       </h2>
       <Table data={this.state.configs}>
-        <TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
+        <TableColumn
+          checkbox
+          checkboxDisabled={(index) => this.usesExternalIC(index)}
+          onChecked={(index, event) => this.onConfigChecked(index, event)}
+          width='30' />
         <TableColumn title='Name' dataKey='name' />
         <TableColumn title='Configuration file(s)' dataKey='fileIDs' modifier={(fileIDs) => this.getListOfFiles(fileIDs, ['json', 'JSON'])} />
         <TableColumn
@@ -822,19 +850,21 @@ class Scenario extends React.Component {
         />
       </Table>
 
-      <div style={{ float: 'left' }}>
-        <ICAction
-          runDisabled={this.state.selectedConfigs.length === 0}
-          runAction={(action, delay) => this.runAction(action, delay)}
-          actions={[
-            { id: '-1', title: 'Select command', data: { action: 'none' } },
-            { id: '0', title: 'Start', data: { action: 'start' } },
-            { id: '1', title: 'Stop', data: { action: 'stop' } },
-            { id: '2', title: 'Pause', data: { action: 'pause' } },
-            { id: '3', title: 'Resume', data: { action: 'resume' } }
-          ]} />
-      </div>
-
+      { this.state.ExternalICInUse ? (
+        <div style={{float: 'left'}}>
+          <ICAction
+            runDisabled={this.state.selectedConfigs.length === 0}
+            runAction={(action, delay) => this.runAction(action, delay)}
+            actions={[
+              {id: '-1', title: 'Select command', data: {action: 'none'}},
+              {id: '0', title: 'Start', data: {action: 'start'}},
+              {id: '1', title: 'Stop', data: {action: 'stop'}},
+              {id: '2', title: 'Pause', data: {action: 'pause'}},
+              {id: '3', title: 'Resume', data: {action: 'resume'}}
+            ]}/>
+        </div>
+        ) : (<div/>)
+      }
       <div style={{ clear: 'both' }} />
 
       <EditConfigDialog