Analytical Reports (Bubble App)

Updated by Yanjun Wang 13/12/2021

Customers are keen to reports to display the ticket state transition diagram, which shows how many and how long it took on the transition of ticket state one from another. Bubble App is developed to show the dynamical tickets status transition diagram and transferred ticket count trend chart based on data from key_stats. The diagram/chart can filter results by changing workflow, user, region, date, form, alarm, technology, priority, start status, the threshold from the sidebar.

The APP has been integrated with Errigal Common Header, CAS, and Userprofile, also been tracked by Google Analytics.

Repo: https://bitbucket.org/errigal/bubbleapp/src/dev/

The APP has been integrated with CAS and Userprofile.

User can visit the APP from either the button on Ticketer → Admin Options → Analytical Report, or link directly.

Permission control is handled by Userprofile.

• System Admin: System Administrator can access all data and functionality.
• Supper System Admin: Supper System Administrator can access all data and functionality.
• End User: Application user without ability to create new user.
• API User: API User is allowed to access the APIs.

There are two types of reports (panel).

• Ticket State Change Report: displays time used between ticket status changes.
• Ticket State Distribution: displays ticket count distribution over time between two certain statuses.

• The sidebar contains all the filters which are used for filtering ticket state transition results. Workflow Name, Threshold, Start/End Date are required fields to fill in. Any other supported optional filters can be added by Add Filter, and easily removed by the minus button behind each filter.
• The sidebar also contains a special filter: Saved Report, by selecting from its option, pre-saved reports variables will be auto-populated in the below filters.
  • User can create a new report(variables) by
    • Leave the Saved Report dropdown blank
    • Filling all the filters
    • Clicking Save
    • Enter a report name and Confirm
    • OR
    • No matter what's value in Saved Report dropdown
    • Filling all the filters
    • Click Save As New
    • Enter a report name and Confirm
  • User can update an existing report(variables) by
    • Select the report going to be updated from the Saved Report dropdown
    • Filling all the filters you want to update
    • Click Save
  • User can remove an existing report(variables) by
    • Select the report going to be removed from the Saved Report dropdown
    • Click Remove
• The sidebar is allowed to show/hide by the button above it.
• The report window for ticket state transition diagram also supported to change to a table view by clicking the table icon at the top-right corner.
• The second icon at the top-right corner of the report window allows users to print the diagram or export the table. (If there's going to add more features to this report, can be added under this icon.)

• By clicking a link between the ticket state transition diagram's 2 states, another report window will be presented to the user(as below), which shows the below figures, and both of them can be hidden by clicking the legend behind the chart.
  • The total tickets count over a certain time period.
  • The count of tickets at a certain time(minute) moved from one status to another.
• By default, the chart will show the main data only(90% of the total tickets count), then the scope of data can be changed by the scroll bar above. The big blue button will show 100% of the data.
• The Redpoint shows the time that half of the total tickets moved from one status to another.
• The chart is developed with Amchart4 which also supports download as jpg etc.

• Ticket State Diagram Report: TicketStateReport.groovy
• Ticket State Distribution: TicketStateDistributionReport.groovy

Parameter table population is replying on QUARTZ job to run on a daily basis. The SQL query used for the corresponding table is at custom_query table.

Backend

• Java 8
• Spring Boot 1.5.10
• Actuator
• JPA
• REST
• Security, Includes CAS

Frontend

• ReactJS
• GoJS
• amCharts
• BubbleJS

Development

• Jest: helps running unit test on ReactJS Code
• Storybook: helps speed up React Component Development

Other

• Ansible
• Prometheus

Reports have the ability to connect databases via MySQL JDBC connector. For the state diagram report, it queries from key_stat table which is generated and updated by different processes that Marut introduced for Tableau. At the time of 3.11, table names that state diagram report looks up are wf_ticket_status_change and ticket_summary.

Project folder:

• Reprting Manager
• Original
• Enhancements

R&D Docs: 3.11 3.13 3.14