1 files changed, 38 insertions, 9 deletions
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js
index e5a3bb2d426..9389e6b765b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js
@@ -21,8 +21,13 @@ import React from 'react';
 
 import Spinner from './Spinner';
 import MeasureDrilldown from './MeasureDrilldown';
-import { getMeasures } from '../../../api/measures';
+import { getLeakValue, formatLeak } from '../utils';
+import { getMeasuresAndMeta } from '../../../api/measures';
 import { formatMeasure } from '../../../helpers/measures';
+import { translateWithParameters } from '../../../helpers/l10n';
+import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+
+import { getPeriodLabel } from '../../overview/helpers/periods';
 
 export default class MeasureDetails extends React.Component {
   state = {};
@@ -47,9 +52,18 @@ export default class MeasureDetails extends React.Component {
     const { metricKey } = this.props.params;
     const { component } = this.context;
 
-    getMeasures(component.key, [metricKey]).then(measures => {
+    getMeasuresAndMeta(component.key, [metricKey], { additionalFields: 'periods' }).then(r => {
+      const measures = r.component.measures;
+
       if (this.mounted && measures.length === 1) {
-        this.setState({ measure: measures[0] });
+        const measure = {
+          ...measures[0],
+          leak: getLeakValue(measures[0])
+        };
+        this.setState({
+          measure,
+          periods: r.periods
+        });
       }
     });
   }
@@ -57,7 +71,7 @@ export default class MeasureDetails extends React.Component {
   render () {
     const { metricKey, tab } = this.props.params;
     const { metrics, children } = this.props;
-    const { measure } = this.state;
+    const { measure, periods } = this.state;
     const metric = metrics.find(metric => metric.key === metricKey);
     const finalTab = tab || 'tree';
 
@@ -65,6 +79,8 @@ export default class MeasureDetails extends React.Component {
       return <Spinner/>;
     }
 
+    const leakLabel = getPeriodLabel(periods, 1);
+
     return (
         <div className="measure-details">
           <h2 className="measure-details-metric">
@@ -72,11 +88,24 @@ export default class MeasureDetails extends React.Component {
           </h2>
 
           {measure && (
-              <div className="measure-details-value">
-                {measure.value != null && (
-                    formatMeasure(measure.value, metric.type)
-                )}
-              </div>
+              <TooltipsContainer>
+                <div className="measure-details-value">
+                  {measure.value != null && (
+                      <span className="measure-details-value-absolute">
+                      {formatMeasure(measure.value, metric.type)}
+                    </span>
+                  )}
+
+                  {measure.leak != null && (
+                      <span
+                          className="measure-details-value-leak"
+                          title={translateWithParameters('overview.leak_period_x', leakLabel)}
+                          data-toggle="tooltip">
+                      {formatLeak(measure.leak, metric)}
+                    </span>
+                  )}
+                </div>
+              </TooltipsContainer>
           )}
 
           {measure && (