Skip to content

Products / LILOM

Go to a project
Toggle navigation
Toggle navigation pinning
Commit b747bb02 b747bb02faaa78a0429221b9368d42ecce194439 by Christian Gerdes
Options

Viewers update 

3 columns
boxes for interval and precision
less debug info
smaller font
compact name of tabs
1 parent 8c04d369
Inline Side-by-side
Showing 3 changed files with 141 additions and 29 deletions
<!DOCTYPE html>
<html>
<head>
<title>LIL JMX Monitor</title>
<title>JMX Monitor</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style>
.ac_div {
width: 33%;
display: inline-block;
height: 18%;
margin: 0;
padding: 0;
}
.top_left_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
}
.top_middle_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
text-align: center;
}
.top_right_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
text-align: right;
}
</style>
</head>
<body>
<h1 id="main_title">LIL JMX Monitor</h1>
<div style="background-color: lightgrey; line-height:1em; min-height:3em;"><p id="statusP">Nothing loaded</p></div>
<div class="top_left_div"><h3 id="main_title">JMX Monitor</h3></div>
<div class="top_middle_div">
<p>
Interval (s): <input type="text" id="updateTextBox" size="3" value="15">
Precision: <input type="text" id="precisionTextBox" size="3" value="6">
</p>
</div>
<div class="top_right_div"><p id="statusP">Nothing loaded</p></div>
<div id="main_div"></div>
<script type="text/javascript">
var ac_data = [];
......@@ -31,6 +75,7 @@
ac_data[i].addColumn('number', nvarray[i].name);
var newdiv = document.createElement('div');
newdiv.id = 'ac_div' + i;
newdiv.className = 'ac_div';
main_div.appendChild(newdiv);
ac_chart[i] = new google.visualization.LineChart(newdiv);
}
......@@ -42,7 +87,7 @@
if(location.search != '')
{
// Update the data
statusP.innerHTML = "Calling getData...";
statusP.innerHTML = "Updating...";
var client1 = new XMLHttpRequest();
client1.onreadystatechange = handler1;
client1.open("GET", "/JmxMonREST/getData?age=14&connectionString=" + location.search.substring(1));
......@@ -59,7 +104,6 @@
if(location.search != '')
{
// Get the metrics
statusP.innerHTML += "<br>Calling getMetrics...";
var client2 = new XMLHttpRequest();
client2.onreadystatechange = handler2;
client2.open("GET", "/JmxMonREST/getMetrics?connectionString=" + location.search.substring(1));
......@@ -77,10 +121,10 @@
if ((this.status == 200 || this.status == 202) &&
this.responseText != null) {
var res = eval('(' + this.responseText + ')');
statusP.innerHTML += " Received 200 OK (ms:" + res.ms + " age:" + res.age + ")<br>" + res.msg;
statusP.innerHTML = " Received 200 OK (in " + (res.ms ? res.ms : 0) + "ms with age " + (res.age ? res.age : 0) + "ms)";
getMetrics();
} else {
statusP.innerHTML += " Received responsecode " + this.status;
statusP.innerHTML += " getData code " + this.status + " msg: " + res.msg;
}
}
}
......@@ -89,11 +133,10 @@
if (this.readyState == 4) {
if (this.status == 200 &&
this.responseText != null) {
statusP.innerHTML += " Received 200 OK";
var res = eval('(' + this.responseText + ')');
addData(res);
} else {
statusP.innerHTML += " Received responsecode " + this.status;
statusP.innerHTML += " getMetrics code " + this.status + " msg: " + res.msg;
}
}
}
......@@ -101,25 +144,38 @@
function addData(res) {
if(res.error == false && res.nvarray.length > 0) {
main_title.innerHTML = res.name + " JMX Monitor";
document.title = "JmxMon " + res.name;
document.title = res.name;
if (created == false) {
createChart(res.nvarray);
}
var precision = parseInt(precisionTextBox.value);
if(isNaN(precision)) {
precision = 6;
precisionTextBox.value = "6";
}
for(var i=0; i < res.nvarray.length; i++) {
var dataRow = [];
dataRow[0] = new Date();
dataRow[1] = res.nvarray[i].value;
ac_data[i].addRow(dataRow);
if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0);
if (Math.floor(res.nvarray[i].value) === res.nvarray[i].value) {
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
} else {
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value.toPrecision(precision);
}
ac_chart[i].draw(ac_data[i], ac_options);
}
}
window.setTimeout('getData()', 15000);
var updateTime = parseInt(updateTextBox.value);
if(isNaN(updateTime)) {
updateTime = 15000;
updateTextBox.value = "15";
}
else updateTime = updateTime * 1000;
window.setTimeout('getData()', updateTime);
}
</script>
</body>
</html>
......
<!DOCTYPE html>
<html>
<head>
<title>LIL JMX Monitor</title>
<title>DB Monitor</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style>
.ac_div {
width: 33%;
display: inline-block;
height: 18%;
margin: 0;
padding: 0;
}
.top_left_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
}
.top_middle_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
text-align: center;
}
.top_right_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
text-align: right;
}
</style>
</head>
<body>
<h1 id="main_title">LIL ORA Monitor</h1>
<div style="background-color: lightgrey; line-height:1em; min-height:3em;"><p id="statusP">Nothing loaded</p></div>
<div class="top_left_div"><h3 id="main_title">DB Monitor</h3></div>
<div class="top_middle_div">
<p>
Interval (s): <input type="text" id="updateTextBox" size="3" value="15">
Precision: <input type="text" id="precisionTextBox" size="3" value="6">
</p>
</div>
<div class="top_right_div"><p id="statusP">Nothing loaded</p></div>
<div id="main_div"></div>
<script type="text/javascript">
var ac_data = [];
......@@ -31,6 +75,7 @@
ac_data[i].addColumn('number', nvarray[i].name);
var newdiv = document.createElement('div');
newdiv.id = 'ac_div' + i;
newdiv.className = 'ac_div';
main_div.appendChild(newdiv);
ac_chart[i] = new google.visualization.LineChart(newdiv);
}
......@@ -42,7 +87,7 @@
if(location.search != '')
{
// Update the data
statusP.innerHTML = "Calling getData...";
statusP.innerHTML = "Updating...";
var client1 = new XMLHttpRequest();
client1.onreadystatechange = handler1;
client1.open("GET", "/OraMonREST/getData?age=14&connectionString=" + location.search.substring(1));
......@@ -59,7 +104,6 @@
if(location.search != '')
{
// Get the metrics
statusP.innerHTML += "<br>Calling getMetrics...";
var client2 = new XMLHttpRequest();
client2.onreadystatechange = handler2;
client2.open("GET", "/OraMonREST/getMetrics?connectionString=" + location.search.substring(1));
......@@ -77,10 +121,10 @@
if ((this.status == 200 || this.status == 202) &&
this.responseText != null) {
var res = eval('(' + this.responseText + ')');
statusP.innerHTML += " Received 200 OK (ms:" + res.ms + " age:" + res.age + ")<br>" + res.msg;
statusP.innerHTML = " Received 200 OK (in " + (res.ms ? res.ms : 0) + "ms with age " + (res.age ? res.age : 0) + "ms)";
getMetrics();
} else {
statusP.innerHTML += " Received responsecode " + this.status;
statusP.innerHTML += " getData code " + this.status + " msg: " + res.msg;
}
}
}
......@@ -89,37 +133,49 @@
if (this.readyState == 4) {
if (this.status == 200 &&
this.responseText != null) {
statusP.innerHTML += " Received 200 OK";
var res = eval('(' + this.responseText + ')');
addData(res);
} else {
statusP.innerHTML += " Received responsecode " + this.status;
statusP.innerHTML += " getMetrics code " + this.status + " msg: " + res.msg;
}
}
}
function addData(res) {
if(res.error == false && res.nvarray.length > 0) {
main_title.innerHTML = res.name + " ORA Monitor";
document.title = "OraMon " + res.name;
main_title.innerHTML = res.name + " DB Monitor";
document.title = res.name;
if (created == false) {
createChart(res.nvarray);
}
var precision = parseInt(precisionTextBox.value);
if(isNaN(precision)) {
precision = 6;
precisionTextBox.value = "6";
}
for(var i=0; i < res.nvarray.length; i++) {
var dataRow = [];
dataRow[0] = new Date();
dataRow[1] = res.nvarray[i].value;
ac_data[i].addRow(dataRow);
if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0);
if (Math.floor(res.nvarray[i].value) === res.nvarray[i].value) {
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
} else {
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value.toPrecision(precision);
}
ac_chart[i].draw(ac_data[i], ac_options);
}
}
window.setTimeout('getData()', 15000);
var updateTime = parseInt(updateTextBox.value);
if(isNaN(updateTime)) {
updateTime = 15000;
updateTextBox.value = "15";
}
else updateTime = updateTime * 1000;
window.setTimeout('getData()', updateTime);
}
</script>
</body>
</html>
......