Viewers update

3 columns boxes for interval and precision less debug info smaller font compact name of tabs

Viewers update
3 columns boxes for interval and precision less debug info smaller font compact name of tabs
Christian Gerdes
Commit b747bb02 ... b747bb02faaa78a0429221b9368d42ecce194439 authored 2017-05-03 18:33:15 +0200 by Christian Gerdes
Showing 3 changed files with 144 additions and 32 deletions
JavaMonWeb/WebContent/viewJmxMon.html
JavaMonWeb/WebContent/viewOraMon.html
JavaMonWeb/jetty/JavaMonWeb.war
--- a/JavaMonWeb/WebContent/viewJmxMon.html
View file @b747bb0
+++ b/JavaMonWeb/WebContent/viewJmxMon.html
View file @b747bb0
 <!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 class="top_left_div"><h3 id="main_title">JMX Monitor</h3></div>
-    <div style="background-color: lightgrey; line-height:1em; min-height:3em;"><p id="statusP">Nothing loaded</p></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);
-	                ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
+	                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);
 	            }
        	}
+			var updateTime = parseInt(updateTextBox.value);
-            window.setTimeout('getData()', 15000);
+			if(isNaN(updateTime)) { 
+				updateTime = 15000; 
+				updateTextBox.value = "15"; 
+			}
+			else updateTime = updateTime * 1000;
+            window.setTimeout('getData()', updateTime);
        }
    </script>
  </body>
 </html>
--- a/JavaMonWeb/WebContent/viewOraMon.html
View file @b747bb0
+++ b/JavaMonWeb/WebContent/viewOraMon.html
View file @b747bb0
 <!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 class="top_left_div"><h3 id="main_title">DB Monitor</h3></div>
-    <div style="background-color: lightgrey; line-height:1em; min-height:3em;"><p id="statusP">Nothing loaded</p></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));
@@ -75,12 +119,12 @@
        function handler1() {
            if (this.readyState == 4) {
                if ((this.status == 200 || this.status == 202) &&
-                    this.responseText != null) {
+                	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";
+        		main_title.innerHTML = res.name + " DB Monitor";
-        		document.title = "OraMon " + 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);
-	                ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
+	                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);
 	            }
        	}
+			var updateTime = parseInt(updateTextBox.value);
-            window.setTimeout('getData()', 15000);
+			if(isNaN(updateTime)) { 
+				updateTime = 15000; 
+				updateTextBox.value = "15"; 
+			}
+			else updateTime = updateTime * 1000;
+            window.setTimeout('getData()', updateTime);
        }
    </script>
  </body>
 </html>
--- a/JavaMonWeb/jetty/JavaMonWeb.war
View file @b747bb0
+++ b/JavaMonWeb/jetty/JavaMonWeb.war
View file @b747bb0