Developing a Local User Interface for Airavata MFT

Introduction#

This past semester (Spring 2024) was my first time on a Vertically integrated Projects (VIP) team at Georgia Tech. Specifically, I was on the Apache Airavata MFT team. Now, as the semester is coming to a close, I just wanted to document the project I was working on (I'm proud of it!): Developing a Local User Interface for Airavata MFT.

Milestones#

During this project, I was tasked with hitting the following milestones:

1. Setting up the MFT development environment and necessary tools (Weeks 1 - 2)
2. Interface Design (Week 3 - 4)
3. Develop the designed application on ElectronJS (Weeks 5 - 6)
4. Integrating the ElectronJS application with MFT gRPC API (Weeks 7 - 8)

Milestone 1#

Milestone 1 involved setting up MFT so it would run locally. While seemingly straightforward, there was actually a version compatability issue with Python. My computer uses Python 3.11, but Airavata MFT would only run on 3.10, so I used a virtual environment through venv. Other than that, here was my milestone 1 demo video!

Milestone 2#

Milestone 2 involved creating a Figma design file for the user interface that would eventually be turned into the application. This milestone was relatively straightforward, as I have a bit of web development experience already. The milestone 2 Figma file is shown below!

Milestone 3 & 4#

I completed milestone 3 and 4 together. When I code, I like to implement the functionality of a program along with creating the UI, so I know which features are possible or not possible to do. When implementing milestone 3, the frontend components, I used ElectronJS (to create the desktop application), NextJS (to handle dynamic routing & so I can use ReactJS-like syntax), and Chakra UI (to handle styling).

This was my first time using GRPC and interacting with MFT through the GRPC API, so I was pretty much clueless when it came to how to even approach the task. Thus, I started out with coding the application with fake data. Afterward, during our weekly VIP meetings, I worked with Dimuthu Wannipurage to integrate MFT's GRPC API to replace thee fake data with real data.

First, I worked on the listing storages page, which was arguably the simplest one, because it would replicate the mft storage list command. After 3 weeks of debugging and working on integrating GRPC with MFT, we finished this the listing storages page (working with real data!)

Next up, we needed to make it so that we can browse files each storage. Doing this was much harder. We started out with only implementing listing files inside SCP and LOCAL storages. After many weeks of debugging with Dimuthu, we finally got this working too:

Conclusion#

And that's about it so far! There's definitely still a long way to go, such as adding functionality for adding storages, browsing files inside S3 storages, and copying files between storages. However, I'm really proud of learning so much about GRPC and ElectronJS, and being able contribute to open source.