Merge branch '352726-fix-memory-report-link' into 'master'

Fix Memory Report links

See merge request !116974



Merged-by: Anna Vovchenko <avovchenko@gitlab.com>
Approved-by: Ross Byrne <robyrne@gitlab.com>
Approved-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Anna Vovchenko <avovchenko@gitlab.com>
Co-authored-by: Aleksei Lipniagov <alipniagov@gitlab.com>
Co-authored-by: Roy Zwambag <rzwambag@gitlab.com>

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

@@ -133,14 +133,20 @@ export default {
       const fileName = this.requests[0].displayName;
       return `${fileName}_perf_bar_${Date.now()}.json`;
     },
-    memoryReportPath() {
-      return mergeUrlParams({ performance_bar: 'memory' }, window.location.href);
-    },
     showZoekt() {
       return document.body.dataset.page === 'search:show';
     },
     showFlamegraphButtons() {
-      return this.currentRequest.details && this.isGetRequest(this.currentRequestId);
+      return this.isGetRequest(this.currentRequestId);
+    },
+    showMemoryReportButton() {
+      return this.isGetRequest(this.currentRequestId) && this.env === 'development';
+    },
+    memoryReportPath() {
+      return mergeUrlParams(
+        { performance_bar: 'memory' },
+        this.store.findRequest(this.currentRequestId).fullUrl,
+      );
     },
   },
   created() {
@@ -225,11 +231,7 @@ export default {
           >{{ s__('PerformanceBar|Download') }}</gl-link
         >
       </div>
-      <div
-        v-if="currentRequest.details && env === 'development'"
-        id="peek-memory-report"
-        class="view"
-      >
+      <div v-if="showMemoryReportButton" id="peek-memory-report" class="view">
         <gl-link class="gl-text-blue-200" :href="memoryReportPath">{{
           s__('PerformanceBar|Memory report')
         }}</gl-link>

spec/frontend/performance_bar/components/performance_bar_app_spec.js

@@ -4,39 +4,50 @@ import PerformanceBarApp from '~/performance_bar/components/performance_bar_app.
 import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
 
 describe('performance bar app', () => {
+  let wrapper;
   const store = new PerformanceBarStore();
   store.addRequest('123', 'https://gitlab.com', '', {}, 'GET');
-  const wrapper = mount(PerformanceBarApp, {
-    propsData: {
-      store,
-      env: 'development',
-      requestId: '123',
-      requestMethod: 'GET',
-      statsUrl: 'https://log.gprd.gitlab.net/app/dashboards#/view/',
-      peekUrl: '/-/peek/results',
-    },
+  const createComponent = () => {
+    wrapper = mount(PerformanceBarApp, {
+      propsData: {
+        store,
+        env: 'development',
+        requestId: '123',
+        requestMethod: 'GET',
+        statsUrl: 'https://log.gprd.gitlab.net/app/dashboards#/view/',
+        peekUrl: '/-/peek/results',
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
   });
 
-  const flamegraphDiv = () => wrapper.find('#peek-flamegraph');
-  const flamegrapLinks = () => flamegraphDiv().findAllComponents(GlLink);
+  describe('flamegraph buttons', () => {
+    const flamegraphDiv = () => wrapper.find('#peek-flamegraph');
+    const flamegraphLinks = () => flamegraphDiv().findAllComponents(GlLink);
+
+    it('creates three flamegraph buttons based on the path', () => {
+      expect(flamegraphLinks()).toHaveLength(3);
+
+      ['wall', 'cpu', 'object'].forEach((path, index) => {
+        expect(flamegraphLinks().at(index).attributes('href')).toBe(
+          `https://gitlab.com?performance_bar=flamegraph&stackprof_mode=${path}`,
+        );
+      });
+    });
+  });
 
-  it('creates three flamegraph buttons based on the path', () => {
-    expect(flamegrapLinks()).toHaveLength(3);
+  describe('memory report button', () => {
+    const memoryReportDiv = () => wrapper.find('#peek-memory-report');
+    const memoryReportLink = () => memoryReportDiv().findComponent(GlLink);
 
-    ['wall', 'cpu', 'object'].forEach((path, index) => {
-      expect(flamegrapLinks().at(index).attributes('href')).toBe(
-        `https://gitlab.com?performance_bar=flamegraph&stackprof_mode=${path}`,
+    it('creates memory report button', () => {
+      expect(memoryReportLink().attributes('href')).toEqual(
+        'https://gitlab.com?performance_bar=memory',
       );
     });
-    expect(flamegrapLinks().at(0).attributes('href')).toEqual(
-      'https://gitlab.com?performance_bar=flamegraph&stackprof_mode=wall',
-    );
-    expect(flamegrapLinks().at(1).attributes('href')).toEqual(
-      'https://gitlab.com?performance_bar=flamegraph&stackprof_mode=cpu',
-    );
-    expect(flamegrapLinks().at(2).attributes('href')).toEqual(
-      'https://gitlab.com?performance_bar=flamegraph&stackprof_mode=object',
-    );
   });
 
   it('sets the class to match the environment', () => {