Commit 40c7260d authored by Sean McGivern's avatar Sean McGivern
Browse files

Improve the frontend code for the performance bar

parent d30576c5
......@@ -14,20 +14,14 @@ export default class PerformanceBar {
init(opts) {
const $container = $(opts.container);
this.$sqlProfileLink = $container.find('.js-toggle-modal-peek-sql');
this.$sqlProfileModal = $container.find('#modal-peek-pg-queries');
this.$lineProfileLink = $container.find('.js-toggle-modal-peek-line-profile');
this.$lineProfileModal = $('#modal-peek-line-profile');
this.$gitalyProfileLink = $container.find('.js-toggle-modal-peek-gitaly');
this.$gitalyProfileModal = $container.find('#modal-peek-gitaly-details');
this.initEventListeners();
this.showModalOnLoad();
}
initEventListeners() {
this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink());
this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e));
this.$gitalyProfileLink.on('click', () => this.handleGitalyProfileLink());
$(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile);
}
......@@ -39,10 +33,6 @@ export default class PerformanceBar {
}
}
handleSQLProfileLink() {
PerformanceBar.toggleModal(this.$sqlProfileModal);
}
handleLineProfileLink(e) {
const lineProfilerParameter = getParameterValues('lineprofiler');
const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`);
......@@ -55,10 +45,6 @@ export default class PerformanceBar {
}
}
handleGitalyProfileLink() {
PerformanceBar.toggleModal(this.$gitalyProfileModal);
}
static toggleModal($modal) {
if ($modal.length) {
$modal.modal('toggle');
......
- local_assigns.fetch(:view)
%span.bold
%span{ title: 'Invoke Time', data: { defer_to: "#{view.defer_key}-gc_time" } }...
\/
%span{ title: 'Invoke Count', data: { defer_to: "#{view.defer_key}-invokes" } }...
gc
- local_assigns.fetch(:view)
%strong
%a.js-toggle-modal-peek-gitaly
%span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }...
#modal-peek-gitaly-details.modal{ tabindex: -1 }
%button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-gitaly-details' } }
%span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }...
#modal-peek-gitaly-details.modal{ tabindex: -1, role: 'dialog' }
.modal-dialog.modal-full
.modal-content
.modal-header
%button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X
%button.close{ type: 'button', data: { dismiss: 'modal' }, 'aria-label' => 'Close' }
%span{ 'aria-hidden' => 'true' }
×
%h4
Gitaly requests
.modal-body{ data: { defer_to: "#{view.defer_key}-details" } }...
Gitaly
gitaly
- local_assigns.fetch(:view)
%span.bold
%span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }...
redis
- local_assigns.fetch(:view)
%span.bold
%span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }...
sidekiq
%strong
%a.js-toggle-modal-peek-sql
%span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }...
%button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-pg-queries' } }
%span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }...
#modal-peek-pg-queries.modal{ tabindex: -1 }
.modal-dialog.modal-full
.modal-content
.modal-header
%button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X
%button.close{ type: 'button', data: { dismiss: 'modal' }, 'aria-label' => 'Close' }
%span{ 'aria-hidden' => 'true' }
×
%h4
SQL queries
.modal-body{ data: { defer_to: "#{view.defer_key}-queries" } }...
/*
* This is a modified version of https://github.com/peek/peek/blob/master/app/assets/javascripts/peek.js
* this is a modified version of https://github.com/peek/peek/blob/master/app/assets/javascripts/peek.js
*
* - Removed the dependency on jquery.tipsy
* - Removed the initializeTipsy and toggleBar functions
......@@ -18,11 +18,9 @@
updatePerformanceBar = function(results) {
Object.keys(results.data).forEach(function(key) {
Object.keys(results.data[key]).forEach(function(label) {
var data, table, target;
data = results.data[key][label];
table = createTable(key, label, data);
target = $("[data-defer-to=" + key + "-" + label + "]");
var data = results.data[key][label];
var table = createTable(key, label, data);
var target = $('[data-defer-to="' + key + '-' + label + '"]');
if (table) {
target.html(table);
......@@ -34,11 +32,11 @@
return $(document).trigger('peek:render', [getRequestId(), results]);
};
createTable = function(key, label, data) {
var table;
if (label != 'queries' && label != 'details') { return; }
if (label !== 'queries' && label !== 'details') {
return;
}
table = document.createElement('table');
var table = document.createElement('table');
for (var i = 0; i < data.length; i += 1) {
table.appendChild(createTableRow(data[i]));
......@@ -49,24 +47,20 @@
return table;
};
createTableRow = function(row) {
var tr, duration_td, strong;
tr = document.createElement('tr');
duration_td = document.createElement('td');
strong = document.createElement('strong');
var tr = document.createElement('tr');
var durationTd = document.createElement('td');
var strong = document.createElement('strong');
strong.append(row['duration'] + 'ms');
duration_td.appendChild(strong);
tr.appendChild(duration_td);
durationTd.appendChild(strong);
tr.appendChild(durationTd);
['sql', 'feature', 'enabled', 'request'].forEach(function(key) {
var td;
if (!row[key]) { return; }
td = document.createElement('td');
td.appendChild(document.createTextNode(row[key]));
var td = document.createElement('td');
td.appendChild(document.createTextNode(row[key]));
tr.appendChild(td);
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment