SONAR-7492 display rating tooltips on measures page

4 files changed, 59 insertions, 32 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js b/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js
index a83267a0242..d8e8253130a 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js
@@ -18,17 +18,30 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-
 import Rating from '../../../components/ui/Rating';
 import Level from '../../../components/ui/Level';
 import { formatMeasure } from '../../../helpers/measures';
-import { formatLeak, isDiffMetric } from '../utils';
+import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import { formatLeak, isDiffMetric, getRatingTooltip } from '../utils';
 
 const Measure = ({ measure, metric }) => {
   const finalMetric = metric || measure.metric;
 
   if (finalMetric.type === 'RATING') {
-    return <Rating value={measure.value}/>;
+    const tooltip = getRatingTooltip(finalMetric.key, measure.value);
+    const rating = <Rating value={measure.value}/>;
+    if (tooltip) {
+      return (
+          <TooltipsContainer>
+            <span>
+              <span title={tooltip} data-toggle="tooltip">
+                {rating}
+              </span>
+            </span>
+          </TooltipsContainer>
+      );
+    }
+    return rating;
   }
 
   if (finalMetric.type === 'LEVEL') {
diff --git a/server/sonar-web/src/main/js/apps/component-measures/utils.js b/server/sonar-web/src/main/js/apps/component-measures/utils.js
index c7bd18ca7e3..076053498ab 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/utils.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/utils.js
@@ -18,7 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import bubbles from './config/bubbles';
-import { formatMeasure, formatMeasureVariation } from '../../helpers/measures';
+import {
+    formatMeasure,
+    formatMeasureVariation,
+    getRatingTooltip as nextGetRatingTooltip
+} from '../../helpers/measures';
 
 export function isDiffMetric (metric) {
   return metric.key.indexOf('new_') === 0;
@@ -113,3 +117,11 @@ export function hasTreemap (metric) {
 export function filterOutEmptyMeasures (components) {
   return components.filter(component => component.value !== null || component.leak !== null);
 }
+
+export function getRatingTooltip (metricKey, value) {
+  const KNOWN_RATINGS = ['sqale_rating', 'reliability_rating', 'security_rating'];
+  if (KNOWN_RATINGS.includes(metricKey)) {
+    return nextGetRatingTooltip(metricKey, value);
+  }
+  return null;
+}
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 91f3b8a37b4..26e57e1afa7 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
@@ -34,7 +34,7 @@ import {
 import { translateWithParameters, translate } from '../../../helpers/l10n';
 import { getPeriodDate } from '../../../helpers/periods';
 import { getComponentIssuesUrl } from '../../../helpers/urls';
-import { getMaintainabilityRatingGrid } from '../../../helpers/measures';
+import { getRatingTooltip } from '../../../helpers/measures';
 
 export default function enhance (ComposedComponent) {
   return class extends React.Component {
@@ -132,27 +132,6 @@ export default function enhance (ComposedComponent) {
       );
     }
 
-    getMaintainabilityRatingTooltip (rating) {
-      const maintainabilityGrid = getMaintainabilityRatingGrid();
-      const maintainabilityRatingThreshold =
-          maintainabilityGrid[Math.floor(rating) - 2];
-
-      console.log(maintainabilityGrid[0]);
-
-      if (rating < 2) {
-        return translateWithParameters(
-            'metric.sqale_rating.tooltip.A',
-            `${maintainabilityGrid[0]}%`);
-      }
-
-      const ratingLetter = formatMeasure(rating, 'RATING');
-
-      return translateWithParameters(
-          'metric.sqale_rating.tooltip',
-          ratingLetter,
-          `${maintainabilityRatingThreshold}%`);
-    }
-
     renderRating (metricKey) {
       const { component, measures } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
@@ -161,11 +140,7 @@ export default function enhance (ComposedComponent) {
         return null;
       }
 
-      const ratingLetter = formatMeasure(measure.value, 'RATING');
-
-      const title = metricKey === 'sqale_rating' ?
-          this.getMaintainabilityRatingTooltip(measure.value) :
-          translate('metric', metricKey, 'tooltip', ratingLetter);
+      const title = getRatingTooltip(metricKey, measure.value);
 
       return (
           <div className="overview-domain-measure-sup"
diff --git a/server/sonar-web/src/main/js/helpers/measures.js b/server/sonar-web/src/main/js/helpers/measures.js
index a3e181e04cb..064c7733cf8 100644
--- a/server/sonar-web/src/main/js/helpers/measures.js
+++ b/server/sonar-web/src/main/js/helpers/measures.js
@@ -370,7 +370,7 @@ function shortDurationVariationFormatter (value) {
 
 
 let maintainabilityRatingGrid;
-export function getMaintainabilityRatingGrid () {
+function getMaintainabilityRatingGrid () {
   if (maintainabilityRatingGrid) {
     return maintainabilityRatingGrid;
   }
@@ -388,3 +388,30 @@ export function getMaintainabilityRatingGrid () {
 
   return maintainabilityRatingGrid;
 }
+
+function getMaintainabilityRatingTooltip (rating) {
+  const maintainabilityGrid = getMaintainabilityRatingGrid();
+  const maintainabilityRatingThreshold =
+      maintainabilityGrid[Math.floor(rating) - 2];
+
+  if (rating < 2) {
+    return translateWithParameters(
+        'metric.sqale_rating.tooltip.A',
+        `${maintainabilityGrid[0]}%`);
+  }
+
+  const ratingLetter = formatMeasure(rating, 'RATING');
+
+  return translateWithParameters(
+      'metric.sqale_rating.tooltip',
+      ratingLetter,
+      `${maintainabilityRatingThreshold}%`);
+}
+
+export function getRatingTooltip (metricKey, value) {
+  const ratingLetter = formatMeasure(value, 'RATING');
+
+  return metricKey === 'sqale_rating' ?
+      getMaintainabilityRatingTooltip(value) :
+      translate('metric', metricKey, 'tooltip', ratingLetter);
+}