Why integrate Visual Studio Team Services (VSTS) with Slack? How do I customize VSTS / Slack integrations?

Slack has had a phenomenal journey in terms of user acquisition and exciting developer community since its inception in Feb 2013. Slack is a perfect example of a company which is ‘Selling Innovation rather than just a product for Collaboration’ .

I was pretty amazed with its sleek design and capabilities and thought of playing around with it. Finally, I thought why not integrate Visual Studio Team Services(VSTS) with Slack!

Before diving deep into “Why integrate Visual Studio Team Services with Slack, let us first understand what are Visual Studio Team Services (VSTS) and Slack.

Visual Studio Team Services (VSTS) or previously Visual Studio Online (VSO) are a set of cloud based collaboration tools. These tools include code repositories (choice of Git or TFVC repos), work item, backlog tracking tools, dashboards for Scrum and Kanban teams, continuous Integration (CI) and deployment tools for a variety of technologies.
Complete list of these tools and details can be found here.

Slack is one of the most popular team communication tools out there, with a huge array of features which allow us to quickly bring teams together and communicate effectively.

 

VSTS with Slack – Why? Integrating the VSTS collaboration tools like Versioning control repository, Task management system, Build server with Slack makes team collaboration more effective which eventually results in higher team productivity.

Let’s look at some of the integration scenarios:

1. Out of the box Integration scenarios: Setting up Out of the box integration is quite straight forward and can be easily done through the steps mentioned here.

   

   Overview of VSTS web hook integration with slack: The events based on which notifications can be sent to slack channels include build completed, code pushed, pull request created, pull request updated, team room message posted, work item created, work item commented on and work item updated.

   Let us first consider the following out of box scenarios and their benefits :

   Scenario 1 - Build Status posted to Slack Channel - As shown in the images below after subscribing for build completion, once the build completes (successful), a notification is posted in the configured slack channel by VSTS.

   The advantage of this is immediately evident, for instance the team responsible for the build being notified of the build failure immediately through Slack on their phone, prompting these folks to start working on fixing it asap.

   In a distributed team, if people in one-time zone are not able to fix the build, their conversations related to build fixing effort are available in the Slack channel, so that team members in the other time zone/zones can start of thereafter.

   
   VSTS Slack Service hook, build completed Trigger, build status options

   
   VSTS build completed

   
   Build completed message posted to slack channel

   Scenario 2 - Pull request created for a feature branch - If this notification is sent to the Slack channel for the feature team, guys with rights to merge the changes will see the notification. This also reduces the probability of some unwanted changes being merged into the key branches. Sample notification can be seen in the image below.
   

   Scenario 3 - Notifications for work items created/updated – Here, it informs the teams of these events. When these notifications are coupled with custom integrations like the sample VSTS Slack Task expander bot (discussed in the custom integrations section), it will certainly reap more benefits.

2. Custom Integration scenarios: There are several ways in which Slack can be integrated with VSTS for customized programs. In the following scenarios, I have used Node Slack Client for Custom programs, which have been deployed to an azure website. Instructions to deploy the bot code to an azure website can be found here.
   

   Scenario 1 – VSTS task expander for Slack Channel – Here Bot listens to the configured Slack channel for the pattern “task #{task number}”, then extracts the details of this task from VSTS and posts a notification in to the Slack channel. The details include link to view/edit the task in VSTS. Below is the screenshot the bot in action

   

   Node slack client can be found here. Task expander coffee script was created using sample program simple_reverse.coffee which comes with the node slack client as a baseline and modified it a bit for my requirements.

   The core coffee script code which checks for the pattern in the channel messages and then retrieves the details from VSTS is shown below (you can check the full code at https://github.com/maniSbindra/devOpsBot/blob/master/devBotModules/vstsBot.coffee). The Username, Password, VSTS base url and slack token are environment settings. This example uses basic http authentication for authentication with the VSTS REST API. For details of VSTS REST API please refer this link.

   47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

   # Respond to messages with details of Visual studio team services task if type is 'message' and text? and channel? # The regular expression to check if task number pattern exists in message regex = /task #(\d{1,9})(.*)/i match = regex.test(text) if match is true console.log "Taskid mentioned in message" strmatch = text.match(regex) taskid = strmatch[1] console.log taskid # credentials to connect to visual studio team services using basic http authentication username = process.env.VSO_USERNAME password = process.env.VSO_PASSWORD # The Base Url for visual studio team services vsoBaseUrl = process.env.VSO_BASEURL # base64 encode username:password, which will be added to the Authorization heder for basic authentication auth = 'Basic ' + new Buffer(username + ':' + password).toString('base64') url = "#{vsoBaseUrl}/DefaultCollection/_apis/wit/workItems/#{taskid}" request.get { url: url headers: 'Authorization': auth }, (error, response, body) -> body = body.replace "System.TeamProject" , "TeamProject" body = body.replace "System.State" , "State" body = body.replace "System.CreatedBy" , "CreatedBy" json = JSON.parse(body) # check if task id value exists in Visual Studio team services if json.fields != undefined console.log " Task: #{json.id}\n Team Project Name: #{json.fields.TeamProject}\n" # Send Task Details to Channel channel.send ">>> *Task* : #{json.id}, *State*: #{json.fields.State}\n *Project Name*: #{json.fields.TeamProject}, *Created By*: #{json.fields.CreatedBy}\n *View / Edit Task* : #{vsoBaseUrl}/DefaultCollection/devopsDemo/_workitems/edit/#{taskid}\n" else # send task not found message to channel channel.send ">>> *No Task with Id '#{taskid}' exists in the configured visual studio team services account*"

   The bot providing the summary of the task, along with the view / edit link is really useful and saves a lot of time for someone wishing to view or edit the item after the message.

   You can see the code for setting up this bot at https://github.com/maniSbindra/devOpsBot.
   To learn how you can trigger VSTS builds from slack, see part 2 of this blog post at Triggering VSTS build from slack.

   Please note this post was created prior to the Microsoft Bot framework being released, and the solution described uses pattern matching for intent detection . In case you want to see similar solution using botframework and Language Understanding and Intelligence Service (LUIS) for intent detection you can see https://blogs.msdn.microsoft.com/manibindra/2017/02/27/integrating-vsts-with-different-communication-channels-slack-skype-etc-using-botframework-and-luis/

   Thanks for reading my blog. I hope you liked it. Please feel free to write your comments and views about the same over here or at @manisbindra.

Comments

• Anonymous
  May 28, 2016
  Can you configure multiple VSTS integrations on the Slack side? Say we have multiple projects and I want to direct events for each project to the associated channel on our Slack team. Can I create multiple webhook URLs on Slack?
  • Anonymous
    May 28, 2016
    Hi Keith.Yes you can : https://www.visualstudio.com/docs/service-hooks/services/slack (See Step 3 under 'Create the Slack Integration').Regards
    • Anonymous
      May 29, 2016
      I was just a bit nervous creating the first one, worrying that it would be the only one I could create. But I was able to create several more (one per specific channel). Thanks!