SONAR-8393 Rating indicators are not consistent

9 files changed, 74 insertions, 56 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/main/Coverage.js b/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
index 8c11d412ab2..a6f9ec20683 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
@@ -23,6 +23,7 @@ import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure, getPeriodValue } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
+import CoverageRating from '../../../components/ui/CoverageRating';
 
 class Coverage extends React.Component {
   getCoverage () {
@@ -55,14 +56,6 @@ class Coverage extends React.Component {
     return this.props.renderMeasure('tests');
   }
 
-  renderCoverageDonut (coverage) {
-    const data = [
-      { value: coverage, fill: '#85bb43' },
-      { value: 100 - coverage, fill: '#d4333f' }
-    ];
-    return this.props.renderDonut(data);
-  }
-
   renderCoverage () {
     const { component } = this.props;
     const metric = 'coverage';
@@ -70,7 +63,9 @@ class Coverage extends React.Component {
 
     return (
         <div className="overview-domain-measure">
-          {this.renderCoverageDonut(coverage)}
+          <div className="display-inline-block text-middle big-spacer-right">
+            <CoverageRating value={coverage} size="big"/>
+          </div>
 
           <div className="display-inline-block text-middle">
             <div className="overview-domain-measure-value">
diff --git a/server/sonar-web/src/main/js/apps/overview/main/Duplications.js b/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
index 9d65c911ace..2d7a189dbdb 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
@@ -23,6 +23,7 @@ import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure, getPeriodValue } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
+import DuplicationsRating from '../../../components/ui/DuplicationsRating';
 
 class Duplications extends React.Component {
   renderHeader () {
@@ -39,14 +40,6 @@ class Duplications extends React.Component {
     return this.props.renderMeasure('duplicated_blocks');
   }
 
-  renderDuplicationsDonut (duplications) {
-    const data = [
-      { value: duplications, fill: '#f3ca8e' },
-      { value: Math.max(0, 20 - duplications), fill: '#e6e6e6' }
-    ];
-    return this.props.renderDonut(data);
-  }
-
   renderDuplications () {
     const { component, measures } = this.props;
     const measure = measures.find(measure => measure.metric.key === 'duplicated_lines_density');
@@ -54,7 +47,9 @@ class Duplications extends React.Component {
 
     return (
         <div className="overview-domain-measure">
-          {this.renderDuplicationsDonut(duplications)}
+          <div className="display-inline-block text-middle big-spacer-right">
+            <DuplicationsRating value={duplications} size="big"/>
+          </div>
 
           <div className="display-inline-block text-middle">
             <div className="overview-domain-measure-value">
diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
index cedb89d9cf9..47850e7dd2f 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
@@ -22,7 +22,6 @@ import { Link } from 'react-router';
 import moment from 'moment';
 import shallowCompare from 'react-addons-shallow-compare';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
-import { DonutChart } from '../../../components/charts/donut-chart';
 import Rating from './../../../components/ui/Rating';
 import Timeline from '../components/Timeline';
 import {
@@ -121,18 +120,6 @@ export default function enhance (ComposedComponent) {
       );
     }
 
-    renderDonut (data) {
-      return (
-          <div className="display-inline-block text-middle big-spacer-right">
-            <DonutChart
-                data={data}
-                width={40}
-                height={40}
-                thickness={4}/>
-          </div>
-      );
-    }
-
     renderRating (metricKey) {
       const { component, measures } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
@@ -208,7 +195,6 @@ export default function enhance (ComposedComponent) {
               renderHeader={this.renderHeader.bind(this)}
               renderMeasure={this.renderMeasure.bind(this)}
               renderMeasureVariation={this.renderMeasureVariation.bind(this)}
-              renderDonut={this.renderDonut.bind(this)}
               renderRating={this.renderRating.bind(this)}
               renderIssues={this.renderIssues.bind(this)}
               renderTimeline={this.renderTimeline.bind(this)}/>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap
index 8ad0529999f..42c81f82b0d 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap
@@ -218,7 +218,7 @@ exports[`test should not render duplications 1`] = `
           className="spacer-right">
           <CoverageRating
             muted={false}
-            small={false}
+            size="normal"
             value="88.3" />
         </span>
         <Measure
@@ -370,7 +370,7 @@ exports[`test should not render ncloc 1`] = `
           className="spacer-right">
           <CoverageRating
             muted={false}
-            small={false}
+            size="normal"
             value="88.3" />
         </span>
         <Measure
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
index 04cdd0e6f28..c7a6ddaeabc 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
@@ -26,7 +26,7 @@ export default class CoverageFilter extends React.Component {
   renderOption = (option, selected) => {
     return (
         <span>
-          <CoverageRating value={getCoverageRatingAverageValue(option)} small={true} muted={!selected}/>
+          <CoverageRating value={getCoverageRatingAverageValue(option)} size="small" muted={!selected}/>
           <span className="spacer-left">
             {getCoverageRatingLabel(option)}
           </span>
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
index 2c3788bb0b3..20a032b3bc5 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
@@ -26,7 +26,7 @@ export default class DuplicationsFilter extends React.Component {
   renderOption = (option, selected) => {
     return (
         <span>
-          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} small={true} muted={!selected}/>
+          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} size="small" muted={!selected}/>
           <span className="spacer-left">
             {getDuplicationsRatingLabel(option)}
           </span>
diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.js b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
index 3477b3df1ee..bb65d33d7c3 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.js
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
@@ -17,18 +17,31 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import { DonutChart } from '../charts/donut-chart';
 
+const SIZE_TO_WIDTH_MAPPING = {
+  'small': 16,
+  'normal': 24,
+  'big': 40
+};
+
+const SIZE_TO_THICKNESS_MAPPING = {
+  'small': 2,
+  'normal': 3,
+  'big': 4
+};
+
 export default class CoverageRating extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
-    small: React.PropTypes.bool,
-    muted: React.PropTypes.bool
+  props: {
+    value: number | string,
+    size?: 'small' | 'normal' | 'big',
+    muted?: boolean,
   };
 
   static defaultProps = {
-    small: false,
+    size: 'normal',
     muted: false
   };
 
@@ -43,8 +56,11 @@ export default class CoverageRating extends React.Component {
       ];
     }
 
-    const size = this.props.small ? 16 : 24;
-    const thickness = this.props.small ? 2 : 3;
+    // $FlowFixMe
+    const size = SIZE_TO_WIDTH_MAPPING[this.props.size];
+
+    // $FlowFixMe
+    const thickness = SIZE_TO_THICKNESS_MAPPING[this.props.size];
 
     return (
         <DonutChart
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
index feb5dc4a3d9..6e9842abc77 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -17,6 +17,12 @@
   border-width: 2px;
 }
 
+.duplications-rating-big {
+  width: 40px;
+  height: 40px;
+  border-width: 3px;
+}
+
 .duplications-rating-muted {
   border-color: #bdbdbd !important;
 }
@@ -49,6 +55,11 @@
   height: 2px;
 }
 
+.duplications-rating-big.duplications-rating-B:after {
+  width: 12px;
+  height: 12px;
+}
+
 .duplications-rating-C:after {
   width: 8px;
   height: 8px;
@@ -59,6 +70,11 @@
   height: 6px;
 }
 
+.duplications-rating-big.duplications-rating-C:after {
+  width: 16px;
+  height: 16px;
+}
+
 .duplications-rating-D {
   border-color: #d4333f;
 }
@@ -72,21 +88,29 @@
 .duplications-rating-small.duplications-rating-D:after {
   width: 8px;
   height: 8px;
-  background-color: #d4333f;
+}
+
+.duplications-rating-big.duplications-rating-D:after {
+  width: 24px;
+  height: 24px;
 }
 
 .duplications-rating-E {
   border-color: #d4333f;
 }
 
+.duplications-rating-E:after {
+  width: 14px;
+  height: 14px;
+  background-color: #d4333f;
+}
+
 .duplications-rating-small.duplications-rating-E:after {
   width: 10px;
   height: 10px;
-  background-color: #d4333f;
 }
 
-.duplications-rating-E:after {
-  width: 14px;
-  height: 14px;
-  background-color: #d4333f;
+.duplications-rating-big.duplications-rating-E:after {
+  width: 28px;
+  height: 28px;
 }
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
index c2ffe4f5439..038dcf346d7 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
@@ -17,16 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import classNames from 'classnames';
 import inRange from 'lodash/inRange';
 import './DuplicationsRating.css';
 
 export default class DuplicationsRating extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
-    small: React.PropTypes.bool,
-    muted: React.PropTypes.bool
+  props: {
+    value: number,
+    size?: 'small' | 'normal' | 'big',
+    muted?: boolean
   };
 
   static defaultProps = {
@@ -35,10 +36,11 @@ export default class DuplicationsRating extends React.Component {
   };
 
   render () {
-    const { value } = this.props;
+    const { value, size, muted } = this.props;
     const className = classNames('duplications-rating', {
-      'duplications-rating-small': this.props.small,
-      'duplications-rating-muted': this.props.muted,
+      'duplications-rating-small': size === 'small',
+      'duplications-rating-big': size === 'big',
+      'duplications-rating-muted': muted,
       'duplications-rating-A': inRange(value, 3),
       'duplications-rating-B': inRange(value, 3, 5),
       'duplications-rating-C': inRange(value, 5, 10),