2016-11-10 14:26:24 +01:00
|
|
|
import React, { PropTypes } from 'react';
|
|
|
|
import { Link } from 'react-router';
|
2016-12-05 12:57:21 +01:00
|
|
|
import { Chip, Switch, Icon, IconButton } from 'react-mdl';
|
2016-12-04 11:56:41 +01:00
|
|
|
import percentLib from 'percent';
|
|
|
|
import Progress from './progress';
|
2016-12-10 15:39:03 +01:00
|
|
|
import { shorten } from '../common';
|
2016-12-04 11:56:41 +01:00
|
|
|
|
2016-11-10 14:26:24 +01:00
|
|
|
import style from './feature.scss';
|
|
|
|
|
|
|
|
const Feature = ({
|
|
|
|
feature,
|
|
|
|
onFeatureClick,
|
|
|
|
onFeatureRemove,
|
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 ?
|
|
|
|
percentLib.calc(metricsLastHour.yes, metricsLastHour.yes + metricsLastHour.no, 0) :
|
|
|
|
percentLib.calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0)
|
|
|
|
);
|
2016-11-10 14:26:24 +01:00
|
|
|
return (
|
2016-12-04 11:56:41 +01:00
|
|
|
<li key={name} className="mdl-list__item">
|
|
|
|
<span className="mdl-list__item-primary-content">
|
|
|
|
<div style={{ width: '40px', textAlign: 'center' }}>
|
|
|
|
{
|
|
|
|
isStale ?
|
|
|
|
<Icon style={{ width: '25px', marginTop: '4px', fontSize: '25px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
|
|
|
|
<div>
|
|
|
|
<Progress strokeWidth={15} percentage={percent} width="50" />
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
2016-12-10 12:21:27 +01:00
|
|
|
<span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}>
|
2016-12-04 11:56:41 +01:00
|
|
|
<Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
|
|
|
|
</span>
|
|
|
|
<Link to={`/features/edit/${name}`} className={style.link}>
|
2016-12-10 15:39:03 +01:00
|
|
|
{name} <small>{shorten(description, 30) || ''}</small>
|
2016-12-04 11:56:41 +01:00
|
|
|
</Link>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span className={style.iconList} >
|
|
|
|
{strategies && strategies.map((s, i) => <Chip className={style.iconListItemChip} key={i}>
|
|
|
|
<small>{s.name}</small>
|
|
|
|
</Chip>)}
|
|
|
|
<Link to={`/features/edit/${name}`} title={`Edit ${name}`} className={style.iconListItem}>
|
|
|
|
<IconButton name="edit" />
|
|
|
|
</Link>
|
|
|
|
<Link to={`/history/${name}`} title={`History htmlFor ${name}`} className={style.iconListItem}>
|
|
|
|
<IconButton name="history" />
|
|
|
|
</Link>
|
|
|
|
<IconButton name="delete" onClick={() => onFeatureRemove(name)} className={style.iconListItem} />
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</li>
|
2016-11-10 14:26:24 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Feature.propTypes = {
|
|
|
|
feature: PropTypes.object,
|
|
|
|
onFeatureClick: PropTypes.func,
|
|
|
|
onFeatureRemove: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Feature;
|