Merge branch 'release/1.1.0'

sniffy · Aug 9, 2015 · 5cd21cb · 5cd21cb
2 parents 5933a51 + 2312295
commit 5cd21cb
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 49 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -13,9 +13,9 @@ module.exports = function (grunt) {
         copy: {
             dist: {
                 expand: true,
-                cwd: 'mock/',
+                cwd: 'dist/',
                 src: '**',
-                dest: 'dist/'
+                dest: 'mock/'
             },
         },
         concat: {
@@ -31,14 +31,10 @@ module.exports = function (grunt) {
         includereplace: {
             dist: {
                 options: {
-                  prefix: '//@@', // This works for HTML and JS replacements
+                  prefix: '//@@',
                   suffix: ''
                 },
-
-                // Files to perform replacements and includes with
-
                 src: 'dist/jdbcsniffer.js',
-                // Destination directory to copy files to
                 dest: 'dist/jdbcsniffer.js'
             }
         },
@@ -102,25 +98,21 @@ module.exports = function (grunt) {
             }
         },
         watch: {
-            copy: {
-                files: ['mock/*','mock/**/*'],
-                tasks: ['copy:dist']
-            },
             gruntfile: {
                 files: '<%= jshint.gruntfile.src %>',
                 tasks: ['jshint:gruntfile']
             },
             htmlmin: {
                 files: 'src/*.html',
-                tasks: ['htmlmin:dist','jshint:dist','concat:dist','includereplace:dist','uglify:dist']
+                tasks: ['htmlmin:dist','jshint:dist','concat:dist','includereplace:dist','uglify:dist','copy:dist']
             },
             src: {
                 files: 'src/*.js',
-                tasks: ['jshint:dist','concat:dist','includereplace:dist','uglify:dist']
+                tasks: ['jshint:dist','concat:dist','includereplace:dist','uglify:dist','copy:dist']
             },
             styles: {
                 files: ['src/*.less'], // which files to watch
-                tasks: ['less:dist'/*,'replace:dist'*/],
+                tasks: ['less:dist','copy:dist'/*,'replace:dist'*/],
                 options: {
                     nospawn: true
                 }
@@ -140,6 +132,6 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-copy');
 
     // Default task
-    grunt.registerTask('default', ['copy', 'concat', 'htmlmin', 'less', 'jshint', /*'qunit',*/ 'includereplace', 'uglify']);
+    grunt.registerTask('default', ['concat', 'htmlmin', 'less', 'jshint', /*'qunit',*/ 'includereplace', 'uglify', 'copy']);
 };
 
diff --git a/README.md b/README.md
@@ -18,8 +18,7 @@ grunt watch
 ## Testing with mock server
 
 ```
-npm install http-server -g
-http-server
+node index.js
 ```
 
-Now open http://localhost:8080/dist/mock.html in your browser and have fun!
+Now open [http://localhost:3000/dist/mock.html](http://localhost:3000/dist/mock.html) in your browser and have fun!
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jdbc-sniffer-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/bedrin/jdbc-sniffer-ui",
   "authors": [
     "bedrin <[email protected]>"

diff --git a/index.js b/index.js
@@ -0,0 +1,19 @@
+var express = require('express');
+var app = express();
+
+var counter = 1000;
+
+app.get('/mock/ajax.json', function (req, res) {
+  res.header('X-Sql-Queries' , 2 );
+  res.header('X-Request-Id' , 'a54b32e7-b94b-450b-b145-0cf62270d32a' );
+  res.send('{"foo":"bar","baz":42}');
+});
+
+app.use('/mock', express.static('mock'));
+
+var server = app.listen(3000, function () {
+  var host = server.address().address;
+  var port = server.address().port;
+
+  console.log('Example app listening at http://%s:%s', host, port);
+});
diff --git a/mock/frame.html b/mock/frame.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>JDBC Sniffer Integration</title>
+	</head>
+	<body>
+		<h1>Invisible IFrame</h1>
+	</body>
+</html>
+<script id="jdbc-sniffer" data-sql-queries="0" data-request-id="b43a32e7-b94b-450b-b145-0cf62270d32a" type="application/javascript" src="/mock/jdbcsniffer.min.js"></script>
diff --git a/mock/mock.html b/mock/mock.html
@@ -2,9 +2,26 @@
 <html lang="en">
 	<head>
 		<title>JDBC Sniffer Integration</title>
+		<script>
+
+			function doAjax() {
+
+				var xhr = new XMLHttpRequest();
+				xhr.open("GET", 'ajax.json', true);
+				xhr.onreadystatechange = function() {
+					document.getElementById('result').innerHTML = 'completed!';
+				};
+				xhr.send(null);
+
+			}
+
+		</script>
 	</head>
 	<body>
 		<h1>JDBC Sniffer Integration</h1>
-		<script id="jdbc-sniffer" data-sql-queries="2" data-request-id="a54b32e7-b94b-450b-b145-0cf62270d32a" type="application/javascript" src="/dist/jdbcsniffer.min.js"></script>
+		<iframe id="frame" src="frame.html" style="position: absolute; width: 1px; height: 1px; left: -9999px; display: none;"></iframe>
+		<div id="result"></div>
+		<button id="button" onclick="doAjax()">Click me!</button>
 	</body>
-</html>
+</html>
+<script id="jdbc-sniffer" data-sql-queries="2" data-request-id="a54b32e7-b94b-450b-b145-0cf62270d32a" type="application/javascript" src="/mock/jdbcsniffer.min.js"></script>
diff --git a/mock/request/ID b/mock/request/ID
@@ -0,0 +1,4 @@
+[
+{"query":"SELECT 1 FROM DUAL","time":300},
+{"query":"SELECT 1 FROM DUAL","time":300}
+]
diff --git a/mock/request/b43a32e7-b94b-450b-b145-0cf62270d32a b/mock/request/b43a32e7-b94b-450b-b145-0cf62270d32a
@@ -0,0 +1 @@
+[]
diff --git a/package.json b/package.json
@@ -3,12 +3,14 @@
   "title": "UI for JDBC Sniffer",
   "author": "bedrin <[email protected]>",
   "license": "BSD-3-Clause",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/bedrin/jdbc-sniffer-ui.git"
   },
-  "dependencies": {},
+  "dependencies": {
+    "express": "^4.13.3"
+  },
   "devDependencies": {
     "grunt": "~0.4.2",
     "grunt-contrib-concat": "~0.3.0",

diff --git a/src/jdbcsniffer.html b/src/jdbcsniffer.html
@@ -5,13 +5,15 @@
 				<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>			    
 				<h3 class="panel-title">Executed Queries</h3>
 			</div>
-			<table class="table table-hover" id="jdbc-sniffer-queries">
+			<table class="table table-hover">
 				<thead>
 					<tr>
 						<th class="col-md-10">Query</th>
 						<th class="col-md-2">Elapsed Time (millis)</th>
 					</tr>
 				</thead>
+				<tbody id="jdbc-sniffer-queries">
+				</tbody>
 				<!-- <tbody>
 					<tr>
 						<td>SELECT 1 FROM DUAL</td>

diff --git a/src/jdbcsniffer.js b/src/jdbcsniffer.js
@@ -4,6 +4,17 @@
     var MINI = require('minified');
     var $ = MINI.$, EE = MINI.EE, HTML = MINI.HTML;
 
+    window.jdbcSniffer = {numberOfSqlQueries : 0};
+
+    var ajaxRequests = [];
+    var loadQueries = function(url, requestId) {
+        ajaxRequests.push({"url":url,"requestId":requestId});
+    };
+
+    var incrementQueryCounter = function(numQueries) {
+        window.jdbcSniffer.numberOfSqlQueries += numQueries;
+    };
+
     $(function(){
 
         var snifferElement = $('#jdbc-sniffer');
@@ -36,36 +47,106 @@
         queryCounterDiv.on('click', toggle);
         $('body').add(queryCounterDiv);
 
-        // create global object
-        window.jdbcSniffer = {
-            numberOfSqlQueries : parseInt(sqlQueries)
+        incrementQueryCounter = function(numQueries) {
+            // increment global counter
+            window.jdbcSniffer.numberOfSqlQueries += numQueries;
+            $('.jdbc-sniffer-query-count').fill(window.jdbcSniffer.numberOfSqlQueries);
         };
+
+        incrementQueryCounter(parseInt(sqlQueries));
 
         // request data
-        $.request('get', baseUrl + 'request/' + requestId)
-            .then(function (data, xhr) {
-                var statementsTableBody = EE('tbody');
-                if (xhr.status === 200) {
-                    var statements = $.parseJSON(data);
-                    for (var i = 0; i < statements.length; i++) {
-                        var statement = statements[i];
-                        statementsTableBody.add(EE('tr',[
-                            EE('td',statement.query),
-                            EE('td',statement.time)
-                        ]));
-                    }
-                } else if (xhr.status === 204) {
+        loadQueries(location.pathname, requestId);
+
+        loadQueries = function(url, requestId) {
+            $.request('get', baseUrl + 'request/' + requestId)
+                .then(function (data, xhr) {
+                    var statementsTableBody = $('#jdbc-sniffer-queries');
                     statementsTableBody.add(EE('tr',[
-                            EE('td','No queries'),
-                            EE('td','')
-                        ]));
-                }
-                $('#jdbc-sniffer-queries').add(statementsTableBody);
-            })
-            .error(function (status, statusText, responseText) {
-                console.log(status + ' ' + statusText + ' ' + responseText);
-            });
+                        EE('td', {'className' : 'col-md-12 success', '@colspan' : '2'}, url)
+                    ]));
+                    var noQueriesRow = EE('tr',[
+                        EE('td','No queries'),
+                        EE('td','')
+                    ]);
+                    if (xhr.status === 200) {
+                        var statements = $.parseJSON(data);
+                        if (statements.length === 0) {
+                            statementsTableBody.add(noQueriesRow);
+                        } else {
+                            for (var i = 0; i < statements.length; i++) {
+                                var statement = statements[i];
+                                statementsTableBody.add(EE('tr',[
+                                    EE('td',statement.query),
+                                    EE('td',statement.time)
+                                ]));
+                            }
+                        }
+                    } else if (xhr.status === 204) {
+                        statementsTableBody.add(noQueriesRow);
+                    }
+                })
+                .error(function (status, statusText, responseText) {
+                    console.log(status + ' ' + statusText + ' ' + responseText);
+                });
+        };
+
+        for (var i = 0; i < ajaxRequests.length; i++) {
+            var ajaxRequest = ajaxRequests[i];
+            loadQueries(ajaxRequest.url, ajaxRequest.requestId);
+        }
 
     });
 
+    // Intercept ajax queries
+    (function(XHR) {
+
+        var open = XHR.prototype.open;
+        var send = XHR.prototype.send;
+
+        XHR.prototype.open = function(method, url, async, user, pass) {
+            this._url = url;
+            this._method = method;
+            open.call(this, method, url, async, user, pass);
+        };
+
+        XHR.prototype.send = function(data) {
+            var self = this;
+            var start;
+            var oldOnReadyStateChange;
+            var url = this._url;
+            var method = this._method;
+
+            function onReadyStateChange() {
+                if(self.readyState === 4 /* complete */) {
+                    var sqlQueries = self.getResponseHeader("X-Sql-Queries");
+                    if (sqlQueries && parseInt(sqlQueries) > 0) {
+                        incrementQueryCounter(parseInt(sqlQueries));
+                        var requestId = self.getResponseHeader("X-Request-Id");
+                        url = url.charAt(0) === '/' ? url : 
+                            location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1) + url;
+                        loadQueries(method + ' ' + url, requestId);
+                    }
+                }
+
+                if(oldOnReadyStateChange) {
+                    oldOnReadyStateChange();
+                }
+            }
+
+            if(!this.noIntercept) {
+                start = new Date();
+
+                if(this.addEventListener) {
+                    this.addEventListener("readystatechange", onReadyStateChange, false);
+                } else {
+                    oldOnReadyStateChange = this.onreadystatechange; 
+                    this.onreadystatechange = onReadyStateChange;
+                }
+            }
+
+            send.call(this, data);
+        };
+    })(XMLHttpRequest);
+
 }());