[WIP] Add a directory coverage viewer.

Author: jankeromnes

src/components/routes.jsx

@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom';
 
 import AppDisclaimer from './disclaimer';
 import DiffViewerContainer from '../containers/diffViewer';
+import DirectoryViewerContainer from '../containers/directoryViewer';
 import FileViewerContainer from '../containers/fileViewer';
 import GitHubRibbon from './githubRibbon';
 import SummaryContainer from '../containers/summary';
@@ -31,6 +32,15 @@ const Routes = () => (
       path="/file"
       render={({ location }) => {
         const { path = '', revision } = parse(location.search);
+        // FIXME: There must be a better way to know if this is a directory
+        if (path[path.length - 1] === '/') {
+          return (
+            <DirectoryViewerContainer
+              revision={revision}
+              path={path.startsWith('/') ? path.slice(1) : path}
+            />
+          );
+        }
         // Remove beginning '/' in the path parameter to fetch from source,
         // makes both path=/path AND path=path acceptable in the URL query
         // Ex. "path=/accessible/atk/Platform.cpp" AND "path=accessible/atk/Platform.cpp"

src/containers/directoryViewer.jsx

@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+
+import FileOutlineIcon from 'mdi-react/FileOutlineIcon';
+import FolderOutlineIcon from 'mdi-react/FolderOutlineIcon';
+import { directoryRevisionWithActiveData } from '../utils/coverage';
+import settings from '../settings';
+import { HORIZONTAL_ELLIPSIS, HEAVY_CHECKMARK } from '../utils/symbol';
+
+const { low, medium, high } = settings.COVERAGE_THRESHOLDS;
+
+// DirectoryViewer loads a directory for a given revision from Mozilla's hg web.
+// It uses test coverage information from Active Data to show coverage
+// per sub-directory or file.
+export default class DirectoryViewerContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { revision, path } = this.props;
+    if (revision === prevProps.revision && path === prevProps.path) {
+      return;
+    }
+    // Reset the state and fetch new data
+    const newState = {
+      appErr: undefined,
+      coverage: undefined,
+    };
+    // eslint-disable-next-line react/no-did-update-set-state
+    this.setState(newState);
+    this.fetchData();
+  }
+
+  async fetchData(repoPath = 'mozilla-central') {
+    const { revision, path } = this.props;
+    if (!revision) {
+      this.setState({ appErr: "Undefined URL query ('revision' field is required)" });
+      return;
+    }
+    // Get coverage from ActiveData
+    try {
+      let { data: coverage } = await directoryRevisionWithActiveData(revision, path, repoPath);
+
+      // Filter weird files from the coverage results (e.g. 'chrome:', 'data:...', 'NONE', etc)
+      coverage = coverage.filter(([fileName]) => !/^(\/|chrome:|data:|obj-firefox|resource:|NONE)/.test(fileName || '/'));
+
+      // Group by type (directory/file), sort alphabetically
+      coverage = coverage.sort(([fileNameA, isDirectoryA], [fileNameB, isDirectoryB]) => {
+        if (isDirectoryA !== isDirectoryB) {
+          return isDirectoryB - isDirectoryA;
+        }
+        if (fileNameA < fileNameB) {
+          return -1;
+        }
+        return 1;
+      });
+
+      this.setState({ coverage });
+    } catch (error) {
+      this.setState({ appErr: `${error.name}: ${error.message}` });
+      throw error;
+    }
+  }
+
+  render() {
+    const {
+      coverage, appErr,
+    } = this.state;
+
+    return (
+      <div>
+        <div className="file-view">
+          <DirectoryViewerMeta {...this.props} {...this.state} />
+          { !appErr && coverage &&
+            <table className="changeset-viewer">
+              <tbody>
+                <tr>
+                  <th>File</th>
+                  <th>Coverage summary</th>
+                </tr>
+                {coverage.map((file) => {
+                  const [fileName, isDirectory, totalCovered, totalUncovered] = file;
+                  const coveragePercent =
+                    Math.round(100 * (totalCovered / (totalCovered + totalUncovered)));
+                  let summaryClassName = high.className;
+                  if (coveragePercent < medium.threshold) {
+                    summaryClassName =
+                      (coveragePercent < low.threshold ? low.className : medium.className);
+                  }
+                  return (
+                    <tr className="changeset" key={fileName}>
+                      <td className="changeset-author">
+                        {isDirectory ? <FolderOutlineIcon /> : <FileOutlineIcon />}
+                        <span className="changeset-eIcon-align">{fileName}</span>
+                      </td>
+                      <td className={`changeset-summary ${summaryClassName}`}>{coveragePercent}%</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+// This component contains metadata of the file
+const DirectoryViewerMeta = ({
+  revision, path, appErr, coverage,
+}) => {
+  const showStatus = (label, data) => (
+    <li className="file-meta-li">
+      {label}: {(data) ? HEAVY_CHECKMARK : HORIZONTAL_ELLIPSIS}
+    </li>
+  );
+
+  return (
+    <div>
+      <div className="file-meta-center">
+        <div className="file-meta-title">Directory Coverage</div>
+        <div className="file-meta-status">
+          <ul className="file-meta-ul">
+            { showStatus('Coverage', coverage) }
+          </ul>
+        </div>
+      </div>
+      {appErr && <span className="error-message">{appErr}</span>}
+
+      <div className="file-summary">
+        <span className="file-path">{path}</span>
+      </div>
+      <div className="file-meta-revision">revision number: {revision}</div>
+    </div>
+  );
+};
+

src/utils/coverage.js

@@ -252,3 +252,49 @@ export const fileRevisionWithActiveData = async (revision, path, repoPath) => {
     throw new Error(`Failed to fetch data for revision: ${revision}, path: ${path}\n${e}`);
   }
 };
+
+export const directoryRevisionWithActiveData = async (revision, path /* , repoPath */) => {
+  try {
+    if (revision.length < settings.MIN_REVISION_LENGTH) {
+      throw new RangeError('Revision number too short');
+    }
+    const res = await queryActiveData({
+      from: 'coverage',
+      where: {
+        and: [
+          { prefix: { 'source.file.name': path } },
+          { eq: { 'repo.changeset.id12': revision.slice(0, 12) } },
+        ],
+      },
+      select: [
+        {
+          aggregate: 'min',
+          name: 'is_dir',
+          value: {
+            when: { start: path.length, find: { 'source.file.name': '/' } },
+            then: 1,
+            else: 0,
+          },
+        },
+        { aggregate: 'sum', name: 'total_covered', value: 'source.file.total_covered' },
+        { aggregate: 'sum', name: 'total_uncovered', value: 'source.file.total_uncovered' },
+      ],
+      groupby: [{
+        name: 'subdir',
+        value: {
+          when: { start: path.length, find: { 'source.file.name': '/' } },
+          then: { between: { 'source.file.name': [path.length, '/'] } },
+          else: { not_left: { 'source.file.name': path.length } },
+        },
+      }],
+      limit: 1000,
+    });
+    if (res.status !== 200) {
+      throw new Error();
+    }
+    return res.json();
+  } catch (e) {
+    console.error(`Failed to fetch data for revision: ${revision}, path: ${path}\n${e}`);
+    throw e;
+  }
+};