A Quality Gate Dashboard Widget for VSTS

In a previous post we figured out how we could work with SonarQube Quality Gates in a JavaScript build on VSTS. For regular VSTS builds (based on MSBuild that is) Sonar provides an excellent extension that enables several goodies including a “Publish Quality Gate Result” build task. Unfortunately this task requires MSBuild to function correctly and our usual client side/ JavaScript/ gulp/ grunt or npm builds do not.

So I decided to create and share my own (and first) VSTS extension! Ok, it is a very simple widget and I consider it a working prototype 🙂

What it does:

it is a regular VSTS Dashboard Widget available trough the marketplace: https://marketplace.visualstudio.com/items?itemName=yuriburgernet.qualitygatewidget


If you install it in your VSTS tenant, you can then add the widget to your dashboard:


After this, you need to configure the widget with two parameters:


If all goes well you should see your project status reflected in the widget:


Known issues:

  • You need to provide the full url for your SonarQube Api. Example: https://localhost/api/qualitygates/project_status?projectKey=
  • SonarQube does not support HTTPS natively, so you need to setup a simple proxy for this. If you do not do this, then your browser will block any mixed protocol content you might want to serve.
  • SonarQube does not provide CORS support natively, so you need to setup the response header for this. For VSTS the header could be: Access-Control-Allow-Origin = https://<your account>.visualstudio.com

Any feedback is welcome, and if you want to peek at the code you will find the GitHub repo here: https://github.com/yuriburger/quality-gate-widget