Local user interaface for Airavata MFT

[DImuthuUpe]

Currently, Airavata MFT can be accessed through its command line interface and the gRPC API. However, it is really easy if a Docker desktop-like user interface is provided for a locally running Airavata MFT. The functionalities of such an interface can be summarized as follows

1. Start / Stop MFT Instance
2. Register/ List/ Remove Storage endpoints
3. Access data (list, download, delete, upload) in configured storage endpoints
4. Move data between storage endpoints
5. Search data across multiple storage endpoints
6. Analytics - Performance numbers (data transfer rates in each agent)

We can use ElectonJS to develop this cross-platform user interface. The node.js backend of ElectronJS can use gRPC to connect to Airavata MFT to perform management operations

[praneethchityala]

Looks like a good project to help MFT deployment. Worked on something similar previously and like to guide someone who can take the ownership of it.

[Okabe-Rintarou-0]

Hi, i'm familiar with js/ts and react/vue (and many other popular programming languages). Maybe i can do this.

[ShaiviAgarwal2]

@DImuthuUpe Hey I would like to contribute to this issue

[vibhuti019]

@DImuthuUpe Do we have a separate repo for this feature?
@praneethchityala

[VivekShahare04]

i wanted to work on this issue please assign me this issue. @DImuthuUpe @praneethchityala

[DImuthuUpe]

Thanks for the interest @VivekShahare04, @vibhuti019 , @ShaiviAgarwal2, @Okabe-Rintarou-0. It would be great if you all can collaborate and come up with a plan to develop this feature. Please use this ticket to discuss your plans and then divide and conquer.

[ShaiviAgarwal2]

Thanks for the interest @VivekShahare04, @vibhuti019 , @ShaiviAgarwal2, @Okabe-Rintarou-0. It would be great if you all can collaborate and come up with a plan to develop this feature. Please use this ticket to discuss your plans and then divide and conquer.

We can create an ElectronJS application that interacts with the Airavata MFT through its gRPC API.
For that we need to follow the following steps:

Firstly, we will need to set up an ElectronJS application.
Then install the necessary gRPC libraries for Node.js.
Further we need to implement the gRPC client in the ElectronJS application.
Then we need to create UI components for each of the functionalities mentioned.
Finally, we will connect the UI components with the gRPC client methods.

[ShaiviAgarwal2]

Thanks for the interest @VivekShahare04, @vibhuti019 , @ShaiviAgarwal2, @Okabe-Rintarou-0. It would be great if you all can collaborate and come up with a plan to develop this feature. Please use this ticket to discuss your plans and then divide and conquer.

We can create an ElectronJS application that interacts with the Airavata MFT through its gRPC API. For that we need to follow the following steps:

Firstly, we will need to set up an ElectronJS application. Then install the necessary gRPC libraries for Node.js. Further we need to implement the gRPC client in the ElectronJS application. Then we need to create UI components for each of the functionalities mentioned. Finally, we will connect the UI components with the gRPC client methods.

@DImuthuUpe Are you satisfied with my answer? Can I start working upon its pr?

[ShaiviAgarwal2]

Looks like a good project to help MFT deployment. Worked on something similar previously and like to guide someone who can take the ownership of it.

@praneethchityala Hi, It would be really great if you would guide me through the process!!

[VivekShahare04]

Really it's a very great opportunity to work with you all....

…

On Tue, 26 Mar, 2024, 11:17 Shaivi Agarwal, ***@***.***> wrote: Looks like a good project to help MFT deployment. Worked on something similar previously and like to guide someone who can take the ownership of it. @praneethchityala <https://github.com/praneethchityala> Hi, It would be really great if you would guide me through the process!! — Reply to this email directly, view it on GitHub <#114 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BA7HTWWGB563VPR5OGFIWGLY2EDXZAVCNFSM6AAAAABCLUVNR2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJZGQ2DCMZRG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[DImuthuUpe]

This is a great start. I created the project https://github.com/users/DImuthuUpe/projects/2 to track the progress of the issue. Since this is a collaborative project, it might be better to introduce your interested areas to others and carve out a particular section to work on.

[DImuthuUpe]

@ShaiviAgarwal2 can you start adding the initial task list to the project to bootstrap the process?

[ShaiviAgarwal2]

@ShaiviAgarwal2 can you start adding the initial task list to the project to bootstrap the process?

Should I convert every step of the task list (which I provided earlier) into a new issue?

[praneethchityala]

@ShaiviAgarwal2
Sure, we can discuss if you have any doubts in the implementation.
Your initial plan does look good. I would also suggest to explore gRPCweb when you are using it with the electronJS app.

[ShaiviAgarwal2]

@ShaiviAgarwal2 can you start adding the initial task list to the project to bootstrap the process?

Added the initial task list to the project
Could you please check it once whether it is correct or not ? @DImuthuUpe

[ShivangMishra]

Hi @DImuthuUpe I'm working on a proof of concept for this issue. I've used Electron, Typescript and Material UI. Will publish the code by Monday. Here are a couple of screenshots of working features from my current work. Would you like me to prioritize any specific feature in the initial demo and in the GSoC proposal?

[ShaiviAgarwal2]

@ShaiviAgarwal2 can you start adding the initial task list to the project to bootstrap the process?

Added the initial task list to the project Could you please check it once whether it is correct or not ? @DImuthuUpe

Should I convert every step into a new issue?? @DImuthuUpe

[DImuthuUpe]

@ShaiviAgarwal2 I think the current resolution is enough to start with. Please point to the fork that you work on

[ganning127]

I was able to implement the functionality of listing storages and listing files within storages (in the UI) on this repository: https://github.com/ganning127/mft-ui-nextjs.

The frontend also works with the backend (https://github.com/ganning127/mft-ui-backend) to make this all work.