Skip to content

G
gitlab-ce
Commit df3d8a2e authored by Nick Kipling's avatar Nick Kipling Committed by Mike Greiling
Browse files
Options

Added smart-virtual-list to test reports 

Added smart-virtural-list component
Updated styles for adjusted height
parent 241b89b7
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 83 deletions
app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
View file @ df3d8a2e
...@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex'; ...@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import store from '~/pipelines/stores/test_reports'; import store from '~/pipelines/stores/test_reports';
import { __ } from '~/locale'; import { __ } from '~/locale';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
export default { export default {
name: 'TestsSuiteTable', name: 'TestsSuiteTable',
components: { components: {
Icon, Icon,
SmartVirtualList,
}, },
store, store,
props: { props: {
...@@ -23,6 +25,8 @@ export default { ...@@ -23,6 +25,8 @@ export default {
return this.getSuiteTests.length > 0; return this.getSuiteTests.length > 0;
}, },
}, },
maxShownRows: 30,
typicalRowHeight: 75,
}; };
</script> </script>
...@@ -34,7 +38,7 @@ export default { ...@@ -34,7 +38,7 @@ export default {
</div> </div>
</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="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray">
<div role="rowheader" class="table-section section-20"> <div role="rowheader" class="table-section section-20">
{{ __('Class') }} {{ __('Class') }}
...@@ -53,52 +57,58 @@ export default { ...@@ -53,52 +57,58 @@ export default {
</div> </div>
</div> </div>
<div <smart-virtual-list
v-for="(testCase, index) in getSuiteTests" :length="getSuiteTests.length"
:key="index" :remain="$options.maxShownRows"
class="gl-responsive-table-row rounded align-items-md-start mt-sm-3 js-case-row" :size="$options.typicalRowHeight"
> >
<div class="table-section section-20 section-wrap"> <div
<div role="rowheader" class="table-mobile-header">{{ __('Class') }}</div> v-for="(testCase, index) in getSuiteTests"
<div class="table-mobile-content pr-md-1">{{ testCase.classname }}</div> :key="index"
</div> 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 class="table-section section-20 section-wrap">
<div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div> <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
<div class="table-mobile-content">{{ testCase.name }}</div> <div class="table-mobile-content">{{ testCase.name }}</div>
</div> </div>
<div class="table-section section-10 section-wrap"> <div class="table-section section-10 section-wrap">
<div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div> <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
<div class="table-mobile-content text-center"> <div class="table-mobile-content text-center">
<div <div
class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center" class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
:class="`ci-status-icon-${testCase.status}`" :class="`ci-status-icon-${testCase.status}`"
> >
<icon :size="24" :name="testCase.icon" /> <icon :size="24" :name="testCase.icon" />
</div>
</div> </div>
</div> </div>
</div>
<div class="table-section flex-grow-1"> <div class="table-section flex-grow-1">
<div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div> <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
<div class="table-mobile-content"> <div class="table-mobile-content">
<pre <pre
v-if="testCase.system_output" v-if="testCase.system_output"
class="build-trace build-trace-rounded text-left" class="build-trace build-trace-rounded text-left"
><code class="bash p-0">{{testCase.system_output}}</code></pre> ><code class="bash p-0">{{testCase.system_output}}</code></pre>
</div>
</div> </div>
</div>
<div class="table-section section-10 section-wrap"> <div class="table-section section-10 section-wrap">
<div role="rowheader" class="table-mobile-header"> <div role="rowheader" class="table-mobile-header">
{{ __('Duration') }} {{ __('Duration') }}
</div> </div>
<div class="table-mobile-content text-right"> <div class="table-mobile-content text-right pr-sm-1">
{{ testCase.formattedTime }} {{ testCase.formattedTime }}
</div>
</div> </div>
</div> </div>
</div> </smart-virtual-list>
</div> </div>
<div v-else> <div v-else>
......
app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
View file @ df3d8a2e
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import store from '~/pipelines/stores/test_reports'; import store from '~/pipelines/stores/test_reports';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
export default { export default {
name: 'TestsSummaryTable', name: 'TestsSummaryTable',
components: {
SmartVirtualList,
},
store, store,
props: { props: {
heading: { heading: {
...@@ -24,6 +28,8 @@ export default { ...@@ -24,6 +28,8 @@ export default {
this.$emit('row-click', suite); this.$emit('row-click', suite);
}, },
}, },
maxShownRows: 20,
typicalRowHeight: 55,
}; };
</script> </script>
...@@ -35,7 +41,7 @@ export default { ...@@ -35,7 +41,7 @@ export default {
</div> </div>
</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="row" class="gl-responsive-table-row table-row-header font-weight-bold">
<div role="rowheader" class="table-section section-25 pl-3"> <div role="rowheader" class="table-section section-25 pl-3">
{{ __('Suite') }} {{ __('Suite') }}
...@@ -60,66 +66,72 @@ export default { ...@@ -60,66 +66,72 @@ export default {
</div> </div>
</div> </div>
<div <smart-virtual-list
v-for="(testSuite, index) in getTestSuites" :length="getTestSuites.length"
:key="index" :remain="$options.maxShownRows"
role="row" :size="$options.typicalRowHeight"
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
<div role="rowheader" class="table-mobile-header font-weight-bold"> v-for="(testSuite, index) in getTestSuites"
{{ __('Suite') }} :key="index"
</div> role="row"
<div class="table-mobile-content underline cgray pl-3"> class="gl-responsive-table-row gl-responsive-table-row-clickable test-reports-summary-row rounded cursor-pointer js-suite-row"
{{ testSuite.name }} @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>
<div class="table-section section-25"> <div class="table-section section-25">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
{{ __('Duration') }} {{ __('Duration') }}
</div>
<div class="table-mobile-content text-md-left">
{{ testSuite.formattedTime }}
</div>
</div> </div>
<div class="table-mobile-content text-md-left">
{{ testSuite.formattedTime }}
</div>
</div>
<div class="table-section section-10 text-center"> <div class="table-section section-10 text-center">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
{{ __('Failed') }} {{ __('Failed') }}
</div>
<div class="table-mobile-content">{{ testSuite.failed_count }}</div>
</div> </div>
<div class="table-mobile-content">{{ testSuite.failed_count }}</div>
</div>
<div class="table-section section-10 text-center"> <div class="table-section section-10 text-center">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
{{ __('Errors') }} {{ __('Errors') }}
</div>
<div class="table-mobile-content">{{ testSuite.error_count }}</div>
</div> </div>
<div class="table-mobile-content">{{ testSuite.error_count }}</div>
</div>
<div class="table-section section-10 text-center"> <div class="table-section section-10 text-center">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
{{ __('Skipped') }} {{ __('Skipped') }}
</div>
<div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
</div> </div>
<div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
</div>
<div class="table-section section-10 text-center"> <div class="table-section section-10 text-center">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
{{ __('Passed') }} {{ __('Passed') }}
</div>
<div class="table-mobile-content">{{ testSuite.success_count }}</div>
</div> </div>
<div class="table-mobile-content">{{ testSuite.success_count }}</div>
</div>
<div class="table-section section-10 text-right pr-md-3"> <div class="table-section section-10 text-right pr-md-3">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
{{ __('Total') }} {{ __('Total') }}
</div>
<div class="table-mobile-content">{{ testSuite.total_count }}</div>
</div> </div>
<div class="table-mobile-content">{{ testSuite.total_count }}</div>
</div> </div>
</div> </smart-virtual-list>
</div> </div>
<div v-else> <div v-else>
......
changelogs/unreleased/37725-test-reports-smart-list.yml 0 → 100644
View file @ df3d8a2e
---
title: Added smart virtual list component to test reports to enhance rendering performance
merge_request: 22381
author:
type: performance
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7