Build a React app to visualize GitHub Actions across the organization

[KhudaDad414]

Update: 7 Nov 2022

@Samridhi-98 has been working on the design of the app and it looks cool. 👏
You can see the process of developing this app here:
https://github.com/Samridhi-98/github-actions-visualizer
We are trying to see what kind of info is more useful to have there and finalize the design process.

Reason/Context

We are an automation-driven community and we use GitHub Actions to automate lots of things in the organization. GitHub actions aren't unlimited and we need to have a clear picture of what workflows are using what amount of resources and how we can get the most out of GitHub Actions. GitHub currently doesn't provide such a tool to monitor and see the statistics about workflows across the organization.

Description

Basically, we need a web app capable of monitoring and visualizing GitHub actions metrics across the organization by using GitHub API.

Features

• The web app needs to be able to visualize statistics about each workflow across the organization. like, average run-time, the average number of runs per day, etc...
• Besides monitoring each workflow, there should be a graph of some kind so the user can compare workflows together to figure out the most resource-consuming workflows.
• It needs to have some kind of caching implemented into it so It doesn't overload the GitHub API.

Tech stack

• React.js
• you can use Typescript or Javascript.
• D3.js or a library of your choice.

similar projects

I could only find this https://github.com/amirha97/github-actions-stats project which is primitive and visualizes the run-time of actions for one repo.

[ritik307]

@KhudaDad414 Interesting issue... I would like to work on this issue 😊

[Samridhi-98]

@KhudaDad414 I would also like to work on it 😊

[akshatnema]

@KhudaDad414 Looks like an awesome idea for GSoC. I will love to make a proposal on it. The idea is very much unique and sounds interesting to me as I haven't seen many implementations on any projects which give a good analysis of data and visualize their GitHub action stats.

[darp99]

I would like to work on this idea 😊

[ashutosh-mishra4]

I am interested to work on this issue 😄

[mcturco]

@KhudaDad414 do you think we could designate a product design contributor to help with this app project? If so, can we add the "🎨 design" label to this issue so I can share the design issues with my followers?

[drishtipeshwani]

This idea sounds really interesting to me, and this would be helpful to get insights about resources used by different workflows so that we can make the best use of Github actions in a more structured way.
Also, I like the feature of visualizing individual workflows on the dashboard, along with the part of displaying various workflow stats together to compare them.

Previous Experience
I have experience working with Javascript and Typescript and have majorly worked on Full Stack Development on multiple projects using the React.js framework. I also have some knowledge and experience working with Github Actions and will look forward to learning more while working on this project.

I would like to work on this issue as part of the mentorship program, learn more about this idea, and contribute to the project using my skillset. I would really like to interact, network, and learn new things from other community members.

[Udit-takkar]

I am interested to work on this issue.
I already have some experience working with React, Next, Typescript , Node in personal projects and contributing other open source organisations.

[ayushpaharia]

Hey @KhudaDad414.
If this issue is still available I'd like to work on it 👍

[Devansu-Yadav]

Hey @KhudaDad414 , is this issue still open to take up?

If so, I'm interested in working on this project, as I believe I have the relevant experience working with the mentioned Tech Stack, and I have been making significant Open Source contributions.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[akshatnema]

@derberg can you please remove the stale tag from this issue? I think we still need this idea to be implemented as it was passed by the majority of votes in the TSC voting. If anyone is still interested to work on this, kindly comment out here. We will like to mentor you very well in this.

[drishtipeshwani]

I would still be interested in working on this issue if it is open. Had shared my thoughts on this project and my experience previously - #136 (comment)

[akshatnema]

I would still be interested in working on this issue if it is open. Had shared my thoughts on this project and my experience previously - #136 (comment)

Thanks for showing interest in this idea. But to make sure you, this idea is I think not under the mentorship program now and it is a simple issue now, you can work on. I can definitely help you in any issues regarding React or Github actions. But rest also depends on @derberg and @KhudaDad414 for their opinions regarding the implementation.

[AceTheCreator]

I would still be interested in working on this issue if it is open. Had shared my thoughts on this project and my experience previously - #136 (comment)

Thanks for showing interest in this idea. But to make sure you, this idea is I think not under the mentorship program now and it is a simple issue now, you can work on. I can definitely help you in any issues regarding React or Github actions. But rest also depends on @derberg and @KhudaDad414 for their opinions regarding the implementation.

@KhudaDad414 has not been available for a while, and he just came back recently. He'll reach out to the selected mentee for this project :)

[KhudaDad414]

this idea has been assigned to @Samridhi-98. thank you all for commenting on the issue and showing interest. 🙇

[imabp]

That sounds like, a custom grafana for asyncapi...
All the best Samriddhi, let me know, if you need any help from other mentees!! You can talk about it in our sync meeting

[KhudaDad414]

Since we have the basic design, we can now think about the specifics. a few suggestions from my side.

1. We should be able to filter out workflows. we currently have around 22 workflows(some repos have their own workflows as well), and it would be a mess to see stats about every single one of them. (maybe a checkbox on each workflow to include/exclude it from the bottom statistics?)
2. Showing the success and failure of a workflow is a great idea. maybe we can have it as a ratio?
   maybe successful_runs/total_number_of_runs over a period of time?
3. please add some screenshots to the repo's readme so others can easily view the design.

@derberg anything from your side?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[ishaan812]

This looks super cool I would love to work with this if still available. I ahve worked with react flow which is a graph library, built on top of d3.js which i think will ahve some transferrable experience for me. I have also worked on fetching information from Github API and worked on building analytics pipelines.
Is this project to further updated or already finishsed?

[Shurtu-gal]

@AceTheCreator @akshatnema I would love to work upon this. I have a good experience in Github API

[akshatnema]

@KhudaDad414, I think @Samridhi-98 already completed this issue as part of Mentorship program, right? If yes, kindly close this issue to avoid confusion.