GSoC 2017 - More Metadata Management in AdminUI

Tags: #<Tag:0x00007f076c77bb20>

Hi, everyone!

I am very happy to be the part of OpenMRS through Google Summer of Code for this year :slight_smile:. I am going to work on More Metadata Mangement in Admin UI project. Thanks for OpenMRS community for believing in me and selecting me for this Project. Thanks to my mentors Daniel Kayiwa(@dkayiwa) and Wyclif Luyima(@wyclif) for the guidance for this project.

This thread is will be used for posting the project updates and related questions for the clarifications. After the Proposal submissions, I worked with my mentors to develop the project ideas.

  1. Installed OpenMRS SDK and Reference application and got familiar with OpenMRS Environment.
  2. Referred wiki documentations and blogs about OpenMRS Open Web App developments.
  3. Tried some demo Open Web Apps using Angular JS and React JS.
  4. Studied some existing OWA modules to get ideas about the developments.
  5. Worked with REST API to understand the structure.

I could clarify some answers for my questions using this talk thread. Apart from that, I am going to create two Open Web Apps through my project.

First Open Web App will contain these following features

  1. Manage Modules
  2. Manage Scheduler
  3. System Information

Second Open Web App will contain these following feature

  1. Manage Observations
  2. Manage Programs
  3. Managing Encounters
  4. Manage Triggered State Conversions

For any suggestions and questions please feel free to post here and help me to complete this project as good as possible :slight_smile:.

4 Likes

Good start! Please keep up the good work and thanks for choosing OpenMRS! :smile:

1 Like

Already, I wrote a blog post about my journey to OpenMRS :grinning:.

Recently, I have worked with Open Web Apps and wrote a simple blog post about the Demo Open Web app creation. You can read that post on Medium - How to create your First OWA in OpenMRS? Please give me some comments to improve the blog writing in the future :slight_smile:

I would like to start learning with developing OWA for the Manage Modules. I figured out some workflows to follow during the development.

  1. Create UI using ui-commons which want to be same as Manage Modules Interface. (Include list of Modules, Add or Upgrade Module, and Check Updates)
  2. Create functionalities using JS(preferred to use Angular 1)
  3. Modify the functionalities using Module REST API.

I would like to get some suggestions about my development process.

@gutkowski, could you please share the work you started on Modules Management OWA for @suthagar23 to pick it up?

1 Like

I have followed this talk about starting modules using REST which was discussed with @gutkowski

There, They used modulesaction REST API to perform actions for the modules. I tried with API Docs to get some understanding. I have some breakdowns to move forward,

  1. Can you clear me, this is the proper way to perform those start and stop actions for the modules?

  2. For the module, UUID will be like uiframework. Is it correct? I can get some response using this as UUID.

  3. In the moduleaction, what is the resource parameter? How to perform actions using Moduleaction REST. Can you please give me some tips?

  1. Yes that is the resource to use.
  2. Yes the moduleid serves as the uuid.
  3. That would be the post body. Take a look at this for examples: https://github.com/openmrs/openmrs-module-webservices.rest/blob/master/omod-1.8/src/test/java/org/openmrs/module/webservices/rest/web/v1_0/controller/openmrs1_8/ModuleActionController1_8Tests.java
1 Like

I have started to work on my project. At the begging, I have created simple OWA to display all the modules which are installed in the OpenMRS Reference application. After some code works using Angular JS, It is working perfectly without any faults. It will display this following details in the UI part,

  1. Module Start/Stop Button and Trash Button
  2. Module Display Name
  3. Version
  4. Author
  5. Description of the module

I used Module REST API to achieve this task and to get all data about the installed modules, (webservices/rest/apiDocs.htm#!/module/getAllModules).

.

Final Output of my Manage Modules OWA is like this following, and It want to modify with some UI Common CSS Libraries.


Now I am working to Start and Stop modules using ModuleAction REST API and would like to modify this UI with OWA UI-Commons CSS Libraries as usual.

Please give me some comments and suggestions if you have :slight_smile:

A background comment, for your information:

The current Manage Modules page has some significant UX defects. Specifically, we show a red icon for modules that are running, and a green for modules that are stopped, but it should really be the other way around. :slight_smile:

Hopefully you can adjust this in the new implementation so that we show a “positive” color for running modules, and a “negative” color for stopped ones.

2 Likes

Thanks @darius for the tips :slight_smile:. But I think,

  • Running modules will be stopped by pressing Stop Icon - Negative action, So It should be indicated by red color

  • Stopped modules will be wanted to start by pressing Start Icon - Positive action, So It should be indicated by Green Color

So It’s better to change the button colors as following?

  • Stop Icon - Green Color Octagon Icon -
  • Start Icon - Red Color Start Icon -

I have updated my OWA with some UI-Commons CSS libraries and now It looks like similar other OWAs. After the last update, I have implemented following features,

  1. Change the Start and Stop Icon colors which are mentioned by @darius

  1. Implemented Module Information Page, which will give total information about the module to the user. He wants to just click on that module to get Module Information.


Hereafter, I want to implement some functionality through Manage Modules Section :slight_smile:

I have cleared those mentioned Problems about Module Uploading via REST :grinning:.

We can use Module REST API to achieve Module file Uploading through our OWA. To achieve this you should send the POST request with Content type=“multipart/form-data” header.

Simple Example for this action,

Here I have used upload Function at ModuleResource1_8 REST Resource. I got this exact idea from Test Controller - shouldUploadModule() at ModuleController1_8Test .

1 Like

@suthagar23 since it is coding time, can we create the module on Github under the OpenMRS organisation?

1 Like

@dkayiwa Sure, I thought to ask you about this.

But before this, I need some proper names for my OWA. We are planned to create two OWA under this project.

First Open Web App will contain these following features (OWA 1)

  1. Manage Modules
  2. Manage Scheduler
  3. System Information

Second Open Web App will contain these following feature (OWA 2)

  1. Manage Observations
  2. Manage Programs
  3. Managing Encounters
  4. Manage Triggered State Conversions

For the OWA Name, OWA 1: Admin Management ( Because all actions are related to the admin control) OWA 2 : Support Data Management (It does not contain all the functionalities related to the OWA Name)

If you have any names, Please suggest to me :slight_smile:

How about? openmrs-owa-sysadmin & openmrs-owa-metadatadmin

1 Like

Let me rephrase.

The first thing we show should be the status of the module. One option is for this to be the first column, and it should say either Running or Stopped (and these can have color). The other option is to have two tables, the first one for the Running modules, and the second for the Stopped module.

In the Reference Application our UI convention has been to have actions as the last column of a table (not the first), so the actions should go on the right in an Actions column.

1 Like

@dkayiwa Awesome :slight_smile: . I think you have missed one ‘a’ at openmrs-owa-metadatadmin :joy:. It should be openmrs-owa-metadataadmin. Is it okay with you @dkayiwa?

So for the OWA 1 Name : System Administrations and Repo Name will be openmrs-owa-sysadmin OWA 2 Name : MetaData Administrations and Repo Name will be openmrs-owa-metadataadmin

How can we create those modules in under OpenMRS organisation?

Thank you @darius. and shall I get some more UI Conventions for the Reference Application?

I agreed with your suggestion. But I like to use only one table to display all the modules (Running and stopped modules). I have made some changes according to your suggestions.

  • First Column will illustrate the Module Status (It can use the tooltip to explain the status message) - It’s too long to display Running or Stopped as words here. So I used those Icons to illustrate the status.
  • Start/Stop and Trash Actions are moved to the last column.

Are you Okay with this UI @darius :grinning: ?

@suthagar23 i intentionally left out the ‘a’ because it looked ugly with double aa :smile:

1 Like

@dkayiwa Owww … :grinning: then it will be fine to me also. So final module name for OWA 2 will be openmrs-owa-metadatadmin