0 Comments

When I first heard about the SDK for widgets in Visual Studio Team Services (VSTS) I wanted to make a couple of widgets, one of these was a GitHub widget that would show some info from any GitHub repo on your VSTS dashboard. This can can be helpful when you have your source open on GitHub but still work out of VSTS.

The implementation is very simple and you can see it and contribute on GitHub on one of my projects VSTS.GitHubWidget.

Install

Go to the Visual Studio Marketplace and head over to the Integration section and look for GitHub Widget

image

You can also follow this link for GitHub Widget. Now all you need to do is hit Install

ApplicationFrameHost_2016-01-28_10-53-57

Click Continue

ApplicationFrameHost_2016-01-24_22-17-53

and then click on Confirm to install the extension

ApplicationFrameHost_2016-01-24_22-18-42

and you will now have the extension installed in the account you selected.

ApplicationFrameHost_2016-01-24_22-19-48

Usage

On your dashboard click the add widget button

chrome_2016-01-24_22-21-45

This will popup the widgets catalog and you will notice the GitHub widget in the list of widgets in the catalog, click on it and then click Add.

ApplicationFrameHost_2016-01-28_11-52-33

Your new widget will appear on your dashboard blank

chrome_2016-01-24_22-24-24

Click on the Configure icon and the settings will fly out from the right. Enter a name for the widget as well as the username and repo that you want to get information for

ZoomIt64_2016-01-28_10-09-04

Now click Save and your widget configuration will be applied to your widget and it will show you the counts for Stars, Watches and Forks on your dashboard.

firefox_2016-01-28_10-10-16

When you are finished editing your dashboard the tick icon to complete editing your dashboard

chrome_2016-01-24_22-30-38

Now every time you land on your dashboard you will automatically gain insights into your GitHub projects.

firefox_2016-01-28_10-10-37

Enjoy

0 Comments

So you could make a script that can do the bits below but if you don’t here is how you can easily create build agents fast for TFS 2015+ or VSO.

Now I’m not saying you should run a million agents of a single machine but this could be applied the same if you switching between multiple TS sessions to configure on multiple servers.

Download the build agent

Downloading the build agent is really simple. Navigate to your TFS control panel, click on Agent pools and then Download agent.

image

This post will assume you have setup your agent pool already but that’s as simple as click New pool and giving it a name on the screen above Smile

Setup agent file structure

Copy this to your build server and then extract the zip to look like below for example, create these folders.

image

then inside each of those folders you place a copy of the extracted zip

image

 

Get your configuration details

For this step we going option up old trusty notepad. What you are going to need is the following info in notepad, put each of these on a new line

  • Agent Name
  • Url to TFS
  • Agent Pool
  • Working directory (a blank line to use the default which is where your agent is with _working)
  • Configure as a windows service (this post assumes a y)
  • Service run as username
  • Service run as password
  • another empty line

this should look something like this

image

Setup lots of agents

This part is now fast Smile. Make sure you in the directory with your ConfigureAgent.bat file

image

Run the ConfigureAgent.bat as administrator

image

You should see something like this now

image

Copy everything in your notepad, so you should have all that config with the extra new line at the end. Now right click in cmd and paste

image

and that would all work (if you want it to stay open you can open a cmd in admin and then run the bat file from there)

image

Now go to each folders ConfigureAgent.bat and run as admin, paste in the same config (changing just the agent name to increment the number at the end)

All Done

At this point if you go to your agent pool in TFS you will see they are all setup.

image

0 Comments

So everyone wants to have the ultimate system that never breaks can handle ‘all’ the users and shows no strain when doing so. How do you accomplish something like this? Well you could hire developers that know all the best ways to do everything, experts in everything related to configuring applications to run the best that they can on the hardware and software it sits on but what’s the odds of that happening. The other option is to have a bank account that is never ending and throw ‘all’ the hardware at your application to make sure it doesn’t ever have a slow day but then how are you making your money, how do you know when ‘all’ the hardware isn’t enough.

You need to know how much load you can handle and it’s not ideal to figure out this limit when customers are browsing your site. I have read about a lot of stories lately where rather popular and big online sales companies have amazing specials for a limited time only where some of them even doubled there on-premise hardware to hopefully manage with the load that they were expecting they could get.

Load testing is an important part of running any online system because you need to know where your limits are before customers help you find them. Lots of companies for various reasons including legal can’t run their systems in the cloud and so what they usually do is run a lot more hardware than what is required because auto scaling hardware on-premise is not as easy as in the cloud. Load testing could help you figure out how much load you can handle with your current system and then help make hardware purchases for hardware that is required and not for hardware that you think you may need.

One way to load test could be to use the Load Testing tools in Visual Studio but then without using the cloud you can only generate as much traffic as the machine running that test can output. This is where you can benefit from running load tests in Azure because you can choose how much load you want to generate and Azure would spin up as much hardware that is required to meet your requirements, hardware that you would have to additionally purchase if you did this on-premise.

Let’s run through how this works today in Azure.

Linking your VSO account

So first off to use this functionality you need to have a Visual Studio Online account. Luckily linking this is very easy and is part of the flow of setting up the load testing. Let’s navigate to a website that we want load test and click on Tools, in my case I’m going to choose my blog.

2015-10-08_18-52-01

In the develop section you will notice a Performance Test link, click on that link

2015-10-08_18-54-13

You will now be taken to the Performance tests blade, as you will notice if you haven’t been hear before you need to link a VSO account before you can get started.

2015-10-08_18-57-31

Click on the Set Account button in the toolbar

2015-10-08_19-00-31

This will open the Account Settings blade, go through this blade as you would any other settings blade selecting an option from each of the options on the blade. Note if you don’t have a VSO account you can also easily create one from here using the Or Create New link

2015-10-08_19-01-36

After you have selected your account you will see that the Subscription and location should auto fill for you, the Subscription should come from the current subscription you have selected in the azure portal at the current time. The location will be locked down to North Central US, this is probably because the feature is still in preview. Click ok at the bottom of the blade to make this VSO account be the selected account

2015-10-08_19-03-59

This will now show that you have no performance tests yet and you are now able to create your first performance test.

Creating a performance test

At this stage we have our VSO account linked and can now click the New button to get started

2015-10-08_19-06-55

You will now be asked a could things in order to create your load test

2015-10-08_19-21-48

Firstly you need to give the url to the page to put under load and a name for this load test. You then will need to select the location to generate tests from, note you are shown where your app is currently running in the list of locations

2015-10-08_19-28-40

You will then need to specify the virtual user load to generate

2015-10-08_19-31-48

and then lastly you select the amount of minutes to run your test for

2015-10-08_19-32-34 

Now all that is left to do is click Run test at the bottom of the blade

2015-10-08_19-33-39

Test Results

You should see the following happening, your test should show in the Recent runs as Queued

2015-10-08_19-34-01

After a small bit you should see a start time being populated

2015-10-08_19-34-17

And then very shortly later you will see the progress change to InProgress and at this point your  load test is under way

2015-10-08_19-34-33

And then lastly it would switch to Completed and you would see the Average Response Time in seconds

2015-10-08_19-40-34

While the test is running you are able to click on the test row and see the results which looks like the image below

2015-10-08_19-41-52

You can hover your mouse over the graph to get information on what the values were at certain times in the test run

2015-10-08_19-46-27

As you can see I have some work that I need to do Smile, or increase my scaling in Azure Open-mouthed smile.

More info about load testing in Azure

A nice touch that I haven’t noticed before with other services (and it could have just been a coincidence) is that when I started my load test I received a mail from Microsoft giving me more links and information about this new functionality in Azure. Some links are below

Have a good idea for a new feature? Head over to the Visual Studio User Voice site and add it Smile.

2 Comments

So if you using windows 10 and doing some web development you would probably have noticed that you can't browse localhost for some reason. And there is a couple of feedback items for it in the Windows Feedback app.

image

I'm currently trying to use Microsoft Edge for some screenshots of something (watch this space =D), and keep getting a message saying that the page is not available

image

I did a quick search to try find any solutions and couldn't find anything. So I turned to the tool that does magical things for me with the internet. I opened Fiddler =). Fiddler has a small feature that you can use when you want to debug network traffic for Windows Store apps. You can open that app by clicking on the WinConfig button in the main toolbar of Fiddler.

image

This will launch the AppContainer Loopback Exemption Utility.

image

Find and check the Microsoft Edge app in the list

image

and then click Save Changes

image

You will see at the bottom of the window a message specifying that the update was successful.

image

Now go back to Microsoft Edge and refresh the site that previously didn't load.

image

And you are now able to browse localhost sites using Microsoft Edge. After your site has loaded for the first time it's usually ok to close Fiddler and Edge will continue to work as it should do =D

0 Comments

So if you haven't heard yet VSO Extensions are now in a private preview where you can sign up to get into the preview on extensions integration site. These extensions in the shortest sentence a supported way of doing customizations to VSO that will replace any of the "hacky" extensions that you may be playing around with at the moment like Tiago Pascal's Task Board Enhancer or maybe you have even created your own following similar steps to what I show in my TFS 2013 Customization book.

This post aims to give you a super quick guide on how to get started, you will need to go through the integrations site to really get into detail. It has most of what you will find in most posts but gives you a little something extra that most posts wouldn't have like tips on free stuff Smile

File, New Project

The easiest way to get a basic something in VSO is to just create a new project.

Create/Configure Project

We are going to create a new Type Script project

 New_Project_2015-06-18_20-08-23

You should have something like below now

2015-06-18_20-09-35

Configure SSL in IIS Express

When you have the VSO Time Ticker project selected head over to the properties window

2015-06-18_20-17-56

Change SSL Enabled to True

2015-06-18_20-18-36

Take note of the SSL Url that is now available to you.

Add a extensions.json

Let's add a extensions.json manifest file that will be used to inform VSO what our projects actually about

Add_New_Item_-_VSO_Time_Ticker_2015-06-18_20-11-47

and drop in the content below, replace the baseUri property to include the port you have been assigned for SSL for the project.

{
"namespace": "VSO-Time-Ticker",
"version": "0.0.1",
"name": "Time Ticker",
"description": "A simple extension for Visual Studio Online of a Time Ticker",
"provider": {
"name": "Gordon Beeming"
},
"baseUri": "https://localhost:44300/",
"icon": "https://localhost:44300/images/some-icon.png",
"contributions": {
"vss.web#hubs": [
{
"id": "time",
"name": "Time",
"groupId": "home",
"order": 22,
"uri": "index.html",
"usesSdk": true,
"fullPage": false
}
]
}
}

Get the SDK

Navigate to GitHub to the samples project and grab the VSS.SDK.js file. Save a copy of that to a scripts folder inside a sdk folder and add it to your project.

2015-06-18_20-27-15

Include our App js files

While we here let's build the project, show hidden folders and add the app.js and app.js.map files to the project

2015-06-18_20-29-042015-06-18_20-29-58
If you are using source control you should also at this point undo those files being added source control and then also add them to be excluded otherwise you may get a weird error when it comes time to build your project on a build server (TypeScript : Emit Error: Write to file failed...).
2015-06-18_20-33-152015-06-18_20-33-49
The reason we want these as part of the solution is so that when we do web deploy later they are deployed as well Smile.

Add our app icon

Make a images folder and add a image called some-icon.png to it
2015-06-18_20-44-48

Move App js file

Move your App.ts, App.js and App.js.map into a scripts folder. If you have source you might need to re undo and ignore those extra files.

2015-06-18_20-51-48

Setup index.html

This is a rather simple step, replace the reference to app.js with one to sdk/Scripts/VSS.SDK.js so it will look something like

2015-06-18_20-49-40

Add the following script just inside your body tag

<script type="text/javascript">
// Initialize the VSS sdk
VSS.init({
setupModuleLoader: true,
moduleLoaderConfig: {
paths: {
"Scripts": "scripts"
}
}
});

// Wait for the SDK to be initialized
VSS.ready(function () {
require(["Scripts/app"], function (app) { });
});
</script>
So at this stage your full index.html page will look like
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="sdk/Scripts/VSS.SDK.js"></script>
</head>
<body>
<script type="text/javascript">
// Initialize the VSS sdk
VSS.init({
setupModuleLoader: true,
moduleLoaderConfig: {
paths: {
"Scripts": "scripts"
}
}
});

// Wait for the SDK to be initialized
VSS.ready(function () {
require(["Scripts/app"], function (app) { });
});
</script>
<h1>TypeScript HTML App</h1>

<div id="content"></div>
</body>
</html>

Update App.ts

In your App.ts file remove the window.onload function and replace it with it's body so your App.ts file will look like below

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;

constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}

start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}

stop() {
clearTimeout(this.timerToken);
}

}

var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();

Run App

Running your app with ctrl + F5 you will get a blank app that does nothing Smile

TypeScript_HTML_App_-_Internet_Explorer_2015-06-18_20-57-12

Changed the url to point to the SSL version of your site just to make sure everything is working

2015-06-18_20-59-24

Our App is now complete Open-mouthed smile

Install your extension

If you have signed up for the private preview you should see a tab in the admin section of your account called Extensions like so

2015-06-18_21-01-57

Click Install, and then Browse 

2015-06-18_21-06-49
browse for your extension.json file
Open_2015-06-18_21-07-59

Click Open and then OK

2015-06-18_21-11-56

Your extension is now installed

2015-06-18_21-17-24

View it on VSO

Go to a team project home page and you should now see a Time hub, click on it

image

Once you land here you will the time Smile

image

That's 1 extension in the bag but having this run on your local machine is probable not want you would want because nobody else can see it.

Publishing you app

You could buy an SSL certification but that costs a lot and most people don't have that kind of money laying around for fun apps and extensions so we'll turn to Azure. We will now right click on our project and click publish

2015-06-18_21-45-47

If you setup an Azure site already you can import the publish settings but I haven't so I'm going to click on Microsoft Azure Web Apps

Publish_Web_2015-06-18_21-46-16

and then click on New (again if you have a site already you can select it in this list)

Select_Existing_Web_App_2015-06-18_21-47-26

Select a name and click Create

Create_Web_App_on_Microsoft_Azure_2015-06-18_21-48-31

it will now take a small bit to setup your azure resource

Create_Web_App_on_Microsoft_Azure_2015-06-18_21-49-28

and then auto magically configure everything you need Smile, click Publish

Publish_Web_2015-06-18_21-49-58

After the publish is finish your site will launch

TypeScript_HTML_App_-_Internet_Explorer_2015-06-18_21-51-30

Something that you will notice is that this is http but and not https as we said earlier we require. So let's see what happens if we add a s in there Smile

TypeScript_HTML_App_-_Internet_Explorer_2015-06-18_21-53-07

Everything still works Open-mouthed smile.

Last bit of manifest changes

Now that we have a publicly accessible website running on https (for FREE) we can take that url and replace what we currently have in our manifest so it will now look like this

{
"namespace": "VSO-Time-Ticker",
"version": "0.0.2",
"name": "Time Ticker",
"description": "A simple extension for Visual Studio Online of a Time Ticker",
"provider": {
"name": "Gordon Beeming"
},
"baseUri": "https://vso-hello-world.azurewebsites.net/",
"icon": "https://vso-hello-world.azurewebsites.net/images/some-icon.png",
"contributions": {
"vss.web#hubs": [
{
"id": "time",
"name": "Time",
"groupId": "home",
"order": 22,
"uri": "index.html",
"usesSdk": true,
"fullPage": false
}
]
}
}
Re-install your extension

2015-06-18_21-56-38

and refresh your extension in VSO

image

You will notice now that it obviously still works Smile, if you close Visual Studio and it still works you know it working Smile and I suppose you can check fiddler for where it's reading the files from.

Links

For more info on VSO Extensions visit http://aka.ms/vsoextensions.

A pretty neat getting started post is also on that site at https://www.visualstudio.com/en-us/integrate/extensions/get-started/visual-studio.

Microsoft has a project out on GitHub as well that is quite advanced in the API's that it uses and can be found at https://github.com/Microsoft/vso-team-calendar.

If you want a light overview over everything then you can get their VSO Extension Samples out on GitHub as well using the link https://github.com/Microsoft/vso-extension-samples.

Complete Sample code for this post is also out on Github at https://github.com/Gordon-Beeming/VSO-Time-Ticker