Last active
September 28, 2016 07:05
-
-
Save filimo/08197362cbc3eb5cc18258674918ad44 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function main() { | |
| var DevicesConnector = function() { | |
| return new Common.Connector("Handlers/JSonHandler.ashx/Devices/"); | |
| } | |
| var params = { | |
| chartType: $(document).getUrlParam("chartType"), | |
| baseCUID: $(document).getUrlParam("CUID"), | |
| CUID: $(document).getUrlParam("CUID"), | |
| hash: document.location.hash.replace("#", ""), | |
| url: $(document).getUrlParam("url"), | |
| startDate: Number($(document).getUrlParam("startTime")), | |
| isCompare: $(".compareMenu").size() != 0, | |
| compareData: [], | |
| activeLoad : [], | |
| sortedList:[], | |
| compareDevices:$("#compareTask").size() == 0 | |
| }; | |
| if (params.chartType == "ResponseTime" | |
| || params.chartType == "ResponseTime_ByLocation" | |
| || params.chartType == "ResponseTime_ByTask" | |
| || params.isCompare) | |
| $(".outlier").show(); | |
| else $(".outlier").hide(); | |
| function filterOutlier() { | |
| var useOutlier = $("#outlier").is(":checked"); | |
| function removeElement(ar, index) { | |
| ar.splice(index, 1); | |
| } | |
| function isOutlier(val, avr, stdev) { | |
| return Math.abs(val[1] - avr) > 2*stdev; | |
| } | |
| var series = $.extend(true, [], params.plotData); | |
| if (useOutlier) { | |
| var max = 0; | |
| var min = null; | |
| var maxAvr = 0; | |
| var minAvr = null; | |
| var maxLim = null; | |
| var minLim = null; | |
| var mint = null; | |
| var maxt = null; | |
| for (var i = 0; i < series.length; i++) { | |
| var points = series[i].data; | |
| if (points.length && points[0].info) { | |
| if(mint=-null) | |
| { | |
| maxt = series[i].Average + series[i].STDDev*2; | |
| mint = series[i].Average - series[i].STDDev*2; | |
| } | |
| else | |
| { | |
| var tt = series[i].Average + series[i].STDDev*2; | |
| if (tt>maxt) maxt = tt; | |
| tt = series[i].Average - series[i].STDDev*2; | |
| if (tt<mint) mint = tt; | |
| } | |
| } | |
| } | |
| maxLim = maxt; | |
| minLim = mint; | |
| for (var i = 0; i < series.length; i++) { | |
| var points = series[i].data; | |
| if (points.length && points[0].info) { | |
| var avr = series[i].Average; | |
| for (var j = 0; j < points.length; j++) { | |
| if (minLim > points[j][1] || maxLim < points[j][1]) { | |
| removeElement(points, j--); | |
| } else { | |
| if (max < points[j][1]) max = points[j][1]; | |
| if (min === null) min = points[j][1]; | |
| else if (min > points[j][1]) min = points[j][1]; | |
| } | |
| } | |
| } | |
| } | |
| series.maxY = max; | |
| series.minY = min; | |
| } else { | |
| var max = 0; | |
| var min = null; | |
| for (var i = 0; i < series.length; i++) { | |
| var points = series[i].data; | |
| if (points.length && points[0].info) { | |
| for (var j = 0; j < points.length; j++) { | |
| //if (points && points[i] && points[i][j] && points[i][j]) { | |
| if (max < points[j][1]) max = points[j][1]; | |
| if (min === null) min = points[j][1]; | |
| else if (min > points[j][1]) min = points[j][1]; | |
| //} | |
| } | |
| } | |
| } | |
| series = params.plotData; | |
| series.maxY = max; | |
| series.minY = min; | |
| } | |
| new Plot(series, true); | |
| } | |
| (function outlier() { | |
| var el = $("#outlier"); | |
| el.click(filterOutlier); | |
| })(); | |
| function setStddev(av, st) { | |
| /*if (typeof (av) !== "undefined" && typeof (st) !== "undefined") { | |
| params.average = av; | |
| params.stddev = st; | |
| $("#outlier").removeAttr("disabled"); | |
| } else { | |
| params.average = null; | |
| params.stddev = null; | |
| $("#outlier").attr("disabled", "disabled"); | |
| }*/ | |
| } | |
| function anyWait() { | |
| for (var i in params.activeLoad) { | |
| if (params.activeLoad[i]) | |
| return true; | |
| } | |
| return false; | |
| } | |
| function waitOff() { | |
| for (var i in params.activeLoad) { | |
| delete params.activeLoad[i] | |
| } | |
| waiting(false); | |
| } | |
| if (params.isCompare) { | |
| params.tasks = { | |
| init: function() { | |
| $("#compareDevice").change(params.tasks.load); | |
| $("#compareTask").change(function() { | |
| params.devices.isContains(); | |
| }) | |
| params.tasks.load(); | |
| }, | |
| load: function() { | |
| $("#compareTask").hide(); | |
| $("#addChart").hide(); | |
| var dev = $("#compareDevice").val(); | |
| function on(data) { | |
| if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
| error(data); | |
| return; | |
| } | |
| $("#compareTask").empty(); | |
| var html = ""; | |
| var newData = []; | |
| for (var i in data) { | |
| if (data[i].Task_ID != defTaskID) | |
| newData.push(data[i]); | |
| } | |
| data = newData; | |
| if (data.length == 0) { | |
| $("#compareTask").html("<option>No tasks</option>"); | |
| } else { | |
| for (var i in data) { | |
| if (!data[i].Task_Name) data[i].Task_Name = "Task"; | |
| html += "<option value=" + data[i].Task_ID + ">" + data[i].Task_Name + "</option>"; | |
| } | |
| $("#compareTask").html(html); | |
| $("#addChart").show(); | |
| } | |
| $("#compareTask").show(); | |
| params.devices.isContains(); | |
| } | |
| DevicesConnector().Post("TasksOf", { Site_Seq_ID: dev }, on); | |
| } | |
| } | |
| params.devices = { | |
| cache: new Array(), | |
| actionState: true, | |
| isContains: function() { | |
| params.devices.switchButton(!params.devices.isinchart()); | |
| }, | |
| switchButton: function(state) { | |
| if (params.devices.actionState == state) return; | |
| params.devices.actionState = state; | |
| $("#addChart").val(state ? "Add" : "Remove"); | |
| $("#addChart").unbind("click"); | |
| if (state) { | |
| $("#addChart").click(params.devices.addAction); | |
| } else { | |
| $("#addChart").click(params.devices.removeActive); | |
| } | |
| }, | |
| isinchart: function() { | |
| var devId = Number(params.compareDevices ? $("#compareDevice").val() : $("#compareTask").val()); | |
| return !!params.devices.cache[devId]; | |
| }, | |
| addDevice: function(deviceId, baseCUID) { | |
| params.activeLoad[deviceId] = true; | |
| waiting(true); | |
| params.devices.changeDevice(baseCUID, deviceId, function(cuid) { | |
| cuid = cuid.CUID; | |
| params.devices.getUID(cuid, function(processData) { | |
| params.devices.wait(processData, function(chartParams) { | |
| params.devices.getChartData(chartParams, function(chartData) { | |
| var pts = []; | |
| $.each(chartData.Series[0].Points, function(i, key) { | |
| var el = [key.X, key.Y]; | |
| el.info = key; | |
| pts.push(el); | |
| }) | |
| var newData = { Device: deviceId, label: chartData.Series[0].LegendName, data: pts, color: undefined, tooltip: params.plotData[0].tooltip, Average : chartData.Average, STDDev : chartData.STDDev }; | |
| if (!params.compareDevices) { | |
| newData.label = newData.label; | |
| } | |
| params.plotData.push(newData); | |
| params.devices.sort(); | |
| new Plot(params.plotData); | |
| filterOutlier(); | |
| params.devices.isContains(); | |
| params.activeLoad[deviceId] = false; | |
| waiting(false); | |
| }) | |
| }) | |
| }) | |
| }) | |
| }, | |
| sort: function() { | |
| function _sort(a, b) { | |
| if (!a.Device) | |
| return -1; | |
| if (!b.Device) | |
| return 1; | |
| var aInd = sortList[a.Device]; | |
| var bInd = sortList[b.Device]; | |
| if (aInd > bInd) return 1; | |
| else if (aInd < bInd) return -1; | |
| else return 0; | |
| } | |
| var sortList = []; | |
| var ind = 0; | |
| for (var i in params.sortedList) { | |
| sortList[params.sortedList[i]] = i + 1; | |
| } | |
| params.plotData = params.plotData.sort(_sort); | |
| }, | |
| removeActive: function() { | |
| var devId = Number(params.compareDevices ? $("#compareDevice").val() : $("#compareTask").val()); | |
| params.devices.removeDevice(devId); | |
| }, | |
| removeDevice: function(deviceId) { | |
| var newCache = []; | |
| var newPlotData = []; | |
| for (var i in params.devices.cache) { | |
| if (i != deviceId) | |
| newCache[i] = params.devices.cache[i]; | |
| } | |
| for (var i in params.plotData) { | |
| if ((!params.plotData[i].Device || params.plotData[i].Device != deviceId)) { | |
| if (isNaN(Number(i))) | |
| newPlotData[i] = params.plotData[i]; | |
| else | |
| newPlotData.push(params.plotData[i]); | |
| } | |
| } | |
| params.plotData = newPlotData; | |
| params.devices.cache = newCache; | |
| Plot(params.plotData); | |
| params.devices.isContains(); | |
| }, | |
| changeDevice: function(CUID, newDevice, callback) { | |
| if (params.devices.cache[newDevice] && params.devices.cache[newDevice].CUID) { | |
| callback({ CUID: params.devices.cache[newDevice].CUID }); | |
| } | |
| else { | |
| if (params.compareDevices) { | |
| if ( sitePlatform == "BrowserView" || sitePlatform == "UserView" || sitePlatform == "MetricsView") { | |
| function __on(data) { | |
| if (data && data.length > 0) { | |
| var tid = data[0].Task_ID; | |
| Connector().Post("ChangeTask", { CUID: unescape(CUID), newTask: tid }, _on); | |
| } else { error(); } | |
| } | |
| DevicesConnector().Post("TasksOf", { Site_Seq_ID: $("#compareDevice").val() }, __on); | |
| } else { | |
| Connector().Post("ChangeDevice", { CUID: unescape(CUID), newDevice: newDevice }, _on); | |
| } | |
| } | |
| else | |
| Connector().Post("ChangeTask", { CUID: unescape(CUID), newTask: newDevice }, _on); | |
| } | |
| function _on(data) { | |
| if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
| error(data); | |
| return; | |
| } | |
| params.sortedList.push(newDevice); | |
| params.devices.cache[newDevice] = {}; | |
| params.devices.cache[newDevice].CUID = data.CUID; | |
| callback(data); | |
| } | |
| }, | |
| update: function() { | |
| for (var i in params.devices.cache) { | |
| if (!isNaN(Number(i))) { | |
| params.devices.addDevice(i); | |
| } | |
| } | |
| }, | |
| getChartData: function(_data, callback) { | |
| var basedata = { | |
| chartType: params.chartType | |
| } | |
| var data = $.extend(data, _data); | |
| Connector().Post("GetChart", data, _on); | |
| function _on(data) { | |
| if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
| error(data); | |
| return; | |
| } | |
| callback(data); | |
| } | |
| }, | |
| getUID: function(CUID, callback) { | |
| var data = { | |
| CUID: unescape(CUID), | |
| UID: "", | |
| ResponseFilterUri: null, | |
| chartType: params.chartType | |
| }; | |
| if (params.filter) { | |
| data.Start = params.filter.Start; | |
| data.End = params.filter.End; | |
| } else if (params.devices.cache[CUID]) { | |
| callback({ CUID: CUID, UID: params.devices.cache[CUID] }); | |
| return; | |
| } | |
| Connector().Post("IsInProcess", data, _on); | |
| function _on(data) { | |
| if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
| error(data); | |
| return; | |
| } | |
| params.devices.cache[data.CUID] = data.UID; | |
| callback({ CUID: data.CUID, UID: data.UID }); | |
| } | |
| }, | |
| wait: function(_data, callback) { | |
| if (!_data || (typeof _data.Error !== "undefined" && _data.Error != "")) { | |
| error(data); | |
| return; | |
| } | |
| var basedata = { | |
| chartType: params.chartType | |
| } | |
| var data = $.extend(data, _data); | |
| Connector().Post("IsInProcess", data, check); | |
| function check(data) { | |
| if (!_data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
| error(data); | |
| return; | |
| } | |
| if (data.IsDone) { | |
| callback({ CUID: data.CUID, UID: data.UID }); | |
| } else if (data.IsInProcess) { | |
| setTimeout(function() { Connector().Post("IsInProcess", data, check); }, 3000); | |
| } | |
| } | |
| }, | |
| addAction: function() { | |
| params.devices.addDevice(params.compareDevices ? Number($("#compareDevice").val()) : Number($("#compareTask").val()), params.CUID); | |
| }, | |
| init: function() { | |
| $("#addChart").click(params.devices.addAction); | |
| if (params.compareDevices) $("#compareDevice").change(function() { | |
| params.devices.isContains(); | |
| }) | |
| } | |
| }; | |
| if (!params.compareDevices) | |
| params.tasks.init(); | |
| params.devices.init(); | |
| } | |
| function error(msg) { | |
| $.colorbox({ html: $("<div>").css('padding', '10px').html(msg?(msg.Error? msg.Error : msg):"<center>Please, reload page and try again<br><input type='button' value='Reload Page' style='margin-top:20px;' onclick='javascript:location.reload(true);'/></center>"), title: "Server Error" }); | |
| } | |
| var Connector = function() { | |
| var onStart = function() { | |
| if(this.data.CUID === undefined) this.data.CUID = params.CUID; | |
| }; | |
| return new Common.Connector("Handlers/JSonHandler.ashx/ChartAdapter/", {onStart: onStart}); | |
| } | |
| var filter = new Filter(), | |
| wholeBtn = $("#whole"); | |
| var data = {ResponseFilterUri: params.url}; | |
| if(params.startDate !== undefined) { | |
| data.Start = params.startDate - 1000 * 60 * 60 * 24 * 7; | |
| data.End = params.startDate ; | |
| $("#startDate").val($.formatDate(new Date(data.Start), "MM/dd/yyyy hh:mm:ss a")); | |
| $("#endDate").val($.formatDate(new Date(data.End), "MM/dd/yyyy hh:mm:ss a")); | |
| } | |
| new GetChart(data); | |
| var oldShowStripValue = true; | |
| function StripVisible() { | |
| return $($.find("input:radio[name=getParams]:checked")).val() === "true"; | |
| } | |
| function ActualUrl() { | |
| return unescape(StripVisible() ? params.url : params.url.split('%3F')[0] + '*') | |
| } | |
| function toUTCString(dateString) { | |
| var d = new Date(Number(dateString)); | |
| return d.toUTCString().replace(" GMT", ""); | |
| } | |
| function setRanges(filter) { | |
| var data = { | |
| Start: filter.from, | |
| End: filter.to, | |
| ResponseFilterUri: filter.url | |
| }; | |
| params.filter = data; | |
| new GetChart(data); | |
| whole(); | |
| } | |
| function whole() | |
| { | |
| wholeBtn.filter(":not(visible)") | |
| .data("hash", document.location.hash) | |
| .unbind("click") | |
| .click(function() { | |
| document.location.hash = $(this).hide().data("hash"); | |
| params.CUID = params.baseCUID; | |
| new GetChart(); | |
| delete params.filter; | |
| }); | |
| } | |
| function ToolTip() { | |
| var showTooltip = function(x, y, contents) { | |
| $('<div id="tooltip">' + contents + '</div>').css({ | |
| position: 'absolute', | |
| display: 'none', | |
| top: y + 5, | |
| left: x + 5, | |
| border: '1px solid #fdd', | |
| padding: '2px', | |
| 'background-color': '#fee', | |
| opacity: 0.80 | |
| }).appendTo("body").fadeIn(200); | |
| }; | |
| var point = function(item) { | |
| var getPoint = function(n) { return item.datapoint[n].toFixed(2); }; | |
| var x = toUTCString(getPoint(0)); | |
| var y = getPoint(1); | |
| return { x: x, y: y }; | |
| }; | |
| this.Downtime = function(item) { | |
| showTooltip(item.pageX, item.pageY, item.series.label); | |
| }; | |
| this.ResponseTime = function(item) { | |
| var p = point(item); | |
| if (item.series.ttmessage) | |
| showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
| else | |
| showTooltip(item.pageX, item.pageY, p.x + " = " + p.y); | |
| }; | |
| this.ResponseTime_ByLocation = function(item) { | |
| var p = point(item); | |
| if (item.series.ttmessage) | |
| showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
| else | |
| showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y); | |
| }; | |
| this.ResponseTimeWithUri = function(item) { | |
| var p = point(item); | |
| if (item.series.ttmessage) | |
| showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
| else | |
| showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y); | |
| }; | |
| this.ResponseTime_ByTask = function(item) { | |
| var p = point(item); | |
| if (item.series.ttmessage) | |
| showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
| else | |
| showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y); | |
| }; | |
| this.Week = function(item) { | |
| var p = point(item); | |
| if (item.series.ttmessage) | |
| showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
| else | |
| showTooltip(item.pageX, item.pageY, p.y); | |
| }; | |
| this.Day = function(item) { | |
| var p = point(item); | |
| if (item.series.ttmessage) | |
| showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
| else | |
| showTooltip(item.pageX, item.pageY, p.y); | |
| }; | |
| this.History = function(item) { | |
| var info = item.series.info; | |
| var from = toUTCString(info.StartTime); | |
| var to = toUTCString(info.EndTime); | |
| var type = info.BaseType; | |
| showTooltip(item.pageX, item.pageY, type + "<br/>from " + from + "<br/>to " + to); | |
| }; | |
| } | |
| function Plot(data, notsave) { | |
| if (!notsave) { params.plotData = data; } | |
| if (params.isCompare) { | |
| data.options.legend.show = true; | |
| data.options.legend.container = $("#legend_container"); | |
| $("#legend_container").show(); | |
| } | |
| var plot = $("#TimeWork").empty(); | |
| if (!data.options.yaxis) data.options.yaxis = {}; | |
| data.options.yaxis.autoscaleMargin = null; | |
| if (params.chartType.toLowerCase() === "downtime") { | |
| if (!data.options.series) data.options.series = {}; | |
| data.options.series.pie = { show: true, label: { show:false } }; | |
| } | |
| if (data.maxY && data.options.yaxis) data.options.yaxis.max = data.maxY; | |
| if (data.minY && data.options.yaxis) data.options.yaxis.min = data.minY; | |
| $.plot(plot, data, data.options); | |
| plot.unbind("plotclick"); | |
| if (params.chartType.toLowerCase() !== "downtime") { | |
| plot.bind("plotclick", plotclick); | |
| } | |
| if(Plot.IsSetEvents != true) { | |
| Plot.IsSetEvents = true; | |
| plot.bind("plothover", plothover); | |
| plot.bind("plotselected", plotselected); | |
| } | |
| function plotclick(event, pos, item) { | |
| if (item && item.series.data[item.dataIndex].info) { | |
| var info = item.series.data[item.dataIndex].info; | |
| if (info.CanShowWaterfall) { | |
| function on(r) { | |
| if (r.CanShowDetailView) { | |
| window.open('DetailView.aspx?id=' + info.ID + '&CUID=' + params.CUID); | |
| } | |
| } | |
| Connector().Post("CanShowDetailView", { ID: info.ID }, on); | |
| } | |
| if(info.CanDrillDown) { | |
| var data = { | |
| Start: info.Start, | |
| End: info.End, | |
| ResponseFilterUri: ActualUrl() | |
| }; | |
| new GetChart(data); | |
| whole(); | |
| wholeBtn.show(); | |
| } | |
| } | |
| } | |
| function plotselected(event, ranges) { | |
| wholeBtn.show(); | |
| setRanges({ from: ranges.xaxis.from, to: ranges.xaxis.to, url: params.url }); | |
| } | |
| function plothover(event, pos, item) { | |
| function select(on) { | |
| if (on) { | |
| this.currentSelected = item; | |
| plot.highlight(item.series, item.datapoint, false); | |
| } else { | |
| if (this.currentSelected !== undefined) { | |
| plot.unhighlight(this.currentSelected.series, this.currentSelected.datapoint); | |
| this.currentSelected = undefined; | |
| } | |
| } | |
| } | |
| function tooltip(on) { | |
| var elm = $("#tooltip"); | |
| elm.remove(); | |
| if (on) { | |
| if (item.series.tooltip) | |
| item.series.tooltip(item); | |
| else if (params.chartType.toLowerCase() === "downtime") { | |
| $('<div id="tooltip">' + item.series.label + '</div>').css({ | |
| position: 'absolute', | |
| display: 'none', | |
| top: pos.pageY - 15, | |
| left: pos.pageX + 5, | |
| border: '1px solid #fdd', | |
| padding: '2px', | |
| 'background-color': '#fee', | |
| opacity: 0.80 | |
| }).appendTo("body").fadeIn(200); | |
| } | |
| } | |
| } | |
| if (item) { | |
| if (typeof (this.previousPoint) == 'undefined') { | |
| this.previousPoint = item.datapoint; | |
| tooltip(true); | |
| } | |
| if (this.previousPoint != item.datapoint) { | |
| this.previousPoint = item.datapoint; | |
| tooltip(true); | |
| } | |
| } | |
| else { | |
| tooltip(false); | |
| this.previousPoint = undefined; | |
| } | |
| } | |
| } | |
| function Chart(data, reLegend) { | |
| //setStddev(data.Average, data.STDDev); | |
| var tooltip = (new ToolTip())[params.chartType]; | |
| if (reLegend != false) Chart.legend = new Legend($("#legend_container"), params.chartType, data.Series); | |
| var legend = Chart.legend; | |
| legend.click(function() { new Chart(data, false); }); | |
| if ($(".charttitle").text() === "") | |
| $(".charttitle").html(data.Header); | |
| $("#footer").text(data.Footer); | |
| new Plot(new Types(params.chartType)); | |
| function Types(type) { | |
| var dest = []; | |
| function line() { | |
| dest.zoom = true; | |
| dest.options = { | |
| xaxis: { mode: "time" }, | |
| selection: { mode: "x" }, | |
| legend: { show: false }, | |
| grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
| }; | |
| dest.maxY = 0; | |
| dest.minY = null; | |
| $(data.Series).each(function(index, line) { | |
| var filter = legend.filter(index + "" + line.LegendName); | |
| if (filter.val) { | |
| var l = { label: line.LegendName, data: [], tooltip: tooltip, color: filter.color, Average: typeof (data.Average) !== "undefined" ? data.Average : line.Average, STDDev: typeof (data.STDDev) !== "undefined" ? data.STDDev : line.STDDev }; | |
| $(line.Points).each(function(index, p) { | |
| var v = [p.X, p.Y]; | |
| v.info= {ID: p.ID, Start: p.Start, End: p.End, CanShowWaterfall: p.CanShowWaterfall, CanDrillDown: p.CanDrillDown, y: p.Y}; | |
| l.data.push(v); | |
| if (p.Y > dest.maxY) { dest.maxY = p.Y; } | |
| if (dest.minY === null) dest.minY = p.Y; | |
| else if (dest.minY > p.Y) dest.minY = p.Y; | |
| }); | |
| dest.push(l); | |
| } | |
| }); | |
| if (data.Background) | |
| $(data.Background).each(function(index, line) { | |
| var max = dest.maxY == 0 ? 100 : dest.maxY; | |
| var l = { data: [[line.Start, max]], ttmessage: "<span style='font-weight:bold;'>" + line.Type + "</span><br>HitCount: " + line.HitCount+"<br/>From: "+new Date(line.Start) + "<br/>To:"+new Date(line.End), tooltip: tooltip, color: line.color, bars: { lineWidth: 0, barWidth: (line.End - line.Start), show: true} }; | |
| dest.push(l); | |
| }); | |
| if (dest.maxY === 0) { dest.maxY = 0.001; } | |
| } | |
| this.Downtime = function() { | |
| dest.zoom = false; | |
| var tickFormatter = function(v, axis, a) { | |
| return ""; | |
| }; | |
| dest.options = { | |
| xaxis: { tickSize: 1, tickFormatter: tickFormatter }, | |
| yaxis: { max: 100 }, | |
| legend: { show: false }, | |
| grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
| }; | |
| var x = 0; | |
| $(data.Series).each(function(index, line) { | |
| var filter = legend.filter(index + "" + line.LegendName); | |
| var l = { label: line.LegendName, data: [], bars: { show: true }, tooltip: tooltip, color: filter.color }; | |
| $(line.Points).each(function(index, point) { | |
| l.data.push([x++, point.Y]); | |
| }); | |
| dest.push(l); | |
| }); | |
| } | |
| this.ResponseTime = function() { line(); }; | |
| this.ResponseTime_ByLocation = function() { line(); }; | |
| this.ResponseTimeWithUri = function() { line(); }; | |
| this.ResponseTime_ByTask = function() { line(); }; | |
| this.Week = function() { | |
| dest.zoom = false; | |
| var tickFormatter = function(v, axis) { | |
| return ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ""][v]; | |
| }; | |
| dest.options = { | |
| xaxis: { tickFormatter: tickFormatter }, | |
| legend: { show: false }, | |
| grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
| }; | |
| var x = 0; | |
| $(data.Series).each(function(index, line) { | |
| var l = { label: line.LegendName, data: [], bars: { show: true, align: "center" }, tooltip: tooltip }; | |
| $(line.Points).each(function(index, point) { | |
| l.data.push([x++, point.Y]); | |
| }); | |
| dest.push(l); | |
| }); | |
| }; | |
| this.Day = function() { | |
| dest.zoom = false; | |
| var tickFormatter = function(v, axis) { return v; }; | |
| dest.options = { | |
| xaxis: { tickSize: 1, tickFormatter: tickFormatter }, | |
| legend: { show: false }, | |
| grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
| }; | |
| var x = 0; | |
| $(data.Series).each(function(index, line) { | |
| var l = { label: line.LegendName, data: [], bars: { show: true, align: "center" }, tooltip: tooltip }; | |
| $(line.Points).each(function(index, point) { | |
| l.data.push([x++, point.Y]); | |
| }); | |
| dest.push(l); | |
| }); | |
| }; | |
| this[type](); | |
| return dest; | |
| } | |
| } | |
| function waiting(on, proc) { | |
| if (!on && anyWait()) return; | |
| var waiting = $("#waiting"); | |
| if (on) { | |
| var dialogWidth; | |
| var dialogHeight = 150; | |
| waiting.dialog({ | |
| modal: true, | |
| width: 600, | |
| position: (isMobile.any()) ? [0, 0] : { my: "center", at: "center", of: window }, | |
| closeOnEscape: false, | |
| open: function () { | |
| if (isMobile.any()) { | |
| $(this).dialog("option", "width", (window.innerWidth > 600) ? 600 : (window.innerWidth - 10)); | |
| dialogWidth = $(this).dialog("option", "width"); | |
| var left = (window.innerWidth / 2) - (dialogWidth / 2); | |
| var top = (window.innerHeight / 2) - (dialogHeight / 2); | |
| $(this).dialog("option", "position", [left, top]); | |
| } | |
| }, | |
| }); | |
| waiting.dialog("open"); | |
| waiting.prev(".ui-dialog-titlebar").hide(); | |
| }else{ | |
| waiting.dialog("close"); | |
| } | |
| } | |
| function GetChart(extra_params) { | |
| var CUID; | |
| params.activeLoad["main"] = true; | |
| waiting(true); | |
| if(extra_params !== undefined || params.hash == "") { | |
| wait({UID: ""}); | |
| }else{ | |
| get({UID: params.hash}); | |
| } | |
| function get(r) { | |
| var UID = r.UID; | |
| function on(r) { | |
| new Chart(r); | |
| filterOutlier(); | |
| filter.set(r.Range); | |
| if (params.isCompare) { params.devices.update(); } | |
| params.activeLoad["main"] = false; | |
| waiting(false); | |
| } | |
| Connector().Post("GetChart", { chartType: params.chartType, CUID: unescape(params.CUID), UID: UID, ResponseFilterUri: ActualUrl() }, on); | |
| } | |
| function wait(r) { | |
| function check(r) { | |
| CUID = r.CUID; | |
| if (r.Error != "") { | |
| params.activeLoad["main"] = false; | |
| waiting(false); | |
| if (isMobile.any()) { | |
| $.colorbox.settings.width = "70%"; | |
| $.colorbox.settings.height = "260px"; | |
| $.colorbox.settings.reposition = false; | |
| } | |
| $.colorbox({ html: $("<div>").css('padding', '10px').html(r.Error), title: 'Server error' }); | |
| $(document).bind('cbox_complete', function () { | |
| if (isMobile.any()) { | |
| $("#colorbox").css({ | |
| left: window.pageXOffset + ((window.innerWidth / 2) - ($("#colorbox").width() / 2)) | |
| }); | |
| $("#colorbox").css('font-size', '3vw'); | |
| $("#colorbox").css('text-align', 'center'); | |
| $("#cboxTitle").css('font-size', '3vw'); | |
| } | |
| }); | |
| } else if (r.IsDone) { | |
| document.location.hash = "#" + escape(r.UID); | |
| if (params.hash === '') params.hash = document.location.hash.replace("#", ""); | |
| get(r); | |
| } else { | |
| setTimeout(function() { wait(r); }, 3000); | |
| } | |
| } | |
| var data = $.extend({ chartType: params.chartType, CUID: unescape(params.CUID), UID: r.UID }, extra_params); | |
| extra_params = {}; | |
| if (data.Start <= 0 || data.End <= 0) { | |
| delete data.Start; | |
| delete data.End; | |
| } | |
| if (data.ResponseFilterUri) | |
| data.ResponseFilterUri = unescape(data.ResponseFilterUri); | |
| Connector().Post("IsInProcess", data, check); | |
| } | |
| } | |
| function Legend(container, type, lines) { | |
| var click; | |
| var filter = {}; | |
| var color = ["#a7cd5e", "#ae59b3", "#757fce", "#7d7d41", "#e15f00", "#3896c6", "#2c9f36", "#a02f09", "#eab80b", "#a7a7a7", "#6a3604", "#afcffd", "#c2c655", "#71d3d4", "#b07061", "#dc143c", "#483d8b", "#ff1493", "#696969", "#ffb6c1", "#ffa500", "#ff0000", "#000080", "#00ff00", "#ffa07a", "#8b0000"]; | |
| color.current = 0; | |
| this.container = container; | |
| tr(); | |
| draw(); | |
| function tr() { | |
| var elm = container.find("tr").hide(); | |
| if (elm.size() == 1) { | |
| var maxRows = Math.ceil(lines.length / container.find("tr:first td").size()); | |
| for(var i = 0; i < maxRows; i++) { | |
| elm.after(elm.clone()); | |
| } | |
| } | |
| } | |
| function Types() { | |
| function draw() { | |
| function widthTd() { | |
| var count = container.find("tr:first td").size(); | |
| return $(document).width() / count; | |
| } | |
| refresh(); | |
| var tds = container.find("td"); | |
| var i = 0; | |
| var widthTd = widthTd(); | |
| jQuery.each(filter, function(key, val) { | |
| var enabled = lines[i].Points.length != 0; | |
| var elm = new Checkbox(lines[i].LegendName, key, filter[key].color, check, enabled); | |
| if (enabled) elm.on(); else elm.off(); | |
| $(tds[i++]).empty().append(elm.elm).closest("tr").show(); | |
| }); | |
| //extending to a full list of monitors | |
| if (params.chartType == "ResponseTime_ByLocation" || params.chartType == "ResponseTimeWithUri") | |
| if (existingMonitors !== undefined) { | |
| jQuery.each(existingMonitors, function(index, mName) { | |
| if (filter === undefined || filter[mName] == null) { | |
| var elm = new Checkbox(mName, mName, "lightgray", function(){}, false); | |
| elm.off(); | |
| $(tds[i++]).empty().append(elm.elm).closest("tr").show(); | |
| } | |
| }); | |
| } | |
| } | |
| function downtime() { | |
| refresh(); | |
| var tds = container.find("td"); | |
| var i = 0; | |
| jQuery.each(filter, function(key, val) { | |
| var elm = new Checkbox(lines[i].LegendName, key, filter[key].color); | |
| elm.off(); | |
| $(tds[i++]).empty().append(elm.elm).closest("tr").show(); | |
| }); | |
| } | |
| this.Downtime = function() { downtime(); }; | |
| this.ResponseTime = function() { }; | |
| this.ResponseTime_ByTask = function() { draw(); }; | |
| this.ResponseTime_ByLocation = function() { draw(); }; | |
| this.ResponseTimeWithUri = function() { draw(); }; | |
| this.Week = function() { }; | |
| this.Day = function() { }; | |
| } | |
| function draw() { | |
| (new Types())[type](); | |
| } | |
| this.filter = function(name) { | |
| var f = filter[name]; | |
| if (f === undefined) { | |
| return { val: true }; | |
| } else { | |
| return { val: f.val, color: f.color }; | |
| } | |
| }; | |
| this.click = function(callback) { | |
| click = callback; | |
| }; | |
| function refresh() { | |
| var empty = true; | |
| $(lines).each(function(index, line) { | |
| var f = filter[index+line.LegendName] = {}; | |
| f.val = true; | |
| f.color = color[color.current++]; | |
| empty = false; | |
| }); | |
| if (!empty) { container.show(); } | |
| } | |
| function check(data, val) { | |
| filter[data].val = val; | |
| click(); | |
| } | |
| } | |
| function Checkbox(text, data, color, click, width) { | |
| if(Checkbox.checkbox === undefined) Checkbox.checkbox = $(".legendcheckboxlist").clone(true).show(); | |
| var obj = this; | |
| var img = { on: "images/ccheckbox-on.gif", off: "images/ccheckbox-off.gif" }; | |
| var elms = { | |
| elm: Checkbox.checkbox.clone(true) | |
| }; | |
| elms.div = elms.elm.find(".legendcheckbox").css("background-color", color); | |
| elms.img = elms.elm.find("img")[0]; | |
| this.elm = elms.elm; | |
| if (width != false) elms.elm.click(onclick); | |
| var div = $('<div style="overflow:hidden"><div>').text(text); | |
| if (width == false) $(div).css("color", "lightgray"); | |
| div.width(width); | |
| elms.elm.find(".legendcheckboxlabel").html(div); | |
| var val = false; | |
| function onclick() { | |
| if (click !== undefined) { | |
| if (val) { | |
| obj.off(); | |
| } else { | |
| obj.on(); | |
| } | |
| click(data, val); | |
| } | |
| } | |
| this.off = function() { | |
| elms.img.src = img.off; | |
| val = false; | |
| }; | |
| this.on = function() { | |
| elms.img.src = img.on; | |
| val = true; | |
| }; | |
| this.val = function() { return data; }; | |
| } | |
| function Filter() { | |
| var testDate = new RegExp(/\d{1,2}\/\d{1,2}\/\d{2,4}/); | |
| var elms = { | |
| startDate: $("#startDate"), | |
| endDate: $("#endDate") | |
| } | |
| $("#startDate, #endDate") | |
| .focus(function() { | |
| $(this).attr("prevValue", $(this).val()); | |
| }) | |
| .blur(function() { | |
| var val = $(this).val(); | |
| var dStart = new Date(elms.startDate.val()); | |
| var dEnd = new Date(elms.endDate.val()); | |
| var d = new Date(val); | |
| var test = new RegExp(/(\d{1,2})\/(\d{1,2})\/(\d{4,4})\D((\d{1,2}):(\d{1,2}):(\d{1,2})\s(PM|AM))?/); | |
| var ex = test.exec(val); | |
| if ($(this).attr("prevValue")) { | |
| var dt = Date.parse(val); | |
| if (!test.test(val) || isNaN(dt) || (dStart.getTime() == dEnd.getTime()) || Number(ex[1]) <= 0 || Number(ex[2]) <= 0 || Number(ex[3]) <= 0 || Number(ex[1]) > 12 || Number(ex[2]) > 31) | |
| $(this).val($(this).attr("prevValue")) | |
| } | |
| $(this).removeAttr("prevValue"); | |
| }); | |
| this.set = function(range) { | |
| //set(elms.startDate, range.from); | |
| //set(elms.endDate, range.to); | |
| function set(elm, val) { | |
| var v = $.formatDate(new Date(val), "MM/dd/yyyy hh:mm:ss a"); | |
| elm.val(v); | |
| } | |
| }; | |
| if(params.url!==null) { | |
| $("#filter").show(); | |
| $("#back").show(); | |
| } | |
| $("#load").click(function() { | |
| if (Date.parse(elms.startDate.val()) && Date.parse(elms.endDate.val())) | |
| var filter = { | |
| from: m(elms.startDate.val()), | |
| to: m(elms.endDate.val()), | |
| url: ActualUrl() | |
| }; | |
| setRanges(filter); | |
| function m(s) { return new Date(s).getUTCTotalMilliseconds(); } | |
| }); | |
| $("#back").click(function() { | |
| if (document.referrer != '') window.location = document.referrer; | |
| else window.history.go(-1 * (window.history.length - 1)); | |
| }); | |
| $("input:radio[name=getParams]").change(function() { | |
| if (StripVisible() == oldShowStripValue) return; | |
| oldShowStripValue = StripVisible(); | |
| var filter = { | |
| from: m(elms.startDate.val()), | |
| to: m(elms.endDate.val()), | |
| url: ActualUrl() | |
| }; | |
| setRanges(filter); | |
| function m(s) { return new Date(s).getUTCTotalMilliseconds(); } | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment