diff --git a/frontend/src/component/feature/view-edit-container.jsx b/frontend/src/component/feature/view-edit-container.jsx index f08f9af9db..def1573dc7 100644 --- a/frontend/src/component/feature/view-edit-container.jsx +++ b/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 {

add instances count?

-

add history

+
History
+
    + {history.map(({ createdAt, type, createdBy }) => +
  1. {createdAt} {type} {createdBy}
  2. )} +
+ + See all events. +

@@ -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); diff --git a/frontend/src/component/history/history-list-toggle-component.jsx b/frontend/src/component/history/history-list-toggle-component.jsx index aba456efb2..6ac646ee5f 100644 --- a/frontend/src/component/history/history-list-toggle-component.jsx +++ b/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 () { diff --git a/frontend/src/store/history-actions.js b/frontend/src/store/history-actions.js index 7a45e89d0c..485e172ea2 100644 --- a/frontend/src/store/history-actions.js +++ b/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))); +} diff --git a/frontend/src/store/history-store.js b/frontend/src/store/history-store.js index 790d85ec18..7ec098235a 100644 --- a/frontend/src/store/history-store.js +++ b/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: