Adding log tab to admin

public/js/app.jsx

@@ -1,9 +1,11 @@
 var React                   = require('react');
 var TabView                 = require('./components/TabView');
 var Menu                    = require('./components/Menu');
+var EventsComponent         = React.createFactory(require('./components/event/EventsComponent'));
 var FeatureTogglesComponent = React.createFactory(require('./components/feature/FeatureTogglesComponent'));
 var StrategiesComponent     = React.createFactory(require('./components/strategy/StrategiesComponent'));
 
+
 var tabPanes = [
     {
         name: "Feature Toggles",
@@ -12,6 +14,10 @@ var tabPanes = [
     {
         name: "Strategies",
         content: new StrategiesComponent({})
+    },
+    {
+        name: "Log",
+        content: new EventsComponent({})
     }
 ];
 

public/js/components/event/Event.jsx

@@ -0,0 +1,19 @@
+var React = require('react');
+
+var Event = React.createClass({
+    propTypes: {
+        event: React.PropTypes.object.isRequired
+    },
+
+    render: function() {
+        return (
+            <tr>
+                <td>{this.props.event.data.name}</td>
+                <td>{this.props.event.type}</td>
+                <td>{this.props.event.createdBy}</td>
+            </tr>
+        );
+    }
+});
+
+module.exports = Event;

public/js/components/event/EventList.jsx

@@ -0,0 +1,32 @@
+var React = require('react'),
+    Event = require('./Event');
+
+var EventList = React.createClass({
+    propTypes: {
+        events: React.PropTypes.array.isRequired
+    },
+
+    render: function() {
+        var eventNodes = this.props.events.map(function(event) {
+            return <Event event={event} key={event.name} />;
+        });
+        return (
+            <div className='r-margin'>
+                <table className='outerborder'>
+                    <thead>
+                        <tr>
+                            <th>Feature</th>
+                            <th>Action</th>
+                            <th>Author</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {eventNodes}
+                    </tbody>
+                </table>
+            </div>
+            );
+    }
+});
+
+module.exports = EventList;

public/js/components/event/EventsComponent.jsx

@@ -0,0 +1,47 @@
+var React          = require('react'),
+    EventList   = require('./EventList'),
+    eventStore  = require('../../stores/EventStore'),
+    ErrorMessages  = require('../ErrorMessages');
+
+var EventsComponent = React.createClass({
+    getInitialState: function() {
+        return {
+            createView: false,
+            events: [],
+            errors: []
+        };
+    },
+
+    componentDidMount: function () {
+        eventStore.getEvents().then(function(res) {
+            this.setState({events: res.events});
+        }.bind(this), this.initError);
+    },
+
+    initError: function() {
+        this.onError("Could not load events from server");
+    },
+
+    clearErrors: function() {
+        this.setState({errors: []});
+    },
+
+    onError: function(error) {
+        var errors = this.state.errors.concat([error]);
+        this.setState({errors: errors});
+    },
+
+    render: function() {
+        return (
+            <div>
+                <ErrorMessages errors={this.state.errors} onClearErrors={this.clearErrors} />
+
+                <hr />
+
+                <EventList events={this.state.events} />
+            </div>
+            );
+    },
+});
+
+module.exports = EventsComponent;

public/js/stores/EventStore.js

@@ -0,0 +1,16 @@
+var reqwest = require('reqwest');
+
+TYPE         = 'json';
+CONTENT_TYPE = 'application/json';
+
+var EventStore = {
+    getEvents: function () {
+        return reqwest({
+            url: 'events',
+            method: 'get',
+            type: TYPE
+        });
+    }
+};
+
+module.exports = EventStore;