mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
get build green, inline calc method that wasn't ready for browser
This commit is contained in:
parent
8d67ac2da0
commit
f645e71eeb
@ -34,7 +34,6 @@
|
||||
"immutability-helper": "^2.0.0",
|
||||
"immutable": "^3.8.1",
|
||||
"normalize.css": "^5.0.0",
|
||||
"percent": "^2.0.0",
|
||||
"react": "^15.3.1",
|
||||
"react-addons-css-transition-group": "^15.3.1",
|
||||
"react-dom": "^15.3.1",
|
||||
|
@ -96,3 +96,24 @@ export const ExternalIconLink = ({ url, children }) => (
|
||||
{children}
|
||||
</IconLink>
|
||||
);
|
||||
|
||||
const badNumbers = [NaN, Infinity, -Infinity];
|
||||
export function calc (value, total, decimal) {
|
||||
if (typeof value !== 'number' ||
|
||||
typeof total !== 'number' ||
|
||||
typeof decimal !== 'number') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (total === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
badNumbers.forEach((number) => {
|
||||
if ([value, total, decimal].indexOf(number) > -1) {
|
||||
return number;
|
||||
}
|
||||
});
|
||||
|
||||
return (value / total * 100).toFixed(decimal);
|
||||
};
|
||||
|
@ -1,9 +1,8 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Chip, Switch, Icon, IconButton } from 'react-mdl';
|
||||
import percentLib from 'percent';
|
||||
import Progress from './progress';
|
||||
import { shorten } from '../common';
|
||||
import { shorten, calc } from '../common';
|
||||
|
||||
import style from './feature.scss';
|
||||
|
||||
@ -21,8 +20,8 @@ const Feature = ({
|
||||
const isStale = showLastHour ? metricsLastHour.isFallback : metricsLastMinute.isFallback;
|
||||
|
||||
const percent = 1 * (showLastHour ?
|
||||
percentLib.calc(metricsLastHour.yes, metricsLastHour.yes + metricsLastHour.no, 0) :
|
||||
percentLib.calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0)
|
||||
calc(metricsLastHour.yes, metricsLastHour.yes + metricsLastHour.no, 0) :
|
||||
calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0)
|
||||
);
|
||||
return (
|
||||
<li key={name} className="mdl-list__item">
|
||||
@ -30,12 +29,12 @@ const Feature = ({
|
||||
<div style={{ width: '40px', textAlign: 'center' }}>
|
||||
{
|
||||
isStale ?
|
||||
<Icon
|
||||
style={{ width: '25px', marginTop: '4px', fontSize: '25px', color: '#ccc' }}
|
||||
name="report problem" title="No metrics avaiable" /> :
|
||||
<div>
|
||||
<Progress strokeWidth={15} percentage={percent} width="50" />
|
||||
</div>
|
||||
<Icon
|
||||
style={{ width: '25px', marginTop: '4px', fontSize: '25px', color: '#ccc' }}
|
||||
name="report problem" title="No metrics avaiable" /> :
|
||||
<div>
|
||||
<Progress strokeWidth={15} percentage={percent} width="50" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
72
frontend/src/component/feature/form/_strategies-add.jsx
Normal file
72
frontend/src/component/feature/form/_strategies-add.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Menu, MenuItem, IconButton } from 'react-mdl';
|
||||
|
||||
|
||||
const StaticMenu = ({ icon = 'add', title, onClick, items }) => (
|
||||
<div className=".mdl-menu__container is-visible">
|
||||
trigger:
|
||||
<IconButton name={icon} title={title} onClick={(e) => {
|
||||
e.preventDefault();
|
||||
}} />
|
||||
<ul className="mdl-menu mdl-menu--bottom-right">
|
||||
{items.map(name => <li className="mdl-menu__item" key={name} onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onClick(name);
|
||||
}}>{name}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
class AddStrategy extends React.Component {
|
||||
|
||||
static propTypes () {
|
||||
return {
|
||||
strategies: PropTypes.array.isRequired,
|
||||
addStrategy: PropTypes.func.isRequired,
|
||||
fetchStrategies: PropTypes.func.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
addStrategy = (strategyName) => {
|
||||
const selectedStrategy = this.props.strategies.find(s => s.name === strategyName);
|
||||
const parameters = {};
|
||||
const keys = Object.keys(selectedStrategy.parametersTemplate || {});
|
||||
keys.forEach(prop => { parameters[prop] = ''; });
|
||||
|
||||
|
||||
this.props.addStrategy({
|
||||
name: selectedStrategy.name,
|
||||
parameters,
|
||||
});
|
||||
};
|
||||
|
||||
stopPropagation (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
render () {
|
||||
const menuStyle = {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
backgroundColor: 'rgb(247, 248, 255)',
|
||||
};
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '25px', height: '25px', display: 'inline-block' }} >
|
||||
|
||||
<StaticMenu
|
||||
title="Add Strategy"
|
||||
icon="add"
|
||||
// trigger={<IconButton name="add" id="strategies-add" raised accent title="Add Strategy" onClick={this.stopPropagation}/>}
|
||||
onClick={(name) => this.addStrategy(name)}
|
||||
items={this.props.strategies.map(s => s.name)}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default AddStrategy;
|
@ -2,7 +2,6 @@ import React, { PropTypes } from 'react';
|
||||
import { Tabs, Tab, Grid, Cell, Icon, ProgressBar, List, ListItem, ListItemContent } from 'react-mdl';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
import percentLib from 'percent';
|
||||
import Progress from './progress';
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
@ -11,7 +10,7 @@ import { fetchFeatureToggles, toggleFeature } from '../../store/feature-actions'
|
||||
import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-actions';
|
||||
import { fetchHistoryForToggle } from '../../store/history-actions';
|
||||
|
||||
import { AppsLinkList, SwitchWithLabel, getIcon } from '../common';
|
||||
import { AppsLinkList, SwitchWithLabel, getIcon, calc } from '../common';
|
||||
|
||||
|
||||
const MetricTab = ({ metrics, featureToggle, toggleFeature }) => {
|
||||
@ -21,8 +20,8 @@ const MetricTab = ({ metrics, featureToggle, toggleFeature }) => {
|
||||
seenApps = [],
|
||||
} = metrics;
|
||||
|
||||
const lastHourPercent = 1 * percentLib.calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
|
||||
const lastMinutePercent = 1 * percentLib.calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
|
||||
const lastHourPercent = 1 * calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
|
||||
const lastMinutePercent = 1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
|
||||
|
||||
return (<div>
|
||||
<SwitchWithLabel
|
||||
|
@ -38,7 +38,7 @@ module.exports = {
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
test: /\.(jsx|js)$/,
|
||||
exclude: /node_modules/,
|
||||
loaders: ['babel'],
|
||||
include: path.join(__dirname, 'src'),
|
||||
|
Loading…
Reference in New Issue
Block a user