Initial implementation

4 files changed, 248 insertions, 44 deletions

diff --git a/src/App.css b/src/App.css
index 92f956e..d0870a2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,32 +1,53 @@
+/*
+ * JaCoCo Report Viewer, a web-based coverage report viewer
+ * Copyright (C) 2018  Pacien TRAN-GIRARD
+ *                     Adam NAILI
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 .App {
-  text-align: center;
+  margin: 1rem;
+}
+
+.App label {
+  display: inline-block;
+  width: 6rem;
+}
+
+.App ul {
+  padding-left: 1.75rem;
+}
+
+.App ul[inline-list="true"] {
+  display: inline;
+  padding-left: 0.75rem;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
+.App ul[inline-list="true"] li {
+  display: inline;
+  list-style: none;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.App ul[inline-list="true"] li:not(:first-child) {
+  padding-left: 0.75rem;
 }
 
-.App-link {
-  color: #61dafb;
+.App li[well-covered="true"] {
+  color: green;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.App li[well-covered="false"] {
+  color: red;
 }
diff --git a/src/App.js b/src/App.js
index 7e261ca..347d243 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,119 @@
+/*
+ * JaCoCo Report Viewer, a web-based coverage report viewer
+ * Copyright (C) 2018  Pacien TRAN-GIRARD
+ *                     Adam NAILI
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import {Parser} from 'xml2js';
+
+import {Counters, SessionInfo, PackagesCoverage} from './Blocks.js';
 import './App.css';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      report: null,
+      hasError: false
+    };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ hasError: true });
+    console.err(error, info);
+  }
+
+  _useReportFile(file) {
+    const fileReader = new FileReader();
+    fileReader.onloadend = (readEvent) => this._useReport(readEvent.target.result);
+    fileReader.readAsText(file);
+  }
+
+  _useReport(xmlString) {
+    const xmlParser = new Parser();
+    xmlParser.parseString(xmlString, (err, result) => this.setState({ report: result.report }));
+  }
+
+  _renderError() {
+    return (
+      <span>
+        Something went wrong while rendering the report.
+        Are the provided files valid?
+      </span>
+    );
+  }
+
+  _renderReport() {
+    return this.state.hasError ? this._renderError(): (<Report report={this.state.report} />);
+  }
+
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <h1>JaCoCo Report Viewer</h1>
+
+        <div>
+          <label htmlFor="reportFile">XML report: </label>
+          <input id="reportFile" type="file" accept=".xml" onChange={event => this._useReportFile(event.target.files[0])} />
+        </div>
+
+        <div>
+          <label htmlFor="sourceJar">Source JAR: </label>
+          <input id="sourceJar" type="file" accept=".jar" onChange={event => null} />
+        </div>
+
+        <hr />
+        {this._renderReport()}
+      </div>
+    );
+  }
+}
+
+class Report extends Component {  
+  _renderNone() {
+    return (<span>Please provide a JaCoCo XML report file to visualise.</span>);
+  }
+
+  _renderReport() {
+    return (
+      <div>
+        <h2>Viewing report: "{this.props.report.$.name}"</h2>
+
+        <section>
+          <h3>Session info</h3>
+          <SessionInfo data={this.props.report.sessioninfo} />
+        </section>
+        
+        <section>
+          <h3>Global coverage</h3>
+          <Counters data={this.props.report.counter} />
+        </section>
+
+        <section>
+          <h3>Details</h3>
+          <PackagesCoverage packages={this.props.report.package} />
+        </section>
       </div>
     );
   }
+
+  render() {
+    return this.props.report ? this._renderReport() : this._renderNone();
+  }
 }
 
 export default App;
diff --git a/src/Blocks.js b/src/Blocks.js
new file mode 100644
index 0000000..48e0376
--- /dev/null
+++ b/src/Blocks.js
@@ -0,0 +1,99 @@
+/*
+ * JaCoCo Report Viewer, a web-based coverage report viewer
+ * Copyright (C) 2018  Pacien TRAN-GIRARD
+ *                     Adam NAILI
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react';
+
+function renderRows(renderRowFunc, rows, inline) {
+  const renderedRows = rows ? rows.map(renderRowFunc) : (<li>None.</li>);
+  return (<ul inline-list={inline.toString()}>{renderedRows}</ul>);
+}
+
+export class SessionInfo extends Component {
+  _renderRow(row) {
+    const date = new Date(parseInt(row.start));
+    return (<li key={row.id}>{row.id}: {date.toISOString()} ({row.dump - row.start} ms)</li>);
+  }
+
+  render() {
+    return renderRows(row => this._renderRow(row.$), this.props.data, false);
+  }