Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add GitHub stats to the status dashboard #2466

Merged
merged 1 commit into from
Nov 17, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/api/status/public/css/telescope-dashboard.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.card--telescope {
height: 100%;
justify-content: space-between;
}

.card-header--telescope {
margin-bottom: auto;
}
132 changes: 99 additions & 33 deletions src/api/status/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
<!-- CSS Files -->
<link id="pagestyle" href="assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
<!-- Telescope CSS Override -->
<link href="css/telescope-dashboard.css" rel="stylesheet" />
</head>

<body class="g-sidenav-show bg-gray-200">
Expand Down Expand Up @@ -327,86 +329,148 @@ <h6 class="text-sm font-weight-normal mb-1">
<div class="container-fluid py-4">
<div class="row">
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card">
<div class="card-header p-3 pt-2">
<div class="card card--telescope">
<div class="card-header card-header--telescope p-3 pt-2">
<div
class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute"
>
<i class="material-icons opacity-10">weekend</i>
<i class="material-icons opacity-10">commit</i>
</div>
<div class="text-end pt-1">
<p class="text-sm mb-0 text-capitalize">Today's Money</p>
<h4 class="mb-0">$53k</h4>
<h6 class="mb-0 text-capitalize">Telescope</h6>
<p class="text-sm mb-0 text-capitalize">Yearly Commits</p>
<h4 class="mb-0" id="yearly-commits-telescope">&nbsp;</h4>
<p class="text-sm mb-0 text-capitalize">Weekly Commits</p>
<h4 class="mb-0" id="weekly-commits-telescope">&nbsp;</h4>
</div>
</div>
<hr class="dark horizontal my-0" />
<div class="card-footer p-3">
<div class="card-footer p-3" id="new-lines-telescope">
<p class="mb-0">
<span
class="text-success text-sm font-weight-bolder"
id="lines-added-telescope"
></span>
lines added
</p>
<p class="mb-0">
<span class="text-success text-sm font-weight-bolder">+55% </span>than lask week
<span
class="text-danger text-sm font-weight-bolder"
id="lines-removed-telescope"
></span>
lines removed
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card">
<div class="card-header p-3 pt-2">
<div class="card card--telescope">
<div class="card-header card-header--telescope p-3 pt-2">
<div
class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute"
class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute"
>
<i class="material-icons opacity-10">person</i>
</div>
<div class="text-end pt-1">
<p class="text-sm mb-0 text-capitalize">Today's Users</p>
<h4 class="mb-0">2,300</h4>
<h6 class="mb-0 text-capitalize">Telescope</h6>
<p class="text-sm mb-0 text-capitalize">Contributors</p>
<h4 class="mb-0" id="total-contributors-telescope">&nbsp;</h4>
</div>
</div>
<hr class="dark horizontal my-0" />
<div class="card-footer p-3">
<p class="mb-0">
<span class="text-success text-sm font-weight-bolder">+3% </span>than lask month
</p>
<p class="mb-0">Latest contributor:</p>
<div class="d-flex py-1">
<div>
<a href="" title="User" target="_blank" id="latest-author-link-telescope">
<img
class="avatar avatar-xs rounded-circle me-2"
alt=""
src=""
id="latest-author-image-telescope"
/></a>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="mb-0 text-capitalize">
<a href="" title="User" target="_blank" id="latest-author-telescope"
>&nbsp;</a
>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card">
<div class="card-header p-3 pt-2">
<div class="col-xl-3 col-sm-6">
<div class="card card--telescope">
<div class="card-header card-header--telescope p-3 pt-2">
<div
class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute"
class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute"
>
<i class="material-icons opacity-10">person</i>
<i class="material-icons opacity-10">commit</i>
</div>
<div class="text-end pt-1">
<p class="text-sm mb-0 text-capitalize">New Clients</p>
<h4 class="mb-0">3,462</h4>
<h6 class="mb-0 text-capitalize">Satellite</h6>
<p class="text-sm mb-0 text-capitalize">Yearly Commits</p>
<h4 class="mb-0" id="yearly-commits-satellite">&nbsp;</h4>
<p class="text-sm mb-0 text-capitalize">Weekly Commits</p>
<h4 class="mb-0" id="weekly-commits-satellite">&nbsp;</h4>
</div>
</div>
<hr class="dark horizontal my-0" />
<div class="card-footer p-3">
<div class="card-footer p-3" id="new-lines-satellite">
<p class="mb-0">
<span
class="text-success text-sm font-weight-bolder"
id="lines-added-satellite"
></span>
lines added
</p>
<p class="mb-0">
<span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday
<span
class="text-danger text-sm font-weight-bolder"
id="lines-removed-satellite"
></span>
lines removed
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card">
<div class="card-header p-3 pt-2">
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card card--telescope">
<div class="card-header card-header--telescope p-3 pt-2">
<div
class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute"
>
<i class="material-icons opacity-10">weekend</i>
<i class="material-icons opacity-10">person</i>
</div>
<div class="text-end pt-1">
<p class="text-sm mb-0 text-capitalize">Sales</p>
<h4 class="mb-0">$103,430</h4>
<h6 class="mb-0 text-capitalize">Satellite</h6>
<p class="text-sm mb-0 text-capitalize">Contributors</p>
<h4 class="mb-0" id="total-contributors-satellite">&nbsp;</h4>
</div>
</div>
<hr class="dark horizontal my-0" />
<div class="card-footer p-3">
<p class="mb-0">
<span class="text-success text-sm font-weight-bolder">+5% </span>than yesterday
</p>
<p class="mb-0">Latest contributor:</p>
<div class="d-flex py-1">
<div>
<a href="" title="User" target="_blank" id="latest-author-link-satellite">
<img
class="avatar avatar-xs rounded-circle me-2"
alt=""
src=""
id="latest-author-image-satellite"
/></a>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="mb-0 text-capitalize">
<a href="" title="User" target="_blank" id="latest-author-satellite"
>&nbsp;</a
>
</p>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1224,5 +1288,7 @@ <h6 class="mt-3">Thank you for sharing!</h6>
<script src="assets/js/demo-sidenav.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="assets/js/material-dashboard.min.js?v=3.0.0"></script>
<!-- Telescope JS Files -->
<script src="js/github-stats.js"></script>
</body>
</html>
67 changes: 67 additions & 0 deletions src/api/status/public/js/github-stats.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
const fetchGitHubApi = (owner, repo, path) =>
fetch(`https://api.github.com/repos/${owner}/${repo}/${path}`, {
headers: { Accept: 'application/vnd.github.v3+json' },
});

const getGitHubData = (owner, repo) => {
let weeklyCommits = 0;

// get weekly commits for last year: https://docs.github.com/en/rest/reference/repos#get-the-weekly-commit-count
fetchGitHubApi(owner, repo, 'stats/participation')
.then((res) => res.json())
.then((data) => {
weeklyCommits = data.all[data.all.length - 1];
document.getElementById(`weekly-commits-${repo}`).innerHTML = weeklyCommits;

document.getElementById(`yearly-commits-${repo}`).innerHTML = data.all.reduce(
(a, b) => a + b
);
})
.catch((error) => console.log(error));

// get weekly commits activity: https://docs.github.com/en/rest/reference/repos#get-the-weekly-commit-activity
fetchGitHubApi(owner, repo, 'stats/code_frequency')
.then((res) => res.json())
.then((data) => {
if (weeklyCommits) {
document.getElementById(`lines-added-${repo}`).innerHTML = data[data.length - 1][1];
document.getElementById(`lines-removed-${repo}`).innerHTML = data[data.length - 1][2];
} else {
document.getElementById(`new-lines-${repo}`).innerHTML =
'<p class="mb-0">No commits this week<p/>';
}
})
.catch((error) => console.log(error));

// get latest author from commits list: https://docs.github.com/en/rest/reference/repos#list-commits
fetchGitHubApi(owner, repo, 'commits')
.then((res) => res.json())
.then((data) => {
const avatar = data[0].author.avatar_url;
const username = data[0].author.login;
const fullName = data[0].commit.author.name;

document.getElementById(`latest-author-image-${repo}`).src = avatar;
document.getElementById(`latest-author-image-${repo}`).alt = username;
document.getElementById(`latest-author-${repo}`).innerHTML = fullName;
document.getElementById(`latest-author-${repo}`).title = username;
document.getElementById(`latest-author-${repo}`).href = `https://github.com/${username}`;
document.getElementById(`latest-author-link-${repo}`).title = username;
document.getElementById(`latest-author-link-${repo}`).href = `https://github.com/${username}`;
})
.catch((error) => console.log(error));

// get total contributors: https://docs.github.com/en/rest/reference/repos#list-repository-contributors
fetchGitHubApi(owner, repo, 'contributors?per_page=1')
.then((res) => res.headers.get('link'))
.then((data) => {
const contributors = data.match(/.*"next".*&page=([0-9]*).*"last".*/)[1];
document.getElementById(`total-contributors-${repo}`).innerHTML = contributors;
})
.catch((error) => console.log(error));
};

document.addEventListener('DOMContentLoaded', () => {
getGitHubData('Seneca-CDOT', 'telescope');
getGitHubData('Seneca-CDOT', 'satellite');
});
1 change: 1 addition & 0 deletions src/api/status/src/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const satelliteOptions = {
"'self'",
'*.fontawesome.com',
`${process.env.API_HOST.replace(/(^\w+:|^)\/\//, '')}:4000`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this fixed in another PR already? cc @manekenpix

'*.github.com',
],
fontSrc: ["'self'", 'data:', 'https:', '*.fontawesome.com'],
imgSrc: ["'self'", 'data:', 'https:'],
Expand Down