Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

1 files changed, 256 insertions, 48 deletions

diff --git a/spec/frontend/performance_bar/components/detailed_metric_spec.js b/spec/frontend/performance_bar/components/detailed_metric_spec.js
index 6ddd047d549..c35bd772c86 100644
--- a/spec/frontend/performance_bar/components/detailed_metric_spec.js
+++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js
@@ -1,24 +1,40 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import DetailedMetric from '~/performance_bar/components/detailed_metric.vue';
 import RequestWarning from '~/performance_bar/components/request_warning.vue';
+import { sortOrders } from '~/performance_bar/constants';
 
 describe('detailedMetric', () => {
   let wrapper;
 
-  const createComponent = (props) => {
-    wrapper = shallowMount(DetailedMetric, {
-      propsData: {
-        ...props,
-      },
-    });
+  const defaultProps = {
+    currentRequest: {},
+    metric: 'gitaly',
+    header: 'Gitaly calls',
+    keys: ['feature', 'request'],
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(DetailedMetric, {
+        propsData: { ...defaultProps, ...props },
+      }),
+    );
   };
 
   const findAllTraceBlocks = () => wrapper.findAll('pre');
   const findTraceBlockAtIndex = (index) => findAllTraceBlocks().at(index);
-  const findExpandBacktraceBtns = () => wrapper.findAll('[data-testid="backtrace-expand-btn"]');
+  const findExpandBacktraceBtns = () => wrapper.findAllByTestId('backtrace-expand-btn');
   const findExpandedBacktraceBtnAtIndex = (index) => findExpandBacktraceBtns().at(index);
+  const findDetailsLabel = () => wrapper.findByTestId('performance-bar-details-label');
+  const findSortOrderSwitcher = () => wrapper.findByTestId('performance-bar-sort-order');
+  const findEmptyDetailNotice = () => wrapper.findByTestId('performance-bar-empty-detail-notice');
+  const findAllDetailDurations = () =>
+    wrapper.findAllByTestId('performance-item-duration').wrappers.map((w) => w.text());
+  const findAllSummaryItems = () =>
+    wrapper.findAllByTestId('performance-bar-summary-item').wrappers.map((w) => w.text());
 
   afterEach(() => {
     wrapper.destroy();
@@ -26,13 +42,7 @@ describe('detailedMetric', () => {
 
   describe('when the current request has no details', () => {
     beforeEach(() => {
-      createComponent({
-        currentRequest: {},
-        metric: 'gitaly',
-        header: 'Gitaly calls',
-        details: 'details',
-        keys: ['feature', 'request'],
-      });
+      createComponent();
     });
 
     it('does not render the element', () => {
@@ -42,36 +52,171 @@ describe('detailedMetric', () => {
 
   describe('when the current request has details', () => {
     const requestDetails = [
-      { duration: '100', feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] },
       {
-        duration: '23',
+        duration: 23,
         feature: 'rebase_in_progress',
         request: '',
         backtrace: ['other', 'example'],
       },
+      { duration: 100, feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] },
     ];
 
-    describe('with a default metric name', () => {
+    describe('with an empty detail', () => {
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              gitaly: {
+                duration: '0ms',
+                calls: 0,
+                details: [],
+                warnings: [],
+              },
+            },
+          },
+        });
+      });
+
+      it('displays an empty title', () => {
+        expect(findDetailsLabel().text()).toBe('0');
+      });
+
+      it('displays an empty modal', () => {
+        expect(findEmptyDetailNotice().text()).toContain('No gitaly calls for this request');
+      });
+
+      it('does not display sort by switcher', () => {
+        expect(findSortOrderSwitcher().exists()).toBe(false);
+      });
+    });
+
+    describe('when the details have a summary field', () => {
       beforeEach(() => {
         createComponent({
           currentRequest: {
             details: {
               gitaly: {
                 duration: '123ms',
-                calls: '456',
+                calls: 456,
+                details: requestDetails,
+                warnings: ['gitaly calls: 456 over 30'],
+                summary: {
+                  'In controllers': 100,
+                  'In middlewares': 20,
+                },
+              },
+            },
+          },
+        });
+      });
+
+      it('displays a summary section', () => {
+        expect(findAllSummaryItems()).toEqual([
+          'Total 456',
+          'Total duration 123ms',
+          'In controllers 100',
+          'In middlewares 20',
+        ]);
+      });
+    });
+
+    describe('when the details have summaryOptions option', () => {
+      const gitalyDetails = {
+        duration: '123ms',
+        calls: 456,
+        details: requestDetails,
+        warnings: ['gitaly calls: 456 over 30'],
+      };
+
+      describe('when the details have summaryOptions > hideTotal option', () => {
+        beforeEach(() => {
+          createComponent({
+            currentRequest: {
+              details: {
+                gitaly: { ...gitalyDetails, summaryOptions: { hideTotal: true } },
+              },
+            },
+          });
+        });
+
+        it('displays a summary section', () => {
+          expect(findAllSummaryItems()).toEqual(['Total duration 123ms']);
+        });
+      });
+
+      describe('when the details have summaryOptions > hideDuration option', () => {
+        beforeEach(() => {
+          createComponent({
+            currentRequest: {
+              details: {
+                gitaly: { ...gitalyDetails, summaryOptions: { hideDuration: true } },
+              },
+            },
+          });
+        });
+
+        it('displays a summary section', () => {
+          expect(findAllSummaryItems()).toEqual(['Total 456']);
+        });
+      });
+
+      describe('when the details have both summary and summaryOptions field', () => {
+        beforeEach(() => {
+          createComponent({
+            currentRequest: {
+              details: {
+                gitaly: {
+                  ...gitalyDetails,
+                  summary: {
+                    'In controllers': 100,
+                    'In middlewares': 20,
+                  },
+                  summaryOptions: {
+                    hideDuration: true,
+                    hideTotal: true,
+                  },
+                },
+              },
+            },
+          });
+        });
+
+        it('displays a summary section', () => {
+          expect(findAllSummaryItems()).toEqual(['In controllers 100', 'In middlewares 20']);
+        });
+      });
+    });
+
+    describe("when the details don't have a start field", () => {
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              gitaly: {
+                duration: '123ms',
+                calls: 456,
                 details: requestDetails,
                 warnings: ['gitaly calls: 456 over 30'],
               },
             },
           },
-          metric: 'gitaly',
-          header: 'Gitaly calls',
-          keys: ['feature', 'request'],
         });
       });
 
-      it('displays details', () => {
-        expect(wrapper.text().replace(/\s+/g, ' ')).toContain('123ms / 456');
+      it('displays details header', () => {
+        expect(findDetailsLabel().text()).toBe('123ms / 456');
+      });
+
+      it('displays a basic summary section', () => {
+        expect(findAllSummaryItems()).toEqual(['Total 456', 'Total duration 123ms']);
+      });
+
+      it('sorts the details by descending duration order', () => {
+        expect(findAllDetailDurations()).toEqual(['100ms', '23ms']);
+      });
+
+      it('does not display sort by switcher', () => {
+        expect(findSortOrderSwitcher().exists()).toBe(false);
       });
 
       it('adds a modal with a table of the details', () => {
@@ -119,17 +264,75 @@ describe('detailedMetric', () => {
         findExpandedBacktraceBtnAtIndex(0).vm.$emit('click');
         await nextTick();
         expect(findAllTraceBlocks()).toHaveLength(1);
-        expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[0].backtrace[0]);
+        expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[1].backtrace[0]);
 
         secondExpandButton.vm.$emit('click');
         await nextTick();
         expect(findAllTraceBlocks()).toHaveLength(2);
-        expect(findTraceBlockAtIndex(1).text()).toContain(requestDetails[1].backtrace[0]);
+        expect(findTraceBlockAtIndex(1).text()).toContain(requestDetails[0].backtrace[0]);
 
         secondExpandButton.vm.$emit('click');
         await nextTick();
         expect(findAllTraceBlocks()).toHaveLength(1);
-        expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[0].backtrace[0]);
+        expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[1].backtrace[0]);
+      });
+    });
+
+    describe('when the details have a start field', () => {
+      const requestDetailsWithStart = [
+        {
+          start: '2021-03-18 11:41:49.846356 +0700',
+          duration: 23,
+          feature: 'rebase_in_progress',
+          request: '',
+        },
+        {
+          start: '2021-03-18 11:42:11.645711 +0700',
+          duration: 75,
+          feature: 'find_commit',
+          request: 'abcdef',
+        },
+        {
+          start: '2021-03-18 11:42:10.645711 +0700',
+          duration: 100,
+          feature: 'find_commit',
+          request: 'abcdef',
+        },
+      ];
+
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              gitaly: {
+                duration: '123ms',
+                calls: 456,
+                details: requestDetailsWithStart,
+                warnings: ['gitaly calls: 456 over 30'],
+              },
+            },
+          },
+          metric: 'gitaly',
+          header: 'Gitaly calls',
+          keys: ['feature', 'request'],
+        });
+      });
+
+      it('sorts the details by descending duration order', () => {
+        expect(findAllDetailDurations()).toEqual(['100ms', '75ms', '23ms']);
+      });
+
+      it('displays sort by switcher', () => {
+        expect(findSortOrderSwitcher().exists()).toBe(true);
+      });
+
+      it('allows switch sorting orders', async () => {
+        findSortOrderSwitcher().vm.$emit('input', sortOrders.CHRONOLOGICAL);
+        await nextTick();
+        expect(findAllDetailDurations()).toEqual(['23ms', '100ms', '75ms']);
+        findSortOrderSwitcher().vm.$emit('input', sortOrders.DURATION);
+        await nextTick();
+        expect(findAllDetailDurations()).toEqual(['100ms', '75ms', '23ms']);
       });
     });
 
@@ -145,10 +348,7 @@ describe('detailedMetric', () => {
               },
             },
           },
-          metric: 'gitaly',
           title: 'custom',
-          header: 'Gitaly calls',
-          keys: ['feature', 'request'],
         });
       });
 
@@ -156,31 +356,39 @@ describe('detailedMetric', () => {
         expect(wrapper.text()).toContain('custom');
       });
     });
-  });
 
-  describe('when the details has no duration', () => {
-    beforeEach(() => {
-      createComponent({
-        currentRequest: {
-          details: {
-            bullet: {
-              calls: '456',
-              details: [{ notification: 'notification', backtrace: 'backtrace' }],
+    describe('when the details has no duration', () => {
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              bullet: {
+                calls: '456',
+                details: [{ notification: 'notification', backtrace: 'backtrace' }],
+              },
             },
           },
-        },
-        metric: 'bullet',
-        header: 'Bullet notifications',
-        keys: ['notification'],
+          metric: 'bullet',
+          header: 'Bullet notifications',
+          keys: ['notification'],
+        });
       });
-    });
 
-    it('renders only the number of calls', async () => {
-      expect(trimText(wrapper.text())).toEqual('456 notification bullet');
+      it('displays calls in the label', () => {
+        expect(findDetailsLabel().text()).toBe('456');
+      });
+
+      it('displays a basic summary section', () => {
+        expect(findAllSummaryItems()).toEqual(['Total 456']);
+      });
+
+      it('renders only the number of calls', async () => {
+        expect(trimText(wrapper.text())).toContain('notification bullet');
 
-      findExpandedBacktraceBtnAtIndex(0).vm.$emit('click');
-      await nextTick();
-      expect(trimText(wrapper.text())).toEqual('456 notification backtrace bullet');
+        findExpandedBacktraceBtnAtIndex(0).vm.$emit('click');
+        await nextTick();
+        expect(trimText(wrapper.text())).toContain('notification backtrace bullet');
+      });
     });
   });
 });