diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/test_reports')
4 files changed, 46 insertions, 9 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue index 504cf138d07..2edc84e62cb 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue @@ -1,12 +1,13 @@ <script> -import { GlModal } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { GlBadge, GlModal } from '@gitlab/ui'; +import { __, n__, sprintf } from '~/locale'; import CodeBlock from '~/vue_shared/components/code_block.vue'; export default { name: 'TestCaseDetails', components: { CodeBlock, + GlBadge, GlModal, }, props: { @@ -17,13 +18,37 @@ export default { testCase: { type: Object, required: true, - validator: ({ classname, formattedTime, name }) => - Boolean(classname) && Boolean(formattedTime) && Boolean(name), + }, + }, + computed: { + failureHistoryMessage() { + if (!this.hasRecentFailures) { + return null; + } + + return sprintf( + n__( + 'Reports|Failed %{count} time in %{baseBranch} in the last 14 days', + 'Reports|Failed %{count} times in %{baseBranch} in the last 14 days', + this.recentFailures.count, + ), + { + count: this.recentFailures.count, + baseBranch: this.recentFailures.base_branch, + }, + ); + }, + hasRecentFailures() { + return Boolean(this.recentFailures); + }, + recentFailures() { + return this.testCase.recent_failures; }, }, text: { name: __('Name'), duration: __('Execution time'), + history: __('History'), trace: __('System output'), }, modalCloseButton: { @@ -53,6 +78,13 @@ export default { </div> </div> + <div v-if="testCase.recent_failures" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"> + <strong class="gl-text-right col-sm-3">{{ $options.text.history }}</strong> + <div class="col-sm-9" data-testid="test-case-recent-failures"> + <gl-badge variant="warning">{{ failureHistoryMessage }}</gl-badge> + </div> + </div> + <div v-if="testCase.system_output" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3" diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue index a56dcf48d92..58d60e2a185 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue @@ -1,6 +1,6 @@ <script> -import { mapActions, mapGetters, mapState } from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; +import { mapActions, mapGetters, mapState } from 'vuex'; import TestSuiteTable from './test_suite_table.vue'; import TestSummary from './test_summary.vue'; import TestSummaryTable from './test_summary_table.vue'; 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 4b4fb6082c6..51373e712ff 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,13 +1,14 @@ <script> -import { mapState, mapGetters, mapActions } from 'vuex'; import { GlModalDirective, GlTooltipDirective, GlFriendlyWrap, GlIcon, + GlLink, GlButton, GlPagination, } from '@gitlab/ui'; +import { mapState, mapGetters, mapActions } from 'vuex'; import { __ } from '~/locale'; import TestCaseDetails from './test_case_details.vue'; @@ -16,6 +17,7 @@ export default { components: { GlIcon, GlFriendlyWrap, + GlLink, GlButton, GlPagination, TestCaseDetails, @@ -97,8 +99,11 @@ export default { <div class="table-section section-10 section-wrap"> <div role="rowheader" class="table-mobile-header">{{ __('Filename') }}</div> <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break"> - <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.file" /> + <gl-link v-if="testCase.file" :href="testCase.filePath" target="_blank"> + <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.file" /> + </gl-link> <gl-button + v-if="testCase.file" v-gl-tooltip size="small" category="tertiary" @@ -114,7 +119,7 @@ export default { <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 d-flex align-items-center justify-content-end justify-content-md-center" :class="`ci-status-icon-${testCase.status}`" > <gl-icon :size="24" :name="testCase.icon" /> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue index 5f9c0be3ccc..2b44ce57faa 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue @@ -1,6 +1,6 @@ <script> -import { mapGetters } from 'vuex'; import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; import { s__ } from '~/locale'; export default { |