Add running label to simulators

src/components/table-column.js

@@ -20,7 +20,8 @@ class TableColumn extends Component {
     linkKey: '',
     dataIndex: false,
     inlineEditable: false,
-    clickable: false
+    clickable: false,
+    labelKey: null
   };
 
   render() {

src/components/table.js

@@ -8,7 +8,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { Table, Button, Glyphicon, FormControl } from 'react-bootstrap';
+import { Table, Button, Glyphicon, FormControl, Label } from 'react-bootstrap';
 import { Link } from 'react-router';
 
 //import TableColumn from './table-column';
@@ -58,6 +58,18 @@ class CustomTable extends Component {
       }
     }
 
+    // add label to content
+    const labelKey = child.props.labelKey;
+    if (labelKey && data[labelKey] != null) {
+      var labelContent = data[labelKey];
+
+      if (child.props.labelModifier) {
+        labelContent = child.props.labelModifier(labelContent);
+      }
+
+      cell.push(<span>&nbsp;<Label bsStyle={child.props.labelStyle(data[labelKey])}>{labelContent.toString()}</Label></span>);
+    }
+
     if (child.props.dataIndex) {
       cell.push(index);
     }

src/containers/simulators.js

@@ -72,15 +72,24 @@ class Simulators extends Component {
     }
   }
 
+  labelStyle(value) {
+    if (value === true) return 'success';
+    else return 'warning';
+  }
+
+  labelModifier(value) {
+    if (value === true) return 'Running';
+    else return 'Not running';
+  }
+
   render() {
     return (
       <div>
         <h1>Simulators</h1>
 
         <Table data={this.state.simulators}>
-          <TableColumn title='Name' dataKey='name' />
-          <TableColumn title='Running' dataKey='running' width='80' />
-          <TableColumn title='Endpoint' dataKey='endpoint' width='120' />
+          <TableColumn title='Name' dataKey='name' labelKey='running' labelStyle={(value) => this.labelStyle(value)} labelModifier={(value) => this.labelModifier(value)} />
+          <TableColumn title='Endpoint' dataKey='endpoint' width='180' />
           <TableColumn title='' width='70' editButton deleteButton onEdit={(index) => this.setState({ editModal: true, modalSimulator: this.state.simulators[index] })} onDelete={(index) => this.setState({ deleteModal: true, modalSimulator: this.state.simulators[index] })} />
         </Table>
 

src/data-managers/simulators-data-manager.js

@@ -34,6 +34,7 @@ class SimulatorsDataManager extends RestDataManager {
         }
       });
 
+      // report simulator running state
       simulator.running = running;
 
       AppDispatcher.dispatch({