microchiptech / github-views

GitHub Views

⭐ Features

• Login With GitHub
• View all time views and unique views charts for your repos
• Share your repos views data with other users
• Create aggregate line-charts of multiple repos
• Email & Password authentication
• Export data as CSV
• Configurable time window for charts
• Display commits as vertical markers (lines) on the repo chart
• Cumulative charts summing the views of multiple repos into one line chart
• Create aggregate bar-charts of multiple repos

🚀 Deployment

Clone this repository.

In the project folder create a file called .env. This file is used to configure the variables used by Docker. There is an example file called .example.env in this repo.

The complete list of variables that have to be in your .env file is:

• ENVIRONMENT

• MONGO_USERNAME=

• MONGO_PASSWORD=

• MONGO_DATABASE=

• ME_CONFIG_BASICAUTH_USERNAME=

• ME_CONFIG_BASICAUTH_PASSWORD=

• GH_CLIENT_ID=

• GH_CLIENT_SECRET=

• MSFT_IDENTITY_META=

• MSFT_CLIENT_ID=

• MSFT_CLIENT_SECRET=

• MSFT_REDIRECT_URL=

• MSFT_COOKIE_ENC_KEY_1=

• MSFT_COOKIE_ENC_KEY_2=

• MSFT_COOKIE_ENC_IV_1=

• MSFT_COOKIE_ENC_IV_2=

• TOKEN_ENC_KEY=

• TOKEN_SIG_KEY=

• MAIL_SERVICE=

• MAIL_AUTH_TYPE=

• MAIL_AUTH_USER=

• MAIL_AUTH_CLIENT_ID=

• MAIL_AUTH_CLIENT_SECRET=

• MAIL_AUTH_ACCESS_TOKEN=

• MAIL_AUTH_REFRESH_TOKEN=

• MAIL_AUTH_EXPIRES=

• MAIL_ADMINS=

• PUBLIC_REPO_OWNERS=

• REACT_APP_FEEDBACK_MODAL_CONTENT=

• REACT_APP_AAD_ORGANIZATION_NAME=

MONGO_USERNAME, MONGO_PASSWORD, MONGO_DATABASE, ME_CONFIG_BASICAUTH_USERNAME, ME_CONFIG_BASICAUTH_PASSWORD values you can chose freely.

Login

With Github

Create a new GitHub OAuth application. You will need the client id and the client secret associated with this GitHub OAuth application. These will be added in the .env file as the values of GH_CLIENT_ID and GH_CLIENT_SECRET.

With Microsoft

In order to create a Microsoft Azure AD application follow the instruction in their tutorial.

The name of the Azure Tenant used in to create the app must be passed to the frontend as the env variable REACT_APP_AAD_ORGANIZATION_NAME.

Token encryption in the databse

TOKEN_ENC_KEY and TOKEN_SIG_KEY keys are used to protect the GitHub access tokens once saved in the database. Use the following commands to generate them:

$ openssl rand -base64 32
$ openssl rand -base64 64

The PUBLIC_REPOS_OWNERS variable is a space separated list of users and/or organizations whos repos will be visible by default to all users who used login with Microsoft options. Also those repos can be self-shared and are returned by the public repos endpoint.

REACT_APP_FEEDBACK_MODAL_CONTENT is a varaible for the react app (this is visible on the client code) that holds the HTML code inside the modal for the feedback button.

Install the npm dependencies and start the application.

$ cd src
$ npm i
$ cd ..
$ docker-compose up

Windows+Docker: frontend is not refreshing automatically on changes

This issue can be fixed by adding a .env file in the frontend folder with the following cotent:

CHOKIDAR_USEPOLLING=true

Visit http://loclahost:8000 and login with your GitHub account.

The tool will start collecting views data for all the repos you have access to.

👍 Your contribution is awesome

Feel free to add features and this project and submit a PR. We will add you to the contributors list below.

github-views's Issues

Don`t duplicate repo data if two users have GitHub access to the same repo

Currently if two users have GitHub "native" access to a repo (for example both are admins) the views data for that repo are saved twice (once for each user). Possible optimization is that the data are saved only once. This means that in the repo model instead of having a single user there must be an array of users.

A more Docker-like approach

Currently the backend needs a "npm install" from the host machine before running. This is not very in sync with the Docker philosophy where absolutely everything needs to happen in the container only.

Zombie repositories

When a repo is deleted from GitHub and no more views data are available for it move it in a new category called Zombie repositories so it does not appear on the main page anymore since it is probably not of interest any more.

Add persistence to for mongodb container

Create a folder ("data") to be mapped via a volume in docker-compose.yml to mongodb data directory.

Display commits as vertical markers (lines) on the repo chart

Use the GitHub API to get information about the commits (time and description) and display them as vertical markers on the time series graph. This wold make it easier to associate a commit with an increase in views.

Cumulative charts summing the views of multiple repos into one chart

One chart for multiple repos. The value at each day is the sum of the views for all the repos. The chart should be a stacked bar chart so contribution of each repo to the total views, is visible.

Automate mongodump backup

Lazy data fetch

Fetch data automatically once a week, only. If a user requests it in between the 1 week interval fetch it immediately so the users don`t see any difference from the daily fetch approach.