Adding display connection name, and adding filters on connection.

Author: kardagan

src/DebugBar/Resources/widgets/sqlqueries/widget.css

@@ -11,6 +11,7 @@ div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-
   color: red;
 }
 
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-database,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count,
@@ -19,12 +20,14 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id {
   margin-left: 8px;
   color: #888;
 }
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-database,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-duration,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-memory,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-row-count,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-stmt-id {
   color: #555;
 }
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-database:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before,
@@ -33,6 +36,9 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
   margin-right: 4px;
   font-size: 12px;
 }
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-database:before {
+  content: "\f1c0";
+}
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before {
   content: "\f017";
 }
@@ -80,3 +86,27 @@ div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-
 div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate:hover {
   background-color: #ffc;
 }
+
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-toolbar {
+  display:none;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  z-index: 1;
+}
+
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter {
+  float: right;
+  font-size: 12px;
+  padding: 2px 4px;
+  background: #7cacd5;
+  margin: 0 2px;
+  border-radius: 4px;
+  color: #fff;
+  text-decoration: none;
+}
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
+  background: #eee;
+  color: #888;
+}

src/DebugBar/Resources/widgets/sqlqueries/widget.js

@@ -12,10 +12,27 @@
 
         className: csscls('sqlqueries'),
 
+        onFilterClick: function(el) {
+            $(el).toggleClass(csscls('excluded'));
+
+            var excludedLabels = [];
+            this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() {
+                excludedLabels.push(this.rel);
+            });
+
+            this.$list.$el.find("li[connection=" + $(el).attr("rel") + "]").toggle();
+
+            this.set('exclude', excludedLabels);
+        },
+
         render: function() {
             this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el);
 
-            this.$list = new  PhpDebugBar.Widgets.ListWidget({ itemRenderer: function(li, stmt) {
+            this.$toolbar = $('<div></div>').addClass(csscls('toolbar')).appendTo(this.$el);
+
+            var filters = [], self = this;
+
+            this.$list = new PhpDebugBar.Widgets.ListWidget({ itemRenderer: function(li, stmt) {
                 $('<code />').addClass(csscls('sql')).html(PhpDebugBar.Widgets.highlight(stmt.sql, 'sql')).appendTo(li);
                 if (stmt.duration_str) {
                     $('<span title="Duration" />').addClass(csscls('duration')).text(stmt.duration_str).appendTo(li);
@@ -32,6 +49,23 @@
                 if (typeof(stmt.stmt_id) != 'undefined' && stmt.stmt_id) {
                     $('<span title="Prepared statement ID" />').addClass(csscls('stmt-id')).text(stmt.stmt_id).appendTo(li);
                 }
+                if (stmt.connection) {
+                    $('<span title="Connection" />').addClass(csscls('database')).text(stmt.connection).appendTo(li);
+                    li.attr("connection",stmt.connection);
+                    if ( $.inArray(stmt.connection, filters) == -1 ) {
+                        filters.push(stmt.connection);
+                        $('<a href="javascript:" />')
+                            .addClass(csscls('filter'))
+                            .text(stmt.connection)
+                            .attr('rel', stmt.connection)
+                            .on('click', function() { self.onFilterClick(this); })
+                            .appendTo(self.$toolbar);
+                        if (filters.length>1) {
+                            self.$toolbar.show();
+                            self.$list.$el.css("margin-bottom","20px");
+                        }
+                    }
+                }
                 if (stmt.params && !$.isEmptyObject(stmt.params)) {
                     var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li);
                     for (var key in stmt.params) {