Continue the migration to React and enhance existing frontend UI

[frouioui]

Overview of arewefastyet

Arewefastyet is the automated and continuous benchmarking platform for Vitess (https://github.com/vitessio/vitess).

It automatically performs different types of benchmarks on each new commit on main and release branches, on new tags and releases, and on selected Pull Request in https://github.com/vitessio/vitess.

Previous work

In #328 we initiated the work to migrate from the old frontend UI (coded in Go) to a new React code base. The exhaustive list of Pull Requests and changes can be found in the description of #328. @Camillemtd worked as an LFX intern for the Jun-Aug 2023 LFX Mentorship term. We are now looking for another mentee to join the project and continue the previous work for the Sept-Nov 2023 LFX Mentorship term.

To summarize the changes made in #328, during the current term (June-Aug 2023), we Dockerized the project and created a new service called frontend. @Camillemtd developed this new service using React and Vite. We initially started by reaching parity with the old UI :

• Home page
• CRON page
• Comparing benchmarks
• Searching benchmarks
• Macrobenchmark page
• Microbenchmark page
• Status page
• Query Comparison page

After reaching the basic parity, @Camillemtd went through all the pages and improved the UI and UX of those pages to offer a way better experience than what was previously offered in the old UI.

@Camillemtd then continued by adding new features such as a couple of pages to visualize Pull Requests that arewefastyet has benchmarked, and by adding a component that allows us to visualize in-progress benchmarks (still in WIP).

Description of expected work

With #328 nearing completion. We would like to go even further by doing:

• An admin UI
  • Modify the execution queue
  • Request a benchmark manually
  • Re-run a set of benchmarks
• Continue enhancing the frontend UI
• Add a filter and sort feature on the status page
• Improve the integration with Slack and GitHub (better connectivity and notification system)
• Add more data to each benchmark: host machine, configuration used. And enable their visualization in the UI
• Addition of a page to visualize the consistency and variability of the results
• Minor UX improvements

Mentor

• Florent Poinsard @frouioui

Mentee

Pull Requests Tracker

[krishnasvp]

@frouioui I would love to work on this for the LFX Fall '23 term. I have good expertise in accessibility as well along with React, HTML, CSS and JS. Thus as a further goal, we can improve the overall accessibility of the UI as well. Would love to know your opinion on it :)

[frouioui]

@frouioui I would love to work on this for the LFX Fall '23 term. I have good expertise in accessibility as well along with React, HTML, CSS and JS. Thus as a further goal, we can improve the overall accessibility of the UI as well. Would love to know your opinion on it :)

That's good to hear @krishnasvp. Can you DM me your resume on the Vitess Slack along with some personal / OSS project you worked on?

[ishqDehlvi]

Hello @frouioui , I would surely love to contribute in this project as I have a great knowledge of Javascript and their frameworks specially reactjs, nextjs and VueJs. I have done a lot of projects and also being a creative developer I have a great exposure to UI/UX and it's uses. Looking forward to hear from you :)

[Nupoor10]

Hello @frouioui , I would love to get involved with this project under the LFX mentorship. I have extensive experience with ReactJS, having completed several personal projects along with 2 internships in the same. I have also worked with Figma, designing the UI/UX in my recent internship. Look forward to making an impactful contribution!

[HetviSoni]

Hey @frouioui I would like to work on this issue as an LFX mentee this fall. I am a full-stack developer with expertise in ReactJs. This project fits best with my skill set. I also have experience in contributing to open-source projects. I have joined the Slack channel. Please suggest further steps in this process.

[kirtanchandak]

@frouioui I would love to work on this for the LFX Fall '23 term. I have a good understanding of frontend using ReactJS and I have also worked on some backend systems using NodeJS and ExpressJS which would be an additional skill to have, excited to work on this project!

[hirentimbadiya]

Greetings @frouioui , I'm eager to participate in the upcoming LFX mentorship for Fall 2023. As an open-source contributor and member at Layer5, I possess expertise in JavaScript, React.js, and Next.js. Additionally, I also know fundamentals of Golang and TypeScript, and I have familiarity with Docker and Kubernetes. Furthermore, I have a strong understanding of essential computer science topics such as object-oriented programming, data structures, and more. I look forward to contributing my skills and knowledge to this exciting project.

[frouioui]

Hello @0saurabh0, @ishqDehlvi, @Nupoor10, @HetviSoni, @kirtanchandak and @hirentimbadiya. Thanks to all of you for your interest in this LFX mentorship program.

Can you all send me a DM on the Vitess Slack (https://vitess.io/slack) (@Florent Poinsard) with your resume?

@kirtanchandak I have already received yours, thank you.

[ashutosh-rath02]

Hello @0saurabh0, @ishqDehlvi, @Nupoor10, @HetviSoni, @kirtanchandak and @hirentimbadiya. Thanks to all of you for your interest in this LFX mentorship program.

Can you all send me a DM on the Vitess Slack (https://vitess.io/slack) (@Florent Poinsard) with your resume?

@kirtanchandak I have already received yours, thank you.

Hey @frouioui I have also sent my resume. Hope you have received it!!

[hirentimbadiya]

Hello @0saurabh0, @ishqDehlvi, @Nupoor10, @HetviSoni, @kirtanchandak and @hirentimbadiya. Thanks to all of you for your interest in this LFX mentorship program.

Can you all send me a DM on the Vitess Slack (https://vitess.io/slack) (@Florent Poinsard) with your resume?

@kirtanchandak I have already received yours, thank you.

Sent

[Xaid-vfx]

Hey @frouioui,
Love the idea behind this project, I would love to contribute to this project as an LFX'23 fall mentee. I have a solid understanding of React.js along with SEO opmtimizations using Next.js. I have been a previous open source contributor at organizations like Creative Commons. Furthermore, I have experience in developing products at startups as an intern. Looking forward to contribute to CNCF - Vitess community. Have sent you the resume on Slack.

[VarunGitGood]

Hey @frouioui I would love to work on this for LFX'23
i have already worked with the tech stack along with Docker so i do feel will be a great fit, ill send you my resume on slack
Looking forward to contribute

Thanks!!

[himanshuaggar]

Hey @frouioui , I would really love to work with you and contribute to the CNCF - Vitess community for the LFX'23 Fall term. I have a solid understanding of various technologies such as React, REST API, NextJS, typescript, etc. I feel I will be a great fit for this project. I'll send you my resume on Slack.

Thanks!

[DoyeDesigns]

Hello @frouioui, I’m interested in contributing to the ongoing migration of the Vitess UI from Golang to React. I'm in the middle of setting up Vitess locally on my machine.

I have experience working with React, APIs & Vite. I have little to no experience with Docker and Golang but I’ve started learning the basics to find my way around.

If you don't mind can you suggest a good first issue(s) I can work on to get my hands dirty.

Please let me know if I'm a good fit for this project.

[alwinsDen]

Hello @frouioui, I’m interested in contributing. I am Alwin T Varghese, an XR Open Source fellow, one among only 100 individuals selected for the program throughout India. During the fellowship, I built an editor introducing AR experiences for fashion designers, enabling them to upload 3D fashion models, edit various parts according to their preferences, alter designs using custom materials, add annotations directly to the model, and easily share their work with peers (also implemented an HD render feature). All of this was developed using React Three Fiber, TypeScript, and styled-components. Throughout the project's development from scratch, I have contributed nearly 170+ commits and also took the lead in developing the majority of the backend code using Node.js. I established a pipeline for the automatic deployment of the frontend to an S3 bucket and set up the backend on an EC2 instance. I am known for my determination to accomplish tasks without requiring extensive guidance, and I don't consider the work complete until I've achieved a state of perfection.

Check out my work at XR Open Source here: https://github.com/alwinsDen/XROS-Fellowship-Contrib-2023.git

[ChoudharyHarish]

Hello @frouioui I would love to contribute on this for the LFX Fall '23 term. I have good expertise in HTML,CSS,Javascript, React,Redux. I have also worked on Backend Applications using Nodejs, and Monogdb. Would love to hear your opinion on it.
My Portfolio
Resume Link

[reachaadrika]

@frouioui Dmed you on Slack : )

[pankinkun]

Hi @frouioui,
I'm Trique Nguyen, currently a Software Engineering Undergraduate at San Jose State University. I would love to contribute to this project for the LFX Fall '23 term.
I am a full-stack developer and have a domain in front-end development with React.js along with other JavaScript frameworks and libraries such as Next.js, Framer Motion, Redux, and Vite, which I find significantly applicable to this open-source project for this term.
Thank you in advance!

[BilalAhmed-358]

Hey @frouioui,
I discovered this project via the LFX forum and it got me pretty intrigued. Given my experience with JavaScript and React, I think this project lines up nicely with what I can bring to the table. So, I'm all in to jump in as a contributor for this cohort.

Just shot you my resume through DM on Slack. Looking forward to hearing back!

Cheers,
Bilal Ahmed Khan.

[kartikaysaxena]

Hello Sir, I have posted my resume on slack. Kindly check once, thanks!

[faranbutt]

Hi @frouioui , I am Faran, a passionate software engineer by profession and passion specializing in Full Stack development. With expertise in React, Next.js, Redux, Angular, NgRx, and Express, I'm excited to contribute to the LFX Fall '23 project. I believe my skills align well with the project's goals, and I'm eager to collaborate with the open-source community. The opportunity to combine my technical skills with a collaborative environment is what draws me to open source. I'm excited about the prospect of contributing to the project.
Portfolio
Linkedin

[lokesh-katari]

hi @frouioui ,
I am lokesh katari a B.Tech Computer Science Student , I would love to work on Vitess project for migration to react for the LFX Fall '23 term .i also have a good experience with MERN stack and react state management like redux ,I am very exicted to contribute to this project and enchance my skills ,I have also sent you my resume on slack
thank you

[ishtails]

Hey @frouioui, I am interested in working on the project. Have sent you my resume along with all the details. Kindly review :)

[kituuu]

Hey @frouioui, I saw this project listed on the LFX mentorship program. I would love to work on this project under some mentorship. I have some experience with react.js and next.js, along with some knowledge of the Django REST framework. I want to contribute and learn in the following couple of months.

[frouioui]

Closing this as the term is finished. Please see #525 for the next term (Jun-Aug 2024).