Added smart-virtual-list to test reports

Added smart-virtural-list component
Updated styles for adjusted height

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import store from '~/pipelines/stores/test_reports';
 import { __ } from '~/locale';
+import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
   name: 'TestsSuiteTable',
   components: {
     Icon,
+    SmartVirtualList,
   },
   store,
   props: {
@@ -23,6 +25,8 @@ export default {
       return this.getSuiteTests.length > 0;
     },
   },
+  maxShownRows: 30,
+  typicalRowHeight: 75,
 };
 </script>
 
@@ -34,7 +38,7 @@ export default {
       </div>
     </div>
 
-    <div v-if="hasSuites" class="test-reports-table js-test-cases-table">
+    <div v-if="hasSuites" class="test-reports-table append-bottom-default js-test-cases-table">
       <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray">
         <div role="rowheader" class="table-section section-20">
           {{ __('Class') }}
@@ -53,52 +57,58 @@ export default {
         </div>
       </div>
 
-      <div
-        v-for="(testCase, index) in getSuiteTests"
-        :key="index"
-        class="gl-responsive-table-row rounded align-items-md-start mt-sm-3 js-case-row"
+      <smart-virtual-list
+        :length="getSuiteTests.length"
+        :remain="$options.maxShownRows"
+        :size="$options.typicalRowHeight"
       >
-        <div class="table-section section-20 section-wrap">
-          <div role="rowheader" class="table-mobile-header">{{ __('Class') }}</div>
-          <div class="table-mobile-content pr-md-1">{{ testCase.classname }}</div>
-        </div>
+        <div
+          v-for="(testCase, index) in getSuiteTests"
+          :key="index"
+          class="gl-responsive-table-row rounded align-items-md-start mt-xs-3 js-case-row"
+        >
+          <div class="table-section section-20 section-wrap">
+            <div role="rowheader" class="table-mobile-header">{{ __('Class') }}</div>
+            <div class="table-mobile-content pr-md-1 text-truncate">{{ testCase.classname }}</div>
+          </div>
 
-        <div class="table-section section-20 section-wrap">
-          <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
-          <div class="table-mobile-content">{{ testCase.name }}</div>
-        </div>
+          <div class="table-section section-20 section-wrap">
+            <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
+            <div class="table-mobile-content">{{ testCase.name }}</div>
+          </div>
 
-        <div class="table-section section-10 section-wrap">
-          <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
-          <div class="table-mobile-content text-center">
-            <div
-              class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
-              :class="`ci-status-icon-${testCase.status}`"
-            >
-              <icon :size="24" :name="testCase.icon" />
+          <div class="table-section section-10 section-wrap">
+            <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
+            <div class="table-mobile-content text-center">
+              <div
+                class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
+                :class="`ci-status-icon-${testCase.status}`"
+              >
+                <icon :size="24" :name="testCase.icon" />
+              </div>
             </div>
           </div>
-        </div>
 
-        <div class="table-section flex-grow-1">
-          <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
-          <div class="table-mobile-content">
-            <pre
-              v-if="testCase.system_output"
-              class="build-trace build-trace-rounded text-left"
-            ><code class="bash p-0">{{testCase.system_output}}</code></pre>
+          <div class="table-section flex-grow-1">
+            <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
+            <div class="table-mobile-content">
+              <pre
+                v-if="testCase.system_output"
+                class="build-trace build-trace-rounded text-left"
+              ><code class="bash p-0">{{testCase.system_output}}</code></pre>
+            </div>
           </div>
-        </div>
 
-        <div class="table-section section-10 section-wrap">
-          <div role="rowheader" class="table-mobile-header">
-            {{ __('Duration') }}
-          </div>
-          <div class="table-mobile-content text-right">
-            {{ testCase.formattedTime }}
+          <div class="table-section section-10 section-wrap">
+            <div role="rowheader" class="table-mobile-header">
+              {{ __('Duration') }}
+            </div>
+            <div class="table-mobile-content text-right pr-sm-1">
+              {{ testCase.formattedTime }}
+            </div>
           </div>
         </div>
-      </div>
+      </smart-virtual-list>
     </div>
 
     <div v-else>

app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue

@@ -2,9 +2,13 @@
 import { mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import store from '~/pipelines/stores/test_reports';
+import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
   name: 'TestsSummaryTable',
+  components: {
+    SmartVirtualList,
+  },
   store,
   props: {
     heading: {
@@ -24,6 +28,8 @@ export default {
       this.$emit('row-click', suite);
     },
   },
+  maxShownRows: 20,
+  typicalRowHeight: 55,
 };
 </script>
 
@@ -35,7 +41,7 @@ export default {
       </div>
     </div>
 
-    <div v-if="hasSuites" class="test-reports-table js-test-suites-table">
+    <div v-if="hasSuites" class="test-reports-table append-bottom-default js-test-suites-table">
       <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold">
         <div role="rowheader" class="table-section section-25 pl-3">
           {{ __('Suite') }}
@@ -60,66 +66,72 @@ export default {
         </div>
       </div>
 
-      <div
-        v-for="(testSuite, index) in getTestSuites"
-        :key="index"
-        role="row"
-        class="gl-responsive-table-row gl-responsive-table-row-clickable test-reports-summary-row rounded cursor-pointer js-suite-row"
-        @click="tableRowClick(testSuite)"
+      <smart-virtual-list
+        :length="getTestSuites.length"
+        :remain="$options.maxShownRows"
+        :size="$options.typicalRowHeight"
       >
-        <div class="table-section section-25">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Suite') }}
-          </div>
-          <div class="table-mobile-content underline cgray pl-3">
-            {{ testSuite.name }}
+        <div
+          v-for="(testSuite, index) in getTestSuites"
+          :key="index"
+          role="row"
+          class="gl-responsive-table-row gl-responsive-table-row-clickable test-reports-summary-row rounded cursor-pointer js-suite-row"
+          @click="tableRowClick(testSuite)"
+        >
+          <div class="table-section section-25">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Suite') }}
+            </div>
+            <div class="table-mobile-content underline cgray pl-3">
+              {{ testSuite.name }}
+            </div>
           </div>
-        </div>
 
-        <div class="table-section section-25">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Duration') }}
+          <div class="table-section section-25">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Duration') }}
+            </div>
+            <div class="table-mobile-content text-md-left">
+              {{ testSuite.formattedTime }}
+            </div>
           </div>
-          <div class="table-mobile-content text-md-left">
-            {{ testSuite.formattedTime }}
-          </div>
-        </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Failed') }}
+          <div class="table-section section-10 text-center">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Failed') }}
+            </div>
+            <div class="table-mobile-content">{{ testSuite.failed_count }}</div>
           </div>
-          <div class="table-mobile-content">{{ testSuite.failed_count }}</div>
-        </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Errors') }}
+          <div class="table-section section-10 text-center">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Errors') }}
+            </div>
+            <div class="table-mobile-content">{{ testSuite.error_count }}</div>
           </div>
-          <div class="table-mobile-content">{{ testSuite.error_count }}</div>
-        </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Skipped') }}
+          <div class="table-section section-10 text-center">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Skipped') }}
+            </div>
+            <div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
           </div>
-          <div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
-        </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Passed') }}
+          <div class="table-section section-10 text-center">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Passed') }}
+            </div>
+            <div class="table-mobile-content">{{ testSuite.success_count }}</div>
           </div>
-          <div class="table-mobile-content">{{ testSuite.success_count }}</div>
-        </div>
 
-        <div class="table-section section-10 text-right pr-md-3">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
-            {{ __('Total') }}
+          <div class="table-section section-10 text-right pr-md-3">
+            <div role="rowheader" class="table-mobile-header font-weight-bold">
+              {{ __('Total') }}
+            </div>
+            <div class="table-mobile-content">{{ testSuite.total_count }}</div>
           </div>
-          <div class="table-mobile-content">{{ testSuite.total_count }}</div>
         </div>
-      </div>
+      </smart-virtual-list>
     </div>
 
     <div v-else>

changelogs/unreleased/37725-test-reports-smart-list.yml

+---
+title: Added smart virtual list component to test reports to enhance rendering performance
+merge_request: 22381
+author:
+type: performance