JFIF x x C
C "
} !1AQa"q2#BR$3br
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz
w !1AQaq"2B #3Rbr(function($) {
let css = PhpDebugBar.utils.makecsscls('phpdebugbar-');
let csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
/**
* Widget for displaying sql queries.
*
* Options:
* - data
*/
const QueriesWidget = PhpDebugBar.Widgets.LaravelQueriesWidget = PhpDebugBar.Widget.extend({
className: csscls('sqlqueries'),
duplicateQueries: new Set(),
hiddenConnections: new Set(),
copyToClipboard: function (code) {
if (document.selection) {
const range = document.body.createTextRange();
range.moveToElementText(code);
range.select();
} else if (window.getSelection) {
const range = document.createRange();
range.selectNodeContents(code);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
var isCopied = false;
try {
isCopied = document.execCommand('copy');
console.log('Query copied to the clipboard');
} catch (err) {
alert('Oops, unable to copy');
}
window.getSelection().removeAllRanges();
return isCopied;
},
explainMysql: function ($element, statement, rows, visual) {
const headings = [];
for (const key in rows[0]) {
headings.push($(' | ').text(key));
}
const values = [];
for (const row of rows) {
const $tr = $('|
');
for (const key in row) {
$tr.append($(' | ').text(row[key]));
}
values.push($tr);
}
const $table = $('').addClass(csscls('explain'));
$table.find('thead').append($('|
').append(headings));
$table.find('tbody').append(values);
$element.append($table);
if (visual) {
$element.append(this.explainVisual(statement, visual.confirm));
}
},
explainPgsql: function ($element, statement, rows, visual) {
const $ul = $('').addClass(csscls('table-list'));
const $li = $('').addClass(csscls('table-list-item'));
for (const row of rows) {
$ul.append($li.clone().html($('').text(row).text().replaceAll(' ', ' ')));
}
$element.append([$ul, this.explainVisual(statement, visual.confirm)]);
},
explainVisual: function (statement, confirmMessage) {
const $explainLink = $('')
.addClass(csscls('visual-link'));
const $explainButton = $('Visual Explain')
.addClass(csscls('visual-explain'))
.on('click', () => {
if (!confirm(statement.explain['visual-confirm'])) return;
fetch(statement.explain.url, {
method: "POST",
body: JSON.stringify({
connection: statement.explain.connection,
query: statement.explain.query,
bindings: statement.bindings,
hash: statement.explain.hash,
mode: 'visual',
}),
}).then(response => {
response.json()
.then(json => {
if (!response.ok) return alert(json.message);
$explainLink.attr('href', json.data).text(json.data);
window.open(json.data, '_blank', 'noopener');
})
.catch(err => alert(`Response body could not be parsed. (${err})`));
}).catch(e => {
alert(e.message);
});
});
return $('').append([$explainButton, $explainLink]);
},
identifyDuplicates: function(statements) {
const makeStatementHash = (statement) => {
return [
statement.sql,
statement.connection,
JSON.stringify(statement.bindings),
].join('::');
};
const countedStatements = {};
for (const statement of statements) {
if (statement.type === 'query') {
countedStatements[makeStatementHash(statement)] = (countedStatements[makeStatementHash(statement)] ?? 0) + 1;
}
}
this.duplicateQueries = new Set();
for (const statement of statements) {
if (countedStatements[makeStatementHash(statement)] > 1) {
this.duplicateQueries.add(statement);
}
}
},
render: function () {
const $status = $('').addClass(csscls('status')).appendTo(this.$el);
const $list = new PhpDebugBar.Widgets.ListWidget({
itemRenderer: this.renderQuery.bind(this),
});
this.$el.append($list.$el);
this.bindAttr('data', function (data) {
this.identifyDuplicates(data.statements);
this.renderStatus($status, data);
$list.set('data', data.statements);
});
},
renderStatus: function ($status, data) {
$status.empty();
const connections = new Set();
for (const statement of data.statements) {
connections.add(statement.connection);
}
const $text = $('').text(`${data.nb_statements} ${data.nb_statements == 1 ? 'statement was' : 'statements were'} executed`);
if (data.nb_excluded_statements) {
$text.append(`, ${data.nb_excluded_statements} ${data.nb_excluded_statements == 1 ? 'has' : 'have'} been excluded`);
}
if (data.nb_failed_statements > 0 || this.duplicateQueries.size > 0) {
const details = [];
if (data.nb_failed_statements) {
details.push(`${data.nb_failed_statements} failed`);
}
if (this.duplicateQueries.size > 0) {
details.push(`${this.duplicateQueries.size} ${this.duplicateQueries.size == 1 ? 'duplicate' : 'duplicates'}`);
}
$text.append(` (${details.join(', ')})`);
}
$status.append($text);
const filters = [];
if (this.duplicateQueries.size > 0) {
filters.push($('')
.text('Show only duplicates')
.addClass(csscls('duplicates'))
.click((event) => {
if ($(event.target).text() === 'Show only duplicates') {
$(event.target).text('Show All');
this.$el.find('[data-duplicate=false]').hide();
} else {
$(event.target).text('Show only duplicates');
this.$el.find('[data-duplicate]').show();
}
})
);
}
if (connections.size > 1) {
for (const connection of connections.values()) {
filters.push($('')
.addClass(csscls('connection'))
.text(connection)
.attr({'data-filter': connection, 'data-active': true})
.on('click', (event) => {
if ($(event.target).attr('data-active') === 'true') {
$(event.target).attr('data-active', false).css('opacity', 0.3);
this.hiddenConnections.add($(event.target).attr('data-filter'));
} else {
$(event.target).attr('data-active', true).css('opacity', 1.0);
this.hiddenConnections.delete($(event.target).attr('data-filter'));
}
this.$el.find(`[data-connection]`).show();
for (const hiddenConnection of this.hiddenConnections) {
this.$el.find(`[data-connection="${hiddenConnection}"]`).hide();
}
})
);
}
}
$status.append(filters);
if (data.accumulated_duration_str) {
$status.append($('').addClass(csscls('duration')).text(data.accumulated_duration_str));
}
if (data.memory_usage_str) {
$status.append($('').addClass(csscls('memory')).text(data.memory_usage_str));
}
},
renderQuery: function ($li, statement) {
if (statement.type === 'transaction') {
$li.attr('data-connection', statement.connection)
.attr('data-duplicate', false)
.append($('').addClass(csscls('sql name')).text(statement.sql));
} else {
const $code = $('|
').append(
$(' | ').addClass(csscls('name')).html(caption + ((icon || '') && ``)),
$(' | ').addClass(csscls('value')).append($value),
);
},
renderDetailStrings: function (caption, icon, values, showLineNumbers = false) {
const $ul = $('').addClass(csscls('table-list'));
const $li = $('').addClass(csscls('table-list-item'));
const $muted = $('').addClass(css('text-muted'));
let i = 0;
for (const value of values) {
if (showLineNumbers) {
$ul.append($li.clone().append([$muted.clone().text(`${i}:`), ' ', $('').text(value)]));
} else {
if (caption === 'Hints') {
$ul.append($li.clone().append(value));
} else {
$ul.append($li.clone().text(value));
}
}
i++;
}
return this.renderDetail(caption, icon, $ul);
},
renderDetailBacktrace: function (caption, icon, traces) {
const $muted = $('').addClass(css('text-muted'));
const values = [];
for (const trace of traces.values()) {
const $span = $('').text(trace.name || trace.file);
if (trace.namespace) {
$span.prepend(`${trace.namespace}::`);
}
if (trace.line) {
$span.append($muted.clone().text(`:${trace.line}`));
}
values.push($span.text());
}
return this.renderDetailStrings(caption, icon, values);
},
renderDetailExplain: function (caption, icon, statement, explainFn) {
const $btn = $('')
.text('Run EXPLAIN')
.addClass(csscls('explain-btn'))
.on('click', () => {
fetch(statement.explain.url, {
method: "POST",
body: JSON.stringify({
connection: statement.explain.connection,
query: statement.explain.query,
bindings: statement.bindings,
hash: statement.explain.hash,
}),
}).then(response => {
response.json()
.then(json => {
if (!response.ok) return alert(json.message);
$detail.find(`.${csscls('value')}`).children().remove();
explainFn($detail.find(`.${csscls('value')}`), statement, json.data, json.visual);
})
.catch(err => alert(`Response body could not be parsed. (${err})`));
}).catch(e => {
alert(e.message);
});
});
const $detail = this.renderDetail(caption, icon, $btn);
return $detail;
},
});
})(PhpDebugBar.$);