display number of new lines to cover on overview page

3 files changed, 48 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
index fdd667d396d..19603ac1fcc 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
@@ -65,6 +65,9 @@ const METRICS = [
   'new_coverage',
   'it_coverage',
   'new_it_coverage',
+  'new_lines_to_cover',
+  'new_it_lines_to_cover',
+  'new_overall_lines_to_cover',
   'tests',
 
   // duplications
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 d86fb2b88ff..d6aee6495a1 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
@@ -57,6 +57,12 @@ class Coverage extends React.Component {
         .find(measure => measure.metric.key === `new_${prefix}coverage`);
   }
 
+  getNewLinesToCover (prefix) {
+    const { measures } = this.props;
+    return measures
+        .find(measure => measure.metric.key === `new_${prefix}lines_to_cover`);
+  }
+
   renderHeader () {
     return this.props.renderHeader(
         'Coverage',
@@ -109,29 +115,50 @@ class Coverage extends React.Component {
   renderNewCoverage (coverageMetricPrefix) {
     const { component, leakPeriod } = this.props;
     const newCoverageMeasure = this.getNewCoverageMeasure(coverageMetricPrefix);
+    const newLinesToCover = this.getNewLinesToCover(coverageMetricPrefix);
 
     const value = newCoverageMeasure ? (
-        <DrilldownLink
-            component={component.key}
-            metric={newCoverageMeasure.metric.key}
-            period={leakPeriod.index}>
-          <span className="js-overview-main-new-coverage">
-            {formatMeasure(getPeriodValue(newCoverageMeasure, leakPeriod.index), 'PERCENT')}
-          </span>
-        </DrilldownLink>
+        <div>
+          <DrilldownLink
+              component={component.key}
+              metric={newCoverageMeasure.metric.key}
+              period={leakPeriod.index}>
+            <span className="js-overview-main-new-coverage">
+              {formatMeasure(getPeriodValue(newCoverageMeasure, leakPeriod.index), 'PERCENT')}
+            </span>
+          </DrilldownLink>
+        </div>
     ) : (
         <span>—</span>
     );
 
+    const label = newLinesToCover ? (
+        <div className="overview-domain-measure-label">
+          {translate('overview.coverage_on')}
+          <br/>
+          <DrilldownLink
+              className="spacer-right overview-domain-secondary-measure-value"
+              component={component.key}
+              metric={newLinesToCover.metric.key}
+              period={leakPeriod.index}>
+            <span className="js-overview-main-new-coverage">
+              {formatMeasure(getPeriodValue(newLinesToCover, leakPeriod.index), 'SHORT_INT')}
+            </span>
+          </DrilldownLink>
+          {getMetricName('new_ncloc')}
+        </div>
+    ) : (
+        <div className="overview-domain-measure-label">
+          {getMetricName('new_coverage')}
+        </div>
+    );
+
     return (
         <div className="overview-domain-measure">
           <div className="overview-domain-measure-value">
             {value}
           </div>
-
-          <div className="overview-domain-measure-label">
-            {getMetricName('new_coverage')}
-          </div>
+          {label}
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 7e09cd5241c..d31c9a404c8 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -180,6 +180,12 @@
   font-weight: 300;
 }
 
+.overview-domain-secondary-measure-value {
+  line-height: 1;
+  font-size: 20px;
+  font-weight: 300;
+}
+
 .overview-domain-leak .overview-domain-measure-value {
   text-align: center;
 }