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

Improve the frontend code for the performance bar

parent d30576c5
...@@ -14,20 +14,14 @@ export default class PerformanceBar { ...@@ -14,20 +14,14 @@ export default class PerformanceBar {
init(opts) { init(opts) {
const $container = $(opts.container); 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.$lineProfileLink = $container.find('.js-toggle-modal-peek-line-profile');
this.$lineProfileModal = $('#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.initEventListeners();
this.showModalOnLoad(); this.showModalOnLoad();
} }
initEventListeners() { initEventListeners() {
this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink());
this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e)); this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e));
this.$gitalyProfileLink.on('click', () => this.handleGitalyProfileLink());
$(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile); $(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile);
} }
...@@ -39,10 +33,6 @@ export default class PerformanceBar { ...@@ -39,10 +33,6 @@ export default class PerformanceBar {
} }
} }
handleSQLProfileLink() {
PerformanceBar.toggleModal(this.$sqlProfileModal);
}
handleLineProfileLink(e) { handleLineProfileLink(e) {
const lineProfilerParameter = getParameterValues('lineprofiler'); const lineProfilerParameter = getParameterValues('lineprofiler');
const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`); const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`);
...@@ -55,10 +45,6 @@ export default class PerformanceBar { ...@@ -55,10 +45,6 @@ export default class PerformanceBar {
} }
} }
handleGitalyProfileLink() {
PerformanceBar.toggleModal(this.$gitalyProfileModal);
}
static toggleModal($modal) { static toggleModal($modal) {
if ($modal.length) { if ($modal.length) {
$modal.modal('toggle'); $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) - local_assigns.fetch(:view)
%strong %button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-gitaly-details' } }
%a.js-toggle-modal-peek-gitaly
%span{ data: { defer_to: "#{view.defer_key}-duration" } }... %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/ \/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }... %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
#modal-peek-gitaly-details.modal{ tabindex: -1 } #modal-peek-gitaly-details.modal{ tabindex: -1, role: 'dialog' }
.modal-dialog.modal-full .modal-dialog.modal-full
.modal-content .modal-content
.modal-header .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 %h4
Gitaly requests Gitaly requests
.modal-body{ data: { defer_to: "#{view.defer_key}-details" } }... .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 %button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-pg-queries' } }
%a.js-toggle-modal-peek-sql
%span{ data: { defer_to: "#{view.defer_key}-duration" } }... %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
\/ \/
%span{ data: { defer_to: "#{view.defer_key}-calls" } }... %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
...@@ -7,7 +6,9 @@ ...@@ -7,7 +6,9 @@
.modal-dialog.modal-full .modal-dialog.modal-full
.modal-content .modal-content
.modal-header .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 %h4
SQL queries SQL queries
.modal-body{ data: { defer_to: "#{view.defer_key}-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 dependency on jquery.tipsy
* - Removed the initializeTipsy and toggleBar functions * - Removed the initializeTipsy and toggleBar functions
...@@ -18,11 +18,9 @@ ...@@ -18,11 +18,9 @@
updatePerformanceBar = function(results) { updatePerformanceBar = function(results) {
Object.keys(results.data).forEach(function(key) { Object.keys(results.data).forEach(function(key) {
Object.keys(results.data[key]).forEach(function(label) { Object.keys(results.data[key]).forEach(function(label) {
var data, table, target; var data = results.data[key][label];
var table = createTable(key, label, data);
data = results.data[key][label]; var target = $('[data-defer-to="' + key + '-' + label + '"]');
table = createTable(key, label, data);
target = $("[data-defer-to=" + key + "-" + label + "]");
if (table) { if (table) {
target.html(table); target.html(table);
...@@ -34,11 +32,11 @@ ...@@ -34,11 +32,11 @@
return $(document).trigger('peek:render', [getRequestId(), results]); return $(document).trigger('peek:render', [getRequestId(), results]);
}; };
createTable = function(key, label, data) { 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) { for (var i = 0; i < data.length; i += 1) {
table.appendChild(createTableRow(data[i])); table.appendChild(createTableRow(data[i]));
...@@ -49,24 +47,20 @@ ...@@ -49,24 +47,20 @@
return table; return table;
}; };
createTableRow = function(row) { createTableRow = function(row) {
var tr, duration_td, strong; var tr = document.createElement('tr');
var durationTd = document.createElement('td');
tr = document.createElement('tr'); var strong = document.createElement('strong');
duration_td = document.createElement('td');
strong = document.createElement('strong');
strong.append(row['duration'] + 'ms'); strong.append(row['duration'] + 'ms');
duration_td.appendChild(strong); durationTd.appendChild(strong);
tr.appendChild(duration_td); tr.appendChild(durationTd);
['sql', 'feature', 'enabled', 'request'].forEach(function(key) { ['sql', 'feature', 'enabled', 'request'].forEach(function(key) {
var td;
if (!row[key]) { return; } if (!row[key]) { return; }
td = document.createElement('td'); var td = document.createElement('td');
td.appendChild(document.createTextNode(row[key]));
td.appendChild(document.createTextNode(row[key]));
tr.appendChild(td); 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