update metrics data in ui

packages/unleash-api/lib/client-metrics/index.js

@@ -2,6 +2,7 @@
 
 const Projection = require('./projection.js');
 const TTLList = require('./ttl-list.js');
+const moment = require('moment');
 
 module.exports = class UnleashClientMetrics {
     constructor () {
@@ -10,11 +11,26 @@ module.exports = class UnleashClientMetrics {
         this.clients = {};
         this.buckets = {};
 
-        this.hourProjectionValue = new Projection();
+        this.lastHourProjection = new Projection();
-        this.oneHourLruCache = new TTLList();
+        this.lastMinuteProjection = new Projection();
-        this.oneHourLruCache.on('expire', (toggles) => {
+
+        this.lastHourList = new TTLList({
+            interval: 10000,
+        });
+        this.lastMinuteList = new TTLList({
+            interval: 10000,
+            expireType: 'minutes',
+            expireAmount: 1,
+        });
+
+        this.lastHourList.on('expire', (toggles) => {
             Object.keys(toggles).forEach(toggleName => {
-                this.hourProjectionValue.substract(toggleName, toggles[toggleName]);
+                this.lastHourProjection.substract(toggleName, toggles[toggleName]);
+            });
+        });
+        this.lastMinuteList.on('expire', (toggles) => {
+            Object.keys(toggles).forEach(toggleName => {
+                this.lastMinuteProjection.substract(toggleName, toggles[toggleName]);
             });
         });
     }
@@ -32,7 +48,10 @@ module.exports = class UnleashClientMetrics {
     }
 
     getTogglesMetrics () {
-        return this.hourProjectionValue.getProjection();
+        return {
+            lastHour: this.lastHourProjection.getProjection(),
+            lastMinute: this.lastMinuteProjection.getProjection(),
+        };
     }
 
     addPayload (data) {
@@ -47,11 +66,13 @@ module.exports = class UnleashClientMetrics {
 
         Object.keys(toggles).forEach((n) => {
             const entry = toggles[n];
-            this.hourProjectionValue.add(n, entry);
+            this.lastHourProjection.add(n, entry);
+            this.lastMinuteProjection.add(n, entry);
             count += (entry.yes + entry.no);
         });
 
-        this.oneHourLruCache.add(toggles, stop);
+        this.lastHourList.add(toggles, stop);
+        this.lastMinuteList.add(toggles, stop);
 
         this.addClientCount(appName, instanceId, count);
     }

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

@@ -8,7 +8,13 @@ import Chip from 'react-toolbox/lib/chip';
 
 import style from './feature.scss';
 
-const Feature = ({ feature, onFeatureClick, onFeatureRemove, metrics = { yes: 0, no: 0, hasData: false } }) => {
+const Feature = ({
+    feature,
+    onFeatureClick,
+    onFeatureRemove,
+    metricsLastHour = { yes: 0, no: 0, hasData: false },
+    metricsLastMinute = { yes: 0, no: 0, hasData: false },
+}) => {
     const { name, description, enabled, strategies, createdAt } = feature;
     const created = new Date(createdAt);
 
@@ -22,7 +28,8 @@ const Feature = ({ feature, onFeatureClick, onFeatureRemove, metrics = { yes: 0,
     ];
 
     const leftActions = [
-        <Chip><span className={style.yes}>{metrics.yes}</span> / <span className={style.no}>{metrics.no}</span></Chip>,
+        <Chip><span className={style.yes}>{metricsLastHour.yes}</span> / <span className={style.no}>{metricsLastHour.no}</span></Chip>,
+        <Chip><span className={style.yes}>{metricsLastMinute.yes}</span> / <span className={style.no}>{metricsLastMinute.no}</span></Chip>,
         <Switch key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />,
     ];
 

packages/unleash-frontend-next/src/component/feature/list-component.jsx

@@ -38,8 +38,12 @@ export default class FeatureListComponent extends React.Component {
            <List>
                 <ListSubHeader caption="Feature toggles" />
                 {features.map((feature, i) =>
-                    <Feature key={i} metrics={featureMetrics[feature.name]} feature={feature}
+                    <Feature key={i}
-                    onFeatureClick={onFeatureClick} onFeatureRemove={onFeatureRemove}/>
+                        metricsLastHour={featureMetrics.lastHour[feature.name]}
+                        metricsLastMinute={featureMetrics.lastMinute[feature.name]}
+                        feature={feature}
+                        onFeatureClick={onFeatureClick}
+                        onFeatureRemove={onFeatureRemove}/>
                 )}
                 <ListDivider />
                 <ListItem

packages/unleash-frontend-next/src/store/feature-metrics-store.js

@@ -1,14 +1,18 @@
-import { Map as $Map } from 'immutable';
+import { Map as $Map, fromJS } from 'immutable';
 
 import {
     RECEIVE_FEATURE_METRICS,
 } from './feature-metrics-actions';
 
 
-const metrics = (state = new $Map(), action) => {
+const metrics = (state = fromJS({ lastHour: {}, lastMinute: {} }), action) => {
     switch (action.type) {
         case RECEIVE_FEATURE_METRICS:
-            return new $Map(action.metrics);
+            return state.withMutations((ctx) => {
+                ctx.set('lastHour', new $Map(action.metrics.lastHour));
+                ctx.set('lastMinute', new $Map(action.metrics.lastMinute));
+                return ctx;
+            });
         default:
             return state;
     }