Add GitHub stats to the status dashboard #2466

menghif · 2021-11-13T23:12:07Z

Issue This PR Addresses

Type of Change

Bugfix: Change which fixes an issue
New Feature: Change which adds functionality
Documentation Update: Change which improves documentation
UI: Change which improves UI

Description

This PR adds GitHub stats for Telescope and Satellite.
Stats available: yearly/weekly number of commits, weekly lines added/removed and latest contributor.

Checklist

Quality: This PR builds and passes our npm test and works locally
Tests: This PR includes thorough tests or an explanation of why it does not
Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

gitpod-io · 2021-11-13T23:12:10Z

menghif · 2021-11-13T23:12:26Z

I haven't found a way to get the total number of contributors since Github only returns a max of 100:
https://docs.github.com/en/rest/reference/repos#list-repository-contributors
Any tips on how to get this?

humphd · 2021-11-14T00:00:08Z

Request 1 item per page, and then look at the last page you're given for pagination in the link header they send in the response:

 curl -I -H "Accept: application/vnd.github.v3+json" "https://api.github.com/repos/Seneca-CDOT/telescope/contributors?per_page=1&anon=true"
HTTP/2 200
server: GitHub.com
date: Sat, 13 Nov 2021 23:55:18 GMT
content-type: application/json; charset=utf-8
...
link: <https://api.github.com/repositories/217872944/contributors?per_page=1&anon=true&page=2>; rel="next", <https://api.github.com/repositories/217872944/contributors?per_page=1&anon=true&page=153>; rel="last"
...

I think we have some other code that parses this, which you can steal.

Hey, I love what you're doing above! Some initial thoughts

Should we show something like "No commits this week" instead of "0" for commits, lines added, etc. Let's find a way to deal with slow periods, of which there are many
Can you make as many things as possible into links? e.g., last contributor could link to the person. We could also grab their avatar image and show it (https://github.com/{user}.png)

Andrewnt219

This is awesome!

It may look better with all the cards having the same height. Suck that I don't have a better way to show you my changes, but here it is.

Add height:100% to the tag with class card
Add justify-content: space-between to the tag with class card
Add margin-bottom: auto to the tag with class card-header, or margin-top: auto to the hr.

src/api/status/public/index.html

menghif · 2021-11-15T21:52:13Z

@humphd Thanks for the help on getting the total contributors!
I updated the "Last contributor" section and added the user's avatar (as link to the github profile). I also made the changes suggested by @Andrewnt219

src/api/status/public/assets/js/gitHubStats.js

humphd · 2021-11-15T22:00:02Z

src/api/status/public/assets/js/gitHubStats.js

+  let weeklyCommits = 0;
+
+  // get weekly commits for last year: https://docs.github.com/en/rest/reference/repos#get-the-weekly-commit-count
+  fetch(`https://api.github.com/repos/Seneca-CDOT/${repo}/stats/participation`, {


Write a function to build your GitHub API urls for you vs. hard-coding below:

const ghApiUrl = (repo = 'Seneca-CDOT', path) => `https://api.github.com/repos/Seneca-CDOT/${repo}{path}`

Then you can use it like fetch(ghApiUrl('/stats/participation))

Reading further down, you can actually reuse a bunch of code here:

const fetchGitHubApi = (repo = 'Seneca-CDOT', path) => fetch(`https://api.github.com/repos/${repo}{path}`, { headers: { Accept: 'application/vnd.github.v3+json', } }) .then(res => { if(!res.ok) { throw new Error(`unable to get ${path}`); } return res.json() ) .catch(err => console.error(err));

Now you can do:

fetchGitHubApi('/stats/participation') .then(data => { /* process data here */);

yes that's much better!

I couldn't reuse some parts because I don't always return res.json().

src/api/status/public/assets/js/gitHubStats.js

humphd · 2021-11-15T22:06:53Z

src/api/status/public/index.html

@@ -1222,6 +1284,7 @@ <h6 class="mt-3">Thank you for sharing!</h6>
    <script src="assets/js/plugins/chartjs.min.js"></script>
    <script src="assets/js/demo-chart.js"></script>
    <script src="assets/js/demo-sidenav.js"></script>
+    <script src="assets/js/gitHubStats.js"></script>


Let's add a section specifically for our Telescope stuff

inside assets/js? What should I call it?

humphd · 2021-11-15T22:07:15Z

src/api/status/src/server.js

+        connectSrc: [
+          "'self'",
+          '*.fontawesome.com',
+          `${process.env.API_HOST.replace(/(^\w+:|^)\/\//, '')}:4000`,


Was this fixed in another PR already? cc @manekenpix

src/api/status/public/index.html

Andrewnt219 · 2021-11-16T02:56:51Z

src/api/status/public/assets/css/material-dashboard.css

@@ -5006,6 +5006,8 @@ fieldset:disabled .btn {
  position: relative;
  display: flex;
  flex-direction: column;
+  height: 100%;


I don't recommend overriding styles in the default asset, as it will affect other components. You can add another stylesheet to override the default.

This will be merged with the base style...

/* homepage.css */ .card { height: 100%; justify-content: space-between }

...or make another class to make it clear (BEM style)

/* homepage.css */ .card--dashboard { height: 100%; justify-content: space-between }

Let's put telescope- in the name somehow, and maybe in a different directory, so it's clear that we are overriding the upstream styles.

Let's put it in /public/css/homepage.css, and import it after the default assets.

For the class name, .card--dashboard should be clear about the override. Breakdown: "card" is the component, "dashboard" is the modifier. The modifier indicates that it must be used with the "card" class and goes after the "card" class (i.e. className="card card--dashboard"). This follows the popular BEM methodology, which makes it easy for new contributors to follow.

EDIT: "dashboard" because these are changes for the cards in the dashboard only. If we use the cards somewhere else in the homepage, we may not need this "dashboard" modifier.

humphd · 2021-11-16T12:55:40Z

This needs a rebase too, to pick up the changes in server.js

src/api/status/public/assets/js/github-stats.js

menghif · 2021-11-16T23:04:48Z

I rebased and moved the js and css files based on the recommendations

Andrewnt219

Awesome, looking forward to seeing it live.

humphd

One small nit, otherwise this looks ready to go.

humphd · 2021-11-17T13:29:03Z

src/api/status/public/js/github-stats.js

@@ -0,0 +1,68 @@
+const fetchGitHubApi = (owner, repo, path) => {


If your arrow function immediately returns the result of an expression, you don't need a body or return:

const fetchGitHubApi = (owner, repo, path) => fetch(`https://api.github.com/repos/${owner}/${repo}/${path}`, { headers: { Accept: 'application/vnd.github.v3+json' }, });

vercel bot deployed to Preview November 13, 2021 23:12 View deployment

humphd requested review from Andrewnt219 and suhhee1011 November 14, 2021 00:01

Andrewnt219 reviewed Nov 14, 2021

View reviewed changes

Andrewnt219 suggested changes Nov 14, 2021

View reviewed changes

src/api/status/public/index.html Outdated Show resolved Hide resolved

vercel bot deployed to Preview November 15, 2021 21:48 View deployment

menghif marked this pull request as ready for review November 15, 2021 21:57

humphd requested changes Nov 15, 2021

View reviewed changes

suhhee1011 reviewed Nov 15, 2021

View reviewed changes

src/api/status/public/index.html Outdated Show resolved Hide resolved

src/api/status/public/index.html Outdated Show resolved Hide resolved

vercel bot deployed to Preview November 16, 2021 02:35 View deployment

Andrewnt219 suggested changes Nov 16, 2021

View reviewed changes

src/api/status/public/assets/js/github-stats.js Outdated Show resolved Hide resolved

Andrewnt219 mentioned this pull request Nov 16, 2021

Closes #2433: Customize the dashboard so it looks like it belongs to Telescope #2472

Merged

11 tasks

menghif force-pushed the issue-2417 branch from c2148cd to 90987ef Compare November 16, 2021 22:23

vercel bot deployed to Preview November 16, 2021 22:23 View deployment

menghif requested review from humphd and Andrewnt219 November 16, 2021 23:03

humphd requested a review from suhhee1011 November 16, 2021 23:32

Andrewnt219 previously approved these changes Nov 17, 2021

View reviewed changes

humphd requested changes Nov 17, 2021

View reviewed changes

fetch stats from GitHub

36d176b

menghif dismissed Andrewnt219’s stale review via 36d176b November 17, 2021 14:11

menghif force-pushed the issue-2417 branch from 90987ef to 36d176b Compare November 17, 2021 14:11

vercel bot deployed to Preview November 17, 2021 14:11 View deployment

humphd approved these changes Nov 17, 2021

View reviewed changes

humphd merged commit 3131812 into Seneca-CDOT:master Nov 17, 2021

menghif deleted the issue-2417 branch December 8, 2021 01:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add GitHub stats to the status dashboard #2466

Add GitHub stats to the status dashboard #2466

menghif commented Nov 13, 2021 •

edited

Loading

gitpod-io bot commented Nov 13, 2021

menghif commented Nov 13, 2021

humphd commented Nov 14, 2021

Andrewnt219 left a comment

menghif commented Nov 15, 2021 •

edited

Loading

humphd Nov 15, 2021

humphd Nov 15, 2021

menghif Nov 15, 2021

menghif Nov 16, 2021

humphd Nov 15, 2021

menghif Nov 15, 2021

humphd Nov 15, 2021

Andrewnt219 Nov 16, 2021 •

edited

Loading

humphd Nov 16, 2021

Andrewnt219 Nov 16, 2021 •

edited

Loading

humphd commented Nov 16, 2021

menghif commented Nov 16, 2021

Andrewnt219 left a comment

humphd left a comment

humphd Nov 17, 2021

menghif Nov 17, 2021

		@@ -0,0 +1,68 @@
		const fetchGitHubApi = (owner, repo, path) => {

Add GitHub stats to the status dashboard #2466

Add GitHub stats to the status dashboard #2466

Conversation

menghif commented Nov 13, 2021 • edited Loading

Issue This PR Addresses

Type of Change

Description

Checklist

gitpod-io bot commented Nov 13, 2021

menghif commented Nov 13, 2021

humphd commented Nov 14, 2021

Andrewnt219 left a comment

Choose a reason for hiding this comment

menghif commented Nov 15, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Andrewnt219 Nov 16, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Andrewnt219 Nov 16, 2021 • edited Loading

Choose a reason for hiding this comment

humphd commented Nov 16, 2021

menghif commented Nov 16, 2021

Andrewnt219 left a comment

Choose a reason for hiding this comment

humphd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

menghif commented Nov 13, 2021 •

edited

Loading

menghif commented Nov 15, 2021 •

edited

Loading

Andrewnt219 Nov 16, 2021 •

edited

Loading

Andrewnt219 Nov 16, 2021 •

edited

Loading