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 systemBuild 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.

    Out of Box Integration Overview

    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 Out of Box Integrati
    VSTS Slack Service hook, build completed Trigger, build status options


    VSTS Build completion
    VSTS build completed

    build completion message in slack
    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.
    Pull request created

    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.
    Custom integration overview

    Scenario 1VSTS 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

    VSTS task expander bot

    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 (3)

  1. Keith Hill says:

    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?

    1. Hi Keith.

      Yes you can : https://www.visualstudio.com/docs/service-hooks/services/slack (See Step 3 under ‘Create the Slack Integration’).

      Regards

      1. Keith Hill says:

        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!

Skip to main content