diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue | 39 |
1 files changed, 21 insertions, 18 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue index 2b92ffc3f26..7afbb59cbd6 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue @@ -1,7 +1,8 @@ <script> import { mapGetters } from 'vuex'; -import { GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui'; +import { GlModalDirective, GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; +import TestCaseDetails from './test_case_details.vue'; export default { name: 'TestsSuiteTable', @@ -9,9 +10,11 @@ export default { GlIcon, GlFriendlyWrap, GlButton, + TestCaseDetails, }, directives: { GlTooltip: GlTooltipDirective, + GlModalDirective, }, props: { heading: { @@ -43,7 +46,7 @@ export default { <div role="rowheader" class="table-section section-20"> {{ __('Suite') }} </div> - <div role="rowheader" class="table-section section-20"> + <div role="rowheader" class="table-section section-40"> {{ __('Name') }} </div> <div role="rowheader" class="table-section section-10"> @@ -52,12 +55,12 @@ export default { <div role="rowheader" class="table-section section-10 text-center"> {{ __('Status') }} </div> - <div role="rowheader" class="table-section flex-grow-1"> - {{ __('Trace'), }} - </div> - <div role="rowheader" class="table-section section-10 text-right"> + <div role="rowheader" class="table-section section-10"> {{ __('Duration') }} </div> + <div role="rowheader" class="table-section section-10"> + {{ __('Details'), }} + </div> </div> <div @@ -72,7 +75,7 @@ export default { </div> </div> - <div class="table-section section-20 section-wrap"> + <div class="table-section section-40 section-wrap"> <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div> <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break"> <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" /> @@ -107,24 +110,24 @@ export default { </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> - </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 pr-sm-1"> + <div class="table-mobile-content pr-sm-1"> {{ testCase.formattedTime }} </div> </div> + + <div class="table-section section-10 section-wrap"> + <div role="rowheader" class="table-mobile-header">{{ __('Details'), }}</div> + <div class="table-mobile-content"> + <gl-button v-gl-modal-directive="`test-case-details-${index}`">{{ + __('View details') + }}</gl-button> + <test-case-details :modal-id="`test-case-details-${index}`" :test-case="testCase" /> + </div> + </div> </div> </div> |