Context Navigation

ChartHelper.cshtml @ 12394

Visit:

Last change on this file since 12394 was 11259, checked in by mroscoe, 10 years ago

File size: 30.5 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 slaveState, 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)?state=" + @(slaveState), 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 slaveState, 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)?state=" + @(slaveState), 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.

Download in other formats:

Original Format