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';
|
2017-02-04 19:30:06 +01:00
|
|
|
import { Icon, FABButton, Textfield, Menu, MenuItem, Card, CardActions, List } from 'react-mdl';
|
2016-12-04 11:56:41 +01:00
|
|
|
|
2017-02-04 19:30:06 +01:00
|
|
|
import { MenuItemWithIcon, DropdownButton, styles as commonStyles } from '../common';
|
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 {
|
2017-01-09 11:08:04 +01:00
|
|
|
toggleFeature: PropTypes.func.isRequired,
|
2016-11-10 14:26:24 +01:00
|
|
|
features: PropTypes.array.isRequired,
|
|
|
|
featureMetrics: PropTypes.object.isRequired,
|
|
|
|
fetchFeatureToggles: PropTypes.func.isRequired,
|
|
|
|
fetchFeatureMetrics: PropTypes.func.isRequired,
|
2017-02-04 19:30:06 +01:00
|
|
|
updateSetting: PropTypes.func.isRequired,
|
|
|
|
settings: React.PropTypes.object,
|
2016-11-10 14:26:24 +01:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
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) {
|
2016-12-28 23:36:01 +01:00
|
|
|
this.props.updateSetting('filter', typeof v === 'string' ? v : '');
|
2016-12-04 11:56:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
setSort (v) {
|
|
|
|
this.props.updateSetting('sort', typeof v === 'string' ? v.trim() : '');
|
|
|
|
}
|
|
|
|
|
2016-11-10 14:26:24 +01:00
|
|
|
render () {
|
2017-01-09 11:08:04 +01:00
|
|
|
const { features, toggleFeature, featureMetrics, settings } = this.props;
|
2016-11-10 14:26:24 +01:00
|
|
|
|
2017-02-04 19:30:06 +01:00
|
|
|
return (<div>
|
|
|
|
<div className={styles.toolbar}>
|
|
|
|
<Textfield
|
|
|
|
floatingLabel
|
|
|
|
value={settings.filter}
|
|
|
|
onChange={(e) => { this.setFilter(e.target.value); }}
|
|
|
|
label="Search"
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
/>
|
|
|
|
<Link to="/features/create" className={styles.toolbarButton}>
|
|
|
|
<FABButton accent title="Create feature toggle">
|
|
|
|
<Icon name="add"/>
|
|
|
|
</FABButton>
|
|
|
|
</Link>
|
|
|
|
</div>
|
2017-02-14 11:05:34 +01:00
|
|
|
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
|
2017-02-04 19:30:06 +01:00
|
|
|
<CardActions>
|
|
|
|
<DropdownButton id="metric" label={`Last ${settings.showLastHour ? 'hour' : 'minute'}`}/>
|
|
|
|
<Menu target="metric" onClick={() => this.toggleMetrics()}
|
|
|
|
style={{ width: '168px' }}>
|
|
|
|
<MenuItemWithIcon icon="hourglass_empty" disabled={!settings.showLastHour} data-target="minute"
|
|
|
|
label="Last minute"/>
|
|
|
|
<MenuItemWithIcon icon="hourglass_full" disabled={settings.showLastHour} data-target="hour"
|
|
|
|
label="Last hour"/>
|
|
|
|
</Menu>
|
|
|
|
<DropdownButton id="sorting" label={`By ${settings.sort}`}/>
|
|
|
|
<Menu target="sorting" onClick={(e) => this.setSort(e.target.getAttribute('data-target'))}
|
|
|
|
style={{ width: '168px' }}>
|
2017-02-14 11:05:34 +01:00
|
|
|
<MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
|
2017-02-04 19:30:06 +01:00
|
|
|
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</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>
|
|
|
|
</CardActions>
|
2017-03-01 21:53:25 +01:00
|
|
|
<hr/>
|
|
|
|
<List>
|
2017-02-04 19:30:06 +01:00
|
|
|
{features.map((feature, i) =>
|
2017-06-29 08:36:10 +02:00
|
|
|
(<Feature key={i}
|
2017-02-04 19:30:06 +01:00
|
|
|
settings={settings}
|
|
|
|
metricsLastHour={featureMetrics.lastHour[feature.name]}
|
|
|
|
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
|
|
|
|
feature={feature}
|
2017-06-29 08:36:10 +02:00
|
|
|
toggleFeature={toggleFeature}/>)
|
2017-02-04 19:30:06 +01:00
|
|
|
)}
|
|
|
|
</List>
|
|
|
|
</Card>
|
2017-06-29 08:36:10 +02:00
|
|
|
</div>
|
2016-11-10 14:26:24 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|