From edf0075282a8cad9184f18502617b84905be6e1d Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Tue, 22 Nov 2016 22:04:30 +0100
Subject: [PATCH] add history for feature toggles

---
 .../archive/archive-list-component.jsx        |  2 +-
 .../component/feature/feature-component.jsx   |  3 ++
 .../component/history/history-component.jsx   | 28 ++++++++++++++
 .../component/history/history-container.js    |  4 +-
 .../history/history-list-component.jsx        | 10 +----
 .../history/history-list-toggle-component.jsx | 38 +++++++++++++++++++
 frontend/src/data/history-api.js              |  7 ++++
 frontend/src/index.jsx                        |  2 +
 frontend/src/page/history/toggle.js           | 10 +++++
 9 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/component/history/history-component.jsx
 create mode 100644 frontend/src/component/history/history-list-toggle-component.jsx
 create mode 100644 frontend/src/page/history/toggle.js

diff --git a/frontend/src/component/archive/archive-list-component.jsx b/frontend/src/component/archive/archive-list-component.jsx
index 5dcd783ba5..52bd0ce863 100644
--- a/frontend/src/component/archive/archive-list-component.jsx
+++ b/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 = [
diff --git a/frontend/src/component/feature/feature-component.jsx b/frontend/src/component/feature/feature-component.jsx
index 599c15cafe..1fe816c2c6 100644
--- a/frontend/src/component/feature/feature-component.jsx
+++ b/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)} />,
     ];
 
diff --git a/frontend/src/component/history/history-component.jsx b/frontend/src/component/history/history-component.jsx
new file mode 100644
index 0000000000..ad52076abc
--- /dev/null
+++ b/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;
diff --git a/frontend/src/component/history/history-container.js b/frontend/src/component/history/history-container.js
index 6986b6d3d5..b8ff05c580 100644
--- a/frontend/src/component/history/history-container.js
+++ b/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;
diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx
index fd2fbab7b1..d5c4fe5748 100644
--- a/frontend/src/component/history/history-list-component.jsx
+++ b/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) {
-            return;
+        if (!history || history.length < 0) {
+            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"
diff --git a/frontend/src/component/history/history-list-toggle-component.jsx b/frontend/src/component/history/history-list-toggle-component.jsx
new file mode 100644
index 0000000000..e6c48dfd84
--- /dev/null
+++ b/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;
diff --git a/frontend/src/data/history-api.js b/frontend/src/data/history-api.js
index d61f751421..1b894267ab 100644
--- a/frontend/src/data/history-api.js
+++ b/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,
 };
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 034e2a193f..611679d9f9 100644
--- a/frontend/src/index.jsx
+++ b/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} />
diff --git a/frontend/src/page/history/toggle.js b/frontend/src/page/history/toggle.js
new file mode 100644
index 0000000000..eae6094429
--- /dev/null
+++ b/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;