Added view strategy view

frontend/src/component/feature/form/strategies-section-container.jsx

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import StrategiesSection from './strategies-section';
-import { fetchStrategies } from '../../../store/strategy-actions';
+import { fetchStrategies } from '../../../store/strategy/actions';
 
 
 export default connect((state) => ({

frontend/src/component/strategies/add-container.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { createMapper, createActions } from '../input-helpers';
-import { createStrategy } from '../../store/strategy-actions';
+import { createStrategy } from '../../store/strategy/actions';
 
 import AddStrategy, { PARAM_PREFIX } from './add-strategy';
 

frontend/src/component/strategies/list-container.jsx

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import StrategiesListComponent from './list-component.jsx';
-import { fetchStrategies, removeStrategy } from '../../store/strategy-actions';
+import { fetchStrategies, removeStrategy } from '../../store/strategy/actions';
 
 const mapStateToProps = (state) => {
     const list = state.strategies.get('list').toArray();

frontend/src/component/strategies/show-strategy-component.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router';
+import { Grid, Cell } from 'react-mdl';
+
+class ShowStrategyComponent extends Component {
+    constructor (props) {
+        super(props);
+        this.state = { applications: [] };
+    }
+
+    componentDidMount () {
+        if (!this.props.strategy) {
+            this.props.fetchStrategies();
+        };
+
+        this.props.getApplications()
+            .then(res => this.setState({ applications: res.applications }));
+    }
+
+    renderParameters (parametersTemplate) {
+        if (parametersTemplate) {
+            return Object.keys(parametersTemplate).map((name, i) => (
+                <li key={`${name}-${i}`}><strong>{name}</strong> ({parametersTemplate[name]})</li>
+            ));
+        } else {
+            return <li>(no params)</li>;
+        }
+    }
+
+    render () {
+        if (!this.props.strategy) {
+            return null;
+        }
+
+        const {
+            name,
+            description,
+            parametersTemplate = {},
+        } = this.props.strategy;
+
+
+        return (
+            <div>
+                <h4>{name}</h4>
+                <p>{description}</p>
+                <Grid>
+                    <Cell col={4}>
+                        <h6>Parameters</h6>
+                        <ol className="demo-list-item mdl-list">
+                            {this.renderParameters(parametersTemplate)}
+                        </ol>
+                    </Cell>
+
+                    <Cell col={4}>
+                        <h6>Applications using this strategy</h6>
+                        <ol className="demo-list-item mdl-list">
+                            {this.state.applications.map(({ appName }, i) => (
+                                <li key={`${appName}-${i}`}>
+                                    <Link to={`/applications/${appName}`}>
+                                        {appName}
+                                    </Link>
+                                </li>
+                            ))}
+                        </ol>
+                    </Cell>
+
+                </Grid>
+            </div>
+        );
+    }
+}
+
+
+export default ShowStrategyComponent;

frontend/src/component/strategies/show-strategy-container.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import ShowStrategy from './show-strategy-component';
+import { fetchStrategies, getApplicationsWithStrategy } from '../../store/strategy/actions';
+
+const mapStateToProps = (state, props) => {
+    let strategy = state.strategies.getIn(['list']).find(n => n.name === props.strategyName);
+    return {
+        strategy,
+        getApplications: () => getApplicationsWithStrategy(props.strategyName),
+    };
+};
+
+const Constainer = connect(mapStateToProps, { fetchStrategies })(ShowStrategy);
+
+export default Constainer;

frontend/src/data/applications-api.js

@@ -14,7 +14,14 @@ function fetchApplication (appName) {
         .then(response => response.json());
 }
 
+function fetchApplicationsWithStrategyName (strategyName) {
+    return fetch(`${URI}?strategyName=${strategyName}`, { headers })
+        .then(throwIfNotSuccess)
+        .then(response => response.json());
+}
+
 module.exports = {
     fetchApplication,
     fetchAll,
+    fetchApplicationsWithStrategyName,
 };

frontend/src/page/strategies/show.js

@@ -1,7 +1,6 @@
 import React from 'react';
+import ShowStrategy from '../../component/strategies/show-strategy-container';
 
-const render = ({ params }) => (
+const render = ({ params }) => <ShowStrategy strategyName={params.strategyName} />;
-    <div>Show details of strategy: {params.strategyName} (applications implementing it, toggles using it etc)!</div>
-);
 
 export default render;

frontend/src/store/index.js

@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux';
 import features from './feature-store';
 import featureMetrics from './feature-metrics-store';
-import strategies from './strategy-store';
+import strategies from './strategy';
 import input from './input-store';
 import history from './history-store'; // eslint-disable-line
 import archive from './archive-store';

frontend/src/store/strategy/actions.js

@@ -1,4 +1,5 @@
-import api from '../data/strategy-api';
+import api from '../../data/strategy-api';
+import { fetchApplicationsWithStrategyName } from '../../data/applications-api';
 
 export const ADD_STRATEGY             = 'ADD_STRATEGY';
 export const REMOVE_STRATEGY          = 'REMOVE_STRATEGY';
@@ -58,4 +59,7 @@ export function removeStrategy (strategy) {
             .catch(error => dispatch(errorCreatingStrategy(error)));
 }
 
+export function getApplicationsWithStrategy (strategyName) {
+    return fetchApplicationsWithStrategyName(strategyName);
+}
 

frontend/src/store/strategy/index.js

@@ -1,5 +1,5 @@
 import { List, Map as $Map } from 'immutable';
-import { RECEIVE_STRATEGIES, REMOVE_STRATEGY, ADD_STRATEGY } from './strategy-actions';
+import { RECEIVE_STRATEGIES, REMOVE_STRATEGY, ADD_STRATEGY } from './actions';
 
 function getInitState () {
     return new $Map({ list: new List() });