SONAR-7068 apply feedback

1 files changed, 48 insertions, 1 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js
index 785ca31ae65..b761e989e3b 100644
--- a/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js
+++ b/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js
@@ -11,6 +11,10 @@ import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
 import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics';
 import { DomainLeakTitle } from '../main/components';
 import { CHART_COLORS_RANGE_PERCENT } from '../../../helpers/constants';
+import { formatMeasure, formatMeasureVariation, localizeMetric } from '../../../helpers/measures';
+import { DonutChart } from '../../../components/charts/donut-chart';
+import { DrilldownLink } from '../../../components/shared/drilldown-link';
+import { getMetricName } from '../helpers/metrics';
 
 
 export const DuplicationsMain = React.createClass({
@@ -78,6 +82,7 @@ export const DuplicationsMain = React.createClass({
 
   renderMeasures() {
     let metrics = filterMetricsForDomains(this.props.metrics, ['Duplication'])
+        .filter(metric => metric.key !== 'duplicated_lines_density')
         .map(metric => {
           return <DetailedMeasure key={metric.key} {...this.props} {...this.state} metric={metric.key}
                                   type={metric.type}/>;
@@ -85,12 +90,38 @@ export const DuplicationsMain = React.createClass({
     return <div>{metrics}</div>;
   },
 
+  renderDonut() {
+    const duplicationsMetric = 'duplicated_lines_density';
+    const duplications = this.state.measures[duplicationsMetric];
+    const donutData = [
+      { value: duplications, fill: '#f3ca8e' },
+      { value: 100 - duplications, fill: '#e6e6e6' }
+    ];
+    return <DonutChart width="30" height="30" thickness="3" data={donutData}/>;
+  },
+
+  renderDuplicationsLeak() {
+    if (!this.state.leakPeriodDate) {
+      return null;
+    }
+    const duplicationsMetric = 'duplicated_lines_density';
+    const leak = this.state.leak[duplicationsMetric];
+    return <div className="overview-detailed-measure-leak">
+      <span className="overview-detailed-measure-value">
+        {formatMeasureVariation(leak, 'PERCENT')}
+      </span>
+    </div>;
+  },
+
   render () {
     if (!this.state.ready) {
       return this.renderLoading();
     }
 
-    if (this.state.measures['duplicated_lines_density'] == null) {
+    const duplicationsMetric = 'duplicated_lines_density';
+    const duplications = this.state.measures[duplicationsMetric];
+
+    if (duplications == null) {
       return this.renderEmpty();
     }
 
@@ -106,6 +137,22 @@ export const DuplicationsMain = React.createClass({
             {this.renderLegend()}
           </div>
           <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">
+                  {getMetricName('duplications')}
+                </span>
+                <span className="overview-detailed-measure-value">
+                  <span className="spacer-right">{this.renderDonut()}</span>
+                  <DrilldownLink component={this.props.component.key} metric={duplicationsMetric}>
+                    {formatMeasure(duplications, 'PERCENT')}
+                  </DrilldownLink>
+                </span>
+              </div>
+
+              {this.renderDuplicationsLeak()}
+            </div>
+
             {this.renderMeasures()}
           </div>
         </div>