add history to view part1

frontend/src/component/feature/view-edit-container.jsx

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import EditFeatureToggle from './form-edit-container.jsx';
 import { fetchFeatureToggles, toggleFeature } from '../../store/feature-actions';
 import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-actions';
+import { fetchHistoryForToggle } from '../../store/history-actions';
 
 class EditFeatureToggleWrapper extends React.Component {
 
@@ -25,6 +26,7 @@ class EditFeatureToggleWrapper extends React.Component {
             this.props.fetchFeatureToggles();
         }
         this.props.fetchSeenApps();
+        this.props.fetchHistoryForToggle(this.props.featureToggleName);
         this.props.fetchFeatureMetrics();
         this.timer = setInterval(() => {
             this.props.fetchSeenApps();
@@ -38,6 +40,7 @@ class EditFeatureToggleWrapper extends React.Component {
 
     render () {
         const {
+            history,
             toggleFeature,
             features,
             featureToggleName,
@@ -109,7 +112,14 @@ class EditFeatureToggleWrapper extends React.Component {
                         <p>add instances count?</p>
                     </Cell>
                     <Cell col={3}>
-                            <p>add history</p>
+                            <div><strong>History</strong></div>
+                            <ol>
+                                {history.map(({ createdAt, type, createdBy }) => 
+                                    <li><small>{createdAt}</small> {type} {createdBy}</li>)}
+                            </ol>
+                            <Link to={`/history/${featureToggleName}`}>
+                                See all events.
+                            </Link>
                     </Cell>
                 </Grid>
                 <hr />
@@ -136,13 +146,35 @@ function getMetricsForToggle (state, toggleName) {
     return result;
 }
 
+function getHistoryFromToggle (state, toggleName) {
+    if (!toggleName) {
+        return [];
+    }
+    
+    if (state.history.hasIn(['toggles', toggleName])) {
+        return state.history
+            .getIn(['toggles', toggleName])
+            .slice(0, 10)
+            .toJS()
+            .map(({ createdAt, createdBy, type }) => ({
+                createdAt: new Date(createdAt).toString(),
+                createdBy,
+                type,
+            }));
+    }
+
+    return [];
+}
+
 
 export default connect((state, props) => ({
     features: state.features.toJS(),
     metrics: getMetricsForToggle(state, props.featureToggleName),
+    history: getHistoryFromToggle(state, props.featureToggleName),
 }), {
     fetchFeatureMetrics,
     fetchFeatureToggles,
     toggleFeature,
     fetchSeenApps,
+    fetchHistoryForToggle,
 })(EditFeatureToggleWrapper);

frontend/src/component/history/history-list-toggle-component.jsx

@@ -20,7 +20,7 @@ class HistoryListToggle extends Component {
 
     componentDidMount () {
         fetchHistoryForToggle(this.props.toggleName)
-            .then((res) => this.setState({ history: res, fetching: false }));
+            .then((res) => this.setState({ history: res.events, fetching: false }));
     }
 
     render () {

frontend/src/store/history-actions.js

@@ -3,11 +3,18 @@ import api from '../data/history-api';
 export const RECEIVE_HISTORY        = 'RECEIVE_HISTORY';
 export const ERROR_RECEIVE_HISTORY  = 'ERROR_RECEIVE_HISTORY';
 
+export const RECEIVE_HISTORY_FOR_TOGGLE        = 'RECEIVE_HISTORY_FOR_TOGGLE';
+
 const receiveHistory = (json) => ({
     type: RECEIVE_HISTORY,
     value: json.events,
 });
 
+const receiveHistoryforToggle = (json) => ({
+    type: RECEIVE_HISTORY_FOR_TOGGLE,
+    value: json,
+});
+
 const errorReceiveHistory = (statusCode) => ({
     type: ERROR_RECEIVE_HISTORY,
     statusCode,
@@ -18,3 +25,10 @@ export function fetchHistory () {
         .then(json => dispatch(receiveHistory(json)))
         .catch(error => dispatch(errorReceiveHistory(error)));
 }
+
+
+export function fetchHistoryForToggle (toggleName) {
+    return dispatch => api.fetchHistoryForToggle(toggleName)
+        .then(json => dispatch(receiveHistoryforToggle(json)))
+        .catch(error => dispatch(errorReceiveHistory(error)));
+}

frontend/src/store/history-store.js

@@ -1,12 +1,14 @@
 import { List, Map as $Map } from 'immutable';
-import { RECEIVE_HISTORY } from './history-actions';
+import { RECEIVE_HISTORY, RECEIVE_HISTORY_FOR_TOGGLE } from './history-actions';
 
 function getInitState () {
-    return new $Map({ list: new List() });
+    return new $Map({ list: new List(), toggles: new $Map() });
 }
 
 const historyStore = (state = getInitState(), action) => {
     switch (action.type) {
+        case RECEIVE_HISTORY_FOR_TOGGLE:
+            return state.setIn(['toggles', action.value.toggleName], new List(action.value.events));
         case RECEIVE_HISTORY:
             return state.set('list', new List(action.value));
         default: