← Back to overview
July 17, 2013 · Javascript Management Portal

Extending the Windows Azure Management Portal with your own Javascript bookmarklets

Today I want to share a little trick I've been using for a while now to automate or improve some things in the Windows Azure Management Portal. Let's start with the beginning. As you all probably know the Management Portal is a Single Page Application which relies on Javascript which talks to a REST API (let's assume these are simply Actions in an ASP.NET MVC application returning a JsonResult).

Now with Fiddler you can easily take a look at what happens when you browse the portal. In order to see this you'll need to activate the "Decrypt HTTPS traffic" option in Tools, Fiddler Options, HTTPS.

As you can see I'm able to see which data is sent to the portal and how the data comes back. This is a basic functionality of Fiddler – nothing new here – but it's a nice starting point if we want to start customizing the portal.

In this example you can see that the portal made a request to /MonetaryCredit and the response contained a JSON array with credit information for all my MSDN subscriptions where the monthly credit option is enabled. This is a good example to show why and how we could customize the portal.

If I follow the announcement on Scott Guthrie's blog I should see something like this:

But when I look at the portal I don't see this credit status notification. This is because the notification is only visible if you're running out of credits. Well that's a nice feature, but I want to be able to check my credit even if I've got plenty of credits left.

Time for some Javascript

Now thanks to Fiddler we know that calling /MonetaryCredit returns some Json with all the information we need regarding the credit status. With this info I could write a little bit of code that takes this data and renders it in a table:

$.post('/MonetaryCredit', function(data) {
   var table = $('<table />')
      .attr('style', 'border: 1px solid black; border-collapse: collapse; width: 100%')
      .append($('<thead />').attr('style', 'font-weight: bold')
      .append($('<td>Subscription</td><td>TotalCredit</td><td>Remaining Credit</td><td>Burn Rate</td><td>Might Run Out</td>')));

   $.each(data, function(idx, sub) {
      if (sub.MonetaryCreditInfo != null) {   
          table.append($('<tr />')
                .attr('style', 'border: 1px solid black;')
                .append($('<td />').text(sub.SubscriptionName))
                .append($('<td />').text(sub.MonetaryCreditInfo.RemainingCreditDisplay))
                .append($('<td />').text(sub.MonetaryCreditInfo.TotalCreditDisplay))
                .append($('<td />').text(sub.MonetaryCreditInfo.BurnRateDisplay))
                .append($('<td />').text(sub.MightRunOut)));

   $('<div title="My Subscriptions - Credit" />')
       .dialog({width: 600,height:250});

The code is pretty straightforward. Using the IE Developer Tools you can easily write your own "extensions" and test them on the fly. When you have the portal open in IE, simply press F12 to bring up the Developer Tools. Now go to the Console tab and press the arrows in the lower right corner to enable Multi line mode. To test this you could paste my code and press the Run button:

Wait a few seconds for the call to complete and voila, here is the result:

Since your code runs within the same window as the portal you don't need to worry about authentication when making requests to the portal.

Oh and before I forget, you can also use jQuery and jQuery UI because the portal also uses those libraries. This makes it really easy to execute Ajax calls or use some nice controls like the jQuery UI Dialog.

Linking your code to a button

Now I want to see the status of my credit every now and then, but I don't want to start the Developer Tools each time to run that Javascript code. That's why it's actually nicer to save your code as a bookmarklet. I always start out by minifying my code with a page likehttp://jscompress.com/. This will minify your script to a single line of code. Once you've done that simply create a new bookmark and type the following as your url: javascript:<your code>

For my example this would be:

javascript:$.post("/MonetaryCredit",function(e){var t=$("<table />").attr("style","border: 1px solid black; border-collapse: collapse; width: 100%").append($("<thead />").attr("style","font-weight: bold").append($("<td>Subscription</td><td>TotalCredit</td><td>Remaining Credit</td><td>Burn Rate</td><td>Might Run Out</td>")));$.each(e,function(e,n){if(n.MonetaryCreditInfo!=null){t.append($("<tr />").attr("style","border: 1px solid black;").append($("<td />").text(n.SubscriptionName)).append($("<td />").text(n.MonetaryCreditInfo.RemainingCreditDisplay)).append($("<td />").text(n.MonetaryCreditInfo.TotalCreditDisplay)).append($("<td />").text(n.MonetaryCreditInfo.BurnRateDisplay)).append($("<td />").text(n.MightRunOut)))}});$(‘<div title="My Subscriptions – Credit" />').append(t).dialog({width:600,height:250})})  

The result, a nice little button which shows the status of my credit:

As you can see, the sky is the limit! If you're creating your own "extensions", don't hesitate to share them in the comments of this post!


  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket
Comments powered by Disqus