1 files changed, 31 insertions, 3 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index c729198c1d3..8f3ba9779fb 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,9 +1,11 @@
 <script>
 import GlModal from '~/vue_shared/components/gl_modal.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlModal,
+    Icon,
   },
   props: {
     currentRequest: {
@@ -38,7 +40,11 @@ export default {
 };
 </script>
 <template>
-  <div v-if="currentRequest.details" :id="`peek-view-${metric}`" class="view">
+  <div
+    v-if="currentRequest.details"
+    :id="`peek-view-${metric}`"
+    class="view qa-performance-bar-detailed-metric"
+  >
     <button
       :data-target="`#modal-peek-${metric}-details`"
       class="btn-blank btn-link bold"
@@ -57,9 +63,31 @@ export default {
         <template v-if="detailsList.length">
           <tr v-for="(item, index) in detailsList" :key="index">
             <td>
-              <strong>{{ item.duration }}ms</strong>
+              <span>{{ item.duration }}ms</span>
+            </td>
+            <td>
+              <div class="js-toggle-container">
+                <div
+                  v-for="(key, keyIndex) in keys"
+                  :key="key"
+                  class="break-word"
+                  :class="{ 'mb-3 bold': keyIndex == 0 }"
+                >
+                  {{ item[key] }}
+                  <button
+                    v-if="keyIndex == 0 && item.backtrace"
+                    class="text-expander js-toggle-button"
+                    type="button"
+                    :aria-label="__('Toggle backtrace')"
+                  >
+                    <icon :size="12" name="ellipsis_h" />
+                  </button>
+                </div>
+                <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{
+                  item.backtrace
+                }}</pre>
+              </div>
             </td>
-            <td v-for="key in keys" :key="key" class="break-word">{{ item[key] }}</td>
           </tr>
         </template>
         <template v-else>