add history for feature toggles

frontend/src/component/archive/archive-list-component.jsx

@@ -8,7 +8,7 @@ const ArchivedFeature = ({ feature, revive }) => {
     const { name, description, enabled, strategies } = feature;
     const actions = [
         <div>{strategies && strategies.map(s => <Chip><small>{s.name}</small></Chip>)}</div>,
-        <FontIcon style={{ cursor: 'pointer' }} value="restore" onClick={() => revive(feature)} />,
+        <FontIcon style={{ cursor: 'pointer' }} value="undo" onClick={() => revive(feature)} />,
     ];
 
     const leftActions = [

frontend/src/component/feature/feature-component.jsx

@@ -24,6 +24,9 @@ const Feature = ({
         <Link key="change" to={`/features/edit/${name}`} title={`Edit ${name}`}>
             <FontIcon value="edit" className={style.action} />
         </Link>,
+        <Link key="history" to={`/history/${name}`} title={`History for ${name}`}>
+            <FontIcon value="history" className={style.action} />
+        </Link>,
         <FontIcon key="delete" className={style.action} value="delete" onClick={() => onFeatureRemove(name)} />,
     ];
 

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

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import HistoryList from './history-list-component';
+
+class History extends Component {
+
+    componentDidMount () {
+        this.props.fetchHistory();
+    }
+
+    toggleShowDiff () {
+        this.setState({ showData: !this.state.showData });
+    }
+
+    render () {
+        const { history } = this.props;
+        if (history.length < 0) {
+            return;
+        }
+
+        return (
+            <div>
+                <h5>Last 100 changes</h5>
+                <HistoryList history={history} />
+            </div>
+        );
+    }
+}
+export default History;

frontend/src/component/history/history-container.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import ListComponent from './history-list-component';
+import HistoryComponent from './history-component';
 import { fetchHistory } from '../../store/history-actions';
 
 const mapStateToProps = (state) => {
@@ -10,6 +10,6 @@ const mapStateToProps = (state) => {
     };
 };
 
-const HistoryListContainer = connect(mapStateToProps, { fetchHistory })(ListComponent);
+const HistoryListContainer = connect(mapStateToProps, { fetchHistory })(HistoryComponent);
 
 export default HistoryListContainer;

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

@@ -11,26 +11,20 @@ class HistoryList extends Component {
         this.state = { showData: false };
     }
 
-    componentDidMount () {
-        this.props.fetchHistory();
-    }
-
     toggleShowDiff () {
         this.setState({ showData: !this.state.showData });
     }
 
     render () {
         const { history } = this.props;
-        if (history.length < 0) {
+        if (!history || history.length < 0) {
-            return;
+            return null;
         }
 
-
         const entries =  history.map((entry) => <HistoryItem  key={`log${entry.id}`} entry={entry} showData={this.state.showData} />);
 
         return (
             <div>
-                <h5>History</h5>
                 <Switch
                     checked={this.state.showData}
                     label="Show full events"

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

@@ -0,0 +1,38 @@
+import React, { Component, PropTypes } from 'react';
+import ListComponent from './history-list-component';
+import { fetchHistoryForToggle } from '../../data/history-api';
+
+class HistoryListToggle extends Component {
+
+    constructor (props) {
+        super(props);
+        this.state = {
+            fetching: true,
+            history: undefined,
+        };
+    }
+
+    static propTypes () {
+        return {
+            toggleName: PropTypes.string.isRequired,
+        };
+    }
+
+    componentDidMount () {
+        fetchHistoryForToggle(this.props.toggleName)
+            .then((res) => this.setState({ history: res, fetching: false }));
+    }
+
+    render () {
+        if (this.state.fetching) {
+            return <span>fetching..</span>;
+        }
+        return (
+            <div>
+                <h5>Showing history for toggle: <strong>{this.props.toggleName}</strong></h5>
+                <ListComponent history={this.state.history} />
+            </div>
+        );
+    }
+}
+export default HistoryListToggle;

frontend/src/data/history-api.js

@@ -8,6 +8,13 @@ function fetchAll () {
         .then(response => response.json());
 }
 
+function fetchHistoryForToggle (toggleName) {
+    return fetch(`${URI}/${toggleName}`)
+        .then(throwIfNotSuccess)
+        .then(response => response.json());
+}
+
 module.exports = {
     fetchAll,
+    fetchHistoryForToggle,
 };

frontend/src/index.jsx

@@ -15,6 +15,7 @@ import EditFeatureToggle from './page/features/edit';
 import Strategies from './page/strategies';
 import CreateStrategies from './page/strategies/create';
 import HistoryPage from './page/history';
+import HistoryTogglePage from './page/history/toggle';
 import Archive from './page/archive';
 import Metrics from './page/metrics';
 import ClientStrategies from './page/client-strategies';
@@ -38,6 +39,7 @@ ReactDOM.render(
                 <Route path="/strategies" component={Strategies} />
                 <Route path="/strategies/create" component={CreateStrategies} />
                 <Route path="/history" component={HistoryPage} />
+                <Route path="/history/:toggleName" component={HistoryTogglePage} />
                 <Route path="/archive" component={Archive} />
                 <Route path="/metrics" component={Metrics} />
                 <Route path="/client-strategies" component={ClientStrategies} />

frontend/src/page/history/toggle.js

@@ -0,0 +1,10 @@
+import React, { PropTypes } from 'react';
+import HistoryListToggle from '../../component/history/history-list-toggle-component';
+
+const render = ({ params }) => <HistoryListToggle toggleName={params.toggleName} />;
+
+render.propTypes = {
+    params: PropTypes.object.isRequired,
+};
+
+export default render;