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) => ( +
    1. + + {appName} + +
    2. + ))} +
    +
    + +
    +
    + ); + } +} + + +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() });