Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

add switch to edit-view

Browse Source
This commit is contained in:
sveisvei 2016-12-05 13:10:02 +01:00
parent 1d23ccedb5
commit b95564f2cf
1 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/component/feature/view-edit-container.jsx
View File

@ -1,19 +1,14 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { Grid, Cell, Icon } from 'react-mdl'; import { Grid, Cell, Icon, Switch } from 'react-mdl';
import percentLib from 'percent'; import percentLib from 'percent';
import Progress from './progress'; import Progress from './progress';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import EditFeatureToggle from './form-edit-container.jsx'; import EditFeatureToggle from './form-edit-container.jsx';
import { fetchFeatureToggles } from '../../store/feature-actions'; import { fetchFeatureToggles, toggleFeature } from '../../store/feature-actions';
import { fetchFeatureMetrics } from '../../store/feature-metrics-actions'; import { fetchFeatureMetrics } from '../../store/feature-metrics-actions';
// import { toggleFeature, fetchFeatureToggles, removeFeatureToggle } from '../../store/feature-actions';
class EditFeatureToggleWrapper extends React.Component { class EditFeatureToggleWrapper extends React.Component {
static propTypes () { static propTypes () {
@ -36,6 +31,7 @@ class EditFeatureToggleWrapper extends React.Component {
render () { render () {
const { const {
toggleFeature,
features, features,
featureToggleName, featureToggleName,
metrics = { metrics = {
@ -44,9 +40,8 @@ class EditFeatureToggleWrapper extends React.Component {
}, },
} = this.props; } = this.props;
const lastHourPercent = percentLib.calc(metrics.lastHour.yes, metrics.lastHour.yes + metrics.lastHour.no, 0); const lastHourPercent = 1 * percentLib.calc(metrics.lastHour.yes, metrics.lastHour.yes + metrics.lastHour.no, 0);
const lastMinutePercent = percentLib.calc(metrics.lastMinute.yes, metrics.lastMinute.yes + metrics.lastMinute.no, 0); const lastMinutePercent = 1 * percentLib.calc(metrics.lastMinute.yes, metrics.lastMinute.yes + metrics.lastMinute.no, 0);
const featureToggle = features.find(toggle => toggle.name === featureToggleName); const featureToggle = features.find(toggle => toggle.name === featureToggleName);
@ -57,43 +52,47 @@ class EditFeatureToggleWrapper extends React.Component {
return <span>Could not find {this.props.featureToggleName}</span>; return <span>Could not find {this.props.featureToggleName}</span>;
} }
return ( return (
<div> <div>
<h4>{featureToggle.name}</h4> <h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
<Grid> <hr />
<Cell col={3} style={{ textAlign: 'center' }}> <div style={{ maxWidth: '150px' }} >
{ <Switch style={{ cursor: 'pointer' }} onChange={() => toggleFeature(featureToggle)} checked={featureToggle.enabled}>
metrics.lastMinute.isFallback ? Toggle {featureToggle.name}
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> : </Switch>
<div> </div>
<Progress strokeWidth={15} percentage={lastMinutePercent} width="50" /> <hr />
</div> <Grid>
} <Cell col={3} style={{ textAlign: 'center' }}>
<p><strong>Last minute:</strong> Yes {metrics.lastMinute.yes}, No: {metrics.lastMinute.no}</p> {
</Cell> metrics.lastMinute.isFallback ?
<Cell col={3} style={{ textAlign: 'center' }}> <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
{ <div>
metrics.lastHour.isFallback ? <Progress strokeWidth={10} percentage={lastMinutePercent} width="50" />
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> : </div>
<div> }
<Progress strokeWidth={15} percentage={lastHourPercent} width="50" /> <p><strong>Last minute:</strong> Yes {metrics.lastMinute.yes}, No: {metrics.lastMinute.no}</p>
</div> </Cell>
} <Cell col={3} style={{ textAlign: 'center' }}>
<p><strong>Last hour:</strong> Yes {metrics.lastHour.yes}, No: {metrics.lastHour.no}</p> {
</Cell> metrics.lastHour.isFallback ?
<Cell col={3}> <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
<p>add apps</p> <div>
</Cell> <Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
<Cell col={3}> </div>
<p>add instances</p> }
</Cell> <p><strong>Last hour:</strong> Yes {metrics.lastHour.yes}, No: {metrics.lastHour.no}</p>
</Grid> </Cell>
<Cell col={3}>
<p>add apps</p>
</Cell>
<Cell col={3}>
<EditFeatureToggle featureToggle={featureToggle} /> <p>add instances</p>
</Cell>
</Grid>
<hr />
<h4>Edit</h4>
<EditFeatureToggle featureToggle={featureToggle} />
</div> </div>
); );
} }
@ -118,4 +117,5 @@ export default connect((state, props) => ({
}), { }), {
fetchFeatureMetrics, fetchFeatureMetrics,
fetchFeatureToggles, fetchFeatureToggles,
toggleFeature,
})(EditFeatureToggleWrapper); })(EditFeatureToggleWrapper);