From a06d28c1ad56a831e3ca1815fd7117bc036023c3 Mon Sep 17 00:00:00 2001 From: Fedik Date: Mon, 21 Sep 2020 13:58:18 +0300 Subject: [PATCH 1/6] Collect boundParams --- plugins/system/debug/src/DataCollector/QueryCollector.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/system/debug/src/DataCollector/QueryCollector.php b/plugins/system/debug/src/DataCollector/QueryCollector.php index 445ebb0ec5724..0717584f1c293 100644 --- a/plugins/system/debug/src/DataCollector/QueryCollector.php +++ b/plugins/system/debug/src/DataCollector/QueryCollector.php @@ -176,6 +176,7 @@ private function getStatements(): array { $statements = []; $logs = $this->queryMonitor->getLogs(); + $boundParams = $this->queryMonitor->getBoundParams(); $timings = $this->queryMonitor->getTimings(); $memoryLogs = $this->queryMonitor->getMemoryLogs(); $stacks = $this->queryMonitor->getCallStacks(); @@ -244,6 +245,7 @@ private function getStatements(): array $statements[] = [ 'sql' => $item, + 'params' => $boundParams[$id] ?? [], 'duration_str' => $this->getDataFormatter()->formatDuration($queryTime), 'memory_str' => $this->getDataFormatter()->formatBytes($queryMemory), 'caller' => $callerLocation, From 8df2fd95de1ed7d2729782b66c7593bc82ef64a3 Mon Sep 17 00:00:00 2001 From: Fedik Date: Mon, 21 Sep 2020 14:19:07 +0300 Subject: [PATCH 2/6] Render params table --- .../widgets/sqlqueries/widget.es5.js | 51 ++++++++++++++----- 1 file changed, 38 insertions(+), 13 deletions(-) diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js index 16fbbd8be3593..1c1a720de3313 100644 --- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js +++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js @@ -107,21 +107,46 @@ li.addClass(csscls('error')) li.append($('').addClass(csscls('error')).text('[' + stmt.error_code + '] ' + stmt.error_message)) } - if (stmt.params && !$.isEmptyObject(stmt.params)) { - var table = $('
Params
').addClass(csscls('params')).appendTo(li) + + var tableParams; + + function showTableParams() { + if (tableParams) { + tableParams.show(); + return; + } + + // Render table + tableParams = $('').addClass(csscls('params')).appendTo(li); + tableParams.append(''); + + var pRow; for (var key in stmt.params) { - if (typeof stmt.params[key] !== 'function') { - table.append('') - } + pRow = stmt.params[key]; + tableParams.append(''); } - li.css('cursor', 'pointer').click(function () { - if (table.is(':visible')) { - table.hide() - } else { - table.show() - } - }) + + tableParams.show(); + } + + if (stmt.params && !$.isEmptyObject(stmt.params)) { + var btnParams = $('') + .text('Params') + .addClass(csscls('eye')) + .css('cursor', 'pointer') + .on('click', function () { + if (tableParams && tableParams.is(':visible')) { + tableParams.hide() + btnParams.addClass(csscls('eye')) + btnParams.removeClass(csscls('eye-dash')) + } else { + showTableParams(); + btnParams.addClass(csscls('eye-dash')) + btnParams.removeClass(csscls('eye')) + } + }) + .appendTo(li) } var tableExplain; From 3c5f515da37fa4e92daca45f65ddd62fe1ae116e Mon Sep 17 00:00:00 2001 From: Fedik Date: Mon, 21 Sep 2020 14:26:53 +0300 Subject: [PATCH 3/6] Optimise Call Stack rendering --- .../widgets/sqlqueries/widget.es5.js | 50 +++++++++++-------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js index 1c1a720de3313..b87c78aedc499 100644 --- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js +++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js @@ -195,7 +195,33 @@ .appendTo(li) } - var tableStack + var tableStack; + + function showTableStack() { + if (tableStack) { + tableStack.show(); + return; + } + + // Render table + tableStack = $('
IDValueData TypeLength
' + key + '' + stmt.params[key] + '
' + key + '' + pRow.value + '' + + pRow.dataType + '' + pRow.length + '
Call Stack
') + .addClass(csscls('callstack')).appendTo(li); + + var i, entry, location, caller, cssClass; + for (i in stmt.callstack) { + entry = stmt.callstack[i] + location = entry[3] ? entry[3].replace(self.root_path, '') + ':' + entry[4] : '' + caller = entry[2].replace(self.root_path, '') + cssClass = entry[1] ? 'caller' : '' + + if (location && self.xdebug_link) { + location = '' + location + '' + } + tableStack.append('' + entry[0] + '' + caller + '' + location + '') + } + + tableStack.show(); + } if (stmt.callstack && !$.isEmptyObject(stmt.callstack)) { var btnStack = $('') @@ -203,19 +229,17 @@ .addClass(csscls('eye')) .css('cursor', 'pointer') .on('click', function () { - if (tableStack.is(':visible')) { + if (tableStack && tableStack.is(':visible')) { tableStack.hide() btnStack.addClass(csscls('eye')) btnStack.removeClass(csscls('eye-dash')) } else { - tableStack.show() + showTableStack(); btnStack.addClass(csscls('eye-dash')) btnStack.removeClass(csscls('eye')) } }) .appendTo(li) - - tableStack = $('
Call Stack
').addClass(csscls('callstack')) } if (typeof(stmt.caller) != 'undefined' && stmt.caller) { @@ -245,20 +269,6 @@ }) .appendTo(li) - if (tableStack) { - tableStack.appendTo(li) - for (var i in stmt.callstack) { - var entry = stmt.callstack[i] - var location = entry[3] ? entry[3].replace(self.root_path, '') + ':' + entry[4] : '' - var caller = entry[2].replace(self.root_path, '') - var cssClass = entry[1] ? 'caller' : '' - if (location && self.xdebug_link) { - location = '' + location + '' - } - tableStack.append('' + entry[0] + '' + caller + '' + location + '') - } - } - li.attr('dupeindex', 'dupe-0') } }) @@ -269,7 +279,7 @@ if (data.length <= 0) { return false } - +console.log(data); this.root_path = data.root_path this.xdebug_link = data.xdebug_link this.$list.set('data', data.statements) From 4705224991fa9000d2658b533ae5547d64bc3790 Mon Sep 17 00:00:00 2001 From: Fedik Date: Mon, 21 Sep 2020 14:35:39 +0300 Subject: [PATCH 4/6] clean --- .../plg_system_debug/widgets/sqlqueries/widget.es5.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js index b87c78aedc499..2e393a8ff4bbc 100644 --- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js +++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js @@ -279,7 +279,7 @@ if (data.length <= 0) { return false } -console.log(data); + this.root_path = data.root_path this.xdebug_link = data.xdebug_link this.$list.set('data', data.statements) From 9a522d07cc0b2489520d7320135b3a090bd04b0d Mon Sep 17 00:00:00 2001 From: Fedik Date: Mon, 21 Sep 2020 14:37:42 +0300 Subject: [PATCH 5/6] length is useless --- .../plg_system_debug/widgets/sqlqueries/widget.es5.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js index 2e393a8ff4bbc..7a097c75d2189 100644 --- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js +++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js @@ -118,13 +118,13 @@ // Render table tableParams = $('').addClass(csscls('params')).appendTo(li); - tableParams.append(''); + tableParams.append(''); var pRow; for (var key in stmt.params) { pRow = stmt.params[key]; tableParams.append(''); + + pRow.dataType + ''); } tableParams.show(); From 32565fc76575d461576779ec585e20cf1395944a Mon Sep 17 00:00:00 2001 From: Fedik Date: Mon, 21 Sep 2020 16:07:48 +0300 Subject: [PATCH 6/6] update styling --- .../widgets/sqlqueries/widget.css | 17 +++++++++++------ .../widgets/sqlqueries/widget.es5.js | 11 ++++++----- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css index 3cb6951935143..a72300892439f 100644 --- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css +++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css @@ -100,15 +100,16 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-eye-dash { div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params { display: none; width: 70%; - margin: 10px; + margin: 10px 0; border: 1px solid #ddd; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; border-collapse: collapse; } -div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td { +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td, +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain td { border: 1px solid #ddd; - text-align: center; + padding: 3px; } div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params .phpdebugbar-widgets-name { @@ -116,10 +117,11 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params .phpdebugbar font-weight: bold; } -div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack { +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack, +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain{ display: none; width: 100%; - margin: 10px; + margin: 10px 0; border: 1px solid #ddd; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; border-collapse: collapse; @@ -133,8 +135,11 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack tbody tr: background-color: #eee; } -div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack th { +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack th, +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain th, +div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th{ font-weight: bold; + padding: 3px; } div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item { diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js index 7a097c75d2189..38b3b41741eee 100644 --- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js +++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js @@ -118,13 +118,14 @@ // Render table tableParams = $('
IDValueData TypeLength
IDValueData Type
' + key + '' + pRow.value + '' - + pRow.dataType + '' + pRow.length + '
').addClass(csscls('params')).appendTo(li); - tableParams.append(''); + tableParams.append(''); + tableParams.append(''); var pRow; for (var key in stmt.params) { pRow = stmt.params[key]; - tableParams.append(''); + tableParams.append(''); } tableParams.show(); @@ -158,7 +159,7 @@ } // Render table - tableExplain = $('
IDValueData Type
Query Parameters
IDValueData Type
' + key + '' + pRow.value + '' - + pRow.dataType + '
' + key + '' + pRow.value + '' + + pRow.dataType + '
').addClass(csscls('callstack')).appendTo(li); + tableExplain = $('
').addClass(csscls('explain')).appendTo(li); tableExplain.append(''); var i, entry, cols; @@ -204,7 +205,7 @@ } // Render table - tableStack = $('
' + stmt.explain_col.join('') + '
Call Stack
') + tableStack = $('
Call Stack
') .addClass(csscls('callstack')).appendTo(li); var i, entry, location, caller, cssClass;