Js Script
Css
C#
<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- 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; } }