From: Stas Vilchik <vilchiks@gmail.com>
Date: Tue, 1 Dec 2015 15:09:04 +0000 (+0100)
Subject: improve display of coverage overview
X-Git-Tag: 5.3-RC1~115
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=507540702541ac33118af0b0d3f2315caeb851b2;p=sonarqube.git

improve display of coverage overview
---

diff --git a/server/sonar-web/src/main/js/apps/overview/components/coverage-measure.js b/server/sonar-web/src/main/js/apps/overview/components/coverage-measure.js
deleted file mode 100644
index df6206f03de..00000000000
--- a/server/sonar-web/src/main/js/apps/overview/components/coverage-measure.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import { formatMeasure, formatMeasureVariation, localizeMetric } from '../../../helpers/measures';
-import { DrilldownLink } from '../../../components/shared/drilldown-link';
-import { DonutChart } from '../../../components/charts/donut-chart';
-
-
-export const CoverageMeasure = React.createClass({
-  renderLeak () {
-    if (this.props.leak == null) {
-      return null;
-    }
-    return <div className="overview-detailed-measure-leak">
-      <span className="overview-detailed-measure-value">
-        {formatMeasureVariation(this.props.leak, 'PERCENT')}
-      </span>
-    </div>;
-  },
-
-  renderDonut () {
-    let donutData = [
-      { value: this.props.measure, fill: '#85bb43' },
-      { value: 100 - this.props.measure, fill: '#d4333f' }
-    ];
-    return <div className="overview-donut-chart">
-      <DonutChart width="90" height="90" thickness="3" data={donutData}/>
-      <div className="overview-detailed-measure-value">
-        <DrilldownLink component={this.props.component.key} metric={this.props.metric} period={this.props.period}>
-          {formatMeasure(this.props.measure, 'PERCENT')}
-        </DrilldownLink>
-      </div>
-    </div>;
-  },
-
-  render () {
-    if (this.props.measure == null) {
-      return null;
-    }
-
-    let className = classNames('overview-detailed-measure', {
-      'overview-leak': this.props.period
-    });
-
-    return <li className={className}>
-      <div className="overview-detailed-measure-nutshell space-between">
-        <span className="overview-detailed-measure-name">{localizeMetric(this.props.metric)}</span>
-        {this.renderDonut(this.props.measure)}
-      </div>
-      {this.renderLeak()}
-    </li>;
-  }
-});
diff --git a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js
index c9c376957b9..558310dc506 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js
@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import React from 'react';
 
-import { DetailedMeasure } from '../components/detailed-measure';
+import { DetailedMeasure } from './detailed-measure';
+import { CoverageMeasures } from './coverage-measures';
 import { filterMetricsForDomains } from '../helpers/metrics';
-import { CoverageMeasure } from '../components/coverage-measure';
 
 
 const TEST_DOMAINS = ['Tests', 'Tests (Integration)', 'Tests (Overall)'];
@@ -12,64 +12,35 @@ const TEST_METRICS = ['tests', 'test_execution_time', 'test_errors', 'test_failu
 
 
 export const CoverageMeasuresList = React.createClass({
-  renderOtherMeasures() {
-    let knownMetrics = [].concat(TEST_METRICS, [
-      this.props.coverageMetricPrefix + 'coverage',
-      this.props.coverageMetricPrefix + 'line_coverage',
-      this.props.coverageMetricPrefix + 'branch_coverage'
-    ]);
-    let metrics = filterMetricsForDomains(this.props.metrics, TEST_DOMAINS)
-        .filter(metric => knownMetrics.indexOf(metric.key) === -1)
-        .map(metric => metric.key);
-    return this.renderListOfMeasures(metrics);
+  shouldRenderOverallCoverage() {
+    return this.props.measures['overall_coverage'] != null &&
+        this.shouldRenderUTCoverage() &&
+        this.shouldRenderITCoverage();
   },
 
-  renderCoverage () {
-    let metrics = [
-      this.props.coverageMetricPrefix + 'coverage',
-      this.props.coverageMetricPrefix + 'line_coverage',
-      this.props.coverageMetricPrefix + 'branch_coverage'
-    ];
-
-    if (_.every(metrics, metric => this.props.measures[metric] == null)) {
-      // if no measures exist
-      return null;
-    }
+  shouldRenderUTCoverage() {
+    return this.props.measures['coverage'] != null;
+  },
 
-    let measures = metrics.map(metric => {
-      return <CoverageMeasure key={metric}
-                              metric={metric}
-                              measure={this.props.measures[metric]}
-                              leak={this.props.leak[metric]}
-                              component={this.props.component}/>;
-    });
-    return <div className="overview-detailed-measures-list overview-detailed-measures-list-inline">
-      {measures}
-    </div>;
+  shouldRenderITCoverage() {
+    return this.props.measures['it_coverage'] != null;
   },
 
-  renderNewCoverage () {
-    let metrics = [
-      'new_' + this.props.coverageMetricPrefix + 'coverage',
-      'new_' + this.props.coverageMetricPrefix + 'line_coverage',
-      'new_' + this.props.coverageMetricPrefix + 'branch_coverage'
-    ];
+  renderOtherMeasures() {
+    let knownMetrics = [].concat(TEST_METRICS, [
+      'coverage', 'line_coverage', 'branch_coverage',
+      'uncovered_lines', 'uncovered_conditions',
 
-    if (_.every(metrics, metric => this.props.leak[metric] == null)) {
-      // if no measures exist
-      return null;
-    }
+      'it_coverage', 'it_line_coverage', 'it_branch_coverage',
+      'it_uncovered_lines', 'it_uncovered_conditions',
 
-    let measures = metrics.map(metric => {
-      return <CoverageMeasure key={metric}
-                              metric={metric}
-                              measure={this.props.leak[metric]}
-                              component={this.props.component}
-                              period={this.props.leakPeriodIndex}/>;
-    });
-    return <div className="overview-detailed-measures-list overview-detailed-measures-list-inline">
-      {measures}
-    </div>;
+      'overall_coverage', 'overall_line_coverage', 'overall_branch_coverage',
+      'overall_uncovered_lines', 'overall_uncovered_conditions'
+    ]);
+    let metrics = filterMetricsForDomains(this.props.metrics, TEST_DOMAINS)
+        .filter(metric => knownMetrics.indexOf(metric.key) === -1)
+        .map(metric => metric.key);
+    return this.renderListOfMeasures(metrics);
   },
 
   renderListOfMeasures(list) {
@@ -89,11 +60,10 @@ export const CoverageMeasuresList = React.createClass({
 
   render () {
     return <div>
-      {this.renderCoverage()}
-      {this.renderNewCoverage()}
-
+      {this.shouldRenderOverallCoverage() && <CoverageMeasures {...this.props} prefix="overall_"/>}
+      {this.shouldRenderUTCoverage() && <CoverageMeasures {...this.props} prefix=""/>}
+      {this.shouldRenderITCoverage() && <CoverageMeasures {...this.props} prefix="it_"/>}
       {this.renderListOfMeasures(TEST_METRICS)}
-
       {this.renderOtherMeasures()}
     </div>;
   }
diff --git a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js
new file mode 100644
index 00000000000..63a0b5d5c78
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js
@@ -0,0 +1,138 @@
+import React from 'react';
+
+import { DetailedMeasure } from './detailed-measure';
+import { DonutChart } from '../../../components/charts/donut-chart';
+import { DrilldownLink } from '../../../components/shared/drilldown-link';
+import { formatMeasure, formatMeasureVariation, localizeMetric } from '../../../helpers/measures';
+
+
+export const CoverageMeasures = React.createClass({
+  propTypes: {
+    measures: React.PropTypes.object.isRequired,
+    leak: React.PropTypes.object.isRequired,
+    prefix: React.PropTypes.string.isRequired
+  },
+
+  getMetricName(metric) {
+    const { prefix } = this.props;
+    return prefix + metric;
+  },
+
+  getNewCoverageMetricName () {
+    const { prefix } = this.props;
+    return 'new_' + prefix + 'coverage';
+  },
+
+  getCoverageMeasure() {
+    const coverageMetricName = this.getMetricName('coverage');
+    return this.props.measures[coverageMetricName];
+  },
+
+  getCoverageLeak() {
+    const coverageMetricName = this.getMetricName('coverage');
+    return this.props.leak[coverageMetricName];
+  },
+
+  getNewCoverageMeasure() {
+    const newCoverageMetricName = this.getNewCoverageMetricName();
+    return this.props.leak[newCoverageMetricName];
+  },
+
+  renderCoverageLeak () {
+    if (!this.props.leakPeriodDate) {
+      return null;
+    }
+    const coverageLeak = this.getCoverageLeak();
+    return <div className="overview-detailed-measure-leak">
+      <span className="overview-detailed-measure-value">
+        {formatMeasureVariation(coverageLeak, 'PERCENT')}
+      </span>
+    </div>;
+  },
+
+  renderCoverageOnNewCode() {
+    const newCoverageMetricName = this.getNewCoverageMetricName();
+    const newCoverage = this.getNewCoverageMeasure();
+
+    if (!this.props.leakPeriodDate) {
+      return null;
+    }
+
+    const donutData = [
+      { value: newCoverage, fill: '#85bb43' },
+      { value: 100 - newCoverage, fill: '#d4333f' }
+    ];
+    return <div className="overview-detailed-measure" style={{ lineHeight: '30px' }}>
+      <div className="overview-detailed-measure-nutshell overview-leak">
+        <span className="overview-detailed-measure-name">
+          {window.t('metric', newCoverageMetricName, 'name')}
+        </span>
+      </div>
+
+      <div className="overview-detailed-measure-leak">
+        <span className="overview-detailed-measure-value">
+          <span className="spacer-right">
+            <DonutChart width="30" height="30" thickness="3" data={donutData}/>
+          </span>
+          <DrilldownLink component={this.props.component.key}
+                         metric={newCoverageMetricName}
+                         period={this.props.leakPeriodIndex}>
+            {formatMeasure(newCoverage, 'PERCENT')}
+          </DrilldownLink>
+        </span>
+      </div>
+    </div>;
+  },
+
+  renderDonut() {
+    const coverage = this.getCoverageMeasure();
+    const donutData = [
+      { value: coverage, fill: '#85bb43' },
+      { value: 100 - coverage, fill: '#d4333f' }
+    ];
+    return <DonutChart width="30" height="30" thickness="3" data={donutData}/>;
+  },
+
+  render() {
+    const coverageMetricName = this.getMetricName('coverage');
+    const coverage = this.getCoverageMeasure();
+
+    return (
+        <div className="overview-detailed-measures-list">
+          <div className="overview-detailed-measure" style={{ lineHeight: '30px' }}>
+            <div className="overview-detailed-measure-nutshell">
+              <span className="overview-detailed-measure-name big">
+                {window.t('metric', coverageMetricName, 'name')}
+              </span>
+              <span className="overview-detailed-measure-value">
+                <span className="spacer-right">{this.renderDonut()}</span>
+                <DrilldownLink component={this.props.component.key} metric={coverageMetricName}>
+                  {formatMeasure(coverage, 'PERCENT')}
+                </DrilldownLink>
+              </span>
+            </div>
+
+            {this.renderCoverageLeak()}
+          </div>
+
+          <DetailedMeasure {...this.props} {...this.props}
+              metric={this.getMetricName('line_coverage')}
+              type="PERCENT"/>
+
+          <DetailedMeasure {...this.props} {...this.props}
+              metric={this.getMetricName('uncovered_lines')}
+              type="INT"/>
+
+          <DetailedMeasure {...this.props} {...this.props}
+              metric={this.getMetricName('branch_coverage')}
+              type="PERCENT"/>
+
+          <DetailedMeasure {...this.props} {...this.props}
+              metric={this.getMetricName('uncovered_conditions')}
+              type="INT"/>
+
+          {this.renderCoverageOnNewCode()}
+        </div>
+    );
+  }
+});