From eb1756852b77b90a27cc8052ae9537ed9c66726b Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Tue, 23 Jun 2020 09:34:33 +0200
Subject: [PATCH] Modify send command to IC buttons (point 1 of #225)

---
 src/ic/ic-action.js      |  3 ++-
 src/scenario/scenario.js | 21 ++++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js
index 4e787af..6a9e591 100644
--- a/src/ic/ic-action.js
+++ b/src/ic/ic-action.js
@@ -55,11 +55,12 @@ class ICAction extends React.Component {
         ));
 
         return <div>
+          Send command to infrastructure component
           <ButtonToolbar>
             <DropdownButton title={this.state.selectedAction != null ? this.state.selectedAction.title : ''} id="action-dropdown" onSelect={this.setAction}>
               {actionList}
             </DropdownButton>
-            <Button style={{ marginLeft: '5px' }} disabled={this.props.runDisabled} onClick={() => this.props.runAction(this.state.selectedAction)}>Run</Button>
+            <Button style={{ marginLeft: '5px' }} disabled={this.props.runDisabled} onClick={() => this.props.runAction(this.state.selectedAction)}>Send command</Button>
           </ButtonToolbar>
 
         </div>;
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 0e4b9ed..e7cd701 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -234,12 +234,18 @@ class Scenario extends React.Component {
     this.setState({ selectedConfigs: selectedConfigs });
   }
 
-  runAction = action => {
+  runAction(action) {
+
+    if(action.data.action === 'none'){
+      console.warn("No command selected. Nothing was sent.");
+      return;
+    }
+
     for (let index of this.state.selectedConfigs) {
       // get IC for component config
       let ic = null;
       for (let component of this.state.ics) {
-        if (component._id === this.state.configs[index].icID) {
+        if (component.id === this.state.configs[index].icID) {
           ic = component;
         }
       }
@@ -410,11 +416,15 @@ class Scenario extends React.Component {
       marginLeft: '10px'
     };
 
+    const tableHeadingStyle = {
+      paddingTop: '30px'
+    }
+
     return <div className='section'>
       <h1>{this.state.scenario.name}</h1>
 
       {/*Component Configurations table*/}
-      <h2>Component Configurations</h2>
+      <h2 style={tableHeadingStyle}>Component Configurations</h2>
       <Table data={this.state.configs}>
         <TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
         <TableColumn title='Name' dataKey='name' />
@@ -447,8 +457,9 @@ class Scenario extends React.Component {
       <div style={{ float: 'left' }}>
         <ICAction
           runDisabled={this.state.selectedConfigs.length === 0}
-          runAction={this.runAction}
+          runAction={(action) => this.runAction(action)}
           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' } },
@@ -493,7 +504,7 @@ class Scenario extends React.Component {
         configID={this.state.modalConfigData.id}/>
 
       {/*Dashboard table*/}
-      <h2>Dashboards</h2>
+      <h2 style={tableHeadingStyle}>Dashboards</h2>
       <Table data={this.state.dashboards}>
         <TableColumn title='Name' dataKey='name' link='/dashboards/' linkKey='id' />
         <TableColumn title='Grid' dataKey='grid' />