2016-11-10 14:26:24 +01:00
|
|
|
import React, { PropTypes } from 'react';
|
|
|
|
import { Link } from 'react-router';
|
2017-01-04 00:29:27 +01:00
|
|
|
import { Chip, Switch, Icon } from 'react-mdl';
|
2016-12-04 11:56:41 +01:00
|
|
|
import Progress from './progress';
|
2017-01-04 00:29:27 +01:00
|
|
|
import { shorten, calc, styles as commonStyles } from '../common';
|
2016-12-04 11:56:41 +01:00
|
|
|
|
2017-01-04 00:29:27 +01:00
|
|
|
import styles from './feature.scss';
|
2016-11-10 14:26:24 +01:00
|
|
|
|
|
|
|
const Feature = ({
|
|
|
|
feature,
|
|
|
|
onFeatureClick,
|
2016-12-04 11:56:41 +01:00
|
|
|
settings,
|
|
|
|
metricsLastHour = { yes: 0, no: 0, isFallback: true },
|
|
|
|
metricsLastMinute = { yes: 0, no: 0, isFallback: true },
|
2016-11-10 14:26:24 +01:00
|
|
|
}) => {
|
2016-12-04 11:56:41 +01:00
|
|
|
const { name, description, enabled, strategies } = feature;
|
|
|
|
|
|
|
|
const { showLastHour = false } = settings;
|
|
|
|
const isStale = showLastHour ? metricsLastHour.isFallback : metricsLastMinute.isFallback;
|
2016-11-10 14:26:24 +01:00
|
|
|
|
2016-12-04 11:56:41 +01:00
|
|
|
const percent = 1 * (showLastHour ?
|
2016-12-17 20:54:48 +01:00
|
|
|
calc(metricsLastHour.yes, metricsLastHour.yes + metricsLastHour.no, 0) :
|
|
|
|
calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0)
|
2016-12-04 11:56:41 +01:00
|
|
|
);
|
2016-12-22 16:06:30 +01:00
|
|
|
|
2016-11-10 14:26:24 +01:00
|
|
|
return (
|
2017-01-02 11:25:10 +01:00
|
|
|
<li key={name} className="mdl-list__item mdl-list__item--two-line">
|
2017-01-04 00:29:27 +01:00
|
|
|
<span className={styles.iconListItemProgress}>
|
|
|
|
<div style={{ width: '40px', textAlign: 'center' }}>
|
2016-12-04 11:56:41 +01:00
|
|
|
{
|
|
|
|
isStale ?
|
2016-12-17 20:54:48 +01:00
|
|
|
<Icon
|
|
|
|
style={{ width: '25px', marginTop: '4px', fontSize: '25px', color: '#ccc' }}
|
2017-01-04 00:29:27 +01:00
|
|
|
name="report problem" title="No metrics available" /> :
|
2016-12-17 20:54:48 +01:00
|
|
|
<div>
|
|
|
|
<Progress strokeWidth={15} percentage={percent} width="50" />
|
|
|
|
</div>
|
2016-12-04 11:56:41 +01:00
|
|
|
}
|
|
|
|
</div>
|
2017-01-01 21:26:23 +01:00
|
|
|
</span>
|
2017-01-04 00:29:27 +01:00
|
|
|
<span className={styles.iconListItemToggle}>
|
|
|
|
<Switch title={`Toggle ${name}`} key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
|
2017-01-01 21:26:23 +01:00
|
|
|
</span>
|
2017-01-04 00:29:27 +01:00
|
|
|
<span className={['mdl-list__item-primary-content', commonStyles.truncate].join(' ')}>
|
|
|
|
<Link to={`/features/view/${name}`} className={[styles.link, commonStyles.truncate].join(' ')}>
|
|
|
|
{shorten(name, 75)}
|
|
|
|
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{shorten(description, 75) || ''}</span>
|
2016-12-04 11:56:41 +01:00
|
|
|
</Link>
|
|
|
|
</span>
|
2017-01-04 00:29:27 +01:00
|
|
|
<span className={commonStyles.hideLt960}>
|
|
|
|
{strategies && strategies.map((s, i) => <Chip className={styles.iconListItemChip} key={i}>
|
2017-01-02 09:42:40 +01:00
|
|
|
{s.name}
|
2017-01-04 00:29:27 +01:00
|
|
|
</Chip>)}
|
2016-12-04 11:56:41 +01:00
|
|
|
</span>
|
|
|
|
</li>
|
2016-11-10 14:26:24 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Feature.propTypes = {
|
|
|
|
feature: PropTypes.object,
|
|
|
|
onFeatureClick: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Feature;
|