[Summary view] [Print] [Text view]

   1  (function ($) {
   2  
   3      var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-')
   4  
   5      /**
   6       * Widget for the displaying sql queries
   7       *
   8       * Options:
   9       *  - data
  10       */
  11      var SQLQueriesWidget = PhpDebugBar.Widgets.SQLQueriesWidget = PhpDebugBar.Widget.extend({
  12  
  13          className: csscls('sqlqueries'),
  14  
  15          onFilterClick: function (el) {
  16              $(el).toggleClass(csscls('excluded'))
  17  
  18              var excludedLabels = []
  19              this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function () {
  20                  excludedLabels.push(this.rel)
  21              })
  22  
  23              this.$list.$el.find('li[connection=' + $(el).attr('rel') + ']').toggle()
  24  
  25              this.set('exclude', excludedLabels)
  26          },
  27          onFilterDupesClick: function (el) {
  28              $(el).toggleClass(csscls('excluded'))
  29  
  30              var excludedLabels = []
  31              this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function () {
  32                  excludedLabels.push(this.rel)
  33              })
  34  
  35              this.$list.$el.find('li[dupeindex=' + $(el).attr('rel') + ']').toggle()
  36  
  37              this.set('exclude', excludedLabels)
  38          },
  39          onCopyToClipboard: function (el) {
  40              var code = $(el).parent('li').find('code').get(0)
  41              var copy = function () {
  42                  try {
  43                      document.execCommand('copy')
  44                      alert('Query copied to the clipboard')
  45                  } catch (err) {
  46                      console.log('Oops, unable to copy')
  47                  }
  48              }
  49              var select = function (node) {
  50                  if (document.selection) {
  51                      var range = document.body.createTextRange()
  52                      range.moveToElementText(node)
  53                      range.select()
  54                  } else if (window.getSelection) {
  55                      var range = document.createRange()
  56                      range.selectNodeContents(node)
  57                      window.getSelection().removeAllRanges()
  58                      window.getSelection().addRange(range)
  59                  }
  60                  copy()
  61                  window.getSelection().removeAllRanges()
  62              }
  63              select(code)
  64          },
  65          render: function () {
  66              this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el)
  67  
  68              this.$toolbar = $('<div></div>').addClass(csscls('toolbar')).appendTo(this.$el)
  69  
  70              var filters = [], self = this
  71  
  72              this.$list = new PhpDebugBar.Widgets.ListWidget({
  73                  itemRenderer: function (li, stmt) {
  74                      $('<code />').addClass(csscls('sql')).html(PhpDebugBar.Widgets.highlight(stmt.sql, 'sql')).appendTo(li)
  75                      if (stmt.duration_str) {
  76                          $('<span title="Duration" />').addClass(csscls('duration')).text(stmt.duration_str).appendTo(li)
  77                      }
  78                      if (stmt.memory_str) {
  79                          $('<span title="Memory usage" />').addClass(csscls('memory')).text(stmt.memory_str).appendTo(li)
  80                      }
  81                      if (typeof(stmt.row_count) != 'undefined') {
  82                          $('<span title="Row count" />').addClass(csscls('row-count')).text(stmt.row_count).appendTo(li)
  83                      }
  84                      if (typeof(stmt.stmt_id) != 'undefined' && stmt.stmt_id) {
  85                          $('<span title="Prepared statement ID" />').addClass(csscls('stmt-id')).text(stmt.stmt_id).appendTo(li)
  86                      }
  87                      if (stmt.connection) {
  88                          $('<span title="Connection" />').addClass(csscls('database')).text(stmt.connection).appendTo(li)
  89                          li.attr('connection', stmt.connection)
  90                          if ($.inArray(stmt.connection, filters) == -1) {
  91                              filters.push(stmt.connection)
  92                              $('<a />')
  93                                  .addClass(csscls('filter'))
  94                                  .text(stmt.connection)
  95                                  .attr('rel', stmt.connection)
  96                                  .on('click', function () {
  97                                      self.onFilterClick(this)
  98                                  })
  99                                  .appendTo(self.$toolbar)
 100                              if (filters.length > 1) {
 101                                  self.$toolbar.show()
 102                                  self.$list.$el.css('margin-bottom', '20px')
 103                              }
 104                          }
 105                      }
 106                      if (typeof(stmt.is_success) != 'undefined' && !stmt.is_success) {
 107                          li.addClass(csscls('error'))
 108                          li.append($('<span />').addClass(csscls('error')).text('[' + stmt.error_code + '] ' + stmt.error_message))
 109                      }
 110  
 111                      var tableParams;
 112  
 113                      function showTableParams() {
 114                          if (tableParams) {
 115                              tableParams.show();
 116                              return;
 117                          }
 118  
 119                          // Render table
 120                          tableParams = $('<table>').addClass(csscls('params')).appendTo(li);
 121                          tableParams.append('<tr><th colspan="3">Query Parameters</th></tr>');
 122                          tableParams.append('<tr><td>ID</td><td>Value</td><td>Data Type</td></tr>');
 123  
 124                          var pRow;
 125                          for (var key in stmt.params) {
 126                              pRow = stmt.params[key];
 127                              tableParams.append('<tr><td>' + key + '</td><td>' + pRow.value + '</td><td>'
 128                                + pRow.dataType + '</td></tr>');
 129                          }
 130  
 131                          tableParams.show();
 132                      }
 133  
 134                      if (stmt.params && !$.isEmptyObject(stmt.params)) {
 135                          var btnParams = $('<span title="Params" />')
 136                            .text('Params')
 137                            .addClass(csscls('eye'))
 138                            .css('cursor', 'pointer')
 139                            .on('click', function () {
 140                                if (tableParams && tableParams.is(':visible')) {
 141                                    tableParams.hide()
 142                                    btnParams.addClass(csscls('eye'))
 143                                    btnParams.removeClass(csscls('eye-dash'))
 144                                } else {
 145                                    showTableParams();
 146                                    btnParams.addClass(csscls('eye-dash'))
 147                                    btnParams.removeClass(csscls('eye'))
 148                                }
 149                            })
 150                            .appendTo(li)
 151                      }
 152  
 153                      var tableExplain;
 154  
 155                      function showTableExplain() {
 156                          if (tableExplain) {
 157                              tableExplain.show();
 158                              return;
 159                          }
 160  
 161                          // Render table
 162                          tableExplain = $('<table>').addClass(csscls('explain')).appendTo(li);
 163                          tableExplain.append('<tr><th>' + stmt.explain_col.join('</th><th>') + '</th></tr>');
 164  
 165                          var i, entry, cols;
 166                          for (i in stmt.explain) {
 167                              cols  = []
 168                              entry = stmt.explain[i];
 169  
 170                              stmt.explain_col.forEach(function (key){
 171                                  cols.push(entry[key]);
 172                              });
 173  
 174                              tableExplain.append('<tr><td>' + cols.join('</td><td>') + '</td></tr>');
 175                          }
 176  
 177                          tableExplain.show();
 178                      }
 179  
 180                      if (stmt.explain && !$.isEmptyObject(stmt.explain)) {
 181                          var btnExplain = $('<span title="Explain" />')
 182                            .text('Explain')
 183                            .addClass(csscls('eye'))
 184                            .css('cursor', 'pointer')
 185                            .on('click', function () {
 186                                if (tableExplain && tableExplain.is(':visible')) {
 187                                    tableExplain.hide()
 188                                    btnExplain.addClass(csscls('eye'))
 189                                    btnExplain.removeClass(csscls('eye-dash'))
 190                                } else {
 191                                    showTableExplain();
 192                                    btnExplain.addClass(csscls('eye-dash'))
 193                                    btnExplain.removeClass(csscls('eye'))
 194                                }
 195                            })
 196                            .appendTo(li)
 197                      }
 198  
 199                      var tableStack;
 200  
 201                      function showTableStack() {
 202                          if (tableStack) {
 203                              tableStack.show();
 204                              return;
 205                          }
 206  
 207                          // Render table
 208                          tableStack = $('<table><tr><th colspan="3">Call Stack</th></tr></table>')
 209                            .addClass(csscls('callstack')).appendTo(li);
 210  
 211                          var i, entry, location, caller, cssClass;
 212                          for (i in stmt.callstack) {
 213                              entry = stmt.callstack[i]
 214                              location = entry[3] ? entry[3].replace(self.root_path, '') + ':' + entry[4] : ''
 215                              caller = entry[2].replace(self.root_path, '')
 216                              cssClass = entry[1] ? 'caller' : ''
 217  
 218                              if (location && self.xdebug_link) {
 219                                  location = '<a href="' + self.xdebug_link.replace('%f', entry[3]).replace('%l', entry[4]) + '">' + location + '</a>'
 220                              }
 221                              tableStack.append('<tr class="' + cssClass + '"><th>' + entry[0] + '</th><td>' + caller + '</td><td>' + location + '</td></tr>')
 222                          }
 223  
 224                          tableStack.show();
 225                      }
 226  
 227                      if (stmt.callstack && !$.isEmptyObject(stmt.callstack)) {
 228                          var btnStack = $('<span title="Call Stack" />')
 229                              .text('Stack')
 230                              .addClass(csscls('eye'))
 231                              .css('cursor', 'pointer')
 232                              .on('click', function () {
 233                                  if (tableStack && tableStack.is(':visible')) {
 234                                      tableStack.hide()
 235                                      btnStack.addClass(csscls('eye'))
 236                                      btnStack.removeClass(csscls('eye-dash'))
 237                                  } else {
 238                                      showTableStack();
 239                                      btnStack.addClass(csscls('eye-dash'))
 240                                      btnStack.removeClass(csscls('eye'))
 241                                  }
 242                              })
 243                              .appendTo(li)
 244                      }
 245  
 246                      if (typeof(stmt.caller) != 'undefined' && stmt.caller) {
 247                          var caller = stmt.caller.replace(self.root_path, '')
 248                          if (self.xdebug_link) {
 249                              var parts = stmt.caller.split(':')
 250                              $('<a />')
 251                                  .text(caller)
 252                                  .addClass(csscls('editor-link'))
 253                                  .attr('href', self.xdebug_link.replace('%f', parts[0]).replace('%l', parts[1]))
 254                                  .appendTo(li)
 255                          } else {
 256                              $('<span title="Caller" />')
 257                                  .text(caller)
 258                                  .addClass(csscls('stmt-id'))
 259                                  .appendTo(li)
 260                          }
 261                      }
 262  
 263                      $('<span title="Copy to clipboard" />')
 264                          .text('Copy')
 265                          .addClass(csscls('copy-clipboard'))
 266                          .css('cursor', 'pointer')
 267                          .on('click', function (event) {
 268                              self.onCopyToClipboard(this)
 269                              event.stopPropagation()
 270                          })
 271                          .appendTo(li)
 272  
 273                      li.attr('dupeindex', 'dupe-0')
 274                  }
 275              })
 276              this.$list.$el.appendTo(this.$el)
 277  
 278              this.bindAttr('data', function (data) {
 279                  // the collector maybe is empty
 280                  if (data.length <= 0) {
 281                      return false
 282                  }
 283  
 284                  this.root_path = data.root_path
 285                  this.xdebug_link = data.xdebug_link
 286                  this.$list.set('data', data.statements)
 287                  this.$status.empty()
 288  
 289                  // Search for duplicate statements.
 290                  for (var sql = {}, unique = 0, duplicate = 0, i = 0; i < data.statements.length; i++) {
 291                      var stmt = data.statements[i].sql
 292                      if (data.statements[i].params && !$.isEmptyObject(data.statements[i].params)) {
 293                          stmt += ' {' + $.param(data.statements[i].params, false) + '}'
 294                      }
 295                      sql[stmt] = sql[stmt] || {keys: []}
 296                      sql[stmt].keys.push(i)
 297                  }
 298                  // Add classes to all duplicate SQL statements.
 299                  var cnt = 0
 300                  for (var stmt in sql) {
 301                      if (sql[stmt].keys.length > 1) {
 302                          duplicate += sql[stmt].keys.length
 303                          cnt++
 304                          for (var i = 0; i < sql[stmt].keys.length; i++) {
 305                              this.$list.$el.find('.' + csscls('list-item')).eq(sql[stmt].keys[i])
 306                                  .addClass(csscls('sql-duplicate'))
 307                                  .attr('dupeindex', 'dupe-' + cnt)
 308                          }
 309                      } else {
 310                          unique++
 311                      }
 312                  }
 313  
 314                  if (duplicate) {
 315                      for (i = 0; i <= cnt; i++) {
 316                          $('<a />')
 317                              .addClass(csscls('filter'))
 318                              .text(i ? 'Duplicates ' + i : 'Uniques')
 319                              .attr('rel', 'dupe-' + i)
 320                              .on('click', function () {
 321                                  self.onFilterDupesClick(this)
 322                              })
 323                              .appendTo(self.$toolbar)
 324                      }
 325                      self.$toolbar.show()
 326                      self.$list.$el.css('margin-bottom', '20px')
 327                  }
 328  
 329                  var t = $('<span />').text(data.nb_statements + ' statements were executed').appendTo(this.$status)
 330                  if (data.nb_failed_statements) {
 331                      t.append(', ' + data.nb_failed_statements + ' of which failed')
 332                  }
 333                  if (duplicate) {
 334                      t.append(', ' + duplicate + ' of which were duplicates')
 335                      t.append(', ' + unique + ' unique')
 336                  }
 337                  if (data.accumulated_duration_str) {
 338                      this.$status.append($('<span title="Accumulated duration" />').addClass(csscls('duration')).text(data.accumulated_duration_str))
 339                  }
 340                  if (data.memory_usage_str) {
 341                      this.$status.append($('<span title="Memory usage" />').addClass(csscls('memory')).text(data.memory_usage_str))
 342                  }
 343              })
 344          }
 345  
 346      })
 347  
 348  })(PhpDebugBar.$)