Glimpse Heads-Up Display released

The Glimpse team, in conjunction with many members of the community, is proud to announce Glimpse Heads-Up Display (HUD) Рa mini dashboard that pulls out the most important details about a request and displays it right in the bottom of your page. This release signals the biggest change to Glimpse since going live just over 2 years ago. We are very excited about this release and hope that it will help change the way you do development.

HUD Overview

Overview

Traditionally, when you are working on a project, you don’t notice problems in your system until you have finished development and moved onto another task. Additionally, it has been a challenge to know that what you have just developed is acting the way you expect it to operate – i.e. which action and controller did I just hit? HUD changes this. HUD provides you with the information you need, all time time, without the need for you to go and seek it. HUD is the notification center for your application’s pulse and shows you what is happening as its is happening.

HUD Detail

History

HUD was originally conceived around a month after Glimpse originally went live (around 2 years ago). Since then most of the work we have done has been focused on trying to get the formula right and access to the data we need. A working prototype of what we have here was up and running over 6 months ago, but we took our time refining it, in line with the feedback we’ve been getting.

v0.1 Concept
middlehud

v0.5 Refinement
oldHUD

v1.0 Final
HUD Final Version

We always knew that a first impressions where key. We have tried very hard to create a vision of simplicity, where the UI gets out of the way and the key data points stand out. We also spent time trying to work out what data is the most important, and what data you want to follow you from page to page. HUD is designed for the always-on use case.

Breakdown

HUD is broken down into 3 main sections. This is designed to try and follow the flow of how your request is handled during its lifecycle.

HTTP HOST AJAX
Ajax Preview Host Preview HTTP Preview

HTTP

This is everything to do with the request. Here we break it down into a few key points:
HUD HTTP

  • Request: Total request time from click to DOM ready
  • Wire: Total time on the network – including DNS lookup, sending of request, receiving response.
  • Server: Total time on the server
  • Client: Total time once client kicks in to dom ready

 
Beyond this, the popup provides a few additional pieces of of information:

HUD HTTP Popup

  • Graph: Shows the relative time that each part of the request takes
  • Host: Server that responded to the request.
  • Server: Principle that is currently logged in for this session

HOST

Once the request hits the server, the Host section shows the key points. This aims to merge the most important data points on the server in a meaningful, related way. The best example of this is the contextual linking of SQL queries to the actions that caused these events to occur. The breakdown is:
HUD Host

  • Action: How long root Action took to execute
  • View: How long root View took to render
  • Controller/Action: Name of the root Controller and Action
  • DB Queries: Total query duration and number of all SQL queries

 
Beyond this, the popup provides a few additional pieces of of information:

HUD Host Popup

  • Server: Total time on the server
  • DB Connections: Total query duration and number of all SQL queries

Above and beyond this, we show a listing of the core events that occur on the server:

  • Category: The type of event that was recorded
  • Description: Generally the name of the event i.e. Controller and action that caused the event
  • Duration: Total time the event took to execute, less the time of any direction child events shown
  • From start: How far into the request did the event occur
      In this listing we also show any SQL queries that belong to a given event and the ability to show any trivial events that occur.

AJAX

Lastly, is the AJAX section, which shows high-level details of any requests that your page makes. Without opening any other tool, you will instantly know when a request is made. You will also know if any errors occurred in processing the request. This is the breakdown:
HUD Ajax

  • Count: Total Ajax requests detected on this page
  • Details: Last 2 requests that have occurred

 
In addition to this, the popup shows the last
6
requests to have occurred as well as a few additional pieces of of information:
HUD Ajax Popup

  • URI: URI that the request used to make the request
  • Duration: Time from when the request left the browser to when the response was received
  • Size: Response payload size
  • Method: Type that the request made
  • Status: Status code that the response object has*
  • Content Type: Type that was received
  • Time: Time that the request was made
      *Note, in some caching scenarios, the browser passes a 200 response to the JS object even though the browser received a 304 from the browser.

Future

Despite everything you have seen here there is more to come. We are keen to see what you think of the new dynamic and where you want to take it. We want to know what you think and what data you find most valuable. We also want to start experimenting with bringing data from other data sources into Glimpse. If its proved that HUD is a mechanism by which we can easily consume important data, there is no reason the data has to be restricted to what Glimpse gathers on the server.

Additionally, we believe it’s important moving forwards to provide alerts when your application reaches different thresholds or conditions. Imagine you can set when a maximum number of queries is crossed, or be notified when cache misses occur.

Best place to give feedback is to either directly to myself @anthony_vdh or @nikmd23, or on our issues list.

We believe a whole new world of possibilities is opened with the arrival of HUD, and we will need your help in getting us there.

But wait there is more

Above and beyond everything here, wider Glimpse has had a facelift. We thought it was about time and that you might appreciate a bit of sexy being introduced. Welcome to the new Glimpse :D

UI Preview Environment

I’m sure you’ve already noticed that we have tried to simplify the overall visuals. Most notably we have removing rounded corners and gradients, and simplified the color pallet. Over time expect some usability changes to come as we continually seek to improve the experience that you have.

Here a few more samples of what to expect:

Execution

SQL

Timeline

Where to get it

As always the best way to get Glimpse is via Nuget. Depending on your needs, here are the links to the various core packages:

Thanks!

This release wouldn’t have been possible without the help and support of the community. Every day we get to work on Glimpse, a dream for us, and it’s your continued support that helps make this happen. Additionally I want to say a huge thanks to Red Gate in believing in our vision and helping us bring this see the light of day.

Enjoy!

24 thoughts on “Glimpse Heads-Up Display released

  1. Pingback: The Morning Brew - Chris Alcock » Afternoon Tea - 11th June 2013 - Open Source Projects I Like: Glimpse

  2. Pingback: Damian Brady's Blog » Glimpse Heads Up Display released

  3. sridhar

    Just by seeing screenshots I thought this tool is devloped by Google… The icon resembles google logo.
    Nice work to check. Thanks.

    Reply
    1. avanderhoorn Post author

      Not sure why you are seeing white space – I think it might be able style on your page (can you check this). Also right now some of the mouse overs are thin on extra data (http being the main one). Look for more stuff to be coming in this space in the future.

      Reply
  4. Joe Brinkman

    Another great release. Love the new HUD. Now we just need to be able to plugin our own HUD extensions. Kinda bummed that there is no host HUD panel for WebForms, but I am sure that is just temporary.

    Reply
    1. avanderhoorn Post author

      Yep its only temporary. As soon as we get more web forms stuff up and running, HUD support will go out with it

      Reply
  5. Pingback: Weekly Web Roundup - June 14 2013 Don't Believe The Type

  6. Pingback: Next up for HUD? | Glimpse Blog

  7. Alan Parr

    The HUD looks really good but I can’t see how to get the full Glimpse interface up now. It used to be a case of clicking on the logo but that is no longer clickable.
    I suspect I’m being stupid here so any pointers in the right direction would be greatly appreciated.

    Reply
  8. Matt Thompson

    How would you go about using Glimpse over WCF? So to retrieve statistics from the WCF layer (including EF stats) and return them to the Web Application Layer and then obviously to the UI layer?

    Reply
  9. Pingback: Weekly links

  10. Pingback: Glimpse for Sitecore | Developer Tales

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>