Clearwater - Page Analysis Tool Update Challenge

Challenge Overview

• Update the page analysis tool to generate JSON reports to be used in the sonarqube plugin  

 

Project background

The client has a tool to measure various metrics of a website and generate reports to visualize the results in browser. 

 

Now they want to integrate this tool with their ci process. The tool will be called by the Jenkins to collect the metrics data and store in JSON files, and then sonarqube scanner is executed to parse the metrics data from JSON files and save into sonarqube. So user can visualize the metrics data in sonarqube UI directly. 

  

 Technology Stack

• SonarQube 8.1

• SonarQube Plugin (use Maven and Java to develop the plugin and use the reactjs to develop the UI pages)

• Node 12

• NX: https://nx.dev/

 

Individual Requirements

 

The previous challenge: http://www.topcoder.com/challenge-details/30111831/?type=develop creates the SonarQube plugin to save the JSON reports into SonarQube and visualize the data on the UI. 

 

In this challenge, we should update the page analysis tool to generate the JSON reports to be used by the SonarQube plugin. 

• Please create a new codebase for the tool rather than use the existing codebase, which is very messy and contains a lot of useless code. 

• The tool now generates HTML reports, so this has to be changed to generate JSON reports instead. Please ensure all the data are captured in the generated JSON reports. And for the JSON reports, you can follow the same format as the one defined in the SonarQube plugin. 

• It should be able to packaged as a npm package, so that we can include it in any project and use it to generate the JSON reports. 

• Lint must be setup using standardjs. 

 

Here is some additional info about the existing codebase (which will be provided in the forum):

• The webapp-audit/audit_site.js is the entrypoint to generate the reports. (There is an npm run webaudit command in the package.json as well). 

• It uses the configX.json file to configure the URLs to be analyzed. 

• After the configured URLs are analyzed, the reports are generated in the report subdirectory, which only has static files. You can host this directory in any webserver, and then open the audit.html in browser. 

• The project also contains some project specific logic, so the tool should have extension points to allow user to hook project specific logic. And please also create some default hooks so they can be used directly by the client. 

 

The updated tool should use some default configuration, which can be overwritten in the project using this tool. And apparently, the URLs to be analyzed should only be provided from the project. 

 

Here are some screenshots of the generated html reports: 

 

1. Chrome Profile Timeline tab - note that the timeline report is generated from history data.  

2. Chrome Profile Current Status tab

 

3. Lighthouse Report

 

And you can click the URL to view a detailed report. (This report contains some screenshots, which seems impossible to save to sonarqube, you can skip them if so). 

 

 

Final Submission Guidelines

Submission Deliverable

• Source code with 90+% unit test coverage

• README.md with deployment and verification guide

  • Instructions to package it as npm package should be provided

• Demo app to use the tool to generate JSON reports and upload the JSON reports to sonarqube. Your submission should follow the monorepo structure as required by NX.