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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>LIL JMX Monitor</title> 4 <title>JMX Monitor</title>
5 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 5 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
6 <style>
7 .ac_div {
8 width: 33%;
9 display: inline-block;
10 height: 18%;
11 margin: 0;
12 padding: 0;
13 }
14 .top_left_div {
15 width: 33%;
16 display: inline-block;
17 margin: 0;
18 padding: 0;
19 line-height:1em;
20 min-height:3em;
21 font-family:sans-serif;
22 }
23 .top_middle_div {
24 width: 33%;
25 display: inline-block;
26 margin: 0;
27 padding: 0;
28 line-height:1em;
29 min-height:3em;
30 font-family:sans-serif;
31 text-align: center;
32 }
33 .top_right_div {
34 width: 33%;
35 display: inline-block;
36 margin: 0;
37 padding: 0;
38 line-height:1em;
39 min-height:3em;
40 font-family:sans-serif;
41 text-align: right;
42 }
43 </style>
6 </head> 44 </head>
7 <body> 45 <body>
8 <h1 id="main_title">LIL JMX Monitor</h1> 46 <div class="top_left_div"><h3 id="main_title">JMX Monitor</h3></div>
9 <div style="background-color: lightgrey; line-height:1em; min-height:3em;"><p id="statusP">Nothing loaded</p></div> 47 <div class="top_middle_div">
48 <p>
49 Interval (s): <input type="text" id="updateTextBox" size="3" value="15">
50 Precision: <input type="text" id="precisionTextBox" size="3" value="6">
51 </p>
52 </div>
53 <div class="top_right_div"><p id="statusP">Nothing loaded</p></div>
10 <div id="main_div"></div> 54 <div id="main_div"></div>
11 <script type="text/javascript"> 55 <script type="text/javascript">
12 var ac_data = []; 56 var ac_data = [];
...@@ -31,6 +75,7 @@ ...@@ -31,6 +75,7 @@
31 ac_data[i].addColumn('number', nvarray[i].name); 75 ac_data[i].addColumn('number', nvarray[i].name);
32 var newdiv = document.createElement('div'); 76 var newdiv = document.createElement('div');
33 newdiv.id = 'ac_div' + i; 77 newdiv.id = 'ac_div' + i;
78 newdiv.className = 'ac_div';
34 main_div.appendChild(newdiv); 79 main_div.appendChild(newdiv);
35 ac_chart[i] = new google.visualization.LineChart(newdiv); 80 ac_chart[i] = new google.visualization.LineChart(newdiv);
36 } 81 }
...@@ -42,7 +87,7 @@ ...@@ -42,7 +87,7 @@
42 if(location.search != '') 87 if(location.search != '')
43 { 88 {
44 // Update the data 89 // Update the data
45 statusP.innerHTML = "Calling getData..."; 90 statusP.innerHTML = "Updating...";
46 var client1 = new XMLHttpRequest(); 91 var client1 = new XMLHttpRequest();
47 client1.onreadystatechange = handler1; 92 client1.onreadystatechange = handler1;
48 client1.open("GET", "/JmxMonREST/getData?age=14&connectionString=" + location.search.substring(1)); 93 client1.open("GET", "/JmxMonREST/getData?age=14&connectionString=" + location.search.substring(1));
...@@ -59,7 +104,6 @@ ...@@ -59,7 +104,6 @@
59 if(location.search != '') 104 if(location.search != '')
60 { 105 {
61 // Get the metrics 106 // Get the metrics
62 statusP.innerHTML += "<br>Calling getMetrics...";
63 var client2 = new XMLHttpRequest(); 107 var client2 = new XMLHttpRequest();
64 client2.onreadystatechange = handler2; 108 client2.onreadystatechange = handler2;
65 client2.open("GET", "/JmxMonREST/getMetrics?connectionString=" + location.search.substring(1)); 109 client2.open("GET", "/JmxMonREST/getMetrics?connectionString=" + location.search.substring(1));
...@@ -77,10 +121,10 @@ ...@@ -77,10 +121,10 @@
77 if ((this.status == 200 || this.status == 202) && 121 if ((this.status == 200 || this.status == 202) &&
78 this.responseText != null) { 122 this.responseText != null) {
79 var res = eval('(' + this.responseText + ')'); 123 var res = eval('(' + this.responseText + ')');
80 statusP.innerHTML += " Received 200 OK (ms:" + res.ms + " age:" + res.age + ")<br>" + res.msg; 124 statusP.innerHTML = " Received 200 OK (in " + (res.ms ? res.ms : 0) + "ms with age " + (res.age ? res.age : 0) + "ms)";
81 getMetrics(); 125 getMetrics();
82 } else { 126 } else {
83 statusP.innerHTML += " Received responsecode " + this.status; 127 statusP.innerHTML += " getData code " + this.status + " msg: " + res.msg;
84 } 128 }
85 } 129 }
86 } 130 }
...@@ -89,11 +133,10 @@ ...@@ -89,11 +133,10 @@
89 if (this.readyState == 4) { 133 if (this.readyState == 4) {
90 if (this.status == 200 && 134 if (this.status == 200 &&
91 this.responseText != null) { 135 this.responseText != null) {
92 statusP.innerHTML += " Received 200 OK";
93 var res = eval('(' + this.responseText + ')'); 136 var res = eval('(' + this.responseText + ')');
94 addData(res); 137 addData(res);
95 } else { 138 } else {
96 statusP.innerHTML += " Received responsecode " + this.status; 139 statusP.innerHTML += " getMetrics code " + this.status + " msg: " + res.msg;
97 } 140 }
98 } 141 }
99 } 142 }
...@@ -101,25 +144,38 @@ ...@@ -101,25 +144,38 @@
101 function addData(res) { 144 function addData(res) {
102 if(res.error == false && res.nvarray.length > 0) { 145 if(res.error == false && res.nvarray.length > 0) {
103 main_title.innerHTML = res.name + " JMX Monitor"; 146 main_title.innerHTML = res.name + " JMX Monitor";
104 document.title = "JmxMon " + res.name; 147 document.title = res.name;
105 if (created == false) { 148 if (created == false) {
106 createChart(res.nvarray); 149 createChart(res.nvarray);
107 } 150 }
108 151 var precision = parseInt(precisionTextBox.value);
152 if(isNaN(precision)) {
153 precision = 6;
154 precisionTextBox.value = "6";
155 }
109 for(var i=0; i < res.nvarray.length; i++) { 156 for(var i=0; i < res.nvarray.length; i++) {
110 var dataRow = []; 157 var dataRow = [];
111 dataRow[0] = new Date(); 158 dataRow[0] = new Date();
112 dataRow[1] = res.nvarray[i].value; 159 dataRow[1] = res.nvarray[i].value;
113 ac_data[i].addRow(dataRow); 160 ac_data[i].addRow(dataRow);
114 if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0); 161 if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0);
162 if (Math.floor(res.nvarray[i].value) === res.nvarray[i].value) {
115 ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value; 163 ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
164 } else {
165 ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value.toPrecision(precision);
166 }
167
116 ac_chart[i].draw(ac_data[i], ac_options); 168 ac_chart[i].draw(ac_data[i], ac_options);
117 } 169 }
118 } 170 }
119 171 var updateTime = parseInt(updateTextBox.value);
120 window.setTimeout('getData()', 15000); 172 if(isNaN(updateTime)) {
173 updateTime = 15000;
174 updateTextBox.value = "15";
175 }
176 else updateTime = updateTime * 1000;
177 window.setTimeout('getData()', updateTime);
121 } 178 }
122
123 </script> 179 </script>
124 </body> 180 </body>
125 </html> 181 </html>
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>LIL JMX Monitor</title> 4 <title>DB Monitor</title>
5 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 5 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
6 <style>
7 .ac_div {
8 width: 33%;
9 display: inline-block;
10 height: 18%;
11 margin: 0;
12 padding: 0;
13 }
14 .top_left_div {
15 width: 33%;
16 display: inline-block;
17 margin: 0;
18 padding: 0;
19 line-height:1em;
20 min-height:3em;
21 font-family:sans-serif;
22 }
23 .top_middle_div {
24 width: 33%;
25 display: inline-block;
26 margin: 0;
27 padding: 0;
28 line-height:1em;
29 min-height:3em;
30 font-family:sans-serif;
31 text-align: center;
32 }
33 .top_right_div {
34 width: 33%;
35 display: inline-block;
36 margin: 0;
37 padding: 0;
38 line-height:1em;
39 min-height:3em;
40 font-family:sans-serif;
41 text-align: right;
42 }
43 </style>
6 </head> 44 </head>
7 <body> 45 <body>
8 <h1 id="main_title">LIL ORA Monitor</h1> 46 <div class="top_left_div"><h3 id="main_title">DB Monitor</h3></div>
9 <div style="background-color: lightgrey; line-height:1em; min-height:3em;"><p id="statusP">Nothing loaded</p></div> 47 <div class="top_middle_div">
48 <p>
49 Interval (s): <input type="text" id="updateTextBox" size="3" value="15">
50 Precision: <input type="text" id="precisionTextBox" size="3" value="6">
51 </p>
52 </div>
53 <div class="top_right_div"><p id="statusP">Nothing loaded</p></div>
10 <div id="main_div"></div> 54 <div id="main_div"></div>
11 <script type="text/javascript"> 55 <script type="text/javascript">
12 var ac_data = []; 56 var ac_data = [];
...@@ -31,6 +75,7 @@ ...@@ -31,6 +75,7 @@
31 ac_data[i].addColumn('number', nvarray[i].name); 75 ac_data[i].addColumn('number', nvarray[i].name);
32 var newdiv = document.createElement('div'); 76 var newdiv = document.createElement('div');
33 newdiv.id = 'ac_div' + i; 77 newdiv.id = 'ac_div' + i;
78 newdiv.className = 'ac_div';
34 main_div.appendChild(newdiv); 79 main_div.appendChild(newdiv);
35 ac_chart[i] = new google.visualization.LineChart(newdiv); 80 ac_chart[i] = new google.visualization.LineChart(newdiv);
36 } 81 }
...@@ -42,7 +87,7 @@ ...@@ -42,7 +87,7 @@
42 if(location.search != '') 87 if(location.search != '')
43 { 88 {
44 // Update the data 89 // Update the data
45 statusP.innerHTML = "Calling getData..."; 90 statusP.innerHTML = "Updating...";
46 var client1 = new XMLHttpRequest(); 91 var client1 = new XMLHttpRequest();
47 client1.onreadystatechange = handler1; 92 client1.onreadystatechange = handler1;
48 client1.open("GET", "/OraMonREST/getData?age=14&connectionString=" + location.search.substring(1)); 93 client1.open("GET", "/OraMonREST/getData?age=14&connectionString=" + location.search.substring(1));
...@@ -59,7 +104,6 @@ ...@@ -59,7 +104,6 @@
59 if(location.search != '') 104 if(location.search != '')
60 { 105 {
61 // Get the metrics 106 // Get the metrics
62 statusP.innerHTML += "<br>Calling getMetrics...";
63 var client2 = new XMLHttpRequest(); 107 var client2 = new XMLHttpRequest();
64 client2.onreadystatechange = handler2; 108 client2.onreadystatechange = handler2;
65 client2.open("GET", "/OraMonREST/getMetrics?connectionString=" + location.search.substring(1)); 109 client2.open("GET", "/OraMonREST/getMetrics?connectionString=" + location.search.substring(1));
...@@ -77,10 +121,10 @@ ...@@ -77,10 +121,10 @@
77 if ((this.status == 200 || this.status == 202) && 121 if ((this.status == 200 || this.status == 202) &&
78 this.responseText != null) { 122 this.responseText != null) {
79 var res = eval('(' + this.responseText + ')'); 123 var res = eval('(' + this.responseText + ')');
80 statusP.innerHTML += " Received 200 OK (ms:" + res.ms + " age:" + res.age + ")<br>" + res.msg; 124 statusP.innerHTML = " Received 200 OK (in " + (res.ms ? res.ms : 0) + "ms with age " + (res.age ? res.age : 0) + "ms)";
81 getMetrics(); 125 getMetrics();
82 } else { 126 } else {
83 statusP.innerHTML += " Received responsecode " + this.status; 127 statusP.innerHTML += " getData code " + this.status + " msg: " + res.msg;
84 } 128 }
85 } 129 }
86 } 130 }
...@@ -89,37 +133,49 @@ ...@@ -89,37 +133,49 @@
89 if (this.readyState == 4) { 133 if (this.readyState == 4) {
90 if (this.status == 200 && 134 if (this.status == 200 &&
91 this.responseText != null) { 135 this.responseText != null) {
92 statusP.innerHTML += " Received 200 OK";
93 var res = eval('(' + this.responseText + ')'); 136 var res = eval('(' + this.responseText + ')');
94 addData(res); 137 addData(res);
95 } else { 138 } else {
96 statusP.innerHTML += " Received responsecode " + this.status; 139 statusP.innerHTML += " getMetrics code " + this.status + " msg: " + res.msg;
97 } 140 }
98 } 141 }
99 } 142 }
100 143
101 function addData(res) { 144 function addData(res) {
102 if(res.error == false && res.nvarray.length > 0) { 145 if(res.error == false && res.nvarray.length > 0) {
103 main_title.innerHTML = res.name + " ORA Monitor"; 146 main_title.innerHTML = res.name + " DB Monitor";
104 document.title = "OraMon " + res.name; 147 document.title = res.name;
105 if (created == false) { 148 if (created == false) {
106 createChart(res.nvarray); 149 createChart(res.nvarray);
107 } 150 }
108 151 var precision = parseInt(precisionTextBox.value);
152 if(isNaN(precision)) {
153 precision = 6;
154 precisionTextBox.value = "6";
155 }
109 for(var i=0; i < res.nvarray.length; i++) { 156 for(var i=0; i < res.nvarray.length; i++) {
110 var dataRow = []; 157 var dataRow = [];
111 dataRow[0] = new Date(); 158 dataRow[0] = new Date();
112 dataRow[1] = res.nvarray[i].value; 159 dataRow[1] = res.nvarray[i].value;
113 ac_data[i].addRow(dataRow); 160 ac_data[i].addRow(dataRow);
114 if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0); 161 if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0);
162 if (Math.floor(res.nvarray[i].value) === res.nvarray[i].value) {
115 ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value; 163 ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
164 } else {
165 ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value.toPrecision(precision);
166 }
167
116 ac_chart[i].draw(ac_data[i], ac_options); 168 ac_chart[i].draw(ac_data[i], ac_options);
117 } 169 }
118 } 170 }
119 171 var updateTime = parseInt(updateTextBox.value);
120 window.setTimeout('getData()', 15000); 172 if(isNaN(updateTime)) {
173 updateTime = 15000;
174 updateTextBox.value = "15";
175 }
176 else updateTime = updateTime * 1000;
177 window.setTimeout('getData()', updateTime);
121 } 178 }
122
123 </script> 179 </script>
124 </body> 180 </body>
125 </html> 181 </html>
......