2 files changed, 16 insertions, 34 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index d5f1cea8356..73524827c5d 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -16,11 +16,14 @@ export default {
       type: String,
       required: true,
     },
-    header: {
+    title: {
       type: String,
-      required: true,
+      required: false,
+      default() {
+        return this.metric;
+      },
     },
-    details: {
+    header: {
       type: String,
       required: true,
     },
@@ -34,14 +37,14 @@ export default {
       return this.currentRequest.details[this.metric];
     },
     detailsList() {
-      return this.metricDetails[this.details];
+      return this.metricDetails.details;
     },
   },
 };
 </script>
 <template>
   <div
-    v-if="currentRequest.details"
+    v-if="currentRequest.details && metricDetails"
     :id="`peek-view-${metric}`"
     class="view qa-performance-bar-detailed-metric"
   >
@@ -101,6 +104,6 @@ export default {
 
       <div slot="footer"></div>
     </gl-modal>
-    {{ metric }}
+    {{ title }}
   </div>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 73c9c60765a..c0ea42ad1a2 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,5 +1,4 @@
 <script>
-import $ from 'jquery';
 import { glEmojiTag } from '~/emoji';
 
 import detailedMetric from './detailed_metric.vue';
@@ -28,29 +27,27 @@ export default {
       type: String,
       required: true,
     },
-    profileUrl: {
-      type: String,
-      required: true,
-    },
   },
   detailedMetrics: [
-    { metric: 'pg', header: s__('PerformanceBar|SQL queries'), details: 'queries', keys: ['sql'] },
+    {
+      metric: 'active-record',
+      title: 'pg',
+      header: s__('PerformanceBar|SQL queries'),
+      keys: ['sql'],
+    },
     {
       metric: 'gitaly',
       header: s__('PerformanceBar|Gitaly calls'),
-      details: 'details',
       keys: ['feature', 'request'],
     },
     {
       metric: 'rugged',
       header: s__('PerformanceBar|Rugged calls'),
-      details: 'details',
       keys: ['feature', 'args'],
     },
     {
       metric: 'redis',
       header: s__('PerformanceBar|Redis calls'),
-      details: 'details',
       keys: ['cmd'],
     },
   ],
@@ -72,9 +69,6 @@ export default {
     initialRequest() {
       return this.currentRequestId === this.requestId;
     },
-    lineProfileModal() {
-      return $('#modal-peek-line-profile');
-    },
     hasHost() {
       return this.currentRequest && this.currentRequest.details && this.currentRequest.details.host;
     },
@@ -88,10 +82,6 @@ export default {
   },
   mounted() {
     this.currentRequest = this.requestId;
-
-    if (this.lineProfileModal.length) {
-      this.lineProfileModal.modal('toggle');
-    }
   },
   methods: {
     changeCurrentRequest(newRequestId) {
@@ -118,21 +108,10 @@ export default {
         :key="metric.metric"
         :current-request="currentRequest"
         :metric="metric.metric"
+        :title="metric.title"
         :header="metric.header"
-        :details="metric.details"
         :keys="metric.keys"
       />
-      <div v-if="initialRequest" id="peek-view-rblineprof" class="view">
-        <button
-          v-if="lineProfileModal.length"
-          class="btn-link btn-blank"
-          data-toggle="modal"
-          data-target="#modal-peek-line-profile"
-        >
-          {{ s__('PerformanceBar|profile') }}
-        </button>
-        <a v-else :href="profileUrl">{{ s__('PerformanceBar|profile') }}</a>
-      </div>
       <div id="peek-view-gc" class="view">
         <span v-if="currentRequest.details" class="bold">
           <span title="Invoke Time">{{ currentRequest.details.gc.gc_time }}</span