Free cookie consent management tool by TermsFeed Policy Generator

source: branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/App_Code/ChartHelper.cshtml @ 11252

Last change on this file since 11252 was 11252, checked in by mroscoe, 9 years ago
File size: 30.4 KB
Line 
1@* HeuristicLab
2 * Copyright (C) 2002-2013 Heuristic and Evolutionary Algorithms Laboratory (HEAL)
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
20@helper AjaxDataRenderer()
21{
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
38@helper LineChartTime(string destinationTag, string url, string title = "", double? minY = null, double? maxY = null, string axisYFormat = null)
39{
40  <script>
41    var @(destinationTag)Plot = $.jqplot("@destinationTag", "@url", {
42      title: "@title",
43      highlighter: {
44        show: true,
45        sizeAdjust: 7.5
46      },
47      seriesDefaults: {
48        markerOptions: { show: false }
49      },
50      dataRenderer: ajaxDataRenderer,
51      axes: {
52        xaxis: {
53          renderer: $.jqplot.DateAxisRenderer,
54          pad: 0
55        },
56        yaxis: {
57          @if (axisYFormat != null)
58          {<text>
59          tickOptions: {
60            formatString: "@axisYFormat",
61          },
62          </text>}
63          autoscale: true,
64          pad: 0,
65          @if (minY != null)
66          {
67            @:min: @minY,
68          }
69          @if (maxY != null)
70          {
71            @:max: @maxY,
72          }
73        },
74      },
75      gridPadding: { left: 50, right: 10 },
76      cursor: {
77        show: true,
78        showTooltip: false,
79        zoom: true,
80        clickReset: false,
81        dblClickReset: false,
82        constrainZoomTo: 'x'
83      }
84    });
85       
86    $(window).resize(function() {
87      @(destinationTag)Plot.replot({ resetAxes: true });
88    });
89  </script>
90}
91
92@helper RefreshChart(string destinationTag, string url, string startDate, string endDate, double? minY = null, double? maxY = null)
93{
94  <text>
95  $.ajax({url: "@(new HtmlString(url))?start=" + @startDate + "&end=" + @endDate, datatype: "json", success: function(result) {
96    for (var i = 0; i < result.length; i++) {
97      @(destinationTag)Plot.series[i].data = result[i];
98    }
99    //Resets only the xaxis, still need to resize y with given min/max
100    @(destinationTag)Plot.replot({resetAxes:true});
101    @if (minY != null)
102    {
103      //If min Y was provided set the plot's min Y value
104      @:@(destinationTag)Plot.axes.yaxis.min = @minY;
105    }
106    @if (maxY != null)
107    {
108      //If max Y was provided set the plot's max Y value
109      @:@(destinationTag)Plot.axes.yaxis.max = @maxY;
110    }
111    @(destinationTag)Plot.axes.yaxis.reset();
112    //A final replot to redraw possible new Y axis values
113    @(destinationTag)Plot.replot({resetAxes:['xaxis']});
114@*    @(destinationTag)Plot.replot({ resetAxes:true });*@
115  }});
116  </text>
117}
118
119@helper ResizeCharts()
120{
121  <text>
122  function resizeCharts(caller) {
123    //If current plot is collapsed
124    if($(caller).css("display") == "none") {
125      //Display the contents of chartContainer
126      ResizeOpenClose($(caller).siblings(".collapse"));
127      //Reset barWidth for bar charts
128      $.each(window[caller.id].series, function(index, series) {
129        series.barWidth = undefined;
130      });
131      //Replot the chart with same name as element id
132      window[caller.id].replot({ resetAxes: false });
133      //Hide the contents of the current div
134      ResizeOpenClose($(caller).siblings(".collapse"));
135    }
136    //Current plot is expanded
137    else {
138      //Reset barWidth for bar charts
139      $.each(window[caller.id].series, function(index, series) {
140        series.barWidth = undefined;
141      });
142      //Replot the chart with same name as element id
143      window[caller.id].replot({ resetAxes: false });
144    }
145  }
146
147  $(window).resize(function() {
148    $("div.jqplot-target",".chartContainer").each(function() {
149      var potentialTab = $(this).parent().parent().parent();
150      //If the section is tabular and currently hidden
151      if(potentialTab.hasClass("tabSection") && potentialTab.css("display") == "none") {
152        ResizeOpenCloseTabular(potentialTab);
153        resizeCharts(this);
154        ResizeOpenCloseTabular(potentialTab);
155      }
156      else {
157        resizeCharts(this);
158      }
159    });
160  });
161  </text>
162}
163
164@helper NumberPages(string records, string limit, string container, string functionName, string currentPage = null)
165{
166  <text>
167    if(@(records).length > @limit) {
168      var appendPages = '<section class="pageContainer"><label class="pageTitle">Page: </label>';
169      var pages = Math.floor(@(records).length/@(limit)) + 1;
170      for(var i=0; i < pages; i++) {
171        appendPages += '<a id="@(container)Page' + (i + 1) + '" class="page">' + (i + 1) + '</a>';
172      }
173      appendPages += '</section>';
174      $("#@container").append(appendPages);
175      if(@currentPage != null) {
176        $("#@(container)Page" + @currentPage).css('color','#F7921D');
177      }
178      else {
179        $("#@(container)Page1").css('color','#F7921D');
180      }
181      $(".page").click(function () {
182        pageNumber = $(this).html();
183        @(functionName)();
184      });
185      if(@currentPage != null) {
186        @(records).splice(0,(@(currentPage)-1)*@(limit));
187        if (@(records).length > @(limit)) {
188          @(records).splice(@(limit), @(records).length - @(limit));
189        }
190      }
191      else {
192        @(records).splice(@(limit), @(records).length - @(limit));
193      }
194    }
195  </text>
196}
197
198@helper TaskContainers(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)
199{
200  <text>
201    var GetRequest = "?userName=" + @(userName);
202    @if (startDate != null)
203    {
204      @:if(@(startDate)!=null) {
205        @:GetRequest += "&start=" + @startDate;
206      @:}
207    }
208    @if (endDate != null)
209    {
210      @:if(@(endDate)!=null) {
211        @:GetRequest += "&end=" + @endDate;
212      @:}
213    }
214    @if (jobId != null)
215    {
216      @:if(@(jobId)!=null) {
217        @:GetRequest += "&jobId=" + @jobId;
218      @:}
219    }
220    @if (taskState != null)
221    {
222      @:if(@(taskState)!=null) {
223        @:GetRequest += "&taskState=" + @taskState;
224      @:}
225    }
226    $.ajax({
227      async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
228      if(@(userName) == null) {
229        $("#@(destinationTag)").append(
230          '<section class="chartContainer">' +
231            '<h1 class="title">Please select a user!</h1>' +
232          '</section>'
233        )
234      }
235      else if(result.length==0) {
236        $("#@(destinationTag)").append(
237          '<section class="chartContainer">' +
238            '<h1 class="title">' + @userName + ' has no tasks for the specified filters!</h1>' +
239          '</section>'
240        )
241      }
242      else {
243        //Checks if multipage display, if it is then trims results to
244        //the results for the page to be displayed
245        @ChartHelper.NumberPages("result", limit, destinationTag, functionName, pageNumber)
246
247        //Set display of all errors to none, errors matching the tasks will be reset below
248        $("#@(destinationTag)").find(".errorContainer, .errorTitle, .errorTask, .errorMessage").css('display','none');
249
250        //Set variable for tracking jobId and open first job grouping
251        var currentJob = result[0].JobId;
252
253        //For each result create a seperate collapsable section with a chart and info label
254        for(var i = 0; i < result.length; i++){
255          if(currentJob != result[i].JobId || i == 0) {
256            $("#@(destinationTag)").append(
257              '<section class="jobTaskGroup" id="' + result[i].JobId + '">' +
258                '<h1>' + result[i].JobName + '</h1>' +
259                '<section class="chartContainer">' +
260                  '<h1 class="title" id="@(destinationTag)' + result[i].JobId + 'PlotTitle">Job Overview - ' + result[i].JobName + '</h1>' +
261                  '<button class="collapse" onclick="LoadJob(this)">+</button>' +
262                  '<div id="@(destinationTag)JobOverviewPlot' + i + '"></div>' +
263                  '<label id="@(destinationTag)JobOverviewPlotInfo' + i + '"></label>' +
264                '</section>' +
265              '</section>'
266            );
267            CollapsedByDefault(document.getElementById("@(destinationTag)JobOverviewPlot" + i));
268            currentJob = result[i].JobId;
269          }
270          $("#" + currentJob).append(
271            '<section class="chartContainer">' +
272              '<h1 class="title" id="@(destinationTag)' + result[i].TaskId + 'PlotTitle">Task ' + result[i].TaskId + '</h1>' +
273              '<button class="collapse" onclick="LoadTask(this)">+</button>' +
274              '<div id="@(destinationTag)Plot' + i + '"></div>' +
275              '<label id="@(destinationTag)PlotInfo' + i + '"></label>' +
276              '<a id="' + result[i].TaskId + '" class="moreInfo" onclick="MoreTaskInfo(this)">More Info</a>' +
277            '</section>'
278          );
279          //Re-enables the error display if any of the tasks on the page have Ids matching
280          //those of errors
281          $(".errorTask","#" + "@(destinationTag)").each(function() {
282            if($(this).html()==result[i].TaskId) {
283              $("#@(destinationTag)" + result[i].TaskId + "PlotTitle").css("color","red");
284              $("#@(destinationTag)" + result[i].TaskId + "PlotTitle").append(" - ERROR");
285              $(".errorContainer, .errorTitle, .underline","#@(destinationTag)").css('display','inline-block');
286              $(this).css('display','inline-block');
287              $(this).next().css('display','inline-block');
288            }
289          });
290          CollapsedByDefault(document.getElementById("@(destinationTag)Plot" + i));
291        }
292      }
293    }});
294  </text>
295}
296
297@helper LoadJob(string url)
298{
299  <text>
300    function LoadJob(caller) {
301      CheckFilters();
302      if($(caller).next().html()=="") {
303        var plotName = $(caller).next().attr('id');
304        //Set current job id
305        var jobId = $(caller).parent().parent().attr('id');
306        var GetRequest = "?jobId=" + jobId;
307
308        $.ajax({ async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
309          CollapseSection(caller);
310          var seriesDescription = ['Waiting','Transferring','Calculating','Finished','Error'];
311          window[plotName] = $.jqplot(plotName, [[result.Wait],[result.Transfer],[result.Calculate],[result.Finish],[result.Error]], {
312            seriesDefaults:{
313              renderer:$.jqplot.BarRenderer,
314              shadowAngle: 135,
315              pointLabels: {show: true, formatString: '%.0f'}
316            },
317            series:[
318              {label:seriesDescription[0]},
319              {label:seriesDescription[1]},
320              {label:seriesDescription[2]},
321              {label:seriesDescription[3]},
322              {label:seriesDescription[4]}
323            ],
324            legend: {
325              show: true,
326              location: 'e',
327              placement: 'outside'
328            },
329            axes: {
330              xaxis: {
331                renderer: $.jqplot.CategoryAxisRenderer,
332                showLabel: false,
333                pad: 0
334              },
335              yaxis: {
336                padMax: 1.5
337              }
338            },
339            cursor: {
340              showTooltip: false
341            }
342          });
343          /* Bind a datalistener to each chart and display details of clicked
344            upon data in the label below the chart */
345          $("#" + plotName).bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
346            $(this).next("label").html("Tasks " + seriesDescription[seriesIndex] + ": " + data[1]);
347          });
348        }});
349      }
350      else {
351        CollapseSection(caller);
352      }
353    }
354  </text>
355}
356
357@helper LoadTask(string url)
358{
359  <text>
360    function LoadTask(caller) {
361      CheckFilters();
362      if($(caller).next().html()=="") {
363        var plotName = $(caller).next().attr('id');
364        //Set current slave id
365        var currentTask = $(caller).siblings('a.moreInfo').attr('id');
366        var GetRequest = "?taskId=" + currentTask;
367
368        $.ajax({ async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
369          var waitTime;
370          var transferTime;
371          var runTime;
372          var seriesDescriptions = ["Time waiting","Time transferring","Time calculating"];
373          CollapseSection(caller);
374          for(i = 0; i < result.length; i++) {
375            waitTime = [result[i].TotalWaiting];
376            transferTime = [result[i].TotalTransfer];
377            runTime = [result[i].TotalRuntime];
378            window[plotName] = $.jqplot(plotName, [waitTime,transferTime,runTime], {
379              seriesDefaults:{
380                renderer:$.jqplot.BarRenderer,
381                shadowAngle: 135,
382                pointLabels: {show: true, formatString: '%.3f'}
383              },
384              series:[
385                {label:'Waiting'},
386                {label:'Transferring'},
387                {label:'Calculating'}
388              ],
389              legend: {
390                show: true,
391                location: 'e',
392                placement: 'outside'
393              },
394              axes: {
395                xaxis: {
396                  renderer: $.jqplot.CategoryAxisRenderer,
397                  showLabel: false,
398                  pad: 0
399                },
400                yaxis: {
401                  pad: 0
402                }
403              },
404              cursor: {
405                showTooltip: false
406              }
407            });
408            /* Bind a datalistener to each chart and display details of clicked
409              upon data in the label below the chart */
410            $("#" + plotName).bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
411              $(this).next("label").html(seriesDescriptions[seriesIndex] + ": " + data[1].toFixed(4) + " seconds");
412            });
413          }
414        }});
415      }
416      else {
417        CollapseSection(caller);
418      }
419    }
420  </text>
421}
422
423@helper SetStreamingProperties(int refresh, int chartLength, int upperY)
424{
425  <text>
426  //Refresh time (in millisec)
427  var refreshRate = @(refresh);
428  //Number of data points on chart
429  var chartSize = @(chartLength);
430  //Amount to add to max Y value
431  var upperYBuffer = @(upperY);
432
433  //Used to return a string containing the names of the series
434  //to be used in plot creation
435  function GetSeries(numberData,dataName){
436    var result = "[";
437    for(i=0; i < numberData; i++) {
438      if(i < numberData -1) {
439        result += dataName + i + ",";
440      }
441      else {
442        result += dataName + i + "]";
443      }
444    }
445    return result;
446  }
447  </text>
448}
449
450@helper CreateStreamChart(string dataName, string destinationTag, string url, string title, string format = null, double? maxY = null)
451{
452  <text>
453  //Get current time, used to create initial values
454  var @(dataName)CurrentDate = (new Date()).getTime();
455
456  var @(dataName)Data = [];
457  var @(dataName)CurrentValue = [];
458
459  //Get the most recent value(s) from the given URL
460  $.ajax({
461    async: false, url: '@(url)', datatype: "json", success: function (result) {
462      for(i = 0; i < result.length; i++) {
463        @(dataName)CurrentValue[i] = result[i];
464      }
465    }
466  });
467 
468  //Create a chartSize worth of data using CurrentDate and CurrentValue
469  //for each CurrentValue
470  for(i = 0; i < @(dataName)CurrentValue.length; i++) {
471    window["@(dataName)Data" + i] = [];
472    for (j = 0; j < chartSize; j++) {
473      window[ "@(dataName)Data" + i].push([@(dataName)CurrentDate - (chartSize - 1 - j) * refreshRate, @(dataName)CurrentValue[i]]);
474    }
475  }
476
477  //Options for the chart to be created
478  var @(destinationTag)PlotOptions = {
479    title: "@title",
480    highlighter: {
481      show: true,
482      sizeAdjust: 7.5
483    },
484    axes: {
485      xaxis: {
486        numberTicks: 4,
487        renderer: $.jqplot.DateAxisRenderer,
488        tickOptions: { formatString: '%H:%M:%S' },
489        min: window["@(dataName)Data" + 0][0][0],
490        max: window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][0]
491      },
492      yaxis: {
493        @if (format != null)
494        {<text>
495        tickOptions: {
496            formatString: "@format",
497        },
498        </text>}
499        min: 0,
500        @if (maxY != null)
501        {
502          @:max: @maxY,
503        }
504        else
505        {
506          @:max: window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][1] + upperYBuffer,
507        }
508        numberTicks: 5
509      }
510    },
511    seriesDefaults: {
512      rendererOptions: { smooth: true },
513      markerOptions: {
514        show: false
515      }
516    },
517    cursor: {
518      show: true,
519      showTooltip: false,
520      zoom: true,
521      clickReset: false,
522      dblClickReset: false,
523      constrainZoomTo: 'x'
524    }
525  };
526
527  //Declares the jqPlot variable, evals the string of series returned
528  //from getSeries which allows for any number of series
529  window[ "@(destinationTag)Plot"] = $.jqplot('@destinationTag', eval(GetSeries(@(dataName)CurrentValue.length,"@(dataName)Data")), @(destinationTag)PlotOptions);
530  </text>
531}
532
533@helper UpdateStreamChart(string dataName, string destinationTag, string url, string fixedY = null)
534{
535  <text>
536  //If the data is beyond chartSize use shift to trim one off the end
537  for(i = 0; i < @(dataName)CurrentValue.length; i++) {
538    if (window["@(dataName)Data" + i].length > chartSize - 1) {
539      window["@(dataName)Data" + i].shift();
540    }
541  }
542
543  //Get the up-to-date data, each result assigned to it's own array
544  $.ajax({
545    async: false, url: '@(url)', datatype: "json", success: function (result) {
546      for(i = 0; i < result.length; i++) {
547        window[ "@(dataName)Data" + i].push([(new Date()).getTime(), result[i]]);
548      }
549    }
550  });
551
552  //If the plot exists currently destroy it
553  if ( @(destinationTag)Plot) {
554    @(destinationTag)Plot.destroy();
555  }
556
557  //Assign series
558  for(i = 0; i < @(dataName)CurrentValue.length; i++) {
559    @(destinationTag)Plot.series[i].data = window["@(dataName)Data" + i];
560  }
561
562  //Recalculate x and possibly y axis max and mins
563  @(destinationTag)PlotOptions.axes.xaxis.min = window["@(dataName)Data" + 0][0][0];
564  @(destinationTag)PlotOptions.axes.xaxis.max = window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][0];
565  @if (fixedY == null)
566  {
567    @:@(destinationTag)PlotOptions.axes.yaxis.max = window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][1] + upperYBuffer;
568  }
569
570  //Re-assigns the jqPlot variable, evals the string of series returned
571  //from getSeries which allows for any number of series
572  @(destinationTag)Plot = $.jqplot('@destinationTag', eval(GetSeries(@(dataName)CurrentValue.length,"@(dataName)Data")), @(destinationTag)PlotOptions);
573  </text>
574}
575
576@helper SlaveContainers(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)
577{
578  <text>
579  var GetRequest = "";
580  @if (startDate != null)
581  {
582    @:if(@(startDate)!=null) {
583      @:if(GetRequest == "") {
584        @:GetRequest += "?start=" + @startDate;
585      @:}
586      @:else {
587        @:GetRequest += "&start=" + @startDate;
588      @:}
589    @:}
590  }
591  @if (endDate != null)
592  {
593    @:if(@(endDate)!=null) {
594      @:if(GetRequest == "") {
595        @:GetRequest += "?end=" + @endDate;
596      @:}
597      @:else {
598        @:GetRequest += "&end=" + @endDate;
599      @:}
600    @:}
601  }
602  @if (userName != null)
603  {
604    @:if(@(userName)!=null) {
605      @:if(GetRequest == "") {
606        @:GetRequest += "?userName=" + @userName;
607      @:}
608      @:else {
609        @:GetRequest += "&userName=" + @userName;
610      @:}
611    @:}
612  }
613  @if (slaveId != null)
614  {
615    @:if(@(slaveId)!=null) {
616      @:if(GetRequest == "") {
617        @:GetRequest += "?slaveId=" + @slaveId;
618      @:}
619      @:else {
620        @:GetRequest += "&slaveId=" + @slaveId;
621      @:}
622    @:}
623  }
624  $.ajax({ async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
625    //Set chart names for use in creation below, must be set identically in LoadSlave and ResizeSlaves
626    var slaveChartNames = ["TotalUsedCores","TotalUsedMemory","CPUUtilization"];
627
628    @if (!singleSlave) {
629      @:$('#@(destinationTag)').html("");
630
631      //Checks if multipage display, if it is then trims results to
632      //the results for the page to be displayed
633      @ChartHelper.NumberPages("result", limit, destinationTag, functionName, pageNumber)
634
635     
636      @:var destTag = "@(destinationTag)";
637    }
638    else {
639      @:var destTag = @(destinationTag);
640    }
641
642    if(result.length == 0) {
643      @if (!singleSlave)
644      {
645        @:$('#' + destTag).html("");
646      }
647      $('#' + destTag).append(
648        '<section class="chartContainer">' +
649          '<h1 class="title">No slave information for the specified filters!</h1>' +
650        '</section>'
651      )
652    }
653
654    for(i = 0; i < result.length; i++) {
655      $('#' + destTag).append(
656        '<section class="chartContainer">' +
657          '<h1 class="title" id="' + destTag + result[i][0].SlaveID + 'PlotTitle">Slave ' + result[i][0].ClientName + '</h1>' +
658          '<button class="collapse" onclick="LoadSlave(this)">+</button>' +
659          '<div id="' + destTag + slaveChartNames[0] + 'Plot' + result[i][0].SlaveID + '"></div>' +
660          '<div id="' + destTag + slaveChartNames[1] + 'Plot' + result[i][0].SlaveID + '"></div>' +
661          '<div id="' + destTag + slaveChartNames[2] + 'Plot' + result[i][0].SlaveID + '"></div>' +
662          '<a id="' + result[i][0].SlaveID + '" class="moreInfo" onclick="MoreSlaveInfo(this)">More Info</a>' +
663        '</section>');
664      for(k = 0; k < slaveChartNames.length; k++) {
665        CollapsedByDefault(document.getElementById(destTag + slaveChartNames[k] + "Plot" + result[i][0].SlaveID));
666      }
667    }
668  }});
669  </text>
670}
671
672@helper LoadSlave(string url, string limit, string startDate = null, string endDate = null, string userName = null, string pageNumber = null) {
673  <text>
674  function LoadSlave(caller) {
675    CheckFilters();
676    if($(caller).next().html()=="") {
677      var destTag = $(caller).parent().parent().attr('id');
678      //Set current slave id
679      var currentSlave = $(caller).siblings('a.moreInfo').attr('id');
680      var GetRequest = "?slaveId=" + currentSlave;
681      @if (startDate != null)
682      {
683        @:if(@(startDate)!=null) {
684          @:GetRequest += "&start=" + @startDate;
685        @:}
686      }
687      @if (endDate != null)
688      {
689        @:if(@(endDate)!=null) {
690          @:GetRequest += "&end=" + @endDate;
691        @:}
692      }
693      @if (userName != null)
694      {
695        @:if(@(userName)!=null) {
696          @:GetRequest += "&userName=" + @userName;
697        @:}
698      }
699      $.ajax({ async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
700        //Set chart names for use in creation below, must be set identically in SlaveContainers and ResizeSlaves
701        var slaveChartNames = ["TotalUsedCores","TotalUsedMemory","CPUUtilization"];
702        CollapseSection(caller);
703        var time = new Date();
704        var coreSeries = [];
705        coreSeries[0] = [];
706        coreSeries[1] = [];
707        var memorySeries = [];
708        memorySeries[0] = [];
709        memorySeries[1] = [];
710        var cpuSeries = [];
711        cpuSeries[0] = [];
712        for(i = 0; i < result.length; i++) {
713          time.setTime(result[i].Time.replace(/\D/g,''));
714          coreSeries[0].push([time.toUTCString(),result[i].TotalCores]);
715          coreSeries[1].push([time.toUTCString(),result[i].UsedCores]);
716          memorySeries[0].push([time.toUTCString(),(result[i].TotalMemory / 1000)]);
717          memorySeries[1].push([time.toUTCString(),(result[i].UsedMemory / 1000)]);
718          cpuSeries[0].push([time.toUTCString(),result[i].CPUUtilization]);
719        }
720        if(result.length > 1) {
721          @ChartHelper.LineChartGivenSeries("destTag + slaveChartNames[0]", "currentSlave", "coreSeries", "Total/Used Cores")
722          @ChartHelper.LineChartGivenSeries("destTag + slaveChartNames[1]", "currentSlave", "memorySeries", "Total/Used Memory", 0)
723          @ChartHelper.LineChartGivenSeries("destTag + slaveChartNames[2]", "currentSlave", "cpuSeries", "CPU Utilization", 0, 100, "%.1f%%")
724        }
725        else {
726          @ChartHelper.BarChartGivenSeries("destTag + slaveChartNames[0]", "currentSlave", "coreSeries", "Total/Used Cores")
727          @ChartHelper.BarChartGivenSeries("destTag + slaveChartNames[1]", "currentSlave", "memorySeries", "Total/Used Memory", 0)
728          @ChartHelper.BarChartGivenSeries("destTag + slaveChartNames[2]", "currentSlave", "cpuSeries", "CPU Utilization", 0, 100, "%.1f%%")
729        }
730      }});
731    }
732    else {
733      CollapseSection(caller);
734    }
735  }
736  </text>
737}
738
739@helper LineChartGivenSeries(string destinationTag, string chartId, string series, string title, double? minY = null, double? maxY = null, string axisYFormat = null)
740{
741  <text>
742  window[@(destinationTag) + "Plot" + @(chartId)] = $.jqplot(@(destinationTag) + "Plot" + @(chartId), @series, {
743    title: "@title",
744    axes: {
745      xaxis: {
746        renderer: $.jqplot.DateAxisRenderer,
747        tickOptions:{formatString:'%b %#d, %y'},
748        pad: 0
749      },
750      yaxis: {
751        @if (axisYFormat != null)
752        {
753          <text>
754          tickOptions: {
755              formatString: "@axisYFormat"
756          },
757          </text>
758        }
759        pad: 0,
760        @if (minY != null)
761        {
762            @:min: @minY,
763        }
764        @if (maxY != null)
765        {
766            @:max: @maxY,
767        }
768      }
769    },
770    gridPadding: { left: 50, right: 10 },
771    cursor: {
772      show: true,
773      showTooltip: false,
774      zoom: true,
775      clickReset: false,
776      dblClickReset: false,
777      constrainZoomTo: 'x'
778    }
779  });
780  </text>
781}
782
783@helper BarChartGivenSeries(string destinationTag, string chartId, string series, string title, double? minY = null, double? maxY = null, string axisYFormat = null)
784{
785  <text>
786  window[@(destinationTag) + "Plot" + @(chartId)] = $.jqplot(@(destinationTag) + "Plot" + @(chartId), @series, {
787    title: "@title",
788    seriesDefaults:{
789      renderer:$.jqplot.BarRenderer,
790      shadowAngle: 135,
791      pointLabels: {show: true, formatString: '%.2f'}
792    },
793    axes: {
794      xaxis: {
795        renderer: $.jqplot.CategoryAxisRenderer,
796        tickOptions:{formatString:'%b %#d, %y'},
797        pad: 0
798      },
799      yaxis: {
800        @if (axisYFormat != null)
801        {
802          <text>
803          tickOptions: {
804              formatString: "@axisYFormat"
805          },
806          </text>
807        }
808        pad: 0,
809        @if (minY != null)
810        {
811            @:min: @minY,
812        }
813        @if (maxY != null)
814        {
815            @:max: @maxY,
816        }
817      }
818    },
819    gridPadding: { left: 50, right: 10 },
820    cursor: {
821      show: true,
822      showTooltip: false,
823      zoom: true,
824      clickReset: false,
825      dblClickReset: false,
826      constrainZoomTo: 'x'
827    }
828  });
829  </text>
830}
831
832@helper UserTasks(string url, string insertAfter, string taskState) {
833  <text>
834    var GetRequest = "?taskState=@(taskState)";
835
836    $.ajax({ async: false, url: "@(new HtmlString(url))" + GetRequest, datatype: "json", success: function(result) {
837      if(result.length==0) {
838        $("@(insertAfter)").after(
839          '<section class="chartContainer">' +
840            '<h1 class="title">No users currently have any tasks ' + @(taskState) + '!</h1>' +
841          '</section>'
842        )
843      }
844      else {
845        $("@(insertAfter)").after(
846          '<section class="chartContainer">' +
847            '<h1 class="title" id="UserTask@(taskState)PlotTitle">@(taskState) Tasks</h1>' +
848            '<button class="collapse" onclick="CollapseSection(this)">-</button>' +
849            '<div id="UserTask@(taskState)Plot" class="noXTicks"></div>' +
850            '<label id="UserTask@(taskState)PlotInfo"></label>' +
851          '</section>'
852        );
853      }
854      var userTasks = [];
855      var userNameLabels = [];
856      var userNames = [];
857      for (i=0; i < result.length; i++) {
858        userTasks[i] = [result[i].Value];
859        userNameLabels[i] = { label: result[i].Key };
860        userNames[i] = result[i].Key;
861      }
862      window["UserTask@(taskState)Plot"] = $.jqplot("UserTask@(taskState)Plot", userTasks, {
863        title: "Users with @(taskState) Tasks",
864        seriesDefaults:{
865          renderer:$.jqplot.BarRenderer,
866          shadowAngle: 135,
867          pointLabels: {show: true, formatString: '%.3f'}
868        },
869        series: userNameLabels,
870        legend: {
871          show: true,
872          location: 'e',
873          placement: 'outside'
874        },
875        axes: {
876          xaxis: {
877            renderer: $.jqplot.CategoryAxisRenderer,
878            showTicks: false,
879            pad: 0
880          },
881          yaxis: {
882            padMax: 1.5
883          }
884        },
885        cursor: {
886          showTooltip: false
887        }
888      });
889      /* Bind a datalistener to each chart and display details of clicked
890        upon data in the label below the chart */
891      $("#UserTask" + "@(taskState)Plot").bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
892        $(this).next("label").html(userNames[seriesIndex] + " Tasks @(taskState): "  + data[1]);
893      });
894    }});
895  </text>
896}
Note: See TracBrowser for help on using the repository browser.