<script src="../../Scripts/handlebars-v1.3.0.js"></script>

 <script id="service-status-details-template" type="text/x-handlebars-template">

        {{#each values}}

        <div class="top-buffer-10">

            <div class="pull-left">{{ServiceName}}</div>

            <span style="margin-left: 15px;"> </span>

            <div class="pull-right">

                <span class="service-details-time">{{TimeDurationAgo}} AGO</span>

                {{#if IsUp}}

                <span class="glyphicon glyphicon-ok-sign" style="color: #5cb85c;"></span>

                {{else}}

                <span class="glyphicon glyphicon-exclamation-sign" style="color: #ff4f28;"></span>

                {{/if}}

            </div>

        </div>

        {{/each}}

    </script>

    <div style="z-index: 10;display: none;" id="service-status-details">

    </div>

    <a id="service-status" style="margin-left: 30%;" data-placement="bottom" href="#"></a>

    <script>

        var serviceStatusUrl = '@Url.Action("GetMonitoringServicesStatus")';

        $(document).ready(function () {

            $("#service-status").popover(

            {

                html: true,

                content: function () {

                    return $('#service-status-details').html();

                }

            });

            refreshServiceStatus();

            //window.setInterval(refreshServiceStatus, 5 * 60 * 1000 /*frequency set to 5 mins*/);

        });

        function refreshServiceStatus() { /*should be change to set interval*/

            $.ajax({

                type: 'POST',

                url: serviceStatusUrl, /*this value is set in _monitoringServices.cshtml */

                success: function (data) {

                    applyToJsTemplate("service-status-details", "service-status-details-template", data);

                    if (!data.isOk) {

                        $("#service-status").attr("class", "btn glyphicon glyphicon-exclamation-sign");

                        $("#service-status").css("color", "#ff4f28");

                    } else {

                        $("#service-status").attr("class", "btn glyphicon glyphicon-ok-sign");

                        $("#service-status").css("color", "#5cb85c");

                    }

                },

                dataType: "json"

            });

        }

        function applyToJsTemplate(layoutId, templateId, data) {

            $("#" + layoutId).html(Handlebars.compile($("#" + templateId).html())(data));

        }

    </script>

Css

<style>

        .popover-content {

        background-color: #dadada;

    }

    .service-details-time {

        color: #adadad;

    }

    .service-details-name {

        color: #5d5d5d;

    }

    .popover {

        max-width: 100%;

    }

</style>

C#

  public JsonResult GetMonitoringServicesStatus()

        {

            if (DateTime.Now.Second % 2 == 0)

            {

                var serviceList = Builder<MonitoringServicesModel>.CreateListOfSize(5)

                    .TheFirst(1).With(m => m.ServiceName, "Active Directory").With(m => m.IsUp, false).With(m => m.TimeDurationAgo, "11 MINS")

                    .TheNext(1).With(m => m.ServiceName, "aZure.Microsoft.com").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "5 MINS")

                    .TheNext(1).With(m => m.ServiceName, "aZure Preview Portal").With(m => m.IsUp, false).With(m => m.TimeDurationAgo, "16 MINS")

                    .TheNext(1).With(m => m.ServiceName, "Management Portal").With(m => m.IsUp, false).With(m => m.TimeDurationAgo, "31 MINS")

                    .TheNext(1).With(m => m.ServiceName, "Network Infrastructure").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "1 MINS")

                    .Build();

                var allUp = serviceList.All(s => s.IsUp);

                return Json(new { isOk = allUp, values = serviceList }, JsonRequestBehavior.AllowGet);

            }

            else

            {

                var serviceList = Builder<MonitoringServicesModel>.CreateListOfSize(5)

                   .TheFirst(1).With(m => m.ServiceName, "Active Directory").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "1 MINS")

                   .TheNext(1).With(m => m.ServiceName, "aZure.Microsoft.com").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "26 MINS")

                   .TheNext(1).With(m => m.ServiceName, "aZure Preview Portal").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "16 MINS")

                   .TheNext(1).With(m => m.ServiceName, "Management Portal").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "5 SECONDS")

                   .TheNext(1).With(m => m.ServiceName, "Network Infrastructure").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "1 MINS")

                   .Build();

                var allUp = serviceList.All(s => s.IsUp);

                return Json(new { isOk = allUp, values = serviceList }, JsonRequestBehavior.AllowGet);

            }

        }

  public class MonitoringServicesModel

    {

        public string ServiceName { get; set; }

        public string TimeDurationAgo { get; set; }

        public bool IsUp { get; set; }

    }