2 files changed, 58 insertions, 3 deletions

diff --git a/src/Report.js b/src/Report.js
index ac7dfac..955c97d 100644
--- a/src/Report.js
+++ b/src/Report.js
@@ -18,7 +18,7 @@
  */
 
 import React, { Component } from 'react';
-import { Counters, SessionInfo, PackagesCoverage, PackagesSourceCoverage } from './listComponents.js';
+import { Counters, SessionInfo, GroupsCoverage, PackagesCoverage, GroupsSourceCoverage, PackagesSourceCoverage } from './listComponents.js';
 
 export class Report extends Component {  
   _renderAppInfo() {
@@ -37,6 +37,18 @@ export class Report extends Component {
     );
   }
 
+  _renderCoverageTree() {
+    return this.props.report.group
+      ? (<GroupsCoverage groups={this.props.report.group} />)
+      : (<PackagesCoverage packages={this.props.report.package} />);
+  }
+
+  _renderSourceCoverage() {
+    return this.props.report.group
+      ? (<GroupsSourceCoverage groups={this.props.report.group} sourceSet={this.props.sourceSet} />)
+      : (<PackagesSourceCoverage packages={this.props.report.package} sourceSet={this.props.sourceSet} />);
+  }
+
   _renderReport() {
     return (
       <div>
@@ -54,12 +66,12 @@ export class Report extends Component {
 
         <section>
           <h3>Coverage tree</h3>
-          <PackagesCoverage packages={this.props.report.package} />
+          {this._renderCoverageTree()}
         </section>
 
         <section>
           <h3>Source coverage</h3>
-          <PackagesSourceCoverage packages={this.props.report.package} sourceSet={this.props.sourceSet} />
+          {this._renderSourceCoverage()}
         </section>
       </div>
     );
diff --git a/src/listComponents.js b/src/listComponents.js
index a09abd9..2d89ac3 100644
--- a/src/listComponents.js
+++ b/src/listComponents.js
@@ -49,6 +49,28 @@ export class Counters extends Component {
   }
 }
 
+export class GroupsCoverage extends Component {
+  _renderChilds(row) {
+    return row.group
+      ? (<GroupsCoverage groups={row.group} />)
+      : (<PackagesCoverage packages={row.package} />);
+  }
+
+  _renderRow(row) {
+    return (
+      <li key={row.$.name}>
+        <span>{row.$.name}</span>
+        <Counters data={row.counter} inlineList="true" />
+        {this._renderChilds(row)}
+      </li>
+    )
+  }
+
+  render() {
+    return renderRows(row => this._renderRow(row), this.props.groups, false);
+  }
+}
+
 export class PackagesCoverage extends Component {
   _renderRow(row) {
     return (
@@ -99,6 +121,27 @@ class MethodsCoverage extends Component {
   }
 }
 
+export class GroupsSourceCoverage extends Component {
+  _renderChilds(row) {
+    return row.group
+     ? (<GroupsSourceCoverage groups={row.group} sourceSet={this.props.sourceSet} />)
+     : (<PackagesSourceCoverage packages={row.package} sourceSet={this.props.sourceSet} />);
+  }
+
+  _renderRow(row) {
+    return (
+      <li key={row.$.name}>
+        <span>{row.$.name}</span>
+        {this._renderChilds(row)}
+      </li>
+    )
+  }
+
+  render() {
+    return renderRows(row => this._renderRow(row), this.props.groups, false);
+  }
+}
+
 export class PackagesSourceCoverage extends Component {
   _renderRow(row) {
     return (