GSoC 2017 - More Metadata Management in AdminUI

suthagar23 · May 15, 2017, 1:55pm

Hi, everyone!

I am very happy to be the part of OpenMRS through Google Summer of Code for this year . 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.

Installed OpenMRS SDK and Reference application and got familiar with OpenMRS Environment.
Referred wiki documentations and blogs about OpenMRS Open Web App developments.
Tried some demo Open Web Apps using Angular JS and React JS.
Studied some existing OWA modules to get ideas about the developments.
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

Manage Modules
Manage Scheduler
System Information

Second Open Web App will contain these following feature

Manage Observations
Manage Programs
Managing Encounters
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 .

dkayiwa · May 16, 2017, 11:32am

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

suthagar23 · May 16, 2017, 12:43pm

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

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

suthagar23 · May 20, 2017, 5:12am

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

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)
Create functionalities using JS(preferred to use Angular 1)
Modify the functionalities using Module REST API.

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

raff · May 20, 2017, 9:35am

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

suthagar23 · May 22, 2017, 4:47pm

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,

Can you clear me, this is the proper way to perform those start and stop actions for the modules?
For the module, UUID will be like uiframework. Is it correct? I can get some response using this as UUID.
In the moduleaction, what is the resource parameter? How to perform actions using Moduleaction REST. Can you please give me some tips?

dkayiwa · May 23, 2017, 2:59pm

Yes that is the resource to use.
Yes the moduleid serves as the uuid.
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

suthagar23 · May 26, 2017, 6:15pm

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,

Module Start/Stop Button and Trash Button
Module Display Name
Version
Author
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

darius · May 26, 2017, 11:12pm

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.

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.

suthagar23 · May 27, 2017, 4:14am

Thanks @darius for the tips . 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 -

suthagar23 · May 27, 2017, 9:13am

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,

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

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

suthagar23 · May 30, 2017, 5:50pm

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

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 .

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/ModuleController1_8Test.java

/**
 * This Source Code Form is subject to the terms of the Mozilla Public License,
 * v. 2.0. If a copy of the MPL was not distributed with this file, You can
 * obtain one at http://mozilla.org/MPL/2.0/. OpenMRS is also distributed under
 * the terms of the Healthcare Disclaimer located at http://openmrs.org/license.
 *
 * Copyright (C) OpenMRS Inc. OpenMRS is a registered trademark and the OpenMRS
 * graphic logo is a trademark of OpenMRS Inc.
 */
package org.openmrs.module.webservices.rest.web.v1_0.controller.openmrs1_8;

import static org.hamcrest.CoreMatchers.hasItem;
import static org.hamcrest.CoreMatchers.is;
import static org.hamcrest.MatcherAssert.assertThat;

import java.util.List;

import org.apache.commons.beanutils.PropertyUtils;
import org.apache.commons.io.IOUtils;
import org.junit.Assert;

This file has been truncated. show original

dkayiwa · May 31, 2017, 3:00pm

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

suthagar23 · May 31, 2017, 5:33pm

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

Manage Modules
Manage Scheduler
System Information

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

Manage Observations
Manage Programs
Managing Encounters
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

dkayiwa · May 31, 2017, 6:08pm

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

darius · May 31, 2017, 7:21pm

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.

suthagar23 · June 1, 2017, 5:47am

@dkayiwa Awesome . I think you have missed one ‘a’ at openmrs-owa-metadatadmin . 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?

suthagar23 · June 1, 2017, 7:03am

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 ?

dkayiwa · June 1, 2017, 9:02am

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

suthagar23 · June 1, 2017, 9:08am

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