add seen apps

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 = {
+            metrics = {},
-                lastHour: { yes: 0, no: 0, isFallback: true },
-                lastMinute: { yes: 0, no: 0, isFallback: true },
-            },
         } = this.props;
 
-        const lastHourPercent = 1 * percentLib.calc(metrics.lastHour.yes, metrics.lastHour.yes + metrics.lastHour.no, 0);
+        const {
-        const lastMinutePercent = 1 * percentLib.calc(metrics.lastMinute.yes, metrics.lastMinute.yes + metrics.lastMinute.no, 0);
+            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 {
             <div>
                 <h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
                 <hr />
-                <div style={{ maxWidth: '150px' }} >
+                <div style={{ maxWidth: '200px' }} >
                     <Switch style={{ cursor: 'pointer' }} onChange={() => toggleFeature(featureToggle)} checked={featureToggle.enabled}>
                         Toggle {featureToggle.name}
                     </Switch>
                 </div>
                 <hr />
-                <Grid>
+                <Grid style={{ textAlign: 'center' }}>
-                    <Cell col={3} style={{ textAlign: 'center' }}>
+                    <Cell col={3}>
                         {
-                            metrics.lastMinute.isFallback ?
+                            lastMinute.isFallback ?
                             <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
                             <div>
                                 <Progress strokeWidth={10} percentage={lastMinutePercent} width="50" />
                             </div>
                         }
-                        <p><strong>Last minute:</strong> Yes {metrics.lastMinute.yes}, No: {metrics.lastMinute.no}</p>
+                        <p><strong>Last minute:</strong> Yes {lastMinute.yes}, No: {lastMinute.no}</p>
                     </Cell>
-                    <Cell col={3} style={{ textAlign: 'center' }}>
+                    <Cell col={3}>
                         {
-                            metrics.lastHour.isFallback ?
+                            lastHour.isFallback ?
                             <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
                             <div>
                                 <Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
                             </div>
                         }
-                        <p><strong>Last hour:</strong> Yes {metrics.lastHour.yes}, No: {metrics.lastHour.no}</p>
+                        <p><strong>Last hour:</strong> Yes {lastHour.yes}, No: {lastHour.no}</p>
                     </Cell>
                     <Cell col={3}>
-                        <p>add apps</p>
+                        {seenApps.length > 0 ?
+                            (<div><strong>Seen in applications:</strong></div>) :
+                            <div>
+                                <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="Not used in a app in the last hour" />
+                                <div><small><strong>Not used in a app in the last hour.</strong> This might be due to your client implementation is not reporting usage.</small></div>
+                            </div>
+                        }
+                        {seenApps.length > 0 && seenApps.map((appName) => (
+                            <Link key={appName} to={`/applications/${appName}`}>
+                                {appName}
+                            </Link>
+                        ))}
+                        <p>add instances count?</p>
                     </Cell>
                     <Cell col={3}>
-                            <p>add instances</p>
+                            <p>add history</p>
                     </Cell>
                 </Grid>
                 <hr />
@@ -102,12 +119,16 @@ function getMetricsForToggle (state, toggleName) {
     if (!toggleName) {
         return;
     }
-    if (state.featureMetrics.hasIn(['lastHour', toggleName])) {
+    const result = {};
-        return {
+
-            lastHour: state.featureMetrics.getIn(['lastHour', toggleName]),
+    if (state.featureMetrics.hasIn(['seenApps', toggleName])) {
-            lastMinute: state.featureMetrics.getIn(['lastMinute', 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);

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,
 };

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));
     };
 }
+

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('lastHour', new $Map(action.value.lastHour));
-                ctx.set('lastMinute', new $Map(action.metrics.lastMinute));
+                ctx.set('lastMinute', new $Map(action.value.lastMinute));
                 return ctx;
             });
         default: