1
0
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:
sveisvei 2016-12-17 20:54:48 +01:00
parent 8d67ac2da0
commit f645e71eeb
6 changed files with 106 additions and 16 deletions

View File

@ -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",

View File

@ -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);
};

View File

@ -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>

View 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;

View File

@ -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

View File

@ -38,7 +38,7 @@ module.exports = {
module: {
loaders: [
{
test: /\.jsx?$/,
test: /\.(jsx|js)$/,
exclude: /node_modules/,
loaders: ['babel'],
include: path.join(__dirname, 'src'),