Merge branch '30275-performance-bar-flamegraph' into 'master'

Add flamegraph link to performance bar

See merge request gitlab-org/gitlab!71388

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

 <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';
@@ -123,6 +124,9 @@ export default {
       const fileName = this.requests[0].truncatedUrl;
       return `${fileName}_perf_bar_${Date.now()}.json`;
     },
+    flamegraphPath() {
+      return mergeUrlParams({ performance_bar: 'flamegraph' }, window.location.href);
+    },
   },
   mounted() {
     this.currentRequest = this.requestId;
@@ -175,6 +179,11 @@ export default {
           s__('PerformanceBar|Download')
         }}</a>
       </div>
+      <div v-if="currentRequest.details" id="peek-flamegraph" class="view">
+        <a class="gl-text-blue-200" :href="flamegraphPath">{{
+          s__('PerformanceBar|Flamegraph')
+        }}</a>
+      </div>
       <a v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
         s__('PerformanceBar|Stats')
       }}</a>

doc/administration/monitoring/performance/performance_bar.md

@@ -8,11 +8,12 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 
 > - The **Stats** field [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/271551) in GitLab 13.9.
 > - The **Memory** field [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/330736) in GitLab 14.0.
+> - The **Flamegraph** field [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/30275) in GitLab 14.4.
 
 You can display the performance bar to see statistics for the performance of a GitLab UI page.
 For example:
 
-![Performance bar](img/performance_bar_v14_0.png)
+![Performance bar](img/performance_bar_v14_4.png)
 
 ## Available information
 
@@ -64,6 +65,7 @@ From left to right, the performance bar displays:
   can be added by its full URL (authenticated as the current user), or by the value of
   its `X-Request-Id` header.
 - **Download**: a link to download the raw JSON used to generate the Performance Bar reports.
+- **Flamegraph**: a link to generate a [flamegraph](../../../development/profiling.md#speedscope-flamegraphs) of the current URL.
 - **Request Selector**: a select box displayed on the right-hand side of the
   Performance Bar which enables you to view these metrics for any requests made while
   the current page was open. Only the first two requests per unique URL are captured.

doc/development/profiling.md

@@ -98,7 +98,7 @@ profile and log output to S3.
 
 ## Speedscope flamegraphs
 
-You can generate a flamegraph for a particular URL by adding the `performance_bar=flamegraph` parameter to the request.
+You can generate a flamegraph for a particular URL by selecting the flamegraph button in the performance bar or by adding the `performance_bar=flamegraph` parameter to the request.
 
 ![Speedscope](img/speedscope_v13_12.png)
 

locale/gitlab.pot

@@ -24646,6 +24646,9 @@ msgstr ""
 msgid "PerformanceBar|First Contentful Paint"
 msgstr ""
 
+msgid "PerformanceBar|Flamegraph"
+msgstr ""
+
 msgid "PerformanceBar|Frontend resources"
 msgstr ""