Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mikaelvesavuori/github-dashboards
Visualize your GitHub repositories and their workflow statuses 📈 like no thing at all 😎
https://github.com/mikaelvesavuori/github-dashboards
aws dashboards github serverless visualization
Last synced: about 1 month ago
JSON representation
Visualize your GitHub repositories and their workflow statuses 📈 like no thing at all 😎
- Host: GitHub
- URL: https://github.com/mikaelvesavuori/github-dashboards
- Owner: mikaelvesavuori
- License: mit
- Created: 2023-12-22T07:27:45.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-02T13:56:58.000Z (10 months ago)
- Last Synced: 2024-05-01T16:13:13.063Z (7 months ago)
- Topics: aws, dashboards, github, serverless, visualization
- Language: TypeScript
- Homepage:
- Size: 615 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# GitHub Dashboards
## Visualize your GitHub repositories and their workflow statuses 📈 like no thing at all 😎
This is a ready-to-use solution with a serverless backend (AWS: API Gateway, Lambda, DynamoDB) and a simple frontend to render the dashboards.
Works with both private and public repositories.
## Solution
Calls are made from the front-end to the back-end without any authorization. It's suggested you lock down the front-end with some applicable means, like an SSO layer or Cloudflare Access or something similar.
_If you want to get data for private repositories you will need a "classic" GitHub personal access token (PAT) with permissions to use the `workflow` scope. If you are in an organization, make sure to authorize the use of the token against your organization._
From the Lambda function, it will first check a hash of the input in DynamoDB as a type of cache. If the cache has content and it's fresher than a minute, return it. Else go to GitHub to retrieve workflow data, transform it a bit, pass it to Shields.io to generate the SVG badge, and then finally return all of it.
_If you're curious, each dashboard component is ~1200 bytes so that should give you an idea for the DynamoDB usage._
**Feel free to upgrade it with nicer visuals, API keys or security, client-side caching, or anything else you fancy!**
## Prerequisites
- Recent [Node.js](https://nodejs.org/en/) (ideally 20+) installed.
- Amazon Web Services (AWS) account with sufficient permissions so that you can deploy infrastructure.
- Ideally some experience with [Serverless Framework](https://www.serverless.com) as that's what we will use to deploy the service and infrastructure.
- You will need to deploy the stack prior to working with it locally as it uses actual infrastructure even in local mode.
## Installation
Clone, fork, or download the repo as you normally would. Run `npm install`.
## Deployment
Run `npm run deploy` once you are authenticated with AWS. You will get a URL for your endpoint - use this in the front-end code.
For the front-end, just host it on a static website host like Cloudflare Pages or Netlify.
## Commands
The below commands are the most critical ones. See `package.json` for more commands! Substitute `npm` for `yarn` or whatever floats your boat.
- `npm start`: Run Serverless Framework in offline mode
- `npm test`: Run tests on the codebase
- `npm run deploy`: Deploy with Serverless Framework
- `npm run build`: Package and build the code with Serverless Framework
- `npm run teardown`: Removes the deployed stack
## Configuration
### Required
You have to set the following in `serverless.yml`:
- `custom.config.awsAccountNumber`: Your AWS account number.
- `GITHUB_TOKEN` must be set if you want to call private repositories.
_Optionally you can use AWS Secrets Manager instead of hard-coding the GitHub token. There is some code prepped for this, but you will have to manually create the secret in your AWS account._
In `frontend/index.html`, you will have to modify:
- The endpoint for the `getData()` function, as well as the ingoing payload.
## Example API call
### Get dashboard data
#### Request
`POST {{BASE_URL}}/`
```json
[
{
"owner": "mikaelvesavuori",
"repo": "dorametrix",
"ref": "main"
},
...
]
```
#### Successful response
Example below. One object per successful request.
```json
[
{
"conclusion": "success",
"status": "completed",
"owner": "mikaelvesavuori",
"repo": "dorametrix",
"ref": "main",
"badge": "main: completedmainmaincompletedcompleted"
},
...
]
```
## References
- [GitHub: Workflow Runs](https://docs.github.com/en/rest/actions/workflow-runs?apiVersion=2022-11-28)
- [GitHub: Creating tokens](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
- [Shields.io badges](https://shields.io/badges)