1 files changed, 119 insertions, 0 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js
new file mode 100644
index 00000000000..6df04be61bb
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js
@@ -0,0 +1,119 @@
+import d3 from 'd3';
+import React from 'react';
+
+import { getMeasuresAndVariations } from '../../../api/measures';
+import { DomainTimeline } from '../components/domain-timeline';
+import { DomainTreemap } from '../components/domain-treemap';
+import { DomainBubbleChart } from '../components/domain-bubble-chart';
+import { getPeriodLabel, getPeriodDate } from './../helpers/periods';
+import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
+import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics';
+import { Legend } from '../components/legend';
+import { CHART_COLORS_RANGE_PERCENT } from '../../../helpers/constants';
+import { CoverageMeasuresList } from '../components/coverage-measures-list';
+
+
+const TEST_DOMAINS = ['Tests', 'Tests (Integration)', 'Tests (Overall)'];
+
+
+export const CoverageMain = React.createClass({
+  mixins: [TooltipsMixin],
+
+  getInitialState() {
+    return {
+      ready: false,
+      leakPeriodLabel: getPeriodLabel(this.props.component.periods, this.props.leakPeriodIndex),
+      leakPeriodDate: getPeriodDate(this.props.component.periods, this.props.leakPeriodIndex)
+    };
+  },
+
+  componentDidMount() {
+    this.requestMeasures().then(r => {
+      let measures = this.getMeasuresValues(r, 'value');
+      let leak = this.getMeasuresValues(r, 'var' + this.props.leakPeriodIndex);
+      this.setState({ ready: true, measures, leak });
+    });
+  },
+
+  getMeasuresValues (measures, fieldKey) {
+    let values = {};
+    Object.keys(measures).forEach(measureKey => {
+      values[measureKey] = measures[measureKey][fieldKey];
+    });
+    return values;
+  },
+
+  getMetricsForDomain() {
+    return this.props.metrics
+        .filter(metric => TEST_DOMAINS.indexOf(metric.domain) !== -1)
+        .map(metric => metric.key);
+  },
+
+  getMetricsForTimeline() {
+    return filterMetricsForDomains(this.props.metrics, TEST_DOMAINS);
+  },
+
+  getAllMetricsForTimeline() {
+    return filterMetrics(this.props.metrics);
+  },
+
+  requestMeasures () {
+    return getMeasuresAndVariations(this.props.component.key, this.getMetricsForDomain());
+  },
+
+  renderLoading () {
+    return <div className="text-center">
+      <i className="spinner spinner-margin"/>
+    </div>;
+  },
+
+  renderLegend () {
+    return <Legend leakPeriodDate={this.state.leakPeriodDate} leakPeriodLabel={this.state.leakPeriodLabel}/>;
+  },
+
+  render () {
+    if (!this.state.ready) {
+      return this.renderLoading();
+    }
+
+    let treemapScale = d3.scale.linear()
+        .domain([0, 100])
+        .range(CHART_COLORS_RANGE_PERCENT);
+
+    return <div className="overview-detailed-page">
+      <div className="overview-cards-list">
+        <div className="overview-card overview-card-fixed-width">
+          <div className="overview-card-header">
+            <div className="overview-title">Coverage Overview</div>
+            {this.renderLegend()}
+          </div>
+          <CoverageMeasuresList {...this.props} {...this.state}/>
+        </div>
+
+        <div className="overview-card">
+          <DomainBubbleChart {...this.props}
+              xMetric="complexity"
+              yMetric="overall_coverage"
+              sizeMetrics={['overall_uncovered_lines']}/>
+        </div>
+      </div>
+
+      <div className="overview-cards-list">
+        <div className="overview-card">
+          <DomainTimeline {...this.props} {...this.state}
+              initialMetric="overall_coverage"
+              metrics={this.getMetricsForTimeline()}
+              allMetrics={this.getAllMetricsForTimeline()}/>
+        </div>
+
+        <div className="overview-card">
+          <DomainTreemap {...this.props}
+              sizeMetric="ncloc"
+              colorMetric="overall_coverage"
+              scale={treemapScale}/>
+        </div>
+      </div>
+    </div>;
+
+  }
+});