2017-08-28 21:30:12 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2017-01-06 15:21:58 +01:00
|
|
|
import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
|
2016-12-19 19:55:44 +01:00
|
|
|
import Progress from './progress';
|
2017-01-06 15:21:58 +01:00
|
|
|
import { Link } from 'react-router';
|
2017-03-01 21:53:25 +01:00
|
|
|
import { AppsLinkList, calc } from '../common';
|
2017-01-28 17:01:30 +01:00
|
|
|
import { formatFullDateTime } from '../common/util';
|
2017-01-01 20:44:02 +01:00
|
|
|
import styles from './metrics.scss';
|
2016-12-19 19:55:44 +01:00
|
|
|
|
2017-01-01 20:44:02 +01:00
|
|
|
const StrategyChipItem = ({ strategy }) => (
|
|
|
|
<Chip className={styles.chip}>
|
|
|
|
<ChipContact className="mdl-color--blue-grey mdl-color-text--white">
|
|
|
|
<Icon style={{ marginTop: '3px' }} name="link" />
|
|
|
|
</ChipContact>
|
2017-08-28 19:15:47 +02:00
|
|
|
<Link
|
|
|
|
to={`/strategies/view/${strategy.name}`}
|
|
|
|
className="mdl-color-text--blue-grey"
|
|
|
|
>
|
|
|
|
{strategy.name}
|
|
|
|
</Link>
|
2017-01-01 20:44:02 +01:00
|
|
|
</Chip>
|
|
|
|
);
|
|
|
|
|
|
|
|
// TODO what about "missing" strategies here?
|
|
|
|
const StrategiesList = ({ strategies }) => (
|
2017-08-28 19:15:47 +02:00
|
|
|
<div style={{ verticalAlign: 'middle', paddingTop: '14px' }}>
|
|
|
|
With {strategies.length > 1 ? 'strategies' : 'strategy'}{' '}
|
|
|
|
{strategies.map((strategy, i) => (
|
|
|
|
<StrategyChipItem key={i} strategy={strategy} />
|
|
|
|
))}
|
|
|
|
</div>
|
2017-01-01 20:44:02 +01:00
|
|
|
);
|
2016-12-19 20:53:49 +01:00
|
|
|
|
|
|
|
export default class MetricComponent extends React.Component {
|
2017-07-10 23:38:44 +02:00
|
|
|
static propTypes = {
|
|
|
|
metrics: PropTypes.object.isRequired,
|
|
|
|
featureToggle: PropTypes.object.isRequired,
|
|
|
|
fetchSeenApps: PropTypes.func.isRequired,
|
|
|
|
fetchFeatureMetrics: PropTypes.func.isRequired,
|
2017-08-28 19:15:47 +02:00
|
|
|
};
|
2016-12-19 20:53:49 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
componentWillMount() {
|
2016-12-19 20:53:49 +01:00
|
|
|
this.props.fetchSeenApps();
|
|
|
|
this.props.fetchFeatureMetrics();
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
this.props.fetchFeatureMetrics();
|
|
|
|
}, 5000);
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
componentWillUnmount() {
|
2016-12-19 20:53:49 +01:00
|
|
|
clearInterval(this.timer);
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
render() {
|
2017-01-06 15:21:58 +01:00
|
|
|
const { metrics = {}, featureToggle } = this.props;
|
2016-12-19 20:53:49 +01:00
|
|
|
const {
|
2016-12-19 19:55:44 +01:00
|
|
|
lastHour = { yes: 0, no: 0, isFallback: true },
|
|
|
|
lastMinute = { yes: 0, no: 0, isFallback: true },
|
|
|
|
seenApps = [],
|
|
|
|
} = metrics;
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
const lastHourPercent =
|
|
|
|
1 * calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
|
|
|
|
const lastMinutePercent =
|
|
|
|
1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
|
2016-12-19 19:55:44 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
return (
|
|
|
|
<div style={{ padding: '16px' }}>
|
|
|
|
<Grid style={{ textAlign: 'center' }}>
|
|
|
|
<Cell col={4} tablet={4} phone={12}>
|
|
|
|
<Progress
|
|
|
|
percentage={lastMinutePercent}
|
|
|
|
isFallback={lastMinute.isFallback}
|
|
|
|
colorClassName="mdl-color-text--accent"
|
|
|
|
animatePercentageText
|
|
|
|
/>
|
|
|
|
{lastMinute.isFallback ? (
|
|
|
|
<p className="mdl-color-text--grey-500">
|
|
|
|
No metrics available
|
|
|
|
</p>
|
|
|
|
) : (
|
|
|
|
<p>
|
|
|
|
<strong>Last minute</strong>
|
|
|
|
<br /> Yes {lastMinute.yes}, No: {lastMinute.no}
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</Cell>
|
|
|
|
<Cell col={4} tablet={4} phone={12}>
|
|
|
|
<Progress
|
|
|
|
percentage={lastHourPercent}
|
|
|
|
isFallback={lastHour.isFallback}
|
|
|
|
/>
|
|
|
|
{lastHour.isFallback ? (
|
|
|
|
<p className="mdl-color-text--grey-500">
|
|
|
|
No metrics available
|
|
|
|
</p>
|
|
|
|
) : (
|
|
|
|
<p>
|
|
|
|
<strong>Last hour</strong>
|
|
|
|
<br /> Yes {lastHour.yes}, No: {lastHour.no}
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</Cell>
|
|
|
|
<Cell col={4} tablet={12}>
|
|
|
|
{seenApps.length > 0 ? (
|
|
|
|
<div>
|
|
|
|
<strong>Seen in applications:</strong>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<Icon
|
|
|
|
className={styles.problemIcon}
|
|
|
|
name="report problem"
|
|
|
|
title="Not used in an app in the last hour"
|
|
|
|
/>
|
|
|
|
<div>
|
|
|
|
<small>
|
|
|
|
<strong>
|
|
|
|
Not used in an app in the last hour.
|
|
|
|
</strong>
|
|
|
|
This might be due to your client
|
|
|
|
implementation is not reporting usage.
|
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<AppsLinkList apps={seenApps} />
|
|
|
|
<span>
|
|
|
|
Created{' '}
|
|
|
|
{formatFullDateTime(featureToggle.createdAt)}
|
|
|
|
</span>
|
|
|
|
</Cell>
|
|
|
|
</Grid>
|
|
|
|
<hr />
|
|
|
|
<StrategiesList strategies={featureToggle.strategies} />
|
|
|
|
</div>
|
|
|
|
);
|
2016-12-19 20:53:49 +01:00
|
|
|
}
|
|
|
|
}
|