1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

add metrics to edit-view

This commit is contained in:
sveisvei 2016-12-05 12:57:21 +01:00
parent cd34dd8e89
commit 1d23ccedb5
10 changed files with 128 additions and 72 deletions

View File

@ -1,11 +1,9 @@
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import { Chip, Switch, Icon, Tooltip, IconButton, ChipContact } from 'react-mdl';
import { Chip, Switch, Icon, IconButton } from 'react-mdl';
import percentLib from 'percent';
import Progress from './progress';
import style from './feature.scss';
const Feature = ({

View File

@ -3,7 +3,7 @@ import { hashHistory } from 'react-router';
import { requestUpdateFeatureToggle } from '../../store/feature-actions';
import { createMapper, createActions } from '../input-helpers';
import EditAndView from './view-and-edit';
import FormComponent from './form';
const ID = 'edit-feature-toggle';
function getId (props) {
@ -59,4 +59,4 @@ const actions = createActions({
prepare,
});
export default connect(mapStateToProps, actions)(EditAndView);
export default connect(mapStateToProps, actions)(FormComponent);

View File

@ -1,41 +0,0 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import EditFeatureToggle from './form-edit-container.jsx';
import { fetchFeatureToggles } from '../../store/feature-actions';
class EditFeatureToggleWrapper extends React.Component {
static propTypes () {
return {
featureToggleName: PropTypes.string.isRequired,
features: PropTypes.array.isRequired,
fetchFeatureToggles: PropTypes.array.isRequired,
};
}
componentWillMount () {
if (this.props.features.length === 0) {
this.props.fetchFeatureToggles();
}
}
render () {
const { features, featureToggleName } = this.props;
const featureToggle = features.find(toggle => toggle.name === featureToggleName);
if (featureToggle) {
return <EditFeatureToggle featureToggle={featureToggle} />;
} else if (features.length === 0 ) {
return <span>Loading</span>;
} else {
return <span>Could not find {this.props.featureToggleName}</span>;
}
}
}
export default connect((state) => ({
features: state.features.toJS(),
}), { fetchFeatureToggles })(EditFeatureToggleWrapper);

View File

@ -1,5 +1,5 @@
import React, { PropTypes } from 'react';
import Feature from './feature-component';
import Feature from './feature-list-item-component';
import { Link } from 'react-router';
import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';

View File

@ -49,7 +49,7 @@ const mapStateToProps = (state) => {
));
} else if (settings.sort === 'metrics') {
const target = settings.showLastHour ? featureMetrics.lastHour : featureMetrics.lastMinute;
features = features.sort((a, b) => {
if (!target[a.name]) { return 1; }
if (!target[b.name]) { return -1; }

View File

@ -1,5 +1,5 @@
import React, { PropTypes, Component } from 'react';
import styles from './progress.scss';
import styles from './progress-styles.scss';
class Progress extends Component {
constructor (props) {

View File

@ -1,22 +0,0 @@
import React, { PropTypes } from 'react';
import FormComponent from './form';
const Render = (props) => {
return (
<div>
<h1>{props.featureToggle.name}</h1>
<p>add metrics</p>
<p>add apps</p>
<p>add instances</p>
<hr />
<h5>Edit</h5>
<FormComponent {...props} />
</div>
);
};
export default Render;

View File

@ -0,0 +1,121 @@
import React, { PropTypes } from 'react';
import { Grid, Cell, Icon } from 'react-mdl';
import percentLib from 'percent';
import Progress from './progress';
import { connect } from 'react-redux';
import EditFeatureToggle from './form-edit-container.jsx';
import { fetchFeatureToggles } from '../../store/feature-actions';
import { fetchFeatureMetrics } from '../../store/feature-metrics-actions';
// import { toggleFeature, fetchFeatureToggles, removeFeatureToggle } from '../../store/feature-actions';
class EditFeatureToggleWrapper extends React.Component {
static propTypes () {
return {
featureToggleName: PropTypes.string.isRequired,
features: PropTypes.array.isRequired,
fetchFeatureToggles: PropTypes.array.isRequired,
};
}
componentWillMount () {
if (this.props.features.length === 0) {
this.props.fetchFeatureToggles();
}
this.props.fetchFeatureMetrics();
setInterval(() => {
this.props.fetchFeatureMetrics();
}, 5000);
}
render () {
const {
features,
featureToggleName,
metrics = {
lastHour: { yes: 0, no: 0, isFallback: true },
lastMinute: { yes: 0, no: 0, isFallback: true },
},
} = this.props;
const lastHourPercent = 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 featureToggle = features.find(toggle => toggle.name === featureToggleName);
if (!featureToggle) {
if (features.length === 0 ) {
return <span>Loading</span>;
}
return <span>Could not find {this.props.featureToggleName}</span>;
}
return (
<div>
<h4>{featureToggle.name}</h4>
<Grid>
<Cell col={3} style={{ textAlign: 'center' }}>
{
metrics.lastMinute.isFallback ?
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
<div>
<Progress strokeWidth={15} percentage={lastMinutePercent} width="50" />
</div>
}
<p><strong>Last minute:</strong> Yes {metrics.lastMinute.yes}, No: {metrics.lastMinute.no}</p>
</Cell>
<Cell col={3} style={{ textAlign: 'center' }}>
{
metrics.lastHour.isFallback ?
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
<div>
<Progress strokeWidth={15} percentage={lastHourPercent} width="50" />
</div>
}
<p><strong>Last hour:</strong> Yes {metrics.lastHour.yes}, No: {metrics.lastHour.no}</p>
</Cell>
<Cell col={3}>
<p>add apps</p>
</Cell>
<Cell col={3}>
<p>add instances</p>
</Cell>
</Grid>
<EditFeatureToggle featureToggle={featureToggle} />
</div>
);
}
}
function getMetricsForToggle (state, toggleName) {
if (!toggleName) {
return;
}
if (state.featureMetrics.hasIn(['lastHour', toggleName])) {
return {
lastHour: state.featureMetrics.getIn(['lastHour', toggleName]),
lastMinute: state.featureMetrics.getIn(['lastMinute', toggleName]),
};
}
}
export default connect((state, props) => ({
features: state.features.toJS(),
metrics: getMetricsForToggle(state, props.featureToggleName),
}), {
fetchFeatureMetrics,
fetchFeatureToggles,
})(EditFeatureToggleWrapper);

View File

@ -1,5 +1,5 @@
import React, { Component, PropTypes } from 'react';
import EditFeatureToggleForm from '../../component/feature/form-edit-wrap';
import EditFeatureToggleForm from '../../component/feature/view-edit-container';
export default class Features extends Component {
static propTypes () {