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 ( + + {this.props.event.data.name} + {this.props.event.type} + {this.props.event.createdBy} + + ); + } +}); + +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 ; + }); + return ( +
+ + + + + + + + + + {eventNodes} + +
FeatureActionAuthor
+
+ ); + } +}); + +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 ( +
+ + +
+ + +
+ ); + }, +}); + +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;