[GSoC-2017] : Built-In Reports for Reference Application

Hi @raff,

I made the PR to openmrs-module-referencemetadata. I have a minor change to be done for 3 or 4 test cases. Apart from that the reports which we were discussed have completed. I think it’s now time start working on exposing these reports to outside. Can you please point me where to start off with that? :slight_smile:

Kind Regards, Jude Niroshan

@judeniroshan, as discussed let’s try to expose a simple metric with one number e.g. NumberOfAdmissions by writing a react component communicating with reporting REST. Since there’s no OWA generator for React yet, please create a regular React project by following https://facebook.github.io/react/docs/installation.html Next add manifest.webapp e.g. https://github.com/openmrs/openmrs-module-metadatamapping/blob/master/owa/app/manifest.webapp to make it an OWA, which you can upload as a zip to be served by OpenMRS via the advanced administration page as explained here https://wiki.openmrs.org/display/docs/Open+Web+Apps+Module.

Do not worry about styling yet. The goal is to run the report and fetch the result via REST.

1 Like

Thank you @raff for your support.:blush: I have made another PR for reference metadata module. That includes the remained test coverage.

I have created a new OWA in my github account. I am currently working on fetching a report through Reporting REST.

Regards, Jude Niroshan

Hi @raff, @ssmusoke,

It’s been a while since I could update this thread, as I was bit busy with my college work. However it’s all done now and I’m much more focused over here. I have created a simple react component for List of Users report. I have not much concerned about the styling yet.

Here is what I have done so far.

I appreciate your feedback, specially on the component structure. Now I’m working on rest of the reports. :slight_smile:

Regards, Jude Niroshan

Hi @raff, @ssmusoke,

I have created the components for rest of the reports as well. Here is the commit I have made for it.

I’m still a newbie to ReactJS. I couldn’t find the way to display the report components when an item has been clicked from the navigation bar. I think, it shouldn’t redirect to a new page, instead it should it done as in a SAP (Single Page Application). Any advice on it? :grimacing:


I have written the component in more generic way. That’s why the date is being showing as an integer.

Thanks & Regards, Jude Niroshan

Hi @raff, @ssmusoke,

Here is my current status after end of 7th week:

Things completed so far:

  • Implemented the basic reports inside ReferenceMetaData module (Already merged to master branch)
  • Created a new OWA in ReactJS and fetch report data through Reporting REST API
  • Created basic React components for each of those reports

Things not done:

  • Refine the ReactJS components
  • Implement a proper navigation structure within the OWA
  • Embed Charts into ReactJS components (Charts in OpenMRS)
  • Extract out the common UI styling and make a separate npm module (for others to use in future)

Is there anything that is missing in this targeted task list?


@raff, I was trying to implement a simple navigation using react-router-dom v4.0.0. I have noticed that in the OWA which I generated through OpenMRS OWA generator has included react-router v.3 by default. It is said that react-router is deprecated and to use react-router-dom. So, I added that dependency to my module and tried to implement the navigation functionality. But I’m stuck on it.

If anyone knows a way to get around with this, please feel free to answer to my question in StackOverflow.

Thanks & Regards, Jude Niroshan

Hi @raff, @ssmusoke,

Last Tuesday I had the weekly meeting with my mentor Rafal. There we planned the following work for this week:

  1. Generalized table component for all the reports (Done)
  2. Complete the navigation panel (Done)
  3. Adjust the styling (Done)
  4. Integrate Chart.js

I have created a component for reports to show in tabular format. There is a problem which I’m currently trying to solve that I couldn’t run a report through reporting REST. Reports which accepts a location as a parameter, I couldn’t run them through API.

I have also reported a issue as the API does not return a properly formatted datetime object to http response. https://issues.openmrs.org/browse/REPORT-817

Until I get sorted out these, I thought to move with Chart.js implementations and try to add a very simple graph.

Thanks & Regards, Jude Niroshan

@judeniroshan, please work on REPORT-817 first since it is essential for displaying valid report results.

@raff sure, I’ll work on it :slight_smile:

Hi @raff, @ssmusoke,

I have integrated the Jest and SinonJS (mock HTTP calls) for the new OWA UI testing. I have committed what I have done so far.

I have an issue to mock the HTTP call which I make inside the component. This call is actually generated inside the componentDidMount() life cycle method. When I compare it with the cohort builder OWA, they have made this API endpoint as a prop. In this case, they were able to inject a mock at runtime of testing.

Should I follow the same approach of taking out the API endpoint? Then again the users of this component has to provide the API endpoint everytime they are using this react component.

Any advice is appreciated :thumbsup:

Regards, Jude Niroshan

Hi @raff,

I have implemented the Date picker and used it to take the user inputs. But this particular report is keep redirecting and doesn’t render anything. I couldn’t find out why it is happening like that. Could you please point out what I’m doing wrong here?

@dkayiwa

Regards, Jude Niroshan

Hi @raff,

I was able to fix that issue. It was because when I simply set the state, I only set the updated the element. Because of that the rest of the elements are getting cleared off from the state. I used the previous state values and set it.

In fact the redirect is happening because the parameters for the reporting rest API call doesn’t made properly.

Here is the fix:

Regards, Jude Niroshan

Hi @raff, @ssmusoke,

I’m facing a blocker situation with unit testing. Below is my commit.

When I try to use the snapshot testing, the snapshot file doesn’t have the expected component values. I have even checked it by passing the mock through my actual code flow and it rendered as I was expecting. Can you spot what I’m doing wrong there? @dkayiwa

Regards, Jude Niroshan

What are the steps to reproduce your problem?

Just clone and build the project.

  1. Open a command line

  2. npm run build:prod

Regards, Jude Niroshan

Hi, I was able to solve that problem by making the fakeRequestLibrary.js return value to run synchronously. Removed the Promise(). Now I’m facing a different issue when I run the jest.

I’m working on this. If you know how to sort this issue, please comment below. :slight_smile:

You can reproduce this issue by simply cloning the repo. I have committed this changes even though it gives a test failure.

Regards, Jude Niroshan

Hi @raff,

While I am trying to solve the problem with Jest Test case, I have modified the report column names in referenceMetaData module. Here is my PR,

I was limited to use a single word for those SQLDataSets. Because in usual SQL syntax, we cannot have space separated name for alias. Please let me know if there is anything that needs to be modified. :slight_smile:

Regards, Jude Niroshan

Merged! We’ll look into the Jest issue today.

1 Like

Hi @raff,

I have almost finishing up the things right now. I tried to pass an JS array to rowGetter function and it didn’t work. I looked in the official doc and I didn’t find that it supports for arrays. It says it accepts a function. So, currently I’m having an function and which made the snapshot file to be looks like this:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ReportAsTableView />  component displays as expected 1`] = `
<div
  className="TableDivHolder"
>
  <ReactDataGrid
    columns={
      Array [
        Object {
          "key": "username",
          "name": "username",
          "resizable": true,
        },
        Object {
          "key": "date_created",
          "name": "date_created",
          "resizable": true,
        },
        Object {
          "key": "count",
          "name": "count",
          "resizable": true,
        },
      ]
    }
    minHeight={280}
    rowGetter={[Function]}
    rowsCount={5}
  />
</div>
`;

Meanwhile, I tried the test for chart objects and it has no luck on see the things inside the <canvas>. But for now, I have written the tests at least for those. :slight_smile:

Regards, Jude Niroshan

Hi @raff,

I have fixed the UI issues which we found on our last meeting. Now I am trying configure the continuous integration to this project. I have registered on bintray and also in Travis CI.

I have added the travis.yml file by following the cohort-builder-owa. But the build keeps failing.

https://travis-ci.org/JudeNiroshan/openmrs-owa-built-in-reports/builds/268817714?utm_source=email&utm_medium=notification

I think first I have to make a successful built before deploy it. So, I omitted the deploy section in the travis.yml file.

Any help is appreciated.

Thanks & regards, Jude Niroshan