Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

adds a nicer fallback icon for metric progress

Browse Source
This commit is contained in:
vsandvold 2017-02-04 23:56:36 +01:00 committed by Vegard Sandvold
parent 5242e2aa0d
commit 2414ecf102
5 changed files with 55 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/component/feature/feature-list-item-component.jsx
View File

@ -1,6 +1,6 @@
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import { Switch, Icon, Chip, ListItem } from 'react-mdl';
import { Switch, Chip, ListItem } from 'react-mdl';
import Progress from './progress';
import { calc, styles as commonStyles } from '../common';
@ -34,17 +34,7 @@ const Feature = ({
return (
<ListItem twoLine>
<span className={styles.listItemMetric}>
<div style={{ width: '40px', textAlign: 'center' }}>
{
isStale ?
<Icon
style={{ width: '25px', marginTop: '4px', fontSize: '25px', color: '#ccc' }}
name="report problem" title="No metrics available" /> :
<div>
<Progress strokeWidth={15} percentage={percent} width="50" />
</div>
}
</div>
<Progress strokeWidth={15} percentage={percent} isFallback={isStale}/>
</span>
<span className={styles.listItemToggle}>
<Switch title={`Toggle ${name}`} key="left-actions" onChange={() => toggleFeature(name)} checked={enabled} />

7
frontend/src/component/feature/feature.scss
View File

@ -11,14 +11,15 @@
}
.listItemMetric {
float: left;
width: 40px;
flex-shrink: 0;
margin-right: 16px;
}
.listItemToggle {
margin-right: 16px;
width: 40px;
width: 36px;
flex-shrink: 0;
margin-right: 16px;
}
.listItemLink {

31
frontend/src/component/feature/metric-component.jsx
View File

@ -57,27 +57,22 @@ export default class MetricComponent extends React.Component {
return (<div style={{ padding: '16px' }}>
<Grid style={{ textAlign: 'center' }}>
<Cell tablet={4} col={3} phone={12}>
{
lastMinute.isFallback ?
<Icon className={styles.problemIcon} name="report problem" title="No metrics available" /> :
<div>
<Progress color="#e91e63" animatePercentageText strokeWidth={10} percentage={lastMinutePercent} width="50" />
</div>
}
<Cell col={4} tablet={4} phone={12}>
<Progress percentage={lastMinutePercent} isFallback={lastMinute.isFallback}
colorClassName="mdl-color-text--accent" animatePercentageText/>
{lastMinute.isFallback ?
<p className="mdl-color-text--grey-500">No metrics available</p> :
<p><strong>Last minute</strong><br /> Yes {lastMinute.yes}, No: {lastMinute.no}</p>
</Cell>
<Cell col={3} tablet={4} phone={12}>
{
lastHour.isFallback ?
<Icon className={styles.problemIcon} name="report problem" title="No metrics available" /> :
<div>
<Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
</div>
}
<p><strong>Last hour</strong><br /> Yes {lastHour.yes}, No: {lastHour.no}</p>
</Cell>
<Cell col={6} tablet={12}>
<Cell col={4} tablet={4} phone={12}>
<Progress percentage={lastHourPercent} isFallback={lastHour.isFallback}/>
{lastHour.isFallback ?
<p className="mdl-color-text--grey-500">No metrics available</p> :
<p><strong>Last hour</strong><br /> Yes {lastHour.yes}, No: {lastHour.no}</p>
}
</Cell>
<Cell col={4} tablet={12}>
{seenApps.length > 0 ?
(<div><strong>Seen in applications:</strong></div>) :
<div>

10
frontend/src/component/feature/progress-styles.scss
View File

@ -1,17 +1,17 @@
.path {
stroke: #3f51b5;
stroke: currentColor;
stroke-linecap: round;
transition: stroke-dashoffset 5s ease 0s;
}
.trail {
stroke: #d6d6d6;
stroke: currentColor;
}
.text {
fill: rgba(0, 0, 0, 0.7);
font-size: 25px;
line-height: 25px;
fill: currentColor;
font-size: 24px;
line-height: 24px;
dominant-baseline: middle;
text-anchor: middle;
}

23
frontend/src/component/feature/progress.jsx
View File

@ -82,7 +82,7 @@ class Progress extends Component {
}
render () {
const { strokeWidth, color } = this.props;
const { strokeWidth, colorClassName, isFallback } = this.props;
const radius = (50 - strokeWidth / 2);
const pathDescription = `
M 50,50 m 0,-${radius}
@ -92,21 +92,25 @@ class Progress extends Component {
const diameter = Math.PI * 2 * radius;
const progressStyle = {
stroke: color,
strokeDasharray: `${diameter}px ${diameter}px`,
strokeDashoffset: `${((100 - this.state.percentage) / 100 * diameter)}px`,
};
return (<svg viewBox="0 0 100 100">
return (isFallback ?
<svg viewBox="0 0 24 24" className="mdl-color-text--grey-300">{
// eslint-disable-next-line max-len
}<path fill="currentColor" d="M17.3,18C19,16.5 20,14.4 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12C4,14.4 5,16.5 6.7,18C8.2,16.7 10,16 12,16C14,16 15.9,16.7 17.3,18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,9A1,1 0 0,1 8,10A1,1 0 0,1 7,11A1,1 0 0,1 6,10A1,1 0 0,1 7,9M10,6A1,1 0 0,1 11,7A1,1 0 0,1 10,8A1,1 0 0,1 9,7A1,1 0 0,1 10,6M17,9A1,1 0 0,1 18,10A1,1 0 0,1 17,11A1,1 0 0,1 16,10A1,1 0 0,1 17,9M14.4,6.1C14.9,6.3 15.1,6.9 15,7.4L13.6,10.8C13.8,11.1 14,11.5 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12C10,11 10.7,10.1 11.7,10L13.1,6.7C13.3,6.1 13.9,5.9 14.4,6.1Z" />
</svg> :
<svg viewBox="0 0 100 100">
<path
className={styles.trail}
className={[styles.trail, 'mdl-color-text--grey-300'].join(' ')}
d={pathDescription}
strokeWidth={strokeWidth}
fillOpacity={0}
/>
<path
className={styles.path}
className={[styles.path, colorClassName].join(' ')}
d={pathDescription}
strokeWidth={strokeWidth}
fillOpacity={0}
@ -118,7 +122,8 @@ class Progress extends Component {
x={50}
y={50}
>{this.state.percentageText}%</text>
</svg>);
</svg>
);
}
}
@ -128,12 +133,16 @@ Progress.propTypes = {
initialAnimation: PropTypes.bool,
animatePercentageText: PropTypes.bool,
textForPercentage: PropTypes.func,
colorClassName: PropTypes.string,
isFallback: PropTypes.bool,
};
Progress.defaultProps = {
strokeWidth: 8,
strokeWidth: 10,
animatePercentageText: false,
initialAnimation: false,
colorClassName: 'mdl-color-text--primary',
isFallback: false,
};
export default Progress;