3 files changed, 67 insertions, 16 deletions
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index e924fde60bf..ffd8d494a40 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -57,6 +57,7 @@ import ShortcutsBlob from './shortcuts_blob';
 import initSettingsPanels from './settings_panels';
 import initExperimentalFlags from './experimental_flags';
 import OAuthRememberMe from './oauth_remember_me';
+import PerformanceBar from './performance_bar';
 
 (function() {
   var Dispatcher;
@@ -515,6 +516,10 @@ import OAuthRememberMe from './oauth_remember_me';
       if (!shortcut_handler) {
         new Shortcuts();
       }
+
+      if (document.querySelector('#peek')) {
+        new PerformanceBar({ container: '#peek' });
+      }
     };
 
     Dispatcher.prototype.initSearch = function() {
diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js
deleted file mode 100644
index de1a99fa3bd..00000000000
--- a/app/assets/javascripts/peek.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'vendor/peek';
-import 'vendor/peek.performance_bar';
-
-$(document).on('click', '#peek-show-queries', (e) => {
-  e.preventDefault();
-  $('.peek-rblineprof-modal').hide();
-  const $modal = $('#modal-peek-pg-queries');
-  if ($modal.length) {
-    $modal.modal('toggle');
-  }
-});
-
-$(document).on('click', '.js-lineprof-file', (e) => {
-  e.preventDefault();
-  $(e.target).parents('.peek-rblineprof-file').find('.data').toggle();
-});
diff --git a/app/assets/javascripts/performance_bar.js b/app/assets/javascripts/performance_bar.js
new file mode 100644
index 00000000000..9bbdf7f513c
--- /dev/null
+++ b/app/assets/javascripts/performance_bar.js
@@ -0,0 +1,62 @@
+import 'vendor/peek';
+import 'vendor/peek.performance_bar';
+
+export default class PerformanceBar {
+  constructor(opts) {
+    if (!PerformanceBar.singleton) {
+      this.init(opts);
+      PerformanceBar.singleton = this;
+    }
+    return PerformanceBar.singleton;
+  }
+
+  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.initEventListeners();
+    this.showModalOnLoad();
+  }
+
+  initEventListeners() {
+    this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink());
+    this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e));
+    $(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile);
+  }
+
+  showModalOnLoad() {
+    // When a lineprofiler query-string param is present, we show the line
+    // profiler modal upon page load
+    if (/lineprofiler/.test(window.location.search)) {
+      PerformanceBar.toggleModal(this.$lineProfileModal);
+    }
+  }
+
+  handleSQLProfileLink() {
+    PerformanceBar.toggleModal(this.$sqlProfileModal);
+  }
+
+  handleLineProfileLink(e) {
+    const lineProfilerParameter = gl.utils.getParameterValues('lineprofiler');
+    const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`);
+    const shouldToggleModal = lineProfilerParameter.length > 0 &&
+      lineProfilerParameterRegex.test(e.currentTarget.href);
+
+    if (shouldToggleModal) {
+      e.preventDefault();
+      PerformanceBar.toggleModal(this.$lineProfileModal);
+    }
+  }
+
+  static toggleModal($modal) {
+    if ($modal.length) {
+      $modal.modal('toggle');
+    }
+  }
+
+  static toggleLineProfileFile(e) {
+    $(e.currentTarget).parents('.peek-rblineprof-file').find('.data').toggle();
+  }
+}