diff --git a/frontend/src/component/feature/form/strategies-section-container.jsx b/frontend/src/component/feature/form/strategies-section-container.jsx
index 7f12216935..263f5cbee1 100644
--- a/frontend/src/component/feature/form/strategies-section-container.jsx
+++ b/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) => ({
diff --git a/frontend/src/component/strategies/add-container.js b/frontend/src/component/strategies/add-container.js
index 1ff835c1b8..ec841c234c 100644
--- a/frontend/src/component/strategies/add-container.js
+++ b/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';
diff --git a/frontend/src/component/strategies/list-container.jsx b/frontend/src/component/strategies/list-container.jsx
index 1b1d1eb87e..50be30b13b 100644
--- a/frontend/src/component/strategies/list-container.jsx
+++ b/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();
diff --git a/frontend/src/component/strategies/show-strategy-component.js b/frontend/src/component/strategies/show-strategy-component.js
new file mode 100644
index 0000000000..55f71fc83d
--- /dev/null
+++ b/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) => (
+
{name} ({parametersTemplate[name]})
+ ));
+ } else {
+ return (no params);
+ }
+ }
+
+ render () {
+ if (!this.props.strategy) {
+ return null;
+ }
+
+ const {
+ name,
+ description,
+ parametersTemplate = {},
+ } = this.props.strategy;
+
+
+ return (
+
+
{name}
+
{description}
+
+
+ Parameters
+
+ {this.renderParameters(parametersTemplate)}
+
+ |
+
+
+ Applications using this strategy
+
+ {this.state.applications.map(({ appName }, i) => (
+ -
+
+ {appName}
+
+
+ ))}
+
+ |
+
+
+
+ );
+ }
+}
+
+
+export default ShowStrategyComponent;
diff --git a/frontend/src/component/strategies/show-strategy-container.js b/frontend/src/component/strategies/show-strategy-container.js
new file mode 100644
index 0000000000..833fb5de5b
--- /dev/null
+++ b/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;
diff --git a/frontend/src/data/applications-api.js b/frontend/src/data/applications-api.js
index 21a6487c1e..fcbd5c4ae3 100644
--- a/frontend/src/data/applications-api.js
+++ b/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,
};
diff --git a/frontend/src/page/strategies/show.js b/frontend/src/page/strategies/show.js
index 175c81a3d9..5ee23a1f64 100644
--- a/frontend/src/page/strategies/show.js
+++ b/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 }) => (
- Show details of strategy: {params.strategyName} (applications implementing it, toggles using it etc)!
-);
+const render = ({ params }) => ;
export default render;
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 2ef2384523..985faf5bce 100644
--- a/frontend/src/store/index.js
+++ b/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';
diff --git a/frontend/src/store/strategy-actions.js b/frontend/src/store/strategy/actions.js
similarity index 87%
rename from frontend/src/store/strategy-actions.js
rename to frontend/src/store/strategy/actions.js
index 8421a1384c..4648d7a78d 100644
--- a/frontend/src/store/strategy-actions.js
+++ b/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);
+}
diff --git a/frontend/src/store/strategy-store.js b/frontend/src/store/strategy/index.js
similarity index 97%
rename from frontend/src/store/strategy-store.js
rename to frontend/src/store/strategy/index.js
index 72900eaf22..bb043c3712 100644
--- a/frontend/src/store/strategy-store.js
+++ b/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() });