add simple history

packages/unleash-frontend-next/src/component/history/history-container.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import ListComponent from './history-list-component';
+import { fetchHistory } from '../../store/history-actions';
+
+const mapStateToProps = (state) => {
+    const history = state.history.get('list').toArray(); // eslint-disable-line no-shadow
+
+    return {
+        history,
+    };
+};
+
+const StrategiesListContainer = connect(mapStateToProps, { fetchHistory })(ListComponent);
+
+export default StrategiesListContainer;

packages/unleash-frontend-next/src/component/history/history-list-component.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { List, ListItem, ListSubHeader, ListDivider } from 'react-toolbox/lib/list';
+import FontIcon from 'react-toolbox/lib/font_icon';
+import Chip from 'react-toolbox/lib/chip';
+
+class StrategiesListComponent extends Component {
+
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
+    componentDidMount () {
+        this.props.fetchHistory();
+    }
+
+    getIcon (type) {
+        if (type.indexOf('created') > -1 ) {
+            return 'add';
+        }
+
+        if (type.indexOf('deleted') > -1 ) {
+            return 'remove';
+        }
+
+        if (type.indexOf('updated') > -1 ) {
+            return 'update';
+        }
+
+        if (type.indexOf('archived') > -1 ) {
+            return 'archived';
+        }
+        return 'bookmark';
+    }
+
+    render () {
+        const { history } = this.props;
+
+        return (
+            <List ripple >
+                <ListSubHeader caption="History" />
+                {history.length > 0 ? history.map((log, i) => {
+                    const actions = [];
+
+
+                    const icon = this.getIcon(log.type);
+
+                    const caption = <div>{log.data.name} <small>{log.type}</small></div>;
+
+                    return (
+                        <ListItem key={i}
+                            leftIcon={icon}
+                            rightActions={actions}
+                            caption={caption}
+                            legend={log.createdAt} />
+                    );
+                }) : <ListItem caption="No log entries" />}
+
+            </List>
+        );
+    }
+}
+
+
+export default StrategiesListComponent;

packages/unleash-frontend-next/src/data/history-api.js

@@ -0,0 +1,20 @@
+const URI = '/events';
+
+function throwIfNotSuccess (response) {
+    if (!response.ok) {
+        let error = new Error('API call failed');
+        error.status = response.status;
+        throw error;
+    }
+    return response;
+}
+
+function fetchAll () {
+    return fetch(URI)
+        .then(throwIfNotSuccess)
+        .then(response => response.json());
+}
+
+module.exports = {
+    fetchAll,
+};

packages/unleash-frontend-next/src/page/history/index.js

@@ -1,11 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';
+import HistoryComponent from '../../component/history/history-container';
 
-export default class EventHisotry extends Component {
-    render () {
-        return (
-            <div>
-                <h2>Event history</h2>
-            </div>
-        );
-    }
-};
+const render = () => <HistoryComponent />;
+
+export default render;

packages/unleash-frontend-next/src/store/history-actions.js

@@ -0,0 +1,20 @@
+import api from '../data/history-api';
+
+export const RECEIVE_HISTORY        = 'RECEIVE_HISTORY';
+export const ERROR_RECEIVE_HISTORY  = 'ERROR_RECEIVE_HISTORY';
+
+const receiveHistory = (json) => ({
+    type: RECEIVE_HISTORY,
+    value: json.events,
+});
+
+const errorReceiveHistory = (statusCode) => ({
+    type: ERROR_RECEIVE_HISTORY,
+    statusCode,
+});
+
+export function fetchHistory () {
+    return dispatch => api.fetchAll()
+        .then(json => dispatch(receiveHistory(json)))
+        .catch(error => dispatch(errorReceiveHistory(error)));
+}

packages/unleash-frontend-next/src/store/history-store.js

@@ -0,0 +1,17 @@
+import { List, Map as $Map } from 'immutable';
+import { RECEIVE_HISTORY } from './history-actions';
+
+function getInitState () {
+    return new $Map({ list: new List() });
+}
+
+const historyStore = (state = getInitState(), action) => {
+    switch (action.type) {
+        case RECEIVE_HISTORY:
+            return state.set('list', new List(action.value));
+        default:
+            return state;
+    }
+};
+
+export default historyStore;

packages/unleash-frontend-next/src/store/index.js

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import features from './feature-store';
 import strategies from './strategy-store';
 import input from './input-store';
+import history from './history-store'; // eslint-disable-line
 
 const unleashStore = combineReducers({
     features,
     strategies,
     input,
+    history,
 });
 
 export default unleashStore;

packages/unleash-frontend-next/webpack.config.js

@@ -70,6 +70,10 @@ module.exports = {
                 target: 'http://localhost:4242',
                 secure: false,
             },
+            '/events': {
+                target: 'http://localhost:4242',
+                secure: false,
+            },
         },
     },
 };