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:
- Project Key: this is the SonarQube project key (check your sonar-project.properties file)
- Sonar Url: this is the url to your Sonar Api instance. Usually something like https://localhost/api/qualitygates/project_status?projectKey=
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
/Y.