From ef969ffff4d6b7b7f55da1a2f52744bb3ed182b4 Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Mon, 5 Dec 2016 16:01:09 +0100
Subject: [PATCH] Link to strategy from applications page

---
 .../application/application-edit-component.js | 19 ++++++++++++-------
 frontend/src/index.jsx                        |  2 ++
 frontend/src/page/strategies/show.js          |  7 +++++++
 3 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/page/strategies/show.js

diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index fa679fe2f2..31e63dd682 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import { Link } from 'react-router';
 import { Grid, Cell } from 'react-mdl';
 
-class ClientStrategies extends Component {
+class ClientStrategies extends PureComponent {
 
     componentDidMount () {
         this.props.fetchApplication(this.props.appName);
     }
 
-    render () {       
+    render () {
         if (!this.props.application) {
             return <div>Loading application info...</div>;
         }
@@ -19,11 +19,10 @@ class ClientStrategies extends Component {
             strategies,
             seenToggles,
         } = this.props.application;
-        
+
         return (
             <div>
                 <h5>{appName}</h5>
-                
                 <Grid>
                     <Cell col={4}>
                         <h6>Instances</h6>
@@ -32,9 +31,15 @@ class ClientStrategies extends Component {
                         </ol>
                     </Cell>
                     <Cell col={4}>
-                        <h6>Strategies</h6>
+                        <h6>Implemented strategies</h6>
                         <ol className="demo-list-item mdl-list">
-                        {/*strategies.map((name, i) => <li className="mdl-list__item"  key={i}>{name}</li>)*/}
+                            {strategies.map((name, i) => (
+                                <li className="mdl-list__item" key={`${name}-${i}`}>
+                                    <Link to={`/strategies/view/${name}`}>
+                                        {name}
+                                    </Link>
+                                </li>
+                            ))}
                         </ol>
                     </Cell>
                     <Cell col={4}>
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 905c9c3dfd..376f432bca 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -13,6 +13,7 @@ import Features from './page/features';
 import CreateFeatureToggle from './page/features/create';
 import EditFeatureToggle from './page/features/edit';
 import Strategies from './page/strategies';
+import StrategyView from './page/strategies/show';
 import CreateStrategies from './page/strategies/create';
 import HistoryPage from './page/history';
 import HistoryTogglePage from './page/history/toggle';
@@ -38,6 +39,7 @@ ReactDOM.render(
                 <Route pageTitle="Features" path="/features/edit/:name" component={EditFeatureToggle} />
                 <Route pageTitle="Strategies" path="/strategies" component={Strategies} />
                 <Route pageTitle="Strategies" path="/strategies/create" component={CreateStrategies} />
+                <Route pageTitle="Strategies" path="/strategies/view/:strategyName" component={StrategyView} />
                 <Route pageTitle="History"  path="/history" component={HistoryPage} />
                 <Route pageTitle="History" path="/history/:toggleName" component={HistoryTogglePage} />
                 <Route pageTitle="Archive" path="/archive" component={Archive} />
diff --git a/frontend/src/page/strategies/show.js b/frontend/src/page/strategies/show.js
new file mode 100644
index 0000000000..175c81a3d9
--- /dev/null
+++ b/frontend/src/page/strategies/show.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const render = ({ params }) => (
+    <div>Show details of strategy: {params.strategyName} (applications implementing it, toggles using it etc)!</div>
+);
+
+export default render;