[9628] | 1 | @* HeuristicLab
|
---|
[9646] | 2 | * Copyright (C) 2002-2013 Heuristic and Evolutionary Algorithms Laboratory (HEAL)
|
---|
[9628] | 3 | *
|
---|
| 4 | * This file is part of HeuristicLab.
|
---|
| 5 | *
|
---|
| 6 | * HeuristicLab is free software: you can redistribute it and/or modify
|
---|
| 7 | * it under the terms of the GNU General Public License as published by
|
---|
| 8 | * the Free Software Foundation, either version 3 of the License, or
|
---|
| 9 | * (at your option) any later version.
|
---|
| 10 | *
|
---|
| 11 | * HeuristicLab is distributed in the hope that it will be useful,
|
---|
| 12 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
---|
| 13 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
---|
| 14 | * GNU General Public License for more details.
|
---|
| 15 | *
|
---|
| 16 | * You should have received a copy of the GNU General Public License
|
---|
| 17 | * along with HeuristicLab. If not, see <http://www.gnu.org/licenses/>.
|
---|
| 18 | *@
|
---|
| 19 |
|
---|
[11020] | 20 | @helper AjaxDataRenderer()
|
---|
| 21 | {
|
---|
[9625] | 22 | <script>
|
---|
| 23 | var ajaxDataRenderer = function (url, plot, options) {
|
---|
| 24 | var ret = null;
|
---|
| 25 | $.ajax({
|
---|
| 26 | async: false,
|
---|
| 27 | url: url,
|
---|
| 28 | dataType: "json",
|
---|
| 29 | success: function (data) {
|
---|
| 30 | ret = data;
|
---|
| 31 | }
|
---|
| 32 | });
|
---|
| 33 | return ret;
|
---|
| 34 | };
|
---|
| 35 | </script>
|
---|
| 36 | }
|
---|
| 37 |
|
---|
[11020] | 38 | @helper LineChartTime(string destinationTag, string url, string title = "", double? minY = null, double? maxY = null, string axisYFormat = null)
|
---|
| 39 | {
|
---|
[9625] | 40 | <script>
|
---|
| 41 | var @(destinationTag)Plot = $.jqplot("@destinationTag", "@url", {
|
---|
| 42 | title: "@title",
|
---|
| 43 | highlighter: {
|
---|
| 44 | show: true,
|
---|
| 45 | sizeAdjust: 7.5
|
---|
| 46 | },
|
---|
[9628] | 47 | seriesDefaults: {
|
---|
[9646] | 48 | markerOptions: { show: false }
|
---|
[9628] | 49 | },
|
---|
[9625] | 50 | dataRenderer: ajaxDataRenderer,
|
---|
| 51 | axes: {
|
---|
| 52 | xaxis: {
|
---|
| 53 | renderer: $.jqplot.DateAxisRenderer,
|
---|
[9644] | 54 | pad: 0
|
---|
[9625] | 55 | },
|
---|
| 56 | yaxis: {
|
---|
[11020] | 57 | @if (axisYFormat != null)
|
---|
| 58 | {<text>
|
---|
[9625] | 59 | tickOptions: {
|
---|
[9662] | 60 | formatString: "@axisYFormat",
|
---|
[9625] | 61 | },
|
---|
[9662] | 62 | </text>}
|
---|
| 63 | autoscale: true,
|
---|
| 64 | pad: 0,
|
---|
[11020] | 65 | @if (minY != null)
|
---|
| 66 | {
|
---|
[9625] | 67 | @:min: @minY,
|
---|
| 68 | }
|
---|
[11020] | 69 | @if (maxY != null)
|
---|
| 70 | {
|
---|
[9625] | 71 | @:max: @maxY,
|
---|
| 72 | }
|
---|
| 73 | },
|
---|
| 74 | },
|
---|
[9644] | 75 | gridPadding: { left: 50, right: 10 },
|
---|
[9625] | 76 | cursor: {
|
---|
| 77 | show: true,
|
---|
[9628] | 78 | showTooltip: false,
|
---|
| 79 | zoom: true,
|
---|
| 80 | clickReset: false,
|
---|
| 81 | dblClickReset: false,
|
---|
| 82 | constrainZoomTo: 'x'
|
---|
[9625] | 83 | }
|
---|
| 84 | });
|
---|
| 85 |
|
---|
| 86 | $(window).resize(function() {
|
---|
[9644] | 87 | @(destinationTag)Plot.replot({ resetAxes: true });
|
---|
[9625] | 88 | });
|
---|
| 89 | </script>
|
---|
[9643] | 90 | }
|
---|
| 91 |
|
---|
[11036] | 92 | @helper RefreshChart(string destinationTag, string url, string startDate, string endDate)
|
---|
[11020] | 93 | {
|
---|
| 94 | <text>
|
---|
[11036] | 95 | $.ajax({url: "@(new HtmlString(url))?start=" + @startDate + "&end=" + @endDate, datatype: "json", success: function(result) {
|
---|
[11020] | 96 | for (var i = 0; i < result.length; i++) {
|
---|
| 97 | @(destinationTag)Plot.series[i].data = result[i];
|
---|
| 98 | }
|
---|
| 99 | @(destinationTag)Plot.replot({ resetAxes: true })
|
---|
| 100 | }});
|
---|
| 101 | </text>
|
---|
| 102 | }
|
---|
| 103 |
|
---|
[11084] | 104 | @helper ResizeCharts()
|
---|
| 105 | {
|
---|
| 106 | <text>
|
---|
| 107 | function resizeCharts(caller) {
|
---|
| 108 | //If current plot is collapsed
|
---|
| 109 | if($(caller).css("display") == "none") {
|
---|
| 110 | //Display the contents of chartContainer
|
---|
| 111 | ResizeOpenClose($(caller).siblings(".collapse"));
|
---|
| 112 | //Reset barWidth for bar charts
|
---|
| 113 | $.each(window[caller.id].series, function(index, series) {
|
---|
| 114 | series.barWidth = undefined;
|
---|
| 115 | });
|
---|
| 116 | //Replot the chart with same name as element id
|
---|
| 117 | window[caller.id].replot({ resetAxes: false });
|
---|
| 118 | //Hide the contents of the current div
|
---|
| 119 | ResizeOpenClose($(caller).siblings(".collapse"));
|
---|
| 120 | }
|
---|
| 121 | //Current plot is expanded
|
---|
| 122 | else {
|
---|
| 123 | //Reset barWidth for bar charts
|
---|
| 124 | $.each(window[caller.id].series, function(index, series) {
|
---|
| 125 | series.barWidth = undefined;
|
---|
| 126 | });
|
---|
| 127 | //Replot the chart with same name as element id
|
---|
| 128 | window[caller.id].replot({ resetAxes: false });
|
---|
| 129 | }
|
---|
| 130 | }
|
---|
| 131 |
|
---|
| 132 | $(window).resize(function() {
|
---|
| 133 | $("div.jqplot-target",".chartContainer").each(function() {
|
---|
| 134 | var potentialTab = $(this).parent().parent().parent();
|
---|
| 135 | //If the section is tabular and currently hidden
|
---|
| 136 | if(potentialTab.hasClass("tabSection") && potentialTab.css("display") == "none") {
|
---|
| 137 | ResizeOpenCloseTabular(potentialTab);
|
---|
| 138 | resizeCharts(this);
|
---|
| 139 | ResizeOpenCloseTabular(potentialTab);
|
---|
| 140 | }
|
---|
| 141 | else {
|
---|
| 142 | resizeCharts(this);
|
---|
| 143 | }
|
---|
| 144 | });
|
---|
| 145 | });
|
---|
| 146 | </text>
|
---|
| 147 | }
|
---|
| 148 |
|
---|
[11036] | 149 | @helper NumberPages(string records, string limit, string container, string functionName, string currentPage = null)
|
---|
[11020] | 150 | {
|
---|
| 151 | <text>
|
---|
[11036] | 152 | if(@(records).length > @limit) {
|
---|
| 153 | $("#@container").append('<label class="pageTitle">Page: </label>')
|
---|
| 154 | var pages = Math.floor(@(records).length/@(limit)) + 1;
|
---|
| 155 | for(var i=0; i < pages; i++) {
|
---|
| 156 | $("#" + "@container").append('<a id="@(container)Page' + (i + 1) + '" class="page">' + (i + 1) + '</a>')
|
---|
| 157 | }
|
---|
| 158 | if(@currentPage != null) {
|
---|
| 159 | $("#@(container)Page" + @currentPage).css('color','#F7921D');
|
---|
| 160 | }
|
---|
| 161 | else {
|
---|
| 162 | $("#@(container)Page1").css('color','#F7921D');
|
---|
| 163 | }
|
---|
| 164 | $(".page").click(function () {
|
---|
| 165 | pageNumber = $(this).html();
|
---|
| 166 | @(functionName)();
|
---|
| 167 | });
|
---|
| 168 | if(@currentPage != null) {
|
---|
| 169 | @(records).splice(0,(@(currentPage)-1)*@(limit));
|
---|
| 170 | if (@(records).length > @(limit)) {
|
---|
| 171 | @(records).splice(@(limit), @(records).length - @(limit));
|
---|
| 172 | }
|
---|
| 173 | }
|
---|
| 174 | else {
|
---|
| 175 | @(records).splice(@(limit), @(records).length - @(limit));
|
---|
| 176 | }
|
---|
| 177 | }
|
---|
| 178 | </text>
|
---|
| 179 | }
|
---|
| 180 |
|
---|
[11084] | 181 | @helper TasksForUser(string destinationTag, string url, string functionName, string userName, string limit, string startDate = null, string endDate = null, string jobId = null, string taskState = null, string pageNumber = null)
|
---|
[11036] | 182 | {
|
---|
| 183 | <text>
|
---|
[11084] | 184 | var GetRequest = "?userName=" + @(userName);
|
---|
| 185 | @if (startDate != null)
|
---|
| 186 | {
|
---|
[11030] | 187 | @:if(@(startDate)!=null) {
|
---|
| 188 | @:GetRequest += "&start=" + @startDate;
|
---|
| 189 | @:}
|
---|
| 190 | }
|
---|
[11084] | 191 | @if (endDate != null)
|
---|
| 192 | {
|
---|
[11030] | 193 | @:if(@(endDate)!=null) {
|
---|
| 194 | @:GetRequest += "&end=" + @endDate;
|
---|
| 195 | @:}
|
---|
| 196 | }
|
---|
[11084] | 197 | @if (jobId != null)
|
---|
| 198 | {
|
---|
[11030] | 199 | @:if(@(jobId)!=null) {
|
---|
| 200 | @:GetRequest += "&jobId=" + @jobId;
|
---|
| 201 | @:}
|
---|
| 202 | }
|
---|
[11084] | 203 | @if (taskState != null)
|
---|
| 204 | {
|
---|
[11030] | 205 | @:if(@(taskState)!=null) {
|
---|
| 206 | @:GetRequest += "&taskState=" + @taskState;
|
---|
| 207 | @:}
|
---|
| 208 | }
|
---|
[11036] | 209 | $.ajax({
|
---|
| 210 | async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
|
---|
[11053] | 211 | if(@(userName) == null) {
|
---|
[11084] | 212 | $("#@(destinationTag)").append(
|
---|
[11053] | 213 | '<section class="chartContainer">' +
|
---|
| 214 | '<h1 class="title">Please select a user!</h1>' +
|
---|
| 215 | '</section>'
|
---|
[11020] | 216 | )
|
---|
| 217 | }
|
---|
[11053] | 218 | else if(result.length==0) {
|
---|
[11084] | 219 | $("#@(destinationTag)").append(
|
---|
[11053] | 220 | '<section class="chartContainer">' +
|
---|
| 221 | '<h1 class="title">' + @userName + ' has no tasks for the specified filters!</h1>' +
|
---|
| 222 | '</section>'
|
---|
| 223 | )
|
---|
| 224 | }
|
---|
| 225 | else {
|
---|
| 226 | var waitTime;
|
---|
| 227 | var transferTime;
|
---|
| 228 | var runTime;
|
---|
| 229 | var seriesDescriptions = ["Time waiting","Time transferring","Time calculating"];
|
---|
[11020] | 230 |
|
---|
[11053] | 231 | //Checks if multipage display, if it is then trims results to
|
---|
| 232 | //the results for the page to be displayed
|
---|
[11084] | 233 | @ChartHelper.NumberPages("result", limit, destinationTag, functionName, pageNumber)
|
---|
[11036] | 234 |
|
---|
[11053] | 235 | //Globally accesible, for use when resizing, eliminates extra DB request
|
---|
| 236 | window["numberTasks"] = result.length;
|
---|
[11020] | 237 |
|
---|
[11053] | 238 | //Set display of all errors to none, errors matching the tasks will be reset below
|
---|
[11084] | 239 | $("#@(destinationTag)").find(".errorContainer, .errorTitle, .errorTask, .errorMessage").css('display','none');
|
---|
[11030] | 240 |
|
---|
[11053] | 241 | //For each result create a seperate collapsable section with a chart and info label
|
---|
| 242 | for(var i = 0; i < result.length; i++){
|
---|
[11084] | 243 | $("#" + "@(destinationTag)").append(
|
---|
[11053] | 244 | '<section class="chartContainer">' +
|
---|
[11084] | 245 | '<h1 class="title" id="@(destinationTag)' + result[i].Key + 'PlotTitle">Task ' + result[i].Key + '</h1>' +
|
---|
[11053] | 246 | '<button class="collapse" onclick="CollapseSection(this)">+</button>' +
|
---|
| 247 | '<div id="@(destinationTag)Plot' + i + '"></div>' +
|
---|
| 248 | '<label id="@(destinationTag)PlotInfo' + i + '"></label>' +
|
---|
| 249 | '</section>'
|
---|
| 250 | )
|
---|
| 251 | //Re-enables the error display if any of the tasks on the page have Ids matching
|
---|
| 252 | //those of errors
|
---|
[11084] | 253 | $(".errorTask","#" + "@(destinationTag)").each(function() {
|
---|
[11053] | 254 | if($(this).html()==result[i].Key) {
|
---|
[11084] | 255 | $("#@(destinationTag)" + result[i].Key + "PlotTitle").css("color","red");
|
---|
| 256 | $("#@(destinationTag)" + result[i].Key + "PlotTitle").append(" - ERROR");
|
---|
| 257 | $(".errorContainer, .errorTitle, .underline","#@(destinationTag)").css('display','inline-block');
|
---|
[11053] | 258 | $(this).css('display','inline-block');
|
---|
| 259 | $(this).next().css('display','inline-block');
|
---|
| 260 | }
|
---|
| 261 | });
|
---|
| 262 | waitTime = [result[i].Value[0]];
|
---|
| 263 | transferTime = [result[i].Value[1]];
|
---|
| 264 | runTime = [result[i].Value[2]];
|
---|
| 265 | window["@(destinationTag)Plot" + i] = $.jqplot("@(destinationTag)Plot" + i, [waitTime,transferTime,runTime], {
|
---|
| 266 | seriesDefaults:{
|
---|
| 267 | renderer:$.jqplot.BarRenderer,
|
---|
| 268 | shadowAngle: 135,
|
---|
| 269 | pointLabels: {show: true, formatString: '%.3f'}
|
---|
[11020] | 270 | },
|
---|
[11053] | 271 | series:[
|
---|
| 272 | {label:'Waiting'},
|
---|
| 273 | {label:'Transferring'},
|
---|
| 274 | {label:'Calculating'}
|
---|
| 275 | ],
|
---|
| 276 | legend: {
|
---|
| 277 | show: true,
|
---|
| 278 | location: 'e',
|
---|
| 279 | placement: 'outside'
|
---|
| 280 | },
|
---|
| 281 | axes: {
|
---|
| 282 | xaxis: {
|
---|
| 283 | renderer: $.jqplot.CategoryAxisRenderer,
|
---|
| 284 | showLabel: false,
|
---|
| 285 | pad: 0
|
---|
| 286 | },
|
---|
| 287 | yaxis: {
|
---|
| 288 | pad: 0
|
---|
| 289 | }
|
---|
| 290 | },
|
---|
| 291 | cursor: {
|
---|
| 292 | showTooltip: false
|
---|
[11020] | 293 | }
|
---|
[11053] | 294 | });
|
---|
| 295 | /* Bind a datalistener to each chart and display details of clicked
|
---|
| 296 | upon data in the label below the chart */
|
---|
| 297 | $("#" + "@(destinationTag)Plot" + i).bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
|
---|
| 298 | $(this).siblings("label").html(seriesDescriptions[seriesIndex] + ": " + data[1]);
|
---|
| 299 | });
|
---|
[11030] | 300 |
|
---|
[11084] | 301 | CollapsedByDefault(document.getElementById("@(destinationTag)Plot" + i));
|
---|
[11053] | 302 | }
|
---|
[11020] | 303 | }
|
---|
| 304 | }});
|
---|
| 305 | </text>
|
---|
| 306 | }
|
---|
| 307 |
|
---|
[11084] | 308 | @helper SetStreamingProperties(int refresh, int chartLength, int upperY)
|
---|
[11020] | 309 | {
|
---|
| 310 | <text>
|
---|
| 311 | //Refresh time (in millisec)
|
---|
| 312 | var refreshRate = @(refresh);
|
---|
| 313 | //Number of data points on chart
|
---|
| 314 | var chartSize = @(chartLength);
|
---|
| 315 | //Amount to add to max Y value
|
---|
| 316 | var upperYBuffer = @(upperY);
|
---|
| 317 |
|
---|
| 318 | //Used to return a string containing the names of the series
|
---|
| 319 | //to be used in plot creation
|
---|
[11053] | 320 | function GetSeries(numberData,dataName){
|
---|
[11020] | 321 | var result = "[";
|
---|
| 322 | for(i=0; i < numberData; i++) {
|
---|
| 323 | if(i < numberData -1) {
|
---|
| 324 | result += dataName + i + ",";
|
---|
| 325 | }
|
---|
| 326 | else {
|
---|
| 327 | result += dataName + i + "]";
|
---|
| 328 | }
|
---|
| 329 | }
|
---|
| 330 | return result;
|
---|
| 331 | }
|
---|
| 332 | </text>
|
---|
| 333 | }
|
---|
| 334 |
|
---|
[11084] | 335 | @helper CreateStreamChart(string dataName, string destinationTag, string url, string title, string format = null, double? maxY = null)
|
---|
| 336 | {
|
---|
[11020] | 337 | <text>
|
---|
| 338 | //Get current time, used to create initial values
|
---|
| 339 | var @(dataName)CurrentDate = (new Date()).getTime();
|
---|
| 340 |
|
---|
| 341 | var @(dataName)Data = [];
|
---|
| 342 | var @(dataName)CurrentValue = [];
|
---|
| 343 |
|
---|
| 344 | //Get the most recent value(s) from the given URL
|
---|
| 345 | $.ajax({
|
---|
| 346 | async: false, url: '@(url)', datatype: "json", success: function (result) {
|
---|
| 347 | for(i = 0; i < result.length; i++) {
|
---|
| 348 | @(dataName)CurrentValue[i] = result[i];
|
---|
| 349 | }
|
---|
| 350 | }
|
---|
| 351 | });
|
---|
| 352 |
|
---|
| 353 | //Create a chartSize worth of data using CurrentDate and CurrentValue
|
---|
| 354 | //for each CurrentValue
|
---|
| 355 | for(i = 0; i < @(dataName)CurrentValue.length; i++) {
|
---|
| 356 | window["@(dataName)Data" + i] = [];
|
---|
| 357 | for (j = 0; j < chartSize; j++) {
|
---|
| 358 | window[ "@(dataName)Data" + i].push([@(dataName)CurrentDate - (chartSize - 1 - j) * refreshRate, @(dataName)CurrentValue[i]]);
|
---|
| 359 | }
|
---|
| 360 | }
|
---|
| 361 |
|
---|
| 362 | //Options for the chart to be created
|
---|
| 363 | var @(destinationTag)PlotOptions = {
|
---|
| 364 | title: "@title",
|
---|
| 365 | axes: {
|
---|
| 366 | xaxis: {
|
---|
| 367 | numberTicks: 4,
|
---|
| 368 | renderer: $.jqplot.DateAxisRenderer,
|
---|
| 369 | tickOptions: { formatString: '%H:%M:%S' },
|
---|
| 370 | min: window["@(dataName)Data" + 0][0][0],
|
---|
| 371 | max: window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][0]
|
---|
| 372 | },
|
---|
| 373 | yaxis: {
|
---|
| 374 | @if (format != null)
|
---|
| 375 | {<text>
|
---|
| 376 | tickOptions: {
|
---|
| 377 | formatString: "@format",
|
---|
| 378 | },
|
---|
| 379 | </text>}
|
---|
| 380 | min: 0,
|
---|
[11084] | 381 | @if (maxY != null)
|
---|
| 382 | {
|
---|
[11020] | 383 | @:max: @maxY,
|
---|
[9646] | 384 | }
|
---|
[11084] | 385 | else
|
---|
| 386 | {
|
---|
[11020] | 387 | @:max: window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][1] + upperYBuffer,
|
---|
| 388 | }
|
---|
| 389 | numberTicks: 6
|
---|
| 390 | }
|
---|
| 391 | },
|
---|
| 392 | seriesDefaults: {
|
---|
| 393 | rendererOptions: { smooth: true },
|
---|
| 394 | markerOptions: {
|
---|
| 395 | show: false
|
---|
| 396 | }
|
---|
| 397 | }
|
---|
| 398 | };
|
---|
| 399 |
|
---|
| 400 | //Declares the jqPlot variable, evals the string of series returned
|
---|
| 401 | //from getSeries which allows for any number of series
|
---|
[11053] | 402 | window[ "@(destinationTag)Plot"] = $.jqplot('@destinationTag', eval(GetSeries(@(dataName)CurrentValue.length,"@(dataName)Data")), @(destinationTag)PlotOptions);
|
---|
[11020] | 403 | </text>
|
---|
| 404 | }
|
---|
| 405 |
|
---|
[11084] | 406 | @helper UpdateStreamChart(string dataName, string destinationTag, string url, string fixedY = null)
|
---|
| 407 | {
|
---|
[11020] | 408 | <text>
|
---|
| 409 | //If the data is beyond chartSize use shift to trim one off the end
|
---|
| 410 | for(i = 0; i < @(dataName)CurrentValue.length; i++) {
|
---|
| 411 | if (window["@(dataName)Data" + i].length > chartSize - 1) {
|
---|
| 412 | window["@(dataName)Data" + i].shift();
|
---|
| 413 | }
|
---|
| 414 | }
|
---|
| 415 |
|
---|
| 416 | //Get the up-to-date data, each result assigned to it's own array
|
---|
| 417 | $.ajax({
|
---|
| 418 | async: false, url: '@(url)', datatype: "json", success: function (result) {
|
---|
| 419 | for(i = 0; i < result.length; i++) {
|
---|
| 420 | window[ "@(dataName)Data" + i].push([(new Date()).getTime(), result[i]]);
|
---|
| 421 | }
|
---|
| 422 | }
|
---|
| 423 | });
|
---|
| 424 |
|
---|
| 425 | //If the plot exists currently destroy it
|
---|
| 426 | if ( @(destinationTag)Plot) {
|
---|
| 427 | @(destinationTag)Plot.destroy();
|
---|
| 428 | }
|
---|
| 429 |
|
---|
| 430 | //Assign series
|
---|
| 431 | for(i = 0; i < @(dataName)CurrentValue.length; i++) {
|
---|
| 432 | @(destinationTag)Plot.series[i].data = window["@(dataName)Data" + i];
|
---|
| 433 | }
|
---|
| 434 |
|
---|
| 435 | //Recalculate x and possibly y axis max and mins
|
---|
| 436 | @(destinationTag)PlotOptions.axes.xaxis.min = window["@(dataName)Data" + 0][0][0];
|
---|
| 437 | @(destinationTag)PlotOptions.axes.xaxis.max = window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][0];
|
---|
[11084] | 438 | @if (fixedY == null)
|
---|
| 439 | {
|
---|
[11020] | 440 | @:@(destinationTag)PlotOptions.axes.yaxis.max = window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][1] + upperYBuffer;
|
---|
| 441 | }
|
---|
| 442 |
|
---|
| 443 | //Re-assigns the jqPlot variable, evals the string of series returned
|
---|
| 444 | //from getSeries which allows for any number of series
|
---|
[11053] | 445 | @(destinationTag)Plot = $.jqplot('@destinationTag', eval(GetSeries(@(dataName)CurrentValue.length,"@(dataName)Data")), @(destinationTag)PlotOptions);
|
---|
[11020] | 446 | </text>
|
---|
[11036] | 447 | }
|
---|
| 448 |
|
---|
[11084] | 449 | @helper SlaveInfoChart(string destinationTag, string url, string limit, bool singleSlave, string startDate = null, string endDate = null, string userName = null, string functionName = null, string pageNumber = null, string slaveId = null)
|
---|
| 450 | {
|
---|
[11036] | 451 | <text>
|
---|
[11084] | 452 | var GetRequest = "";
|
---|
| 453 | @if (startDate != null)
|
---|
| 454 | {
|
---|
[11036] | 455 | @:if(@(startDate)!=null) {
|
---|
[11084] | 456 | @:if(GetRequest == "") {
|
---|
| 457 | @:GetRequest += "?start=" + @startDate;
|
---|
| 458 | @:}
|
---|
| 459 | @:else {
|
---|
| 460 | @:GetRequest += "&start=" + @startDate;
|
---|
| 461 | @:}
|
---|
[11036] | 462 | @:}
|
---|
| 463 | }
|
---|
[11084] | 464 | @if (endDate != null)
|
---|
| 465 | {
|
---|
[11036] | 466 | @:if(@(endDate)!=null) {
|
---|
[11084] | 467 | @:if(GetRequest == "") {
|
---|
| 468 | @:GetRequest += "?end=" + @endDate;
|
---|
| 469 | @:}
|
---|
| 470 | @:else {
|
---|
| 471 | @:GetRequest += "&end=" + @endDate;
|
---|
| 472 | @:}
|
---|
[11036] | 473 | @:}
|
---|
| 474 | }
|
---|
[11084] | 475 | @if (userName != null)
|
---|
| 476 | {
|
---|
[11036] | 477 | @:if(@(userName)!=null) {
|
---|
[11084] | 478 | @:if(GetRequest == "") {
|
---|
| 479 | @:GetRequest += "?userName=" + @userName;
|
---|
| 480 | @:}
|
---|
| 481 | @:else {
|
---|
| 482 | @:GetRequest += "&userName=" + @userName;
|
---|
| 483 | @:}
|
---|
[11036] | 484 | @:}
|
---|
| 485 | }
|
---|
[11084] | 486 | @if (slaveId != null)
|
---|
| 487 | {
|
---|
[11053] | 488 | @:if(@(slaveId)!=null) {
|
---|
[11084] | 489 | @:if(GetRequest == "") {
|
---|
| 490 | @:GetRequest += "?slaveId=" + @slaveId;
|
---|
| 491 | @:}
|
---|
| 492 | @:else {
|
---|
| 493 | @:GetRequest += "&slaveId=" + @slaveId;
|
---|
| 494 | @:}
|
---|
[11053] | 495 | @:}
|
---|
| 496 | }
|
---|
[11036] | 497 | $.ajax({
|
---|
| 498 | async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
|
---|
| 499 |
|
---|
[11053] | 500 | //Set chart names for use in creation below, must be set identically in
|
---|
| 501 | //ResizeSlaves
|
---|
| 502 | var slaveChartNames = ["TotalUsedCores","TotalUsedMemory","CPUUtilization"];
|
---|
[11036] | 503 |
|
---|
[11059] | 504 | var destTag = eval("@(destinationTag)");
|
---|
| 505 | if(typeof eval("@(destinationTag)") != "string") {
|
---|
| 506 | destTag = "@(destinationTag)";
|
---|
| 507 | }
|
---|
| 508 |
|
---|
[11053] | 509 | if(result.length == 0) {
|
---|
[11084] | 510 | @if (!singleSlave) {
|
---|
| 511 | @:$('#' + destTag).html("");
|
---|
| 512 | }
|
---|
[11059] | 513 | $('#' + destTag).append(
|
---|
[11053] | 514 | '<section class="chartContainer">' +
|
---|
| 515 | '<h1 class="title">No slave information for the specified filters!</h1>' +
|
---|
| 516 | '</section>'
|
---|
| 517 | )
|
---|
| 518 | }
|
---|
| 519 | else {
|
---|
| 520 | var time = new Date();
|
---|
| 521 |
|
---|
[11084] | 522 | @if (!singleSlave)
|
---|
| 523 | {
|
---|
[11059] | 524 | @:$('#' + destTag).html("");
|
---|
[11053] | 525 |
|
---|
[11059] | 526 | //Checks if multipage display, if it is then trims results to
|
---|
| 527 | //the results for the page to be displayed
|
---|
| 528 | @ChartHelper.NumberPages("result", limit, destinationTag, functionName, pageNumber)
|
---|
| 529 | }
|
---|
| 530 |
|
---|
[11053] | 531 | for(i = 0; i < result.length; i++) {
|
---|
| 532 | var coreSeries = [];
|
---|
| 533 | coreSeries[0] = [];
|
---|
| 534 | coreSeries[1] = [];
|
---|
| 535 | var memorySeries = [];
|
---|
| 536 | memorySeries[0] = [];
|
---|
| 537 | memorySeries[1] = [];
|
---|
| 538 | var cpuSeries = [];
|
---|
| 539 | cpuSeries[0] = [];
|
---|
[11059] | 540 | $('#' + destTag).append(
|
---|
[11053] | 541 | '<section class="chartContainer">' +
|
---|
[11084] | 542 | '<h1 class="title" id="' + destTag + result[i][0].SlaveID + 'PlotTitle">Slave ' + result[i][0].SlaveID + '</h1>' +
|
---|
[11053] | 543 | '<button class="collapse" onclick="CollapseSection(this)">+</button>' +
|
---|
[11084] | 544 | '<div id="' + destTag + slaveChartNames[0] + 'Plot' + i + '"></div>' +
|
---|
| 545 | '<div id="' + destTag + slaveChartNames[1] + 'Plot' + i + '"></div>' +
|
---|
| 546 | '<div id="' + destTag + slaveChartNames[2] + 'Plot' + i + '"></div>' +
|
---|
[11053] | 547 | '</section>');
|
---|
[11036] | 548 | for(j = 0; j < result[i].length; j++) {
|
---|
| 549 | time.setTime(result[i][j].Time.replace(/\D/g,''));
|
---|
| 550 | coreSeries[0].push([time.toUTCString(),result[i][j].TotalCores]);
|
---|
| 551 | coreSeries[1].push([time.toUTCString(),result[i][j].UsedCores]);
|
---|
| 552 | memorySeries[0].push([time.toUTCString(),(result[i][j].TotalMemory / 1000)]);
|
---|
| 553 | memorySeries[1].push([time.toUTCString(),(result[i][j].UsedMemory / 1000)]);
|
---|
| 554 | cpuSeries[0].push([time.toUTCString(),result[i][j].CPUUtilization]);
|
---|
| 555 | }
|
---|
[11053] | 556 | if(result[i].length > 1) {
|
---|
[11084] | 557 | @ChartHelper.LineChartGivenSeries("destTag + slaveChartNames[0]", "i", "coreSeries", "Total/Used Cores")
|
---|
| 558 | @ChartHelper.LineChartGivenSeries("destTag + slaveChartNames[1]", "i", "memorySeries", "Total/Used Memory", 0)
|
---|
| 559 | @ChartHelper.LineChartGivenSeries("destTag + slaveChartNames[2]", "i", "cpuSeries", "CPU Utilization", 0, 100, "%.1f%%")
|
---|
[11053] | 560 | }
|
---|
| 561 | else {
|
---|
[11084] | 562 | @ChartHelper.BarChartGivenSeries("destTag + slaveChartNames[0]", "i", "coreSeries", "Total/Used Cores")
|
---|
| 563 | @ChartHelper.BarChartGivenSeries("destTag + slaveChartNames[1]", "i", "memorySeries", "Total/Used Memory", 0)
|
---|
| 564 | @ChartHelper.BarChartGivenSeries("destTag + slaveChartNames[2]", "i", "cpuSeries", "CPU Utilization", 0, 100, "%.1f%%")
|
---|
[11053] | 565 | }
|
---|
| 566 | for(k = 0; k < slaveChartNames.length; k++) {
|
---|
[11084] | 567 | CollapsedByDefault(document.getElementById(destTag + slaveChartNames[k] + "Plot" + i));
|
---|
[11053] | 568 | }
|
---|
[11036] | 569 | }
|
---|
| 570 | }
|
---|
| 571 | }});
|
---|
| 572 | </text>
|
---|
| 573 | }
|
---|
| 574 |
|
---|
[11084] | 575 | @helper LineChartGivenSeries(string destinationTag, string chartId, string series, string title, double? minY = null, double? maxY = null, string axisYFormat = null)
|
---|
| 576 | {
|
---|
[11036] | 577 | <text>
|
---|
[11059] | 578 | window[@(destinationTag) + "Plot" + @(chartId)] = $.jqplot(@(destinationTag) + "Plot" + @(chartId), @series, {
|
---|
[11036] | 579 | title: "@title",
|
---|
| 580 | axes: {
|
---|
| 581 | xaxis: {
|
---|
| 582 | renderer: $.jqplot.DateAxisRenderer,
|
---|
| 583 | tickOptions:{formatString:'%b %#d, %y'},
|
---|
| 584 | pad: 0
|
---|
| 585 | },
|
---|
| 586 | yaxis: {
|
---|
[11084] | 587 | @if (axisYFormat != null)
|
---|
| 588 | {
|
---|
[11036] | 589 | <text>
|
---|
| 590 | tickOptions: {
|
---|
| 591 | formatString: "@axisYFormat"
|
---|
| 592 | },
|
---|
| 593 | </text>
|
---|
| 594 | }
|
---|
[11084] | 595 | pad: 0,
|
---|
| 596 | @if (minY != null)
|
---|
| 597 | {
|
---|
[11036] | 598 | @:min: @minY,
|
---|
| 599 | }
|
---|
[11084] | 600 | @if (maxY != null)
|
---|
| 601 | {
|
---|
[11036] | 602 | @:max: @maxY,
|
---|
| 603 | }
|
---|
| 604 | }
|
---|
| 605 | },
|
---|
| 606 | gridPadding: { left: 50, right: 10 },
|
---|
| 607 | cursor: {
|
---|
| 608 | show: true,
|
---|
| 609 | showTooltip: false,
|
---|
| 610 | zoom: true,
|
---|
| 611 | clickReset: false,
|
---|
| 612 | dblClickReset: false,
|
---|
| 613 | constrainZoomTo: 'x'
|
---|
| 614 | }
|
---|
| 615 | });
|
---|
| 616 | </text>
|
---|
| 617 | }
|
---|
| 618 |
|
---|
[11084] | 619 | @helper BarChartGivenSeries(string destinationTag, string chartId, string series, string title, double? minY = null, double? maxY = null, string axisYFormat = null)
|
---|
| 620 | {
|
---|
[11036] | 621 | <text>
|
---|
[11059] | 622 | window[@(destinationTag) + "Plot" + @(chartId)] = $.jqplot(@(destinationTag) + "Plot" + @(chartId), @series, {
|
---|
[11036] | 623 | title: "@title",
|
---|
| 624 | seriesDefaults:{
|
---|
| 625 | renderer:$.jqplot.BarRenderer,
|
---|
| 626 | shadowAngle: 135,
|
---|
| 627 | pointLabels: {show: true, formatString: '%.2f'}
|
---|
| 628 | },
|
---|
| 629 | axes: {
|
---|
| 630 | xaxis: {
|
---|
| 631 | renderer: $.jqplot.CategoryAxisRenderer,
|
---|
| 632 | tickOptions:{formatString:'%b %#d, %y'},
|
---|
| 633 | pad: 0
|
---|
| 634 | },
|
---|
| 635 | yaxis: {
|
---|
[11084] | 636 | @if (axisYFormat != null)
|
---|
| 637 | {
|
---|
[11036] | 638 | <text>
|
---|
| 639 | tickOptions: {
|
---|
| 640 | formatString: "@axisYFormat"
|
---|
| 641 | },
|
---|
| 642 | </text>
|
---|
| 643 | }
|
---|
[11084] | 644 | pad: 0,
|
---|
| 645 | @if (minY != null)
|
---|
| 646 | {
|
---|
[11036] | 647 | @:min: @minY,
|
---|
| 648 | }
|
---|
[11084] | 649 | @if (maxY != null)
|
---|
| 650 | {
|
---|
[11036] | 651 | @:max: @maxY,
|
---|
| 652 | }
|
---|
| 653 | }
|
---|
| 654 | },
|
---|
| 655 | gridPadding: { left: 50, right: 10 },
|
---|
| 656 | cursor: {
|
---|
| 657 | show: true,
|
---|
| 658 | showTooltip: false,
|
---|
| 659 | zoom: true,
|
---|
| 660 | clickReset: false,
|
---|
| 661 | dblClickReset: false,
|
---|
| 662 | constrainZoomTo: 'x'
|
---|
| 663 | }
|
---|
| 664 | });
|
---|
| 665 | </text>
|
---|
[9625] | 666 | } |
---|