diff --git a/packages/unleash-frontend-next/src/component/history/history-container.js b/packages/unleash-frontend-next/src/component/history/history-container.js new file mode 100644 index 0000000000..6f7c067526 --- /dev/null +++ b/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; diff --git a/packages/unleash-frontend-next/src/component/history/history-list-component.jsx b/packages/unleash-frontend-next/src/component/history/history-list-component.jsx new file mode 100644 index 0000000000..fbd0d30398 --- /dev/null +++ b/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 ( + + + {history.length > 0 ? history.map((log, i) => { + const actions = []; + + + const icon = this.getIcon(log.type); + + const caption =
{log.data.name} {log.type}
; + + return ( + + ); + }) : } + +
+ ); + } +} + + +export default StrategiesListComponent; diff --git a/packages/unleash-frontend-next/src/data/history-api.js b/packages/unleash-frontend-next/src/data/history-api.js new file mode 100644 index 0000000000..68f953c38a --- /dev/null +++ b/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, +}; diff --git a/packages/unleash-frontend-next/src/page/history/index.js b/packages/unleash-frontend-next/src/page/history/index.js index e67cd04672..8b2b5a8c3f 100644 --- a/packages/unleash-frontend-next/src/page/history/index.js +++ b/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 ( -
-

Event history

-
- ); - } -}; +const render = () => ; + +export default render; diff --git a/packages/unleash-frontend-next/src/store/history-actions.js b/packages/unleash-frontend-next/src/store/history-actions.js new file mode 100644 index 0000000000..7a45e89d0c --- /dev/null +++ b/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))); +} diff --git a/packages/unleash-frontend-next/src/store/history-store.js b/packages/unleash-frontend-next/src/store/history-store.js new file mode 100644 index 0000000000..790d85ec18 --- /dev/null +++ b/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; diff --git a/packages/unleash-frontend-next/src/store/index.js b/packages/unleash-frontend-next/src/store/index.js index bfd7a780fd..85be261c21 100644 --- a/packages/unleash-frontend-next/src/store/index.js +++ b/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; diff --git a/packages/unleash-frontend-next/webpack.config.js b/packages/unleash-frontend-next/webpack.config.js index e9d5efb395..5722870e7d 100644 --- a/packages/unleash-frontend-next/webpack.config.js +++ b/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, + }, }, }, };