diff --git a/frontend/src/component/feature/view-edit-container.jsx b/frontend/src/component/feature/view-edit-container.jsx index 6f6c5dcb9b..b2bdd7067a 100644 --- a/frontend/src/component/feature/view-edit-container.jsx +++ b/frontend/src/component/feature/view-edit-container.jsx @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import { Grid, Cell, Icon, Switch } from 'react-mdl'; +import { Link } from 'react-router'; import percentLib from 'percent'; import Progress from './progress'; @@ -7,7 +8,7 @@ import Progress from './progress'; import { connect } from 'react-redux'; import EditFeatureToggle from './form-edit-container.jsx'; import { fetchFeatureToggles, toggleFeature } from '../../store/feature-actions'; -import { fetchFeatureMetrics } from '../../store/feature-metrics-actions'; +import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-actions'; class EditFeatureToggleWrapper extends React.Component { @@ -23,6 +24,7 @@ class EditFeatureToggleWrapper extends React.Component { if (this.props.features.length === 0) { this.props.fetchFeatureToggles(); } + this.props.fetchSeenApps(); this.props.fetchFeatureMetrics(); setInterval(() => { this.props.fetchFeatureMetrics(); @@ -34,14 +36,17 @@ class EditFeatureToggleWrapper extends React.Component { toggleFeature, features, featureToggleName, - metrics = { - lastHour: { yes: 0, no: 0, isFallback: true }, - lastMinute: { yes: 0, no: 0, isFallback: true }, - }, + metrics = {}, } = this.props; - const lastHourPercent = 1 * percentLib.calc(metrics.lastHour.yes, metrics.lastHour.yes + metrics.lastHour.no, 0); - const lastMinutePercent = 1 * percentLib.calc(metrics.lastMinute.yes, metrics.lastMinute.yes + metrics.lastMinute.no, 0); + const { + lastHour = { yes: 0, no: 0, isFallback: true }, + lastMinute = { yes: 0, no: 0, isFallback: true }, + seenApps = [], + } = metrics; + + const lastHourPercent = 1 * percentLib.calc(lastHour.yes, lastHour.yes + lastHour.no, 0); + const lastMinutePercent = 1 * percentLib.calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0); const featureToggle = features.find(toggle => toggle.name === featureToggleName); @@ -56,38 +61,50 @@ class EditFeatureToggleWrapper extends React.Component {

{featureToggle.name} {featureToggle.enabled ? 'is enabled' : 'is disabled'}

-
+
toggleFeature(featureToggle)} checked={featureToggle.enabled}> Toggle {featureToggle.name}
- - + + { - metrics.lastMinute.isFallback ? + lastMinute.isFallback ? :
} -

Last minute: Yes {metrics.lastMinute.yes}, No: {metrics.lastMinute.no}

+

Last minute: Yes {lastMinute.yes}, No: {lastMinute.no}

 - + { - metrics.lastHour.isFallback ? + lastHour.isFallback ? :
} -

Last hour: Yes {metrics.lastHour.yes}, No: {metrics.lastHour.no}

+

Last hour: Yes {lastHour.yes}, No: {lastHour.no}

 -

add apps

+ {seenApps.length > 0 ? + (
Seen in applications:
) : +
+ +
Not used in a app in the last hour. This might be due to your client implementation is not reporting usage.
+
+ } + {seenApps.length > 0 && seenApps.map((appName) => ( + + {appName} + + ))} +

add instances count?

 -

add instances

+

add history
@@ -102,12 +119,16 @@ function getMetricsForToggle (state, toggleName) { if (!toggleName) { return; } - if (state.featureMetrics.hasIn(['lastHour', toggleName])) { - return { - lastHour: state.featureMetrics.getIn(['lastHour', toggleName]), - lastMinute: state.featureMetrics.getIn(['lastMinute', toggleName]), - }; + const result = {}; + + if (state.featureMetrics.hasIn(['seenApps', toggleName])) { + result.seenApps = state.featureMetrics.getIn(['seenApps', toggleName]); } + if (state.featureMetrics.hasIn(['lastHour', toggleName])) { + result.lastHour = state.featureMetrics.getIn(['lastHour', toggleName]); + result.lastMinute = state.featureMetrics.getIn(['lastMinute', toggleName]); + } + return result; } @@ -118,4 +139,5 @@ export default connect((state, props) => ({ fetchFeatureMetrics, fetchFeatureToggles, toggleFeature, + fetchSeenApps, })(EditFeatureToggleWrapper); diff --git a/frontend/src/data/feature-metrics-api.js b/frontend/src/data/feature-metrics-api.js index 8c2cd155de..2fd653372c 100644 --- a/frontend/src/data/feature-metrics-api.js +++ b/frontend/src/data/feature-metrics-api.js @@ -8,6 +8,15 @@ function fetchFeatureMetrics () { .then(response => response.json()); } +const seenURI = '/api/client/seen-apps'; + +function fetchSeenApps () { + return fetch(seenURI) + .then(throwIfNotSuccess) + .then(response => response.json()); +} + module.exports = { fetchFeatureMetrics, + fetchSeenApps, }; diff --git a/frontend/src/store/feature-metrics-actions.js b/frontend/src/store/feature-metrics-actions.js index a238e0098e..beaef567ca 100644 --- a/frontend/src/store/feature-metrics-actions.js +++ b/frontend/src/store/feature-metrics-actions.js @@ -4,10 +4,22 @@ export const START_FETCH_FEATURE_METRICS = 'START_FETCH_FEATURE_METRICS'; export const RECEIVE_FEATURE_METRICS = 'RECEIVE_FEATURE_METRICS'; export const ERROR_FETCH_FEATURE_TOGGLES = 'ERROR_FETCH_FEATURE_TOGGLES'; +export const START_FETCH_SEEN_APP = 'START_FETCH_SEEN_APP'; +export const RECEIVE_SEEN_APPS = 'RECEIVE_SEEN_APPS'; +export const ERROR_FETCH_SEEN_APP = 'ERROR_FETCH_SEEN_APP'; + function receiveFeatureMetrics (json) { return { type: RECEIVE_FEATURE_METRICS, - metrics: json, + value: json, + receivedAt: Date.now(), + }; +} + +function receiveSeenApps (json) { + return { + type: RECEIVE_SEEN_APPS, + value: json, receivedAt: Date.now(), }; } @@ -21,10 +33,21 @@ function dispatchAndThrow (dispatch, type) { export function fetchFeatureMetrics () { return dispatch => { - dispatch({ type: START_FETCH_FEATURE_METRICS }); + dispatch({ type: START_FETCH_SEEN_APP }); return api.fetchFeatureMetrics() .then(json => dispatch(receiveFeatureMetrics(json))) + .catch(dispatchAndThrow(dispatch, ERROR_FETCH_SEEN_APP)); + }; +} + +export function fetchSeenApps () { + return dispatch => { + dispatch({ type: START_FETCH_FEATURE_METRICS }); + + return api.fetchSeenApps() + .then(json => dispatch(receiveSeenApps(json))) .catch(dispatchAndThrow(dispatch, ERROR_FETCH_FEATURE_TOGGLES)); }; } + diff --git a/frontend/src/store/feature-metrics-store.js b/frontend/src/store/feature-metrics-store.js index 87d7459686..621688226e 100644 --- a/frontend/src/store/feature-metrics-store.js +++ b/frontend/src/store/feature-metrics-store.js @@ -2,15 +2,19 @@ import { Map as $Map, fromJS } from 'immutable'; import { RECEIVE_FEATURE_METRICS, + RECEIVE_SEEN_APPS, } from './feature-metrics-actions'; -const metrics = (state = fromJS({ lastHour: {}, lastMinute: {} }), action) => { +const metrics = (state = fromJS({ lastHour: {}, lastMinute: {}, seenApps: {} }), action) => { switch (action.type) { + case RECEIVE_SEEN_APPS: + console.log('RECEIVE_SEEN_APPS', action.value); + return state.set('seenApps', new $Map(action.value)); case RECEIVE_FEATURE_METRICS: return state.withMutations((ctx) => { - ctx.set('lastHour', new $Map(action.metrics.lastHour)); - ctx.set('lastMinute', new $Map(action.metrics.lastMinute)); + ctx.set('lastHour', new $Map(action.value.lastHour)); + ctx.set('lastMinute', new $Map(action.value.lastMinute)); return ctx; }); default: