diff options
Diffstat (limited to 'app/assets/javascripts/reports')
16 files changed, 162 insertions, 99 deletions
diff --git a/app/assets/javascripts/reports/components/grouped_issues_list.vue b/app/assets/javascripts/reports/components/grouped_issues_list.vue index 4d3c5f48e94..585127f901e 100644 --- a/app/assets/javascripts/reports/components/grouped_issues_list.vue +++ b/app/assets/javascripts/reports/components/grouped_issues_list.vue @@ -14,6 +14,12 @@ export default { required: false, default: '', }, + nestedLevel: { + type: Number, + required: false, + default: 0, + validator: (value) => [0, 1, 2].includes(value), + }, resolvedIssues: { type: Array, required: false, @@ -58,6 +64,12 @@ export default { return groupsCount + issuesCount; }, + listClasses() { + return { + 'gl-pl-7': this.nestedLevel === 1, + 'gl-pl-9': this.nestedLevel === 2, + }; + }, }, }; </script> @@ -67,6 +79,7 @@ export default { :length="listLength" :remain="$options.maxShownReportItems" :size="$options.typicalReportItemHeight" + :class="listClasses" class="report-block-container" wtag="ul" wclass="report-block-list" diff --git a/app/assets/javascripts/reports/components/issue_body.js b/app/assets/javascripts/reports/components/issue_body.js index a0349506b69..56f46a3938e 100644 --- a/app/assets/javascripts/reports/components/issue_body.js +++ b/app/assets/javascripts/reports/components/issue_body.js @@ -1,6 +1,6 @@ import AccessibilityIssueBody from '../accessibility_report/components/accessibility_issue_body.vue'; import CodequalityIssueBody from '../codequality_report/components/codequality_issue_body.vue'; -import TestIssueBody from './test_issue_body.vue'; +import TestIssueBody from '../grouped_test_report/components/test_issue_body.vue'; export const components = { AccessibilityIssueBody, diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue index 16d5b14d3e9..ea3f0d78d8c 100644 --- a/app/assets/javascripts/reports/components/issues_list.vue +++ b/app/assets/javascripts/reports/components/issues_list.vue @@ -67,6 +67,12 @@ export default { required: false, default: null, }, + nestedLevel: { + type: Number, + required: false, + default: 0, + validator: (value) => [0, 1, 2].includes(value), + }, }, computed: { issuesWithState() { @@ -80,6 +86,12 @@ export default { wclass() { return `report-block-list ${this.issuesUlElementClass}`; }, + listClasses() { + return { + 'gl-pl-7': this.nestedLevel === 1, + 'gl-pl-8': this.nestedLevel === 2, + }; + }, }, }; </script> @@ -89,6 +101,7 @@ export default { :remain="$options.maxShownReportItems" :size="$options.typicalReportItemHeight" class="report-block-container" + :class="listClasses" wtag="ul" :wclass="wclass" > diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue index 9d0631fbc01..ff58cd20ca1 100644 --- a/app/assets/javascripts/reports/components/report_section.vue +++ b/app/assets/javascripts/reports/components/report_section.vue @@ -184,13 +184,14 @@ export default { <slot name="sub-heading"></slot> </div> - <slot name="action-buttons"></slot> + <slot name="action-buttons" :is-collapsible="isCollapsible"></slot> <button v-if="isCollapsible" type="button" data-testid="report-section-expand-button" - class="js-collapse-btn btn float-right btn-sm align-self-center qa-expand-report-button" + class="js-collapse-btn btn float-right btn-sm align-self-center" + data-qa-selector="expand_report_button" @click="toggleCollapsed" > {{ collapseText }} diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue index 3232c0edf96..8eb43bcf1ba 100644 --- a/app/assets/javascripts/reports/components/summary_row.vue +++ b/app/assets/javascripts/reports/components/summary_row.vue @@ -2,6 +2,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import Popover from '~/vue_shared/components/help_popover.vue'; +import { ICON_WARNING } from '../constants'; /** * Renders the summary row for each report @@ -19,6 +20,11 @@ export default { GlLoadingIcon, }, props: { + nestedSummary: { + type: Boolean, + required: false, + default: false, + }, summary: { type: String, required: false, @@ -41,24 +47,36 @@ export default { icon: `status_${this.statusIcon}`, }; }, + rowClasses() { + if (!this.nestedSummary) { + return ['gl-px-5']; + } + return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }]; + }, + statusIconSize() { + if (!this.nestedSummary) { + return 24; + } + return 16; + }, }, }; </script> <template> - <div class="report-block-list-issue report-block-list-issue-parent align-items-center"> - <div class="report-block-list-icon gl-mr-3"> + <div + class="gl-border-t-solid gl-border-t-gray-100 gl-border-t-1 gl-py-3 gl-display-flex gl-align-items-center" + :class="rowClasses" + > + <div class="gl-mr-3"> <gl-loading-icon v-if="statusIcon === 'loading'" css-class="report-block-list-loading-icon" size="md" /> - <ci-icon v-else :status="iconStatus" :size="24" /> + <ci-icon v-else :status="iconStatus" :size="statusIconSize" data-testid="summary-row-icon" /> </div> <div class="report-block-list-issue-description"> - <div - class="report-block-list-issue-description-text" - data-testid="test-summary-row-description" - > + <div class="report-block-list-issue-description-text" data-testid="summary-row-description"> <slot name="summary">{{ summary }}</slot ><span v-if="popoverOptions" class="text-nowrap" > <popover v-if="popoverOptions" :options="popoverOptions" class="align-top" /> diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue deleted file mode 100644 index 7508e1d1f0d..00000000000 --- a/app/assets/javascripts/reports/components/test_issue_body.vue +++ /dev/null @@ -1,64 +0,0 @@ -<script> -import { GlBadge, GlSprintf } from '@gitlab/ui'; -import { mapActions } from 'vuex'; - -export default { - name: 'TestIssueBody', - components: { - GlBadge, - GlSprintf, - }, - props: { - issue: { - type: Object, - required: true, - }, - // failed || success - status: { - type: String, - required: true, - }, - isNew: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - showRecentFailures() { - return this.issue.recent_failures?.count && this.issue.recent_failures?.base_branch; - }, - }, - methods: { - ...mapActions(['openModal']), - }, -}; -</script> -<template> - <div class="report-block-list-issue-description gl-mt-2 gl-mb-2"> - <div class="report-block-list-issue-description-text" data-testid="test-issue-body-description"> - <button - type="button" - class="btn-link btn-blank text-left break-link vulnerability-name-button" - @click="openModal({ issue })" - > - <gl-badge v-if="isNew" variant="danger" class="gl-mr-2">{{ s__('New') }}</gl-badge> - <gl-badge v-if="showRecentFailures" variant="warning" class="gl-mr-2"> - <gl-sprintf - :message=" - n__( - 'Reports|Failed %{count} time in %{base_branch} in the last 14 days', - 'Reports|Failed %{count} times in %{base_branch} in the last 14 days', - issue.recent_failures.count, - ) - " - > - <template #count>{{ issue.recent_failures.count }}</template> - <template #base_branch>{{ issue.recent_failures.base_branch }}</template> - </gl-sprintf> - </gl-badge> - {{ issue.name }} - </button> - </div> - </div> -</template> diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/grouped_test_report/components/modal.vue index 6243bddf941..b0310fd003e 100644 --- a/app/assets/javascripts/reports/components/modal.vue +++ b/app/assets/javascripts/reports/grouped_test_report/components/modal.vue @@ -2,7 +2,7 @@ import { GlModal, GlLink, GlSprintf } from '@gitlab/ui'; import CodeBlock from '~/vue_shared/components/code_block.vue'; -import { fieldTypes } from '../constants'; +import { fieldTypes } from '../../constants'; export default { components: { diff --git a/app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue b/app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue new file mode 100644 index 00000000000..522245a442d --- /dev/null +++ b/app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue @@ -0,0 +1,64 @@ +<script> +import { GlBadge, GlButton } from '@gitlab/ui'; +import { mapActions } from 'vuex'; +import { sprintf, n__ } from '~/locale'; +import IssueStatusIcon from '~/reports/components/issue_status_icon.vue'; +import { STATUS_NEUTRAL } from '../../constants'; + +export default { + name: 'TestIssueBody', + components: { + GlBadge, + GlButton, + IssueStatusIcon, + }, + props: { + issue: { + type: Object, + required: true, + }, + }, + computed: { + recentFailureMessage() { + return sprintf( + n__( + 'Reports|Failed %{count} time in %{base_branch} in the last 14 days', + 'Reports|Failed %{count} times in %{base_branch} in the last 14 days', + this.issue.recent_failures.count, + ), + this.issue.recent_failures, + ); + }, + showRecentFailures() { + return this.issue.recent_failures?.count && this.issue.recent_failures?.base_branch; + }, + status() { + return this.issue.status || STATUS_NEUTRAL; + }, + }, + methods: { + ...mapActions(['openModal']), + }, +}; +</script> +<template> + <div class="gl-display-flex gl-mt-2 gl-mb-2"> + <issue-status-icon :status="status" :status-icon-size="24" class="gl-mr-3" /> + <gl-badge + v-if="showRecentFailures" + variant="warning" + class="gl-mr-2" + data-testid="test-issue-body-recent-failures" + > + {{ recentFailureMessage }} + </gl-badge> + <gl-button + button-text-classes="gl-white-space-normal! gl-word-break-all gl-text-left" + variant="link" + data-testid="test-issue-body-description" + @click="openModal({ issue })" + > + {{ issue.name }} + </gl-button> + </div> +</template> diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue index 033b8798473..b863e55ae94 100644 --- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue +++ b/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue @@ -1,21 +1,21 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlIcon } from '@gitlab/ui'; import { once } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; import { sprintf, s__ } from '~/locale'; import Tracking from '~/tracking'; -import createStore from '../store'; +import GroupedIssuesList from '../components/grouped_issues_list.vue'; +import { componentNames } from '../components/issue_body'; +import ReportSection from '../components/report_section.vue'; +import SummaryRow from '../components/summary_row.vue'; +import Modal from './components/modal.vue'; +import createStore from './store'; import { summaryTextBuilder, reportTextBuilder, statusIcon, recentFailuresTextBuilder, -} from '../store/utils'; -import { componentNames } from './issue_body'; -import IssuesList from './issues_list.vue'; -import Modal from './modal.vue'; -import ReportSection from './report_section.vue'; -import SummaryRow from './summary_row.vue'; +} from './store/utils'; export default { name: 'GroupedTestReportsApp', @@ -23,9 +23,10 @@ export default { components: { ReportSection, SummaryRow, - IssuesList, + GroupedIssuesList, Modal, GlButton, + GlIcon, }, mixins: [Tracking.mixin()], props: { @@ -86,7 +87,7 @@ export default { } if (!report.name) { - return s__('Reports|An error occured while loading report'); + return s__('Reports|An error occurred while loading report'); } return reportTextBuilder(name, summary); @@ -111,10 +112,12 @@ export default { ); }, unresolvedIssues(report) { - return report.existing_failures.concat(report.existing_errors); - }, - newIssues(report) { - return report.new_failures.concat(report.new_errors); + return [ + ...report.new_failures, + ...report.new_errors, + ...report.existing_failures, + ...report.existing_errors, + ]; }, resolvedIssues(report) { return report.resolved_failures.concat(report.resolved_errors); @@ -151,24 +154,39 @@ export default { <template #body> <div class="mr-widget-grouped-section report-block"> <template v-for="(report, i) in reports"> - <summary-row :key="`summary-row-${i}`" :status-icon="getReportIcon(report)"> + <summary-row + :key="`summary-row-${i}`" + :status-icon="getReportIcon(report)" + nested-summary + > <template #summary> <div class="gl-display-inline-flex gl-flex-direction-column"> <div>{{ reportText(report) }}</div> + <div v-if="report.suite_errors"> + <div v-if="report.suite_errors.head"> + <gl-icon name="warning" class="gl-mx-2 gl-text-orange-500" /> + {{ s__('Reports|Head report parsing error:') }} + {{ report.suite_errors.head }} + </div> + <div v-if="report.suite_errors.base"> + <gl-icon name="warning" class="gl-mx-2 gl-text-orange-500" /> + {{ s__('Reports|Base report parsing error:') }} + {{ report.suite_errors.base }} + </div> + </div> <div v-if="hasRecentFailures(report.summary)"> {{ recentFailuresText(report.summary) }} </div> </div> </template> </summary-row> - <issues-list + <grouped-issues-list v-if="shouldRenderIssuesList(report)" :key="`issues-list-${i}`" :unresolved-issues="unresolvedIssues(report)" - :new-issues="newIssues(report)" :resolved-issues="resolvedIssues(report)" :component="$options.componentNames.TestIssueBody" - class="report-block-group-list" + :nested-level="2" /> </template> <modal diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/grouped_test_report/store/actions.js index c9b8ee64930..ebc8c735b03 100644 --- a/app/assets/javascripts/reports/store/actions.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/actions.js @@ -1,7 +1,7 @@ import Visibility from 'visibilityjs'; -import axios from '../../lib/utils/axios_utils'; -import httpStatusCodes from '../../lib/utils/http_status'; -import Poll from '../../lib/utils/poll'; +import axios from '../../../lib/utils/axios_utils'; +import httpStatusCodes from '../../../lib/utils/http_status'; +import Poll from '../../../lib/utils/poll'; import * as types from './mutation_types'; export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint); diff --git a/app/assets/javascripts/reports/store/getters.js b/app/assets/javascripts/reports/grouped_test_report/store/getters.js index cc8c4cc446c..e7d1675f74a 100644 --- a/app/assets/javascripts/reports/store/getters.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/getters.js @@ -1,4 +1,4 @@ -import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../constants'; +import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../../constants'; export const summaryStatus = (state) => { if (state.isLoading) { diff --git a/app/assets/javascripts/reports/store/index.js b/app/assets/javascripts/reports/grouped_test_report/store/index.js index a2edfa94a48..a2edfa94a48 100644 --- a/app/assets/javascripts/reports/store/index.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/index.js diff --git a/app/assets/javascripts/reports/store/mutation_types.js b/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js index 337085f9bf0..337085f9bf0 100644 --- a/app/assets/javascripts/reports/store/mutation_types.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/grouped_test_report/store/mutations.js index 3bb31d71d8f..3bb31d71d8f 100644 --- a/app/assets/javascripts/reports/store/mutations.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/mutations.js diff --git a/app/assets/javascripts/reports/store/state.js b/app/assets/javascripts/reports/grouped_test_report/store/state.js index e8a0db2e1a8..dd55c7abab4 100644 --- a/app/assets/javascripts/reports/store/state.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/state.js @@ -1,5 +1,5 @@ import { s__ } from '~/locale'; -import { fieldTypes } from '../constants'; +import { fieldTypes } from '../../constants'; export default () => ({ endpoint: null, diff --git a/app/assets/javascripts/reports/store/utils.js b/app/assets/javascripts/reports/grouped_test_report/store/utils.js index d89833032a0..189b87bfa8d 100644 --- a/app/assets/javascripts/reports/store/utils.js +++ b/app/assets/javascripts/reports/grouped_test_report/store/utils.js @@ -5,7 +5,7 @@ import { ICON_WARNING, ICON_SUCCESS, ICON_NOTFOUND, -} from '../constants'; +} from '../../constants'; const textBuilder = (results) => { const { failed, errored, resolved, total } = results; |