From 3ee7beb63e72b9d50f4fb37eb1c5c7b9f4aae6b2 Mon Sep 17 00:00:00 2001
From: Gard Rimestad <gardleopard@gmail.com>
Date: Thu, 13 Nov 2014 15:14:41 +0100
Subject: [PATCH] Adding log tab to admin

---
 public/js/app.jsx                             |  6 +++
 public/js/components/event/Event.jsx          | 19 ++++++++
 public/js/components/event/EventList.jsx      | 32 +++++++++++++
 .../js/components/event/EventsComponent.jsx   | 47 +++++++++++++++++++
 public/js/stores/EventStore.js                | 16 +++++++
 5 files changed, 120 insertions(+)
 create mode 100644 public/js/components/event/Event.jsx
 create mode 100644 public/js/components/event/EventList.jsx
 create mode 100644 public/js/components/event/EventsComponent.jsx
 create mode 100644 public/js/stores/EventStore.js

diff --git a/public/js/app.jsx b/public/js/app.jsx
index bdbe44cd88..2efae9b702 100644
--- a/public/js/app.jsx
+++ b/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({})
     }
 ];
 
diff --git a/public/js/components/event/Event.jsx b/public/js/components/event/Event.jsx
new file mode 100644
index 0000000000..b513da52ba
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/public/js/components/event/EventList.jsx b/public/js/components/event/EventList.jsx
new file mode 100644
index 0000000000..670ac67979
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/public/js/components/event/EventsComponent.jsx b/public/js/components/event/EventsComponent.jsx
new file mode 100644
index 0000000000..08e996cd16
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/public/js/stores/EventStore.js b/public/js/stores/EventStore.js
new file mode 100644
index 0000000000..096a65e8d2
--- /dev/null
+++ b/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;