Final Report : AdminDashboard

GSOC Apache Airavata 2022:Final Report 

Mentors: SureshMarru, Eroma Abeysinghe, Sudhakar

Overview

Gateway admins need periodical reports of a number of users, experiments running, resources in use, etc for various reporting and planning purposes. The goal is to use the existing experimental and user data that is already present in apache Airavata’s databases and visualize these statistics on the webpage using VueJS supported by the Django framework in the backend. I prepared an initial architecture diagram as a proposal.

Study the Apache Airavata’s User and Experiment Database 

There are multiple databases like profile_service, experiment_catalog, app_catalog, replica_catalog, sharing_catalog, and credential_store which contain information such as user’s name, demography, input, queue_status, credentials, token_id, resource status, etc. These are the details that need to be fetched and structured and experimented upon and later on visualized by converting them into cards, charts, bars, etc.

Setting up Django portal development environment

Apache Airavta’s Django portal is very easy and convenient to set up. I followed the documentation provided and got through it pretty quickly .

I started going through the UI code to get familiar with the code and the standard UI practices followed. I developed a few small UI’s using the customUI docs . 

The backend was in python and used the Django framework. Django frameworks are a bit tricky and take some time to get used to. The same can be said about vue Js as well which is very simple and effective but constrained by the structure and syntaxes. Below are a few snippets of the UI developed.

The admin dashboard will be visible on- https://testdrive.airavata.org/admin/admin-dashboard/

Time Interval selection

Status of experiments running

Unique Users registered between two dates .

count of Users with at least a single job

Details of experiment

One of the integrations that I did was using an open Source Bar and chart support for VueJS which can be found https://github.com/apertureless/vue-chartjs . It is a very easy and convenient way for plotting charts from data and can be easily attached to VueJS cards. A sample example(not so fancy) can be found below:

Challenges:

There were quite a lot of challenges starting from getting familiar with a large code base pretty quickly and starting my own implementation. Trying out various open source extensions for VueJS was also challenging and time taking. 

Future Works:

Future works involve making these data more interactive with charts, graphs, etc. Adding more functionality and API so that Admin user doesn’t have to query the database altogether. Also providing the admin user rights to modify information easily.

On a side note, I also got a chance to solve an issue on Apache Custos where I worked on making the build compatible with Mac M1 laptops which included using the architecture information of the system for the build.

Links to the codebase, docks other useful extensions Used:

1. https://github.com/bkrshubham95/airavata-django-portal/tree/django-portal-admindashboard
2. PR for admin portal changes - https://github.com/apache/airavata-django-portal/pull/123
3. PR for achapche custos change: https://github.com/bkrshubham95/airavata-custos/tree/develop
4. Docs for Django portal setup: https://apache-airavata-django-portal.readthedocs.io/en/latest/dev/developing_backend/#setting-up-dev-environment
5. Custom UI tutorial: https://apache-airavata-django-portal.readthedocs.io/en/latest/tutorial/custom_ui_tutorial/
6. https://github.com/apertureless/vue-chartjs