2016-11-10 14:26:24 +01:00
|
|
|
import React, { PropTypes } from 'react';
|
2016-12-05 12:57:21 +01:00
|
|
|
import Feature from './feature-list-item-component';
|
2016-11-15 21:52:46 +01:00
|
|
|
import { Link } from 'react-router';
|
2016-12-04 13:51:31 +01:00
|
|
|
import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
|
2016-12-04 11:56:41 +01:00
|
|
|
|
|
|
|
import styles from './feature.scss';
|
2016-11-10 14:26:24 +01:00
|
|
|
|
2016-11-26 10:01:48 +01:00
|
|
|
export default class FeatureListComponent extends React.PureComponent {
|
2016-11-10 14:26:24 +01:00
|
|
|
|
|
|
|
static propTypes () {
|
|
|
|
return {
|
|
|
|
onFeatureClick: PropTypes.func.isRequired,
|
|
|
|
onFeatureRemove: PropTypes.func.isRequired,
|
|
|
|
features: PropTypes.array.isRequired,
|
|
|
|
featureMetrics: PropTypes.object.isRequired,
|
|
|
|
fetchFeatureToggles: PropTypes.func.isRequired,
|
|
|
|
fetchFeatureMetrics: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
router: React.PropTypes.object,
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
this.props.fetchFeatureToggles();
|
|
|
|
this.props.fetchFeatureMetrics();
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
this.props.fetchFeatureMetrics();
|
|
|
|
}, 5000);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount () {
|
|
|
|
clearInterval(this.timer);
|
|
|
|
}
|
|
|
|
|
2016-12-04 11:56:41 +01:00
|
|
|
toggleMetrics () {
|
|
|
|
this.props.updateSetting('showLastHour', !this.props.settings.showLastHour);
|
|
|
|
}
|
|
|
|
|
|
|
|
setFilter (v) {
|
|
|
|
this.props.updateSetting('filter', typeof v === 'string' ? v.trim() : '');
|
|
|
|
}
|
|
|
|
|
|
|
|
setSort (v) {
|
|
|
|
this.props.updateSetting('sort', typeof v === 'string' ? v.trim() : '');
|
|
|
|
}
|
|
|
|
|
2016-11-10 14:26:24 +01:00
|
|
|
render () {
|
2016-12-04 11:56:41 +01:00
|
|
|
const { features, onFeatureClick, onFeatureRemove, featureMetrics, settings } = this.props;
|
2016-11-10 14:26:24 +01:00
|
|
|
|
|
|
|
return (
|
2016-12-04 11:56:41 +01:00
|
|
|
<div>
|
|
|
|
<div className={styles.topList}>
|
|
|
|
|
|
|
|
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
|
|
|
|
{ settings.showLastHour &&
|
|
|
|
<ChipContact className="mdl-color--teal mdl-color-text--white">
|
|
|
|
<Icon name="hourglass_full" style={{ fontSize: '16px' }} />
|
|
|
|
</ChipContact> }
|
|
|
|
{ '1 hour' }
|
|
|
|
</Chip>
|
|
|
|
|
|
|
|
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
|
|
|
|
{ !settings.showLastHour &&
|
|
|
|
<ChipContact className="mdl-color--teal mdl-color-text--white">
|
|
|
|
<Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
|
|
|
|
</ChipContact> }
|
|
|
|
{ '1 minute' }
|
|
|
|
</Chip>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px' }}>
|
|
|
|
<Textfield
|
|
|
|
floatingLabel
|
|
|
|
value={settings.filter}
|
|
|
|
onChange={(e) => { this.setFilter(e.target.value); }}
|
|
|
|
label="Filter toggles"
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style={{ position: 'relative' }} className={styles.topListItem0}>
|
|
|
|
<IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
|
|
|
|
<Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
|
|
|
|
(e) => this.setSort(e.target.getAttribute('data-target'))}>
|
|
|
|
<MenuItem disabled>Filter by:</MenuItem>
|
|
|
|
<MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
|
|
|
|
<MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
|
|
|
|
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
|
|
|
|
<MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
|
|
|
|
<MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
|
|
|
|
<MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
|
|
|
|
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
|
|
|
|
</Menu>
|
|
|
|
</div>
|
|
|
|
<Link to="/features/create" className={styles.topListItem0}>
|
|
|
|
<FABButton ripple component="span" mini>
|
|
|
|
<Icon name="add" />
|
|
|
|
</FABButton>
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ul className="demo-list-item mdl-list">
|
2016-11-10 14:26:24 +01:00
|
|
|
{features.map((feature, i) =>
|
|
|
|
<Feature key={i}
|
2016-12-04 11:56:41 +01:00
|
|
|
settings={settings}
|
2016-11-10 14:26:24 +01:00
|
|
|
metricsLastHour={featureMetrics.lastHour[feature.name]}
|
|
|
|
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
|
|
|
|
feature={feature}
|
|
|
|
onFeatureClick={onFeatureClick}
|
|
|
|
onFeatureRemove={onFeatureRemove}/>
|
|
|
|
)}
|
2016-12-04 11:56:41 +01:00
|
|
|
</ul>
|
|
|
|
<hr />
|
2016-12-04 13:51:31 +01:00
|
|
|
<Link to="/features/create" className={styles.topListItem0}>
|
|
|
|
<FABButton ripple component="span" mini>
|
|
|
|
<Icon name="add" />
|
|
|
|
</FABButton>
|
2016-11-15 21:52:46 +01:00
|
|
|
</Link>
|
2016-12-04 11:56:41 +01:00
|
|
|
</div>
|
2016-11-10 14:26:24 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|