1 files changed, 21 insertions, 0 deletions
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 f204f0ebfaa..ed30198244f 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 
 import { s__ } from '~/locale';
 import AddRequest from './add_request.vue';
@@ -131,6 +132,12 @@ export default {
     changeCurrentRequest(newRequestId) {
       this.currentRequest = newRequestId;
     },
+    flamegraphPath(mode) {
+      return mergeUrlParams(
+        { performance_bar: 'flamegraph', stackprof_mode: mode },
+        window.location.href,
+      );
+    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
@@ -175,6 +182,20 @@ export default {
           s__('PerformanceBar|Download')
         }}</a>
       </div>
+      <div v-if="currentRequest.details" id="peek-flamegraph" class="view">
+        <span class="gl-text-white-200">{{ s__('PerformanceBar|Flamegraph with mode:') }}</span>
+        <a class="gl-text-blue-200" :href="flamegraphPath('wall')">{{
+          s__('PerformanceBar|wall')
+        }}</a>
+        /
+        <a class="gl-text-blue-200" :href="flamegraphPath('cpu')">{{
+          s__('PerformanceBar|cpu')
+        }}</a>
+        /
+        <a class="gl-text-blue-200" :href="flamegraphPath('object')">{{
+          s__('PerformanceBar|object')
+        }}</a>
+      </div>
       <a v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
         s__('PerformanceBar|Stats')
       }}</a>