adds a nicer fallback icon for metric progress

frontend/src/component/feature/feature-list-item-component.jsx

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

frontend/src/component/feature/feature.scss

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

frontend/src/component/feature/metric-component.jsx

@@ -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>
                     }
-                    <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>
+                <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>
                     }
-                    <p><strong>Last hour</strong><br /> Yes {lastHour.yes}, No: {lastHour.no}</p>
                 </Cell>
-                <Cell col={6}  tablet={12}>
+                <Cell col={4} tablet={12}>
                     {seenApps.length > 0 ?
                         (<div><strong>Seen in applications:</strong></div>) :
                         <div>

frontend/src/component/feature/progress-styles.scss

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

frontend/src/component/feature/progress.jsx

@@ -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,33 +92,38 @@ 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">
-            <path
-                className={styles.trail}
-                d={pathDescription}
-                strokeWidth={strokeWidth}
-                fillOpacity={0}
-                />
+        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, 'mdl-color-text--grey-300'].join(' ')}
+                    d={pathDescription}
+                    strokeWidth={strokeWidth}
+                    fillOpacity={0}
+                    />
 
-            <path
-                className={styles.path}
-                d={pathDescription}
-                strokeWidth={strokeWidth}
-                fillOpacity={0}
-                style={progressStyle}
-                />
+                <path
+                    className={[styles.path, colorClassName].join(' ')}
+                    d={pathDescription}
+                    strokeWidth={strokeWidth}
+                    fillOpacity={0}
+                    style={progressStyle}
+                    />
 
-            <text
-                className={styles.text}
-                x={50}
-                y={50}
-                >{this.state.percentageText}%</text>
-        </svg>);
+                <text
+                    className={styles.text}
+                    x={50}
+                    y={50}
+                    >{this.state.percentageText}%</text>
+            </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;