2016-12-19 19:55:44 +01:00
|
|
|
import React, { PropTypes } from 'react';
|
2017-01-23 09:13:38 +01:00
|
|
|
import { Tabs, Tab, ProgressBar, IconButton, Grid, Cell } from 'react-mdl';
|
2016-12-19 21:33:06 +01:00
|
|
|
import { hashHistory, Link } from 'react-router';
|
2016-12-19 19:55:44 +01:00
|
|
|
|
|
|
|
import HistoryComponent from '../history/history-list-toggle-container';
|
2016-12-19 20:53:49 +01:00
|
|
|
import MetricComponent from './metric-container';
|
2016-12-19 19:55:44 +01:00
|
|
|
import EditFeatureToggle from './form-edit-container.jsx';
|
2017-01-06 15:21:58 +01:00
|
|
|
import { SwitchWithLabel } from '../common';
|
2017-01-06 11:41:52 +01:00
|
|
|
import { formatFullDateTime } from '../common/util';
|
2016-12-19 20:53:49 +01:00
|
|
|
|
|
|
|
const TABS = {
|
|
|
|
view: 0,
|
|
|
|
edit: 1,
|
|
|
|
history: 2,
|
|
|
|
};
|
2016-12-19 19:55:44 +01:00
|
|
|
|
|
|
|
export default class ViewFeatureToggleComponent extends React.Component {
|
|
|
|
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
static propTypes () {
|
|
|
|
return {
|
2016-12-19 20:53:49 +01:00
|
|
|
activeTab: PropTypes.string.isRequired,
|
2016-12-19 19:55:44 +01:00
|
|
|
featureToggleName: PropTypes.string.isRequired,
|
|
|
|
features: PropTypes.array.isRequired,
|
2017-01-06 15:21:58 +01:00
|
|
|
toggleFeature: PropTypes.func.isRequired,
|
|
|
|
removeFeatureToggle: PropTypes.func.isRequired,
|
2016-12-19 19:55:44 +01:00
|
|
|
fetchFeatureToggles: PropTypes.array.isRequired,
|
2016-12-19 20:53:49 +01:00
|
|
|
featureToggle: PropTypes.object.isRequired,
|
2016-12-19 19:55:44 +01:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount () {
|
|
|
|
if (this.props.features.length === 0) {
|
|
|
|
this.props.fetchFeatureToggles();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-19 20:53:49 +01:00
|
|
|
getTabContent (activeTab) {
|
|
|
|
const {
|
|
|
|
featureToggle,
|
|
|
|
featureToggleName,
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (TABS[activeTab] === TABS.history) {
|
|
|
|
return <HistoryComponent toggleName={featureToggleName} />;
|
|
|
|
} else if (TABS[activeTab] === TABS.edit) {
|
|
|
|
return <EditFeatureToggle featureToggle={featureToggle} />;
|
|
|
|
} else {
|
|
|
|
return <MetricComponent featureToggle={featureToggle} />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
goToTab (tabName, featureToggleName) {
|
|
|
|
hashHistory.push(`/features/${tabName}/${featureToggleName}`);
|
2016-12-19 19:55:44 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const {
|
2016-12-19 20:53:49 +01:00
|
|
|
featureToggle,
|
2016-12-19 19:55:44 +01:00
|
|
|
features,
|
2016-12-19 20:53:49 +01:00
|
|
|
activeTab,
|
2016-12-19 19:55:44 +01:00
|
|
|
featureToggleName,
|
2017-01-06 15:21:58 +01:00
|
|
|
toggleFeature,
|
|
|
|
removeFeatureToggle,
|
2016-12-19 19:55:44 +01:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (!featureToggle) {
|
|
|
|
if (features.length === 0 ) {
|
|
|
|
return <ProgressBar indeterminate />;
|
|
|
|
}
|
2016-12-19 21:33:06 +01:00
|
|
|
return (
|
2016-12-20 19:31:14 +01:00
|
|
|
<span>
|
|
|
|
Could not find the toggle <Link to={{ pathname: '/features/create', query: { name: featureToggleName } }}>
|
|
|
|
{featureToggleName}</Link>
|
|
|
|
</span>
|
2016-12-19 21:33:06 +01:00
|
|
|
);
|
2016-12-19 19:55:44 +01:00
|
|
|
}
|
|
|
|
|
2016-12-19 20:53:49 +01:00
|
|
|
const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
|
|
|
|
const tabContent = this.getTabContent(activeTab);
|
2016-12-19 19:55:44 +01:00
|
|
|
|
2017-01-06 15:21:58 +01:00
|
|
|
const removeToggle = () => {
|
|
|
|
if (window.confirm('Are you sure you want to remove this toggle?')) { // eslint-disable-line no-alert
|
|
|
|
removeFeatureToggle(featureToggle.name);
|
|
|
|
hashHistory.push('/features');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2016-12-19 19:55:44 +01:00
|
|
|
return (
|
2017-01-23 09:13:38 +01:00
|
|
|
<Grid className="mdl-color--white">
|
|
|
|
<Cell col={12}>
|
|
|
|
<h4 style={{ marginTop: '16px' }}>
|
|
|
|
<SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
|
|
|
|
{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
|
|
|
|
|
|
|
|
<IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
|
|
|
|
<small style={{ float: 'right', lineHeight: '38px' }}>
|
|
|
|
Created {formatFullDateTime(featureToggle.createdAt)}
|
|
|
|
</small>
|
|
|
|
</h4>
|
|
|
|
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
|
|
|
|
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }} tabBarProps={{ style: { width: '100%' } }}>
|
|
|
|
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
|
|
|
|
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
|
|
|
|
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
|
|
|
|
</Tabs>
|
|
|
|
|
|
|
|
{tabContent}
|
|
|
|
</Cell>
|
|
|
|
</Grid>
|
2016-12-19 19:55:44 +01:00
|
|
|
);
|
|
|
|
}
|
2016-12-20 19:31:14 +01:00
|
|
|
}
|