diff --git a/packages/unleash-frontend-next/src/component/client-strategy/strategy-component.js b/packages/unleash-frontend-next/src/component/client-strategy/strategy-component.js
new file mode 100644
index 0000000000..3814f84dcb
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+
+
+export default ClientStrategies;
diff --git a/packages/unleash-frontend-next/src/component/client-strategy/strategy-container.js b/packages/unleash-frontend-next/src/component/client-strategy/strategy-container.js
new file mode 100644
index 0000000000..e227c65a8a
--- /dev/null
+++ b/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;
diff --git a/packages/unleash-frontend-next/src/component/nav.jsx b/packages/unleash-frontend-next/src/component/nav.jsx
index 41a7e1e5b3..34d4f28c3c 100644
--- a/packages/unleash-frontend-next/src/component/nav.jsx
+++ b/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')}
diff --git a/packages/unleash-frontend-next/src/data/client-strategy-api.js b/packages/unleash-frontend-next/src/data/client-strategy-api.js
new file mode 100644
index 0000000000..dc8bd31aff
--- /dev/null
+++ b/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,
+};
diff --git a/packages/unleash-frontend-next/src/index.jsx b/packages/unleash-frontend-next/src/index.jsx
index 8133a8a81d..52b3350856 100644
--- a/packages/unleash-frontend-next/src/index.jsx
+++ b/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(
+
, document.getElementById('app'));
diff --git a/packages/unleash-frontend-next/src/page/clients/index.js b/packages/unleash-frontend-next/src/page/clients/index.js
new file mode 100644
index 0000000000..604f719047
--- /dev/null
+++ b/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 = () => ;
+
+export default render;
diff --git a/packages/unleash-frontend-next/src/store/client-strategy-actions.js b/packages/unleash-frontend-next/src/store/client-strategy-actions.js
new file mode 100644
index 0000000000..b7a07a0dad
--- /dev/null
+++ b/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)));
+}
diff --git a/packages/unleash-frontend-next/src/store/client-strategy-store.js b/packages/unleash-frontend-next/src/store/client-strategy-store.js
new file mode 100644
index 0000000000..1de24b1be0
--- /dev/null
+++ b/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;
diff --git a/packages/unleash-frontend-next/src/store/index.js b/packages/unleash-frontend-next/src/store/index.js
index ef80a0a242..c440251a93 100644
--- a/packages/unleash-frontend-next/src/store/index.js
+++ b/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;
diff --git a/packages/unleash-frontend-next/webpack.config.js b/packages/unleash-frontend-next/webpack.config.js
index edfd5096b1..2d422fd471 100644
--- a/packages/unleash-frontend-next/webpack.config.js
+++ b/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,
+ },
},
},
};