diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js index 621966430c..afd6676c7b 100644 --- a/frontend/src/component/common/index.js +++ b/frontend/src/component/common/index.js @@ -57,3 +57,16 @@ export const SwitchWithLabel = ({ onChange, children, checked }) => ( ); +export const TogglesLinkList = ({ toggles }) => ( + + {toggles.length > 0 && toggles.map(({ name, description = '-', icon = 'toggle' }) => ( + + + + {name} + + + + ))} + +); diff --git a/frontend/src/component/strategies/show-strategy-component.js b/frontend/src/component/strategies/show-strategy-component.js index bfa8d99dc3..b2fbe45388 100644 --- a/frontend/src/component/strategies/show-strategy-component.js +++ b/frontend/src/component/strategies/show-strategy-component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Grid, Cell } from 'react-mdl'; -import { AppsLinkList, HeaderTitle } from '../common'; +import { AppsLinkList, TogglesLinkList, HeaderTitle } from '../common'; class ShowStrategyComponent extends Component { componentDidMount () { @@ -11,6 +11,9 @@ class ShowStrategyComponent extends Component { if (!this.props.applications || this.props.applications.length === 0) { this.props.fetchApplications(); } + if (!this.props.toggles || this.props.toggles.length === 0) { + this.props.fetchFeatureToggles(); + } } renderParameters (parametersTemplate) { @@ -28,6 +31,7 @@ class ShowStrategyComponent extends Component { strategy, strategyName, applications, + toggles, } = this.props; if (!strategy) { @@ -40,12 +44,11 @@ class ShowStrategyComponent extends Component { parametersTemplate = {}, } = strategy; - return (
- +
Parameters

    @@ -53,11 +56,17 @@ class ShowStrategyComponent extends Component {
- +
Applications using this strategy

+ + +
Toggles using this strategy
+
+ +
); diff --git a/frontend/src/component/strategies/show-strategy-container.js b/frontend/src/component/strategies/show-strategy-container.js index 13aa3f6642..ef8d0fee02 100644 --- a/frontend/src/component/strategies/show-strategy-container.js +++ b/frontend/src/component/strategies/show-strategy-container.js @@ -2,6 +2,7 @@ import { connect } from 'react-redux'; import ShowStrategy from './show-strategy-component'; import { fetchStrategies } from '../../store/strategy/actions'; import { fetchAll } from '../../store/application/actions'; +import { fetchFeatureToggles } from '../../store/feature-actions'; const mapStateToProps = (state, props) => { let strategy = state.strategies @@ -10,16 +11,21 @@ const mapStateToProps = (state, props) => { const applications = state.applications .get('list') .filter(app => app.strategies.includes(props.strategyName)); + const toggles = state.features + .filter(toggle => + toggle.get('strategies').findIndex(s => s.name === props.strategyName) > -1); return { strategy, applications: applications && applications.toJS(), + toggles: toggles && toggles.toJS(), }; }; const Constainer = connect(mapStateToProps, { fetchStrategies, fetchApplications: fetchAll, + fetchFeatureToggles, })(ShowStrategy); export default Constainer;