root / hci / trunk / eneraptor-web-app / grails-app / views / sysLog / live.gsp @ 76
History | View | Annotate | Download (4.3 KB)
| 1 |
<html> |
|---|---|
| 2 |
|
| 3 |
<head> |
| 4 |
<title>Log » Live graph</title> |
| 5 |
<meta name="layout" content="main" /> |
| 6 |
<flot:resources /> |
| 7 |
</head> |
| 8 |
|
| 9 |
<body> |
| 10 |
|
| 11 |
<erptr:box title="Select device"> |
| 12 |
<p>Please, select a device, refresh rate and time span.</p> |
| 13 |
|
| 14 |
<form action="javascript:startLiveGraph();"> |
| 15 |
<label for="deviceId">Device ID</label> |
| 16 |
<g:select name="deviceId" from="${devices}" optionValue="friendlyName" optionKey="deviceId" value="${params.deviceId}" style="width:300px;" />
|
| 17 |
<br /><br /> |
| 18 |
<label for="refreshRate">Refresh rate</label> |
| 19 |
<g:select name="refreshRate" from="${1..60}" style="width:50px;" /><span> seconds</span>
|
| 20 |
<br /><br /> |
| 21 |
<label for="timeSpan">Time span</label> |
| 22 |
<g:select name="timeSpan" from="${1..60}" style="width:50px;" /><span> minutes</span>
|
| 23 |
<br /><br /> |
| 24 |
<label for="outputDevice">Actions to show</label> |
| 25 |
<g:select name="outputDevice" from="${outputDevices}" optionValue="friendlyName" optionKey="deviceId" value="${params.outputDevice}" style="width:300px;" noSelection="${['none':'- None -']}" />
|
| 26 |
<br /><br /> |
| 27 |
<g:submitButton name="liveGraphSubmit" value="Start" /> |
| 28 |
</form> |
| 29 |
|
| 30 |
</erptr:box> |
| 31 |
|
| 32 |
<erptr:box title="Live graph"> |
| 33 |
<g:javascript> |
| 34 |
var plot; |
| 35 |
var running = false; |
| 36 |
var deviceId; |
| 37 |
var refreshRate; |
| 38 |
var timeSpan; |
| 39 |
var outputDevice; |
| 40 |
var data = [[]]; |
| 41 |
var options = {
|
| 42 |
lines: { show: true },
|
| 43 |
points: { show: true },
|
| 44 |
xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" },
|
| 45 |
grid: {
|
| 46 |
markings: [] |
| 47 |
} |
| 48 |
}; |
| 49 |
</g:javascript> |
| 50 |
<p name="textOut" id="textOut" style="font-family:monospace;">Ready.</p> |
| 51 |
<div class="chart"> |
| 52 |
<div id='placeholder' style='width: 900px; height: 300px; padding:5px;'></div> |
| 53 |
<script type='text/javascript'> |
| 54 |
jQuery(function (){
|
| 55 |
plot = jQuery.plot(jQuery("#placeholder"),data, options);
|
| 56 |
}); |
| 57 |
</script> |
| 58 |
</div> |
| 59 |
|
| 60 |
<br /> |
| 61 |
<p>Legend:</p> |
| 62 |
<div id="legendHolder" name="legendHolder"></div> |
| 63 |
|
| 64 |
<table name="actionLegendHolder" id="actionLegendHolder" width="100%"> |
| 65 |
<p>A</p> |
| 66 |
</table> |
| 67 |
|
| 68 |
</erptr:box> |
| 69 |
|
| 70 |
<g:javascript> |
| 71 |
function startLiveGraph() {
|
| 72 |
|
| 73 |
running = true; |
| 74 |
deviceId = $('deviceId').value;
|
| 75 |
refreshRate = $('refreshRate').value * 1000;
|
| 76 |
timeSpan = $('timeSpan').value;
|
| 77 |
outputDevice = $('outputDevice').value;
|
| 78 |
|
| 79 |
graphUpdate(deviceId,refreshRate,timeSpan); |
| 80 |
|
| 81 |
} |
| 82 |
|
| 83 |
function graphUpdate(deviceId,refreshRate,timeSpan) {
|
| 84 |
var dataurl = '${g.createLink(action:'liveGraph')}?deviceId=' + deviceId + '&timeSpan=' + timeSpan + '&outputDevice=' + outputDevice;
|
| 85 |
|
| 86 |
function onDataReceived(series) {
|
| 87 |
|
| 88 |
data = []; |
| 89 |
data.push(series.data); |
| 90 |
|
| 91 |
var newInnerHTML = ""; |
| 92 |
options.grid.markings = []; |
| 93 |
|
| 94 |
jQuery.each(series.actionLog, function(iNum,iVal){
|
| 95 |
options.grid.markings.push( |
| 96 |
{ color: 'red', lineWidth: 1, xaxis: { from: iVal[0], to: iVal[0]} }
|
| 97 |
); |
| 98 |
newInnerHTML += "<tr><td style=\"width:20px;\"><p style=\"color:red;font-size:smaller;\">" + (iNum+1) + "</p></td><td style=\"width:150px;\">" + new Date(iVal[0]).toLocaleString() + "</td><td>" + iVal[1] + "</td></tr>" |
| 99 |
}); |
| 100 |
|
| 101 |
plot = jQuery.plot(jQuery("#placeholder"), data, options);
|
| 102 |
jQuery('#actionLegendHolder').html(newInnerHTML);
|
| 103 |
|
| 104 |
var o; |
| 105 |
var num = 1; |
| 106 |
var placeholder = plot.getPlaceholder(); |
| 107 |
var vertica = getMax(plot.getData()[0].datapoints.points); |
| 108 |
|
| 109 |
jQuery.each(series.actionLog, function(iNum,iVal){
|
| 110 |
o = plot.pointOffset({ x: iVal[0], y: vertica});
|
| 111 |
placeholder.append("<div style=\"position:absolute;left:" + (o.left + 10) + "px;top:" + o.top + "px;color:red;font-size:smaller\"><a href=\"#\" onclick=\"return false;\" title=\"" + iVal[1] + "\">" + num + "</a></div>");
|
| 112 |
num++; |
| 113 |
}); |
| 114 |
|
| 115 |
} |
| 116 |
|
| 117 |
jQuery.ajax({
|
| 118 |
url: dataurl, |
| 119 |
method: 'GET', |
| 120 |
dataType: 'json', |
| 121 |
success: onDataReceived |
| 122 |
}); |
| 123 |
|
| 124 |
if(running) {
|
| 125 |
$('textOut').innerHTML = "Refreshed on " + new Date() + ".";
|
| 126 |
setTimeout("graphUpdate(deviceId,refreshRate,timeSpan)",refreshRate);
|
| 127 |
} |
| 128 |
} |
| 129 |
|
| 130 |
function getMax(points) {
|
| 131 |
var max = points[1]; |
| 132 |
for(i = 1; i < points.length; i += 2) {
|
| 133 |
if(points[i] > max) max = points[i]; |
| 134 |
} |
| 135 |
return max; |
| 136 |
} |
| 137 |
</g:javascript> |
| 138 |
|
| 139 |
</body> |
| 140 |
|
| 141 |
</html> |