import React from 'react';
import PropTypes from 'prop-types';
import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardText, CardActions, Switch } from 'react-mdl';
import { hashHistory, Link } from 'react-router';
import HistoryComponent from '../history/history-list-toggle-container';
import MetricComponent from './metric-container';
import EditFeatureToggle from './form-edit-container.jsx';
import { styles as commonStyles } from '../common';
const TABS = {
strategies: 0,
view: 1,
history: 2,
};
export default class ViewFeatureToggleComponent extends React.Component {
constructor(props) {
super(props);
}
static propTypes = {
activeTab: PropTypes.string.isRequired,
featureToggleName: PropTypes.string.isRequired,
features: PropTypes.array.isRequired,
toggleFeature: PropTypes.func.isRequired,
removeFeatureToggle: PropTypes.func.isRequired,
fetchFeatureToggles: PropTypes.func.isRequired,
featureToggle: PropTypes.object,
};
componentWillMount() {
if (this.props.features.length === 0) {
this.props.fetchFeatureToggles();
}
}
getTabContent(activeTab) {
const { featureToggle, featureToggleName } = this.props;
if (TABS[activeTab] === TABS.history) {
return ;
} else if (TABS[activeTab] === TABS.strategies) {
return ;
} else {
return ;
}
}
goToTab(tabName, featureToggleName) {
hashHistory.push(`/features/${tabName}/${featureToggleName}`);
}
render() {
const {
featureToggle,
features,
activeTab,
featureToggleName,
toggleFeature,
removeFeatureToggle,
} = this.props;
if (!featureToggle) {
if (features.length === 0) {
return ;
}
return (
Could not find the toggle{' '}
{featureToggleName}
);
}
const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
const tabContent = this.getTabContent(activeTab);
const removeToggle = () => {
if (
// eslint-disable-next-line no-alert
window.confirm('Are you sure you want to remove this toggle?')
) {
removeFeatureToggle(featureToggle.name);
hashHistory.push('/features');
}
};
return (
{featureToggle.name}
{featureToggle.description}
toggleFeature(featureToggle.name)}
>
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
this.goToTab('strategies', featureToggleName)}>Strategies
this.goToTab('view', featureToggleName)}>Metrics
this.goToTab('history', featureToggleName)}>History
{tabContent}
);
}
}