Strategy view: added used in toggles

frontend/src/component/common/index.js

@@ -57,3 +57,16 @@ export const SwitchWithLabel = ({ onChange, children, checked }) => (
     </span>
 );
 
+export const TogglesLinkList = ({ toggles }) => (
+    <List style={{ textAlign: 'left' }}>
+    {toggles.length > 0 && toggles.map(({ name, description = '-', icon = 'toggle' }) => (
+        <ListItem twoLine key={name}>
+            <ListItemContent avatar={icon} subtitle={description}>
+                <Link key={name} to={`/features/edit//${name}`}>
+                    {name}
+                </Link>
+            </ListItemContent>
+        </ListItem>
+    ))}
+    </List>
+);

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 (
             <div>
                 <HeaderTitle title={name} subtitle={description} />
                 <Grid>
-                    <Cell col={6}>
+                    <Cell col={4}>
                         <h6>Parameters</h6>
                         <hr />
                         <ol className="demo-list-item mdl-list">
@@ -53,11 +56,17 @@ class ShowStrategyComponent extends Component {
                         </ol>
                     </Cell>
 
-                    <Cell col={6}>
+                    <Cell col={4}>
                         <h6>Applications using this strategy</h6>
                         <hr />
                         <AppsLinkList apps={applications} />
                     </Cell>
+
+                    <Cell col={4}>
+                        <h6>Toggles using this strategy</h6>
+                        <hr />
+                        <TogglesLinkList toggles={toggles} />
+                    </Cell>
                 </Grid>
             </div>
         );

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;