added vrei for showing client strategies

packages/unleash-frontend-next/src/component/client-strategy/strategy-component.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import Table from 'react-toolbox/lib/table';
+
+const Model = {
+    appName: { type: String, title: 'Application Name' },
+    strategies: { type: String },
+};
+
+class ClientStrategies extends Component {
+
+    componentDidMount () {
+        this.props.fetchClientStrategies();
+    }
+
+    render () {
+        const source = this.props.clientStrategies.map(item => (
+            {
+                appName: item.appName,
+                strategies: item.strategies.join(', '),
+            })
+        );
+
+        return (
+            <Table
+                model={Model}
+                source={source}
+                selectable={false}
+            />
+        );
+    }
+}
+
+
+export default ClientStrategies;

packages/unleash-frontend-next/src/component/client-strategy/strategy-container.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import ClientStrategies from './strategy-component';
+import { fetchClientStrategies } from '../../store/client-strategy-actions';
+
+const mapStateToProps = (state) => ({ clientStrategies: state.clientStrategies.toJS() });
+
+const StrategiesContainer = connect(mapStateToProps, { fetchClientStrategies })(ClientStrategies);
+
+export default StrategiesContainer;

packages/unleash-frontend-next/src/component/nav.jsx

@@ -19,6 +19,7 @@ export default class UnleashNav extends Component {
                     {createListItem('/history', 'Event history')}
                     {createListItem('/archive', 'Archived toggles')}
                     {createListItem('/metrics', 'Client metrics')}
+                    {createListItem('/Clients', 'Clients')}
 
                     <ListDivider />
 

packages/unleash-frontend-next/src/data/client-strategy-api.js

@@ -0,0 +1,20 @@
+const URI = '/client/strategies';
+
+function throwIfNotSuccess (response) {
+    if (!response.ok) {
+        let error = new Error('API call failed');
+        error.status = response.status;
+        throw error;
+    }
+    return response;
+}
+
+function fetchAll () {
+    return fetch(URI)
+        .then(throwIfNotSuccess)
+        .then(response => response.json());
+}
+
+module.exports = {
+    fetchAll,
+};

packages/unleash-frontend-next/src/index.jsx

@@ -16,6 +16,7 @@ import CreateStrategies from './page/strategies/create';
 import HistoryPage from './page/history';
 import Archive from './page/archive';
 import Metrics from './page/metrics';
+import Clients from './page/clients';
 
 const unleashStore = createStore(
     store,
@@ -37,6 +38,7 @@ ReactDOM.render(
                 <Route path="/history" component={HistoryPage} />
                 <Route path="/archive" component={Archive} />
                 <Route path="/metrics" component={Metrics} />
+                <Route path="/clients" component={Clients} />
             </Route>
         </Router>
     </Provider>, document.getElementById('app'));

packages/unleash-frontend-next/src/page/clients/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ClientStrategy from '../../component/client-strategy/strategy-container';
+
+const render = () => <ClientStrategy />;
+
+export default render;

packages/unleash-frontend-next/src/store/client-strategy-actions.js

@@ -0,0 +1,20 @@
+import api from '../data/client-strategy-api';
+
+export const RECEIVE_CLIENT_STRATEGIES = 'RECEIVE_CLIENT_STRATEGIES';
+export const ERROR_RECEIVE_CLIENT_STRATEGIES = 'ERROR_RECEIVE_CLIENT_STRATEGIES';
+
+const receiveMetrics = (json) => ({
+    type: RECEIVE_CLIENT_STRATEGIES,
+    value: json,
+});
+
+const errorReceiveMetrics = (statusCode) => ({
+    type: RECEIVE_CLIENT_STRATEGIES,
+    statusCode,
+});
+
+export function fetchClientStrategies () {
+    return dispatch => api.fetchAll()
+        .then(json => dispatch(receiveMetrics(json)))
+        .catch(error => dispatch(errorReceiveMetrics(error)));
+}

packages/unleash-frontend-next/src/store/client-strategy-store.js

@@ -0,0 +1,17 @@
+import { fromJS } from 'immutable';
+import { RECEIVE_CLIENT_STRATEGIES } from './client-strategy-actions';
+
+function getInitState () {
+    return fromJS([]);
+}
+
+const store = (state = getInitState(), action) => {
+    switch (action.type) {
+        case RECEIVE_CLIENT_STRATEGIES:
+            return fromJS(action.value);
+        default:
+            return state;
+    }
+};
+
+export default store;

packages/unleash-frontend-next/src/store/index.js

@@ -6,6 +6,7 @@ import history from './history-store'; // eslint-disable-line
 import archive from './archive-store';
 import error from './error-store';
 import metrics from './metrics-store';
+import clientStrategies from './client-strategy-store';
 
 const unleashStore = combineReducers({
     features,
@@ -15,6 +16,7 @@ const unleashStore = combineReducers({
     archive,
     error,
     metrics,
+    clientStrategies,
 });
 
 export default unleashStore;

packages/unleash-frontend-next/webpack.config.js

@@ -77,6 +77,10 @@ module.exports = {
                 target: 'http://localhost:4242',
                 secure: false,
             },
+            '/client/strategies': {
+                target: 'http://localhost:4242',
+                secure: false,
+            },
         },
     },
 };