Merge branch 'release/1.0.0'

sniffy · Aug 2, 2015 · 5933a51 · 5933a51
2 parents 38ab031 + 6a6696c
commit 5933a51
Show file tree

Hide file tree

Showing 10 changed files with 381 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,7 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+bower_components
+
+dist
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,145 @@
+module.exports = function (grunt) {
+    'use strict';
+    // Project configuration
+    grunt.initConfig({
+        // Metadata
+        pkg: grunt.file.readJSON('package.json'),
+        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
+            '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+            '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+            '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+            ' Licensed <%= pkg.license %> */\n',
+        // Task configuration
+        copy: {
+            dist: {
+                expand: true,
+                cwd: 'mock/',
+                src: '**',
+                dest: 'dist/'
+            },
+        },
+        concat: {
+            options: {
+                banner: '<%= banner %>',
+                stripBanners: true
+            },
+            dist: {
+                src: ['src/jdbcsniffer.js'],
+                dest: 'dist/jdbcsniffer.js'
+            }
+        },
+        includereplace: {
+            dist: {
+                options: {
+                  prefix: '//@@', // This works for HTML and JS replacements
+                  suffix: ''
+                },
+
+                // Files to perform replacements and includes with
+
+                src: 'dist/jdbcsniffer.js',
+                // Destination directory to copy files to
+                dest: 'dist/jdbcsniffer.js'
+            }
+        },
+        uglify: {
+            options: {
+                banner: '<%= banner %>'
+            },
+            dist: {
+                src: 'dist/jdbcsniffer.js',
+                dest: 'dist/jdbcsniffer.min.js'
+            }
+        },
+        jshint: {
+            options: {
+                node: true,
+                curly: true,
+                eqeqeq: true,
+                immed: true,
+                latedef: true,
+                newcap: true,
+                noarg: true,
+                sub: true,
+                undef: true,
+                unused: true,
+                eqnull: true,
+                browser: true,
+                globals: { jQuery: true },
+                boss: true
+            },
+            gruntfile: {
+                src: 'Gruntfile.js'
+            },
+            dist: [
+                'src/*.js'
+            ]
+        },
+        less: {
+            options: {
+              compress: true,
+              yuicompress: true,
+              optimization: 2
+            },
+            dist: {
+                files: {
+                  "dist/jdbcsniffer.css": "src/jdbcsniffer.less" // destination file and source file
+                }
+            }
+        },
+        qunit: {
+            files: ['test/**/*.html']
+        },
+        htmlmin: {
+            dist: {
+                options: {
+                    removeComments: true,
+                    collapseWhitespace: true
+                },
+                files: {
+                    'dist/jdbcsniffer.html': 'src/jdbcsniffer.html',
+                }
+            }
+        },
+        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']
+            },
+            src: {
+                files: 'src/*.js',
+                tasks: ['jshint:dist','concat:dist','includereplace:dist','uglify:dist']
+            },
+            styles: {
+                files: ['src/*.less'], // which files to watch
+                tasks: ['less:dist'/*,'replace:dist'*/],
+                options: {
+                    nospawn: true
+                }
+            }
+        }
+    });
+
+    // These plugins provide necessary tasks
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-qunit');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.loadNpmTasks('grunt-include-replace');
+    grunt.loadNpmTasks('grunt-contrib-htmlmin');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+
+    // Default task
+    grunt.registerTask('default', ['copy', 'concat', 'htmlmin', 'less', 'jshint', /*'qunit',*/ 'includereplace', 'uglify']);
+};
+
diff --git a/README.md b/README.md
@@ -1,2 +1,25 @@
 # jdbc-sniffer-ui
 UI for JDBC Sniffer
+
+## Building
+
+```
+npm install
+bower install
+grunt
+```
+
+## Developing
+
+```
+grunt watch
+```
+
+## Testing with mock server
+
+```
+npm install http-server -g
+http-server
+```
+
+Now open http://localhost:8080/dist/mock.html in your browser and have fun!
diff --git a/bower.json b/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "jdbc-sniffer-ui",
+  "version": "1.0.0",
+  "homepage": "https://github.com/bedrin/jdbc-sniffer-ui",
+  "authors": [
+    "bedrin <[email protected]>"
+  ],
+  "description": "UI for JDBC Sniffer",
+  "main": "jdbcsniffer.js",
+  "license": "BSD-3-Clause",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "minified": "~2015.1.1",
+    "bootstrap": "~3.3.5"
+  }
+}
diff --git a/mock/mock.html b/mock/mock.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>JDBC Sniffer Integration</title>
+	</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>
+	</body>
+</html>
diff --git a/mock/request/a54b32e7-b94b-450b-b145-0cf62270d32a b/mock/request/a54b32e7-b94b-450b-b145-0cf62270d32a
@@ -0,0 +1,4 @@
+[
+{"query":"SELECT 1 FROM DUAL","time":300},
+{"query":"SELECT 1 FROM DUAL","time":300}
+]
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "jdbc-sniffer-ui",
+  "title": "UI for JDBC Sniffer",
+  "author": "bedrin <[email protected]>",
+  "license": "BSD-3-Clause",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bedrin/jdbc-sniffer-ui.git"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-copy": "^0.8.0",
+    "grunt-contrib-htmlmin": "^0.4.0",
+    "grunt-contrib-jshint": "~0.7.2",
+    "grunt-contrib-less": "^1.0.1",
+    "grunt-contrib-qunit": "*",
+    "grunt-contrib-uglify": "~0.9.1",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-include-replace": "^3.0.0"
+  }
+}
diff --git a/src/jdbcsniffer.html b/src/jdbcsniffer.html
@@ -0,0 +1,45 @@
+<div class="jdbc-sniffer-ui" style="display:none">
+	<div class="container">
+		<div class="panel panel-info">
+			<div class="panel-heading">
+				<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">
+				<thead>
+					<tr>
+						<th class="col-md-10">Query</th>
+						<th class="col-md-2">Elapsed Time (millis)</th>
+					</tr>
+				</thead>
+				<!-- <tbody>
+					<tr>
+						<td>SELECT 1 FROM DUAL</td>
+						<td>500</td>
+					</tr>
+					<tr>
+						<td>SELECT 1 FROM DUAL</td>
+						<td>500</td>
+					</tr>
+					<tr>
+						<td>SELECT 1 FROM DUAL</td>
+						<td>500</td>
+					</tr>
+					<tr>
+						<td>SELECT 1 FROM DUAL</td>
+						<td>500</td>
+					</tr>
+					<tr>
+						<td>SELECT 1 FROM DUAL</td>
+						<td>500</td>
+					</tr>
+					<tr>
+						<td>SELECT 1 FROM DUAL</td>
+						<td>500</td>
+					</tr>
+				</tbody> -->
+			</table>
+			<div class="panel-footer">Powered by <a href="https://github.com/bedrin/jdbc-sniffer" target="_blank">JDBC Sniffer</a></div>
+		</div>	
+	</div>
+</div>
diff --git a/src/jdbcsniffer.js b/src/jdbcsniffer.js
@@ -0,0 +1,71 @@
+;(function(){
+
+    //@@include('../bower_components/minified/dist/minified.js')
+    var MINI = require('minified');
+    var $ = MINI.$, EE = MINI.EE, HTML = MINI.HTML;
+
+    $(function(){
+
+        var snifferElement = $('#jdbc-sniffer');
+        var sqlQueries = snifferElement.get('%sql-queries');
+        var requestId = snifferElement.get('%request-id');
+        var snifferScriptSrc = snifferElement.get('@src');
+
+        var baseUrl = snifferScriptSrc.substring(0, snifferScriptSrc.lastIndexOf('/') + 1);
+
+        // inject stylesheet
+        var snifferStyleHref = baseUrl + 'jdbcsniffer.css';
+        $('head').add(EE('link', {
+            '@rel' : 'stylesheet',
+            '@type' : 'text.css',
+            '@href' : snifferStyleHref,
+            '@media' : 'all'
+        }));
+
+        // create main GUI
+        var queryList = HTML(
+            '//@@include("../dist/jdbcsniffer.html")'
+        );
+
+        $('body').add(queryList);
+        var toggle = queryList.toggle({'$display': 'none'}, {'$display': 'block'});
+        $('button.close', queryList).on('click', toggle);
+
+        // append toolbar
+        var queryCounterDiv = EE('div', { 'className' : 'jdbc-sniffer-query-count' }, sqlQueries);
+        queryCounterDiv.on('click', toggle);
+        $('body').add(queryCounterDiv);
+
+        // create global object
+        window.jdbcSniffer = {
+            numberOfSqlQueries : 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) {
+                    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);
+            });
+
+    });
+
+}());