Merge pull request mozilla#18 from LinkaiQi/fix-fileviewer-routing

Issue mozilla#5, fix routing on the fileviewer Issue mozilla#16, simplify http call
LinkaiQi · Oct 28, 2017 · dfb614f · dfb614f
2 parents a9d9a2f + 5ca5cb0
commit dfb614f
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "form-serialize": "^0.7.2",
     "parse-diff": "^0.4.0",
     "prop-types": "^15.6.0",
+    "query-string": "^5.0.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-router-dom": "^4.1.2",

diff --git a/src/components/app.js b/src/components/app.js
@@ -60,13 +60,8 @@ export default class App extends Component {
           )}
         />
         <Route
-          path="/revision/:id/:path*"
-          render={({ match }) => (
-            <FileViewerContainer
-              revision={match.params.id}
-              path={match.params.path}
-            />
-          )}
+          path="/file"
+          component={FileViewerContainer}
         />
       </div>
     );

diff --git a/src/components/fileviewer.js b/src/components/fileviewer.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 
 import * as FetchAPI from '../fetch_data';
 
+const queryString = require('query-string');
+
 /* FileViewer loads a raw file for a given revision from Mozilla's hg web.
  * It uses test coverage information from Active Data to show coverage
  * for runnable lines.
@@ -17,9 +19,15 @@ export default class FileViewerContainer extends Component {
   };
 
   componentDidMount() {
-    const { revision, path } = this.props;
+    /* get revision and path parameters from URL */
+    const parsedQuery = queryString.parse(this.props.location.search);
+    this.revision = parsedQuery.revision
+    this.path = parsedQuery.path
+    if (!this.revision || !this.path) {
+      this.setState({ appError: "Undefined URL query ('revision', 'path' fields are required)" });
+    }
 
-    FetchAPI.getRawFile(revision, path)
+    FetchAPI.getRawFile(this.revision, this.path)
       .then(response => {
         if (response.status !== 200) {
           console.log('Error status code' + response.status);
@@ -33,29 +41,36 @@ export default class FileViewerContainer extends Component {
       });
     });
 
-    FetchAPI.getFileRevisionCoverage(revision, path,
-      (data) => {
-        console.log(data);
-        this.setState(() => ({ coverage: data }));
-        // TODO remove these log lines
-        console.log(this.state.coverage.data[0][0].source.file.covered);
-        console.log(this.state.coverage.data[0][0].source.file.uncovered);
-        console.log(this.state.coverage.data[0][0].source.file.percentage_covered);
-      }
-    )
+    FetchAPI.getFileRevisionCoverage(revision, path)
+      .then(response => {
+        if (response.status !== 200) {
+          console.log('Error status code' + response.status);
+          return;
+        }
+        response.json().then(data => {
+          this.setState({ coverage: data });
+          // TODO remove these log lines
+          console.log(data);
+          console.log(this.state.coverage.data[0][0].source.file.covered);
+          console.log(this.state.coverage.data[0][0].source.file.uncovered);
+          console.log(this.state.coverage.data[0][0].source.file.percentage_covered);
+        });
+      })
+      .catch(err => {
+        console.log('Fetch error', err);
+      })
   };
 
   render() {
-    const { revision, path } = this.props;
     return (
       <div>
-        <FileViewerMeta 
-          revision={revision} 
-          path={path} 
+        <FileViewerMeta
+          revision={this.revision}
+          path={this.path}
           appError={this.state.appError}
         />
-        <FileViewer 
-          parsedFile={this.state.parsedFile} 
+        <FileViewer
+          parsedFile={this.state.parsedFile}
           coverage={this.state.coverage}
         />
       </div>
@@ -65,13 +80,13 @@ export default class FileViewerContainer extends Component {
 
 /* This component renders each line of the file with its line number */
 const FileViewer = ({ parsedFile, coverage }) => {
-  return ( 
+  return (
     <div>
       <table>
         <tbody>
-          { 
+          {
             parsedFile.map((line, lineNumber) => (
-              <Line 
+              <Line
                 key={lineNumber}
                 lineNumber={lineNumber+1}
                 lineText={line}

diff --git a/src/fetch_data.js b/src/fetch_data.js
@@ -1,9 +1,8 @@
 import * as Query from './query';
-const https = require('https');
 
 export const hgHost = 'https://hg.mozilla.org';
 export const ccovBackend = 'https://uplift.shipit.staging.mozilla-releng.net';
-export const activeData = 'activedata.allizom.org';
+export const activeData = 'https://activedata.allizom.org';
 
 const plainHeaders = {
   Accept: 'text/plain',
@@ -28,41 +27,6 @@ export const getChangesetCoverageSummary = changeset =>
 export const getRawFile = (revision, path) =>
   fetch(`${hgHost}/integration/mozilla-inbound/raw-file/${revision}/${path}`, { plainHeaders });
 
-// Taken from https://github.com/mozilla/moz-coco/blob/master/src/client/Client.js
-// On October 23, 2017
-// Under the MPL License
-export const getFileRevisionCoverage = (revision, path, callback) => {
-  const body = Query.testCoverage(revision, path);
-  const jsonbody = JSON.stringify(body);
-  const options = {
-    hostname: `${activeData}`,
-    port: 443,
-    path: '/query',
-    method: 'POST',
-    headers: {
-      'Content-Type': 'text/plain',
-      'Content-Length': Buffer.byteLength(jsonbody)
-    }
-  }
-  console.log("Query sent: " + jsonbody);
-  const respchunks = [];
-  const p = new Promise((resolve, reject) => {
-    const req = https.request(options, (res) => {
-      res.setEncoding('utf8');
-      res.on('data', (chunk) => {
-        respchunks.push(new Buffer(chunk));
-      });
-      res.on('end', (chunk) => {
-        resolve(Buffer.concat(respchunks).toString('utf8'));
-      });
-      res.on('error', (e) => {
-        reject(e);
-      });
-    });
-    req.write(jsonbody);
-    req.end();
-  });
-  p.then((body) => {
-    callback(JSON.parse(body));
-  }).catch((err) => console.log(`Exception in fetch_data.js: ${err}`));
-}
+// get coverage from ActiveData for a particular source file
+export const getFileRevisionCoverage = (revision, path) =>
+  fetch(`${activeData}/query`, { jsonHeaders, method:"POST", body: JSON.stringify(Query.testCoverage(revision, path)) });
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import App from './components/app';
 
 ReactDOM.render(
-  <HashRouter><App /></HashRouter>,
+  <BrowserRouter><App /></BrowserRouter>,
   document.getElementById('root'),
 );
diff --git a/yarn.lock b/yarn.lock
@@ -1842,6 +1842,10 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
 deep-equal@^1.0.1, deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -5261,6 +5265,14 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.0.1.tgz#6e2b86fe0e08aef682ecbe86e85834765402bd88"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"