Skip to content

[4.0] Fix Debug plugin to display query parameters #30717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilsonge merged 6 commits into from
Sep 22, 2020
Merged

[4.0] Fix Debug plugin to display query parameters #30717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a06d28c
Collect boundParams
Fedik Sep 21, 2020
8df2fd9
Render params table
Fedik Sep 21, 2020
3c5f515
Optimise Call Stack rendering
Fedik Sep 21, 2020
4705224
clean
Fedik Sep 21, 2020
9a522d0
length is useless
Fedik Sep 21, 2020
32565fc
update styling
Fedik Sep 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions build/media_source/plg_system_debug/widgets/sqlqueries/widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,26 +100,28 @@ 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 {
width: 20%;
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;
Expand All @@ -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 {
Expand Down
102 changes: 69 additions & 33 deletions build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,21 +107,47 @@
li.addClass(csscls('error'))
li.append($('<span />').addClass(csscls('error')).text('[' + stmt.error_code + '] ' + stmt.error_message))
}
if (stmt.params && !$.isEmptyObject(stmt.params)) {
var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li)

var tableParams;

function showTableParams() {
if (tableParams) {
tableParams.show();
return;
}

// Render table
tableParams = $('<table>').addClass(csscls('params')).appendTo(li);
tableParams.append('<tr><th colspan="3">Query Parameters</th></tr>');
tableParams.append('<tr><td>ID</td><td>Value</td><td>Data Type</td></tr>');

var pRow;
for (var key in stmt.params) {
if (typeof stmt.params[key] !== 'function') {
table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') +
'">' + stmt.params[key] + '</td></tr>')
}
pRow = stmt.params[key];
tableParams.append('<tr><td>' + key + '</td><td>' + pRow.value + '</td><td>'
+ pRow.dataType + '</td></tr>');
}
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 = $('<span title="Params" />')
.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;
Expand All @@ -133,7 +159,7 @@
}

// Render table
tableExplain = $('<table>').addClass(csscls('callstack')).appendTo(li);
tableExplain = $('<table>').addClass(csscls('explain')).appendTo(li);
tableExplain.append('<tr><th>' + stmt.explain_col.join('</th><th>') + '</th></tr>');

var i, entry, cols;
Expand Down Expand Up @@ -170,27 +196,51 @@
.appendTo(li)
}

var tableStack
var tableStack;

function showTableStack() {
if (tableStack) {
tableStack.show();
return;
}

// Render table
tableStack = $('<table><tr><th colspan="3">Call Stack</th></tr></table>')
.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 = '<a href="' + self.xdebug_link.replace('%f', entry[3]).replace('%l', entry[4]) + '">' + location + '</a>'
}
tableStack.append('<tr class="' + cssClass + '"><th>' + entry[0] + '</th><td>' + caller + '</td><td>' + location + '</td></tr>')
}

tableStack.show();
}

if (stmt.callstack && !$.isEmptyObject(stmt.callstack)) {
var btnStack = $('<span title="Call Stack" />')
.text('Stack')
.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 = $('<table><thead><tr><th colspan="3">Call Stack</th></tr></thead></table>').addClass(csscls('callstack'))
}

if (typeof(stmt.caller) != 'undefined' && stmt.caller) {
Expand Down Expand Up @@ -220,20 +270,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 = '<a href="' + self.xdebug_link.replace('%f', entry[3]).replace('%l', entry[4]) + '">' + location + '</a>'
}
tableStack.append('<tr class="' + cssClass + '"><th>' + entry[0] + '</th><td>' + caller + '</td><td>' + location + '</td></tr>')
}
}

li.attr('dupeindex', 'dupe-0')
}
})
Expand Down
2 changes: 2 additions & 0 deletions plugins/system/debug/src/DataCollector/QueryCollector.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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,
Expand Down