1.2.1

- adds a feed of most recent coverage updates
- moves more functionality to use async await syntax

Author: gabrielcsapo

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.2.1 (10/28/2017)
+
+- adds a feed of most recent coverage updates
+- moves more functionality to use async await syntax
+
 # 1.2.0 (10/27/2017)
 
 - don't override commit for travis builds

dist/bundle.js

@@ -68,6 +68,18 @@ app.get('/api/repos', asyncMiddleware(async (req, res) => {
   }
 }));
 
+app.get('/api/feed/:page?', asyncMiddleware(async (req, res) => {
+  const { page } = req.params;
+
+  try {
+    const feed = await Coverage.feed(page);
+    res.send(feed);
+  } catch(error) {
+    res.status(500);
+    res.send({ error });
+  }
+}));
+
 app.get('/api/repos/:service/:owner/', asyncMiddleware(async (req, res) => {
   const { service, owner } = req.params;
 

dist/vendor.bundle.js

@@ -197,3 +197,17 @@ module.exports.get = function get(repo, limit) {
         });
     });
 };
+
+module.exports.feed = function feed(limit=10) {
+  return new Promise((resolve, reject) => {
+      let options = [
+        { $sort: { "run_at": -1 } },
+        { $limit: parseInt(limit) }
+      ];
+
+      Coverage.aggregate(options, (err, docs) => {
+          if(err) { return reject(err); }
+          return resolve(docs);
+      });
+  });
+};

index.js

@@ -1,6 +1,6 @@
 {
   "name": "lcov-server",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "🎯 A simple lcov server & cli parser",
   "main": "index.js",
   "homepage": "https://github.com/gabrielcsapo/lcov-server#readme",

lib/coverage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import Moment from 'moment';
 import Select from 'react-select';
 
 import CoverageChart from '../components/coverageChart';
@@ -20,23 +20,23 @@ class Coverage extends React.Component {
     };
   }
 
-  componentDidMount() {
+  async componentDidMount() {
    const { source, owner, name } = this.props.match.params;
-
-   fetch(`/api/coverage/${source}/${owner}/${name}`)
-     .then((response) => {
-       return response.json();
-     }).then((project) => {
-       this.setState({
-         project: project[0],
-         loading: false
-       });
-     }).catch((ex) => {
-       this.setState({
-         error: ex.toString(),
-         loading: false
-       });
+   const url = `/api/coverage/${source}/${owner}/${name}`;
+   try {
+     const response = await fetch(url);
+     const project = await response.json();
+
+     this.setState({
+       project: project[0],
+       loading: false
+     });
+   } catch(ex) {
+     this.setState({
+       error: ex.toString(),
+       loading: false
      });
+   }
   }
 
   onChangeBranch(branch) {
@@ -61,8 +61,8 @@ class Coverage extends React.Component {
       "Coverage": `${totalCoverage}%`,
       "Commit": git.message,
       "Committer": git.committer_name,
-      "Commit Time": moment(git.committer_date * 1000).fromNow(),
-      "Recieved": moment(run_at).fromNow()
+      "Commit Time": Moment(git.committer_date * 1000).fromNow(),
+      "Recieved": Moment(run_at).fromNow()
     };
   }
 
@@ -121,7 +121,7 @@ class Coverage extends React.Component {
                   <a className="coverage-commit-message" href={commitUrl} target="_blank"> {message} </a>
                   on branch
                   <b> {branch || git_branch} </b>
-                  {moment(author_date * 1000).fromNow()}
+                  {Moment(author_date * 1000).fromNow()}
                   &nbsp;by
                   <b> {author_name} </b>
                 </p>

package.json

@@ -0,0 +1,92 @@
+import React from 'react';
+import Moment from 'moment';
+import parse from 'git-url-parse';
+
+import Loading from '../components/loading';
+import Error from '../components/error';
+import NoCoverage from '../components/noCoverage';
+
+class Feed extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      feed: [],
+      loading: true
+    };
+  }
+
+  async componentDidMount() {
+    let url = '/api/feed';
+
+    try {
+      const response = await fetch(url);
+      const feed = await response.json();
+
+      this.setState({
+        feed,
+        loading: false
+      });
+    } catch(ex) {
+      this.setState({
+        error: ex.toString(),
+        loading: false
+      });
+    }
+  }
+
+  render() {
+    const { feed, loading, error } = this.state;
+
+    if(error) {
+      return <Error error={error}/>;
+    }
+
+    if(loading) {
+      return <Loading />;
+    }
+
+    if(feed.length > 0) {
+      return <div style={{ margin: '0 auto', width: '50%' }}>
+        <div className="list">
+          { feed.map((repo, i) => {
+            const { git, source_files } = repo;
+            const { message, commit, branch, git_branch, remotes } = git;
+            const { resource, owner, name } = parse(remotes.url);
+            const protocol = resource.substring(resource.lastIndexOf('.') + 1, resource.length);
+            const commitUrl = `${remotes.url.replace('.git', '')}/commit/${commit}`;
+            const percentage = source_files.map((f) => {
+              const { lines={ found: 0, hit: 0 }, branches={ found: 0, hit: 0 }, functions={ found: 0, hit: 0 } } = f;
+
+              const totalFound = lines.found + branches.found + functions.found;
+              const totalHit = lines.hit + branches.hit + functions.hit;
+              const totalCoverage = parseInt((totalHit / totalFound) * 100);
+              return totalCoverage;
+            }, []).reduce((p, c, _ ,a) => p + c / a.length, 0);
+            const color = percentage >= 85 ? '#3DB712' : percentage <= 85 && percentage >= 70 ? '#caa300' : '#cc5338';
+
+            return <div key={`${name}/${i}`} className="list-item">
+              <div style={{ position: 'relative', height: '50px' }}>
+                <div style={{ float: 'left' }}>
+                  <a target="_blank" rel="noopener noreferrer" href={ commitUrl }>{ Moment(repo.run_at).fromNow() } on { git_branch || branch || 'unknown' }</a>
+                </div>
+                <div style={{ float: 'right' }}>
+                  <div className="badge" style={{ opacity: .6, backgroundColor: color, color: 'white' }}> { parseInt(percentage) }%</div>
+                </div>
+              </div>
+              <h3 className="text-center">
+                <a href={`/coverage/${resource.replace(/\./g, '%2E').replace(`.${protocol}`, '')}/${owner}/${name}`}> &nbsp;{ owner }/{ name } </a>
+                <br/>
+                <small style={{ fontWeight: '100', color: '#969696' }}> { message } </small>
+              </h3>
+            </div>;
+          }) }
+        </div>
+      </div>;
+    } else {
+      return <NoCoverage />;
+    }
+  }
+}
+
+export default Feed;

src/coverage/coverage.js

@@ -16,6 +16,9 @@ class Layout extends React.Component {
               </a>
             </div>
             <div className="nav">
+              <a className="text-black" href="/feed">
+                Recent
+              </a>
               <a className="text-black" href="/coverage">
                 Reports
               </a>

src/coverage/feed.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import Layout from './layout';
 import Main from './main';
+import Feed from './coverage/feed';
 import List from './coverage/list';
 import Coverage from './coverage/coverage';
 import File from './coverage/file';
@@ -16,6 +17,7 @@ export default (
         <Route path="/coverage/:source/:owner/:name" component={Coverage} />
         <Route path="/coverage/:source/:owner/:page?" component={List} />
         <Route path="/coverage/:page?" component={List} />
+        <Route exact path="/feed" component={Feed} />
         <Route exact path="/" component={Main} />
         <Route path="*" component={Error} />
       </Switch>