How to visualize SonarQube analytics via Web API

SonarQube has established itself as one of the leading Code Quality Analysis tools on the market and is trusted by millions of developers. Its foundation is a powerful and sophisticated analytics engine which is capable of discovering issues at every severity level from minor code smells right up to show-stopping vulnerabilities in over 20 languages.

As an Engineering Manager you will find that the insights that you need are spread amongst many different tools and platforms. At SquaredUp, our mission is to bring all this intelligence together under one roof. Using our Web API plugin you can easily combine analytics from SonarQube with sources such as Azure DevOps, Jenkins, GitLab, GitHub and many more within a single dashboard.

SonarQube is a mature tool and is capable of running sophisticated analytics and generating considerable volumes of report data. In this article we will look at extracting and presenting some of the more commonly used and critical outputs.

SonarQube versions

SonarQube is available in a number of flavours and editions. There is an open source version which you can run on your own servers. There is also a cloud version which uses the Freemium model. In this article we are using the Free Cloud Tier.

In this post, we will query the Sonar Cloud Web API to retrieve an analysis summary as well as creating a chart to visualize issues by severity. We can achieve all of this using the SquaredUp Web API integration and the formatting and shaping capabilities of the SquaredUp data engine. Let's get started!

If you don't already have a SquaredUp account then signing up is easy and you can try the product out using our free tier.

Adding the Data Source

Our first task is to define our Data Source. So click on the + icon next to Data Sources on the SquaredUp main menu:

At the moment, SquaredUp supports over 60 integrations, with more in the pipeline. Scroll through the list of data sources and click on the Web API option:

We are just going to give our Data Source the name SonarQube and then enter the base URL for the SonarQube Web API, which is https://sonarcloud.io/api/

Authentication

We are going to authenticate the API by passing a bearer token as a HTTP header. You will need to generate the token from your SonarQube account.

Click on the Add Header button and then add your authorization header in the format below:

Now just scroll down and click on the Add button to save your Data Source.

Querying the API

Now that we have a Data Source pointing to the base URL we can start building a dashboard by retrieving data from specific API endpoints. On the New Dashboard page, click on the Data button:

And then select the Http Request Data Stream:

The SonarQube API has a comprehensive set of endpoints for retrieving information on projects, analyses, issues and general configuration. The first endpoint we are going to use is ‘project_analyses/search’, which returns a high-level summary of a SonarQube project analysis:

Next we need to add our parameters. It is not always apparent from the SonarQube Web API documentation, but when you are running queries against the Sonar Cloud endpoint you need to provide an organization parameter – as shown in the screenshot below:

Formatting our data

Now we will go on to configure our columns. Our query will return a large number of columns and their names are often rendered as a full JSON path – which looks rather verbose. We will therefore hide all except four of the columns as well as tidying up their names:

If you hover over any column you will see that you will get the option to rename it:

Probably the most important field in this data set has the name/path '1/Events/0/Name'. This field represents the status of our project and whether it has passed the SonarQube quality threshold:

In SquaredUp we can assign fields such as this to the State data type, which maps the original value to a RAG (Red/Amber/Green) status:

When we finish, our dashboard tile will look like the screenshot below. As you can see, the SquaredUp state field is rendered as a traffic light.

Creating a donut chart

Naturally, as well as tables, we can also create graphical elements. Let us have a look at creating a simple donut chart to summarize our issues by severity. To do this we will reuse our SonarQube data source but we will use a different Endpoint path. Add a new tile to your dashboard and then follow these steps:

1. Select the Http Request Data Stream and click on Next

2. Select the SonarQube object from the Data Sources list and click on Next

3. In the Parameters step, enter 'issues/search' as the Endpoint path:

Then we will add the same query arguments that we used in our previous example (project, projectKey and organization). The data we need for our chart is in the issues collection of the root object, so we will specify this in the Path To data field:

Next, in the Shaping step, we will select Severity as our Group by field and Count as our Aggregation type:

When you save the tile, the finished article should look something like this:

Wrapping up

Hopefully this has given you a glimpse into the potential of using the SquaredUp Web API data source to query the SonarQube API. Connecting to any source is simple and once the JSON is flowing through your data stream, the SquaredUp engine has simple and powerful capabilities for filtering, formatting and visualizing your data.

Since SquaredUp supports a wide range of data sources you can easily use the techniques displayed in this article to combine your SonarQube analyses with insights from Azure DevOps, Jira, GitHub and many other sources to build a single overview of your engineering team's performance.

See what other dashboards you can build or get started free today!