2017-08-28 21:30:12 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2016-12-05 12:57:21 +01:00
|
|
|
import Feature from './feature-list-item-component';
|
2018-08-06 22:16:36 +02:00
|
|
|
import { Link } from 'react-router-dom';
|
2017-08-28 21:40:44 +02:00
|
|
|
import { Icon, FABButton, Textfield, Menu, MenuItem, Card, CardActions, List } from 'react-mdl';
|
|
|
|
import { MenuItemWithIcon, DropdownButton, styles as commonStyles } from '../common';
|
2016-12-04 11:56:41 +01:00
|
|
|
import styles from './feature.scss';
|
2018-12-19 14:54:52 +01:00
|
|
|
import { CREATE_FEATURE } from '../../permissions';
|
2016-11-10 14:26:24 +01:00
|
|
|
|
2018-03-14 11:02:32 +01:00
|
|
|
export default class FeatureListComponent extends React.Component {
|
2017-07-10 23:38:44 +02:00
|
|
|
static propTypes = {
|
|
|
|
features: PropTypes.array.isRequired,
|
|
|
|
featureMetrics: PropTypes.object.isRequired,
|
2018-03-14 11:02:32 +01:00
|
|
|
fetchFeatureToggles: PropTypes.func,
|
|
|
|
fetchArchive: PropTypes.func,
|
|
|
|
revive: PropTypes.func,
|
2017-07-10 23:38:44 +02:00
|
|
|
updateSetting: PropTypes.func.isRequired,
|
2018-03-03 21:34:38 +01:00
|
|
|
toggleFeature: PropTypes.func,
|
2017-08-28 21:30:12 +02:00
|
|
|
settings: PropTypes.object,
|
2018-08-06 22:16:36 +02:00
|
|
|
history: PropTypes.object.isRequired,
|
2019-01-16 10:39:58 +01:00
|
|
|
hasPermission: PropTypes.func.isRequired,
|
2017-08-28 19:15:47 +02:00
|
|
|
};
|
2016-11-10 14:26:24 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
componentDidMount() {
|
2018-03-14 11:02:32 +01:00
|
|
|
if (this.props.fetchFeatureToggles) {
|
|
|
|
this.props.fetchFeatureToggles();
|
|
|
|
} else {
|
|
|
|
this.props.fetchArchive();
|
|
|
|
}
|
2016-11-10 14:26:24 +01:00
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
toggleMetrics() {
|
2017-08-28 21:40:44 +02:00
|
|
|
this.props.updateSetting('showLastHour', !this.props.settings.showLastHour);
|
2016-12-04 11:56:41 +01:00
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
setSort(v) {
|
2016-12-04 11:56:41 +01:00
|
|
|
this.props.updateSetting('sort', typeof v === 'string' ? v.trim() : '');
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
render() {
|
2019-01-16 10:39:58 +01:00
|
|
|
const { features, toggleFeature, featureMetrics, settings, revive, hasPermission } = this.props;
|
2018-03-14 11:02:32 +01:00
|
|
|
features.forEach(e => {
|
|
|
|
e.reviveName = e.name;
|
|
|
|
});
|
2017-08-28 19:15:47 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className={styles.toolbar}>
|
|
|
|
<Textfield
|
|
|
|
floatingLabel
|
|
|
|
value={settings.filter}
|
|
|
|
onChange={e => {
|
|
|
|
this.setFilter(e.target.value);
|
|
|
|
}}
|
|
|
|
label="Search"
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
/>
|
2019-01-16 10:39:58 +01:00
|
|
|
{hasPermission(CREATE_FEATURE) ? (
|
|
|
|
<Link to="/features/create" className={styles.toolbarButton}>
|
|
|
|
<FABButton accent title="Create feature toggle">
|
|
|
|
<Icon name="add" />
|
|
|
|
</FABButton>
|
|
|
|
</Link>
|
|
|
|
) : (
|
|
|
|
''
|
|
|
|
)}
|
2017-08-28 19:15:47 +02:00
|
|
|
</div>
|
2017-08-28 21:40:44 +02:00
|
|
|
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
|
2017-08-28 19:15:47 +02:00
|
|
|
<CardActions>
|
2017-08-28 21:40:44 +02:00
|
|
|
<DropdownButton id="metric" label={`Last ${settings.showLastHour ? 'hour' : 'minute'}`} />
|
|
|
|
<Menu target="metric" onClick={() => this.toggleMetrics()} style={{ width: '168px' }}>
|
2017-08-28 19:15:47 +02:00
|
|
|
<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>
|
2017-08-28 21:40:44 +02:00
|
|
|
<DropdownButton id="sorting" label={`By ${settings.sort}`} />
|
2017-08-28 19:15:47 +02:00
|
|
|
<Menu
|
|
|
|
target="sorting"
|
2017-08-28 21:40:44 +02:00
|
|
|
onClick={e => this.setSort(e.target.getAttribute('data-target'))}
|
2017-08-28 19:15:47 +02:00
|
|
|
style={{ width: '168px' }}
|
|
|
|
>
|
2017-08-28 21:40:44 +02:00
|
|
|
<MenuItem disabled={settings.sort === 'name'} data-target="name">
|
2017-08-28 19:15:47 +02:00
|
|
|
Name
|
|
|
|
</MenuItem>
|
2017-08-28 21:40:44 +02:00
|
|
|
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">
|
2017-08-28 19:15:47 +02:00
|
|
|
Enabled
|
|
|
|
</MenuItem>
|
2017-08-28 21:40:44 +02:00
|
|
|
<MenuItem disabled={settings.sort === 'created'} data-target="created">
|
2017-08-28 19:15:47 +02:00
|
|
|
Created
|
|
|
|
</MenuItem>
|
2017-08-28 21:40:44 +02:00
|
|
|
<MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">
|
2017-08-28 19:15:47 +02:00
|
|
|
Strategies
|
|
|
|
</MenuItem>
|
2017-08-28 21:40:44 +02:00
|
|
|
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">
|
2017-08-28 19:15:47 +02:00
|
|
|
Metrics
|
|
|
|
</MenuItem>
|
|
|
|
</Menu>
|
|
|
|
</CardActions>
|
|
|
|
<hr />
|
|
|
|
<List>
|
2019-05-04 06:19:21 +02:00
|
|
|
{features.length > 0 ? (
|
|
|
|
features.map((feature, i) => (
|
|
|
|
<Feature
|
|
|
|
key={i}
|
|
|
|
settings={settings}
|
|
|
|
metricsLastHour={featureMetrics.lastHour[feature.name]}
|
|
|
|
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
|
|
|
|
feature={feature}
|
|
|
|
toggleFeature={toggleFeature}
|
|
|
|
revive={revive}
|
|
|
|
hasPermission={hasPermission}
|
|
|
|
/>
|
|
|
|
))
|
|
|
|
) : (
|
2019-05-04 06:26:02 +02:00
|
|
|
<p style={{ textAlign: 'center', marginTop: '50px', color: 'gray' }}>
|
|
|
|
Empty list of feature toggles
|
|
|
|
</p>
|
2019-05-04 06:19:21 +02:00
|
|
|
)}
|
2017-08-28 19:15:47 +02:00
|
|
|
</List>
|
|
|
|
</Card>
|
2017-02-04 19:30:06 +01:00
|
|
|
</div>
|
2016-11-10 14:26:24 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|