diff options
Diffstat (limited to 'app/assets/javascripts/reports/components/grouped_test_reports_app.vue')
-rw-r--r-- | app/assets/javascripts/reports/components/grouped_test_reports_app.vue | 45 |
1 files changed, 37 insertions, 8 deletions
diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue index 47f04019595..c13df60198b 100644 --- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue +++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue @@ -1,5 +1,6 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; +import { once } from 'lodash'; import { GlButton } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; import { componentNames } from './issue_body'; @@ -8,8 +9,14 @@ import SummaryRow from './summary_row.vue'; import IssuesList from './issues_list.vue'; import Modal from './modal.vue'; import createStore from '../store'; +import Tracking from '~/tracking'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils'; +import { + summaryTextBuilder, + reportTextBuilder, + statusIcon, + recentFailuresTextBuilder, +} from '../store/utils'; export default { name: 'GroupedTestReportsApp', @@ -21,7 +28,7 @@ export default { Modal, GlButton, }, - mixins: [glFeatureFlagsMixin()], + mixins: [glFeatureFlagsMixin(), Tracking.mixin()], props: { endpoint: { type: String, @@ -58,6 +65,11 @@ export default { showViewFullReport() { return this.pipelinePath.length; }, + handleToggleEvent() { + return once(() => { + this.track(this.$options.expandEvent); + }); + }, }, created() { this.setEndpoint(this.endpoint); @@ -79,6 +91,12 @@ export default { return reportTextBuilder(name, summary); }, + hasRecentFailures(summary) { + return this.glFeatures.testFailureHistory && summary?.recentlyFailed > 0; + }, + recentFailuresText(summary) { + return recentFailuresTextBuilder(summary); + }, getReportIcon(report) { return statusIcon(report.status); }, @@ -102,6 +120,7 @@ export default { return report.resolved_failures.concat(report.resolved_errors); }, }, + expandEvent: 'expand_test_report_widget', }; </script> <template> @@ -111,9 +130,11 @@ export default { :loading-text="groupedSummaryText" :error-text="groupedSummaryText" :has-issues="reports.length > 0" + :should-emit-toggle-event="true" class="mr-widget-section grouped-security-reports mr-report" + @toggleEvent="handleToggleEvent" > - <template v-if="showViewFullReport" #actionButtons> + <template v-if="showViewFullReport" #action-buttons> <gl-button :href="testTabURL" target="_blank" @@ -124,14 +145,22 @@ export default { {{ s__('ciReport|View full report') }} </gl-button> </template> + <template v-if="hasRecentFailures(summary)" #sub-heading> + {{ recentFailuresText(summary) }} + </template> <template #body> <div class="mr-widget-grouped-section report-block"> <template v-for="(report, i) in reports"> - <summary-row - :key="`summary-row-${i}`" - :summary="reportText(report)" - :status-icon="getReportIcon(report)" - /> + <summary-row :key="`summary-row-${i}`" :status-icon="getReportIcon(report)"> + <template #summary> + <div class="gl-display-inline-flex gl-flex-direction-column"> + <div>{{ reportText(report) }}</div> + <div v-if="hasRecentFailures(report.summary)"> + {{ recentFailuresText(report.summary) }} + </div> + </div> + </template> + </summary-row> <issues-list v-if="shouldRenderIssuesList(report)" :key="`issues-list-${i}`" |