Show history inside feature table

public/js/components/feature/Feature.jsx

@@ -1,13 +1,29 @@
 var React = require('react');
 var FeatureForm = require('./FeatureForm');
+var LogEntryList = require('../log/LogEntryList');
+var eventStore = require('../../stores/EventStore');
+
+
 
 var Feature = React.createClass({
     getInitialState: function() {
         return {
-            editMode: false
+            editMode: false,
+            showHistory: false,
+            events: []
         };
     },
 
+    handleEventsResponse: function(response) {
+      this.setState({events: response});
+    },
+
+    toggleHistory: function() {
+        eventStore.getEventsByName(this.props.feature.name).then(this.handleEventsResponse);
+        this.setState({showHistory: !this.state.showHistory});
+    },
+
+
     toggleEditMode: function() {
         this.setState({editMode: !this.state.editMode});
     },
@@ -34,29 +50,44 @@ var Feature = React.createClass({
 
     renderViewMode: function() {
         return (
-            <tr>
+            <tbody>
-                <td width="20">
+                <tr>
-                    <span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
+                    <td width="20">
-                    </span>
+                        <span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
-                </td>
+                        </span>
-                <td>
+                    </td>
-                    {this.props.feature.name}
+                    <td>
-                </td>
+                        {this.props.feature.name}
+                    </td>
 
-                <td className='opaque smalltext word-break' width="600">
+                    <td className='opaque smalltext word-break' width="600">
-                    {this.props.feature.description || '\u00a0'}
+                        {this.props.feature.description || '\u00a0'}
-                </td>
+                    </td>
 
-                <td>
+                    <td>
-                    {this.props.feature.strategy}
+                        {this.props.feature.strategy}
-                </td>
+                    </td>
 
-                <td className="rightify">
+                    <td className="rightify">
-                    <input type='button' value='Edit' onClick={this.toggleEditMode}/>
+                        <input type='button' value='Edit' onClick={this.toggleEditMode}/>
-                </td>
+                        <input type='button' value='History' onClick={this.toggleHistory} />
-            </tr>
+                    </td>
+                </tr>
+                {this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()}
+            </tbody>
         );
+    },
+
+    renderEmptyRow: function() {
+        return (<tr />);
+    },
+
+    renderHistory: function() {
+        return (<tr>
+                    <td colSpan="5"><LogEntryList events={this.state.events} /></td>
+                </tr>);
     }
+
 });
 
 module.exports = Feature;

public/js/components/feature/FeatureList.jsx

@@ -24,9 +24,7 @@ var FeatureList = React.createClass({
                   <th></th>
                 </tr>
               </thead>
-              <tbody>
+              {featureNodes}
-                {featureNodes}
-              </tbody>
             </table>
           </div>
           );

public/js/components/log/LogEntry.jsx

@@ -7,6 +7,9 @@ var LogEntry = React.createClass({
 
     render: function() {
         var d = new Date(this.props.event.createdAt);
+        var localEventData = JSON.parse(JSON.stringify(this.props.event.data));
+        delete localEventData.description;
+        delete localEventData.name;
         return (
             <tr>
                 <td>
@@ -14,10 +17,10 @@ var LogEntry = React.createClass({
                     kl. {d.getHours() + "." + d.getMinutes()}
                 </td>
                 <td>
-                    {this.props.event.type}
+                    <strong>{this.props.event.data.name}</strong><em>[{this.props.event.type}]</em>
                 </td>
                 <td>
-                    <code className='JSON'>{JSON.stringify(this.props.event.data)}</code>
+                    <code className='JSON'>{JSON.stringify(localEventData)}</code>
                 </td>
                 <td>{this.props.event.createdBy}</td>
             </tr>

public/js/stores/EventStore.js

@@ -10,7 +10,16 @@ var EventStore = {
             method: 'get',
             type: TYPE
         });
+    },
+
+    getEventsByName: function (name) {
+        return reqwest({
+            url: 'events/' + name,
+            method: 'get',
+            type: TYPE
+        });
     }
+
 };
 
 module.exports = EventStore;