airavata-mft icon indicating copy to clipboard operation
airavata-mft copied to clipboard

Local user interaface for Airavata MFT

Open DImuthuUpe opened this issue 1 year ago • 19 comments

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

DImuthuUpe avatar Jan 26 '24 05:01 DImuthuUpe

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 avatar Jan 26 '24 07:01 praneethchityala

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

Okabe-Rintarou-0 avatar Feb 05 '24 14:02 Okabe-Rintarou-0

@DImuthuUpe Hey I would like to contribute to this issue

ShaiviAgarwal2 avatar Feb 27 '24 15:02 ShaiviAgarwal2

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

vibhuti019 avatar Mar 04 '24 05:03 vibhuti019

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

VivekShahare04 avatar Mar 25 '24 14:03 VivekShahare04

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.

DImuthuUpe avatar Mar 25 '24 18:03 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.

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 avatar Mar 26 '24 05:03 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 avatar Mar 26 '24 05:03 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!!

ShaiviAgarwal2 avatar Mar 26 '24 05:03 ShaiviAgarwal2

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 https://github.com/apache/airavata-mft/issues/114#issuecomment-2019441317, or unsubscribe https://github.com/notifications/unsubscribe-auth/BA7HTWWGB563VPR5OGFIWGLY2EDXZAVCNFSM6AAAAABCLUVNR2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJZGQ2DCMZRG4 . You are receiving this because you were mentioned.Message ID: @.***>

VivekShahare04 avatar Mar 26 '24 06:03 VivekShahare04

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 avatar Mar 26 '24 16:03 DImuthuUpe

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

DImuthuUpe avatar Mar 26 '24 16:03 DImuthuUpe

@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?

ShaiviAgarwal2 avatar Mar 26 '24 17:03 ShaiviAgarwal2

@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.

praneethchityala avatar Mar 26 '24 17:03 praneethchityala

@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

ShaiviAgarwal2 avatar Mar 27 '24 05:03 ShaiviAgarwal2

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?

image

image

ShivangMishra avatar Mar 30 '24 14:03 ShivangMishra

@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

ShaiviAgarwal2 avatar Mar 30 '24 17:03 ShaiviAgarwal2

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

DImuthuUpe avatar Apr 01 '24 01:04 DImuthuUpe

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.

ganning127 avatar Apr 22 '24 13:04 ganning127