Skip to content

G
gitlab-ce
Commit e3fac1a2 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch '212274-remove-virtual-list-from-test-report' into 'master' 

Remove virtual list from test report

See merge request gitlab-org/gitlab!41935
parents 8ca6b163 819b2051
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 118 deletions
app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
View file @ e3fac1a2
...@@ -2,13 +2,11 @@ ...@@ -2,13 +2,11 @@
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { GlTooltipDirective, GlFriendlyWrap, GlIcon } from '@gitlab/ui'; import { GlTooltipDirective, GlFriendlyWrap, GlIcon } from '@gitlab/ui';
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: {
GlIcon, GlIcon,
SmartVirtualList,
GlFriendlyWrap, GlFriendlyWrap,
}, },
directives: { directives: {
...@@ -27,8 +25,6 @@ export default { ...@@ -27,8 +25,6 @@ export default {
return this.getSuiteTests.length > 0; return this.getSuiteTests.length > 0;
}, },
}, },
maxShownRows: 30,
typicalRowHeight: 75,
wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'], wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'],
}; };
</script> </script>
...@@ -60,66 +56,60 @@ export default { ...@@ -60,66 +56,60 @@ export default {
</div> </div>
</div> </div>
<smart-virtual-list <div
:length="getSuiteTests.length" v-for="(testCase, index) in getSuiteTests"
:remain="$options.maxShownRows" :key="index"
:size="$options.typicalRowHeight" class="gl-responsive-table-row rounded align-items-md-start mt-xs-3 js-case-row"
> >
<div <div class="table-section section-20 section-wrap">
v-for="(testCase, index) in getSuiteTests" <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
:key="index" <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
class="gl-responsive-table-row rounded align-items-md-start mt-xs-3 js-case-row" <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
>
<div class="table-section section-20 section-wrap">
<div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
<div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
<gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
</div>
</div> </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 pr-md-1 gl-overflow-wrap-break"> <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
<gl-friendly-wrap <gl-friendly-wrap
data-testid="caseName" data-testid="caseName"
:symbols="$options.wrapSymbols" :symbols="$options.wrapSymbols"
:text="testCase.name" :text="testCase.name"
/> />
</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">{{ __('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}`"
> >
<gl-icon :size="24" :name="testCase.icon" /> <gl-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 pr-sm-1"> <div class="table-mobile-content text-right pr-sm-1">
{{ testCase.formattedTime }} {{ testCase.formattedTime }}
</div>
</div> </div>
</div> </div>
</smart-virtual-list> </div>
</div> </div>
<div v-else> <div v-else>
......
app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
View file @ e3fac1a2
...@@ -2,13 +2,11 @@ ...@@ -2,13 +2,11 @@
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
export default { export default {
name: 'TestsSummaryTable', name: 'TestsSummaryTable',
components: { components: {
GlIcon, GlIcon,
SmartVirtualList,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -31,8 +29,6 @@ export default { ...@@ -31,8 +29,6 @@ export default {
this.$emit('row-click', index); this.$emit('row-click', index);
}, },
}, },
maxShownRows: 20,
typicalRowHeight: 55,
}; };
</script> </script>
...@@ -69,83 +65,77 @@ export default { ...@@ -69,83 +65,77 @@ export default {
</div> </div>
</div> </div>
<smart-virtual-list <div
:length="getTestSuites.length" v-for="(testSuite, index) in getTestSuites"
:remain="$options.maxShownRows" :key="index"
:size="$options.typicalRowHeight" role="row"
class="gl-responsive-table-row test-reports-summary-row rounded js-suite-row"
:class="{
'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
}"
@click="tableRowClick(index)"
> >
<div <div class="table-section section-25">
v-for="(testSuite, index) in getTestSuites" <div role="rowheader" class="table-mobile-header font-weight-bold">
:key="index" {{ __('Suite') }}
role="row"
class="gl-responsive-table-row test-reports-summary-row rounded js-suite-row"
:class="{
'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
}"
@click="tableRowClick(index)"
>
<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 }}
<gl-icon
v-if="testSuite.suite_error"
ref="suiteErrorIcon"
v-gl-tooltip
name="error"
:title="testSuite.suite_error"
class="vertical-align-middle"
/>
</div>
</div> </div>
<div class="table-mobile-content underline cgray pl-3">
{{ testSuite.name }}
<gl-icon
v-if="testSuite.suite_error"
ref="suiteErrorIcon"
v-gl-tooltip
name="error"
:title="testSuite.suite_error"
class="vertical-align-middle"
/>
</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>
<div class="table-mobile-content text-md-left"> <div class="table-mobile-content text-md-left">
{{ testSuite.formattedTime }} {{ testSuite.formattedTime }}
</div>
</div> </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>
</smart-virtual-list> </div>
</div> </div>
<div v-else> <div v-else>
......
changelogs/unreleased/212274-remove-virtual-list-from-test-report.yml 0 → 100644
View file @ e3fac1a2
---
title: Remove virtual scroll list from pipeline test report
merge_request: 41935
author:
type: fixed
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