Setting User Expectations - Part 2

 In Part 1 of this series, we discussed how to create a QoS indicator to inform the user of their expected experience before they even logon by making a few simple changes to the NetScaler. In part 2 of the series, we will add a graphical representation of the results. The strength of the connection will be represented by the number of bars in the graphic - the more bars, the stronger the connection.

The first step will be to upload the bar images which may be found here:
https://samjacobs.sharefile.com/d-s15afc8842d044e8cb6f0da39dc6e0381

into the following directory:

/var/netscaler/logon/themes/QoS/custom_media.

Next, we need to add some css to the file: /var/netscaler/logon/themes/QoS/css/theme.css.

Insert the following:

#QoSbars {
   display:table-cell;   
   min-width:70px;
   height:40px;
}

.FourBars, .ThreeBars, .TwoBars, .OneBar, .NoBars {
   min-width:70px;
   height:40px;
   background-repeat: no-repeat;
}

.FourBars {
   background-image: url("../custom_media/FourBars.png");
}
.ThreeBars {
   background-image: url("../custom_media/ThreeBars.png");
}
.TwoBars {
   background-image: url("../custom_media/TwoBars.png");
}
.OneBar {
   background-image: url("../custom_media/OneBar.png");
}
.NoBars {
   background-image: url("../custom_media/NoBars.png");
}

The above changes need to be made to the primary NetScaler node and will be replicated to the secondary node.

The final changes need to be made to the file: /var/logon/LogonPoint/tmindex.html.

After making a backup, open the file and look for the following code (that we added in Part 1):

<div id="QoSinfo">

   <div id="QoStext">&nbsp;</div>

</div>

Add the following line after the QoSinfo <div>:

<div id="QoSbars" class="ThreeBars">&nbsp;</div>

Then, scroll to the bottom of the file to find where you added the JavaScript code, and replace the entire <script> section that you added with the below. You can customize your ranges by simply changing the values in the aLatencyRanges array below. The default below says that anything 50 ms. or below is considered Excellent, 51-100 ms. is Very Good, 101-130 ms is Good, 131-200 is Fair, and 200+ ms. is Poor.

<script>

    // QoS latency ranges - max value for range, class name for graphic, legend

    var aLatencyRanges = 

        [[50,"FourBars","Excellent"],

         [100,"ThreeBars","Very Good"],

         [130,"TwoBars","Good"],

         [200,"OneBar","Fair"],

         [99999,"NoBars","Poor"]];

    

    var testImgUrl = "https://" + location.hostname + "/vpn/images/Tick32.gif";

    

    //alert ("Using image: " + testImgUrl);

    //This method calculates the time it takes for the image to load 

    function checkLatency(url, callback) {

        //alert("checkLatency()...");

        var t=[], n=2, tcp, rtt;

        var ld = function() {

           t.push(+new Date);

           if(t.length > n) {

             rtt=t[2]-t[1];

             callback(rtt);

           }

           else {

             var img = new Image;

             img.onload = ld;

             img.src=url+"?" + Math.random() + '=' + new Date;

           }

        };

            

        ld();

    }

    

    function displayQoS(latency) {

        var QoSbars = document.getElementById("QoSbars");

        var QoStext = document.getElementById("QoStext");

    

        for (i=0; i<aLatencyRanges.length;i++) {

            if(latency<=aLatencyRanges[i][0]) {

                var QoSclass = aLatencyRanges[i][1];

                var QoSrange = aLatencyRanges[i][2] + ' (' + latency + ' ms.)';

    

                QoSbars.className = QoSclass;

                QoStext.innerHTML = 'Connection Strength:<br>'+QoSrange; 

    

                break;

            }

        }

    }

        

    function runQoS() {

       checkLatency(testImgUrl, displayQoS);

    }

    runQoS();

    // end of QoS modifications

    </script>

Now when you browse to your logon page, in addition to having the connection strength is milliseconds, you will also have the strength displayed graphically.