diff --git a/packages/unleash-api/lib/client-metrics/index.js b/packages/unleash-api/lib/client-metrics/index.js index c3f0261818..451cb0413c 100644 --- a/packages/unleash-api/lib/client-metrics/index.js +++ b/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.oneHourLruCache = new TTLList(); - this.oneHourLruCache.on('expire', (toggles) => { + this.lastHourProjection = new Projection(); + this.lastMinuteProjection = new Projection(); + + 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); } diff --git a/packages/unleash-frontend-next/src/component/feature/feature-component.jsx b/packages/unleash-frontend-next/src/component/feature/feature-component.jsx index c7b0a8c756..84920fcad5 100644 --- a/packages/unleash-frontend-next/src/component/feature/feature-component.jsx +++ b/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 = [ - {metrics.yes} / {metrics.no}, + {metricsLastHour.yes} / {metricsLastHour.no}, + {metricsLastMinute.yes} / {metricsLastMinute.no}, onFeatureClick(feature)} checked={enabled} />, ]; diff --git a/packages/unleash-frontend-next/src/component/feature/list-component.jsx b/packages/unleash-frontend-next/src/component/feature/list-component.jsx index 390af8413f..c51311ffb5 100644 --- a/packages/unleash-frontend-next/src/component/feature/list-component.jsx +++ b/packages/unleash-frontend-next/src/component/feature/list-component.jsx @@ -38,8 +38,12 @@ export default class FeatureListComponent extends React.Component { {features.map((feature, i) => - + )} { +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; }