Overview

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, threshold from the sidebar. The APP has been integrated with Errigal Common Header and CAS in Global Admin Tool, also supports Google Analytics.

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

Details

• The sidebar contains all the filters which are used for filtering ticket state transition result. 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 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.

• 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 1) total tickets count among certain time and 2) count of tickets at a certain time(minute) moved from one status to another. Both of them can be hidden by clicking the legend behind the chart.
• 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.

• Working With Saved Reports
  • Unordered List ItemIt is possible to save a report query for later use as necessary.
• Creating A New Saved Report, to save a new report query:
  1. Ordered List Item1. Fill out the report parameters necessary to generate the desired report.
  2. Select the Save button under the Saved Report section.
  3. You will then be prompted to enter a name for your saved report. (Ensure the report name makes sense and that it is under 100 characters in length)
  4. Select the Confirm button to save the report or select the Cancel button to stop creating a saved report.

• Accessing An Existing Saved Report, to access an existing saved report query:
  1. Ordered List ItemSelect the saved report from the Saved Report dropdown.
  2. This will bring up the parameters associated with your saved report.
  3. With the report parameters loaded, select the Run Report button to run the report.

• Updating An Existing Saved Report, to update an existing saved report query:
  1. Ordered List ItemSelect the saved report from the Saved Report dropdown.
  2. This will bring up the parameters associated with your saved report.
  3. From here you can update the report parameters as necessary.
  4. Once you are happy with your updates, select the Save button to update the saved report.

• Duplicating An Existing Saved Report
  • Unordered List ItemYou can duplicate an existing saved report to create a similar report with some different parameters if needed. To duplicate an existing saved report:
  1. Ordered List ItemSelect the saved report from the Saved Report dropdown.
  2. This will bring up the parameters associated with your saved report. You can update the parameters as needed or leave them as they are to exactly duplicate the saved report.
  3. Select the Save As New button to duplicate the saved report.
  4. You will be asked to give this duplicate report a name. Enter a suitable name and select the Confirm button to create the new saved report.

• Removing A Saved Report, to remove/delete an exiting saved report:
  1. Select the saved report from the Saved Report dropdown.
  2. From here, select the Remove button to delete the saved report (you will be asked to confirm this action before the saved report is removed).

• Quartz job is used to populate the 8 parameter tables in bubble_app database on a daily basis. The data used to populate parameter tables are based on the query on custom_query table, which is editable; custom_query indicates the query used to populate tables, the target table to update, and if the refresh is active for a specific table. Hitting https://host/bubble-app/refreshTables will do a manually refresh

Architecture

Reports

Report class has two methods, getParams to add parameters to report object sent in the request object. This report object will be returned as part of the response. Another method is the run method. This method returns the JSON string. This JSON string will be added to the report object sent in request as reportData.

• Unordered List ItemTicket State Diagram Report: TicketStateReport.groovy
• Unordered List ItemDrilldown Report: TicketStateDistributionReport.groovy

List of Tools & Technologies

Backend

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

Frontend

• ReactJS
• GoJS
• amCharts
• BubbleJS

Development

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

Other

• Ansible
• Prometheus
• Flyway

Key Stats

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.

For further information see requirements documenthere