diff options
4 files changed, 42 insertions, 7 deletions
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 14b2e59009a..d4562d4a9a5 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -1,7 +1,7 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import dateFormat from 'dateformat'; -import { GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { GlFormInput, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui'; import { __, sprintf, n__ } from '~/locale'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; @@ -20,6 +20,7 @@ export default { TooltipOnTruncate, Icon, Stacktrace, + GlBadge, }, directives: { TrackEvent: TrackEventDirective, @@ -94,6 +95,9 @@ export default { false, ); }, + errorLevel() { + return sprintf(__('level: %{level}'), { level: this.error.tags.level }); + }, }, mounted() { this.startPollingDetails(this.issueDetailsPath); @@ -144,6 +148,15 @@ export default { <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top"> <h2 class="text-truncate">{{ error.title }}</h2> </tooltip-on-truncate> + <template v-if="error.tags"> + <gl-badge v-if="error.tags.level" variant="danger" class="rounded-pill mr-2">{{ + errorLevel + }}</gl-badge> + <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill">{{ + error.tags.logger + }}</gl-badge> + </template> + <h3>{{ __('Error details') }}</h3> <ul> <li v-if="error.gitlab_issue"> diff --git a/changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml b/changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml new file mode 100644 index 00000000000..1dfebb18726 --- /dev/null +++ b/changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml @@ -0,0 +1,5 @@ +--- +title: Add language and error urgency level for Sentry issue details page +merge_request: 22122 +author: +type: added diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 954dbd4af70..26ae64d67ff 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -21728,6 +21728,9 @@ msgstr "" msgid "less than a minute" msgstr "" +msgid "level: %{level}" +msgstr "" + msgid "limit of %{project_limit} reached" msgstr "" diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js index 6dc4980aaec..9847bec6f6c 100644 --- a/spec/frontend/error_tracking/components/error_details_spec.js +++ b/spec/frontend/error_tracking/components/error_details_spec.js @@ -1,6 +1,6 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlLoadingIcon, GlLink } from '@gitlab/ui'; +import { GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; import Stacktrace from '~/error_tracking/components/stacktrace.vue'; import ErrorDetails from '~/error_tracking/components/error_details.vue'; @@ -77,19 +77,35 @@ describe('ErrorDetails', () => { }); describe('Error details', () => { - it('should show Sentry error details without stacktrace', () => { + beforeEach(() => { store.state.details.loading = false; store.state.details.error.id = 1; + }); + + it('should show Sentry error details without stacktrace', () => { mountComponent(); expect(wrapper.find(GlLink).exists()).toBe(true); expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); expect(wrapper.find(Stacktrace).exists()).toBe(false); + expect(wrapper.find(GlBadge).exists()).toBe(false); + }); + + describe('Badges', () => { + it('should show language and error level badges', () => { + store.state.details.error.tags = { level: 'error', logger: 'ruby' }; + mountComponent(); + expect(wrapper.findAll(GlBadge).length).toBe(2); + }); + + it('should NOT show the badge if the tag is not present', () => { + store.state.details.error.tags = { level: 'error' }; + mountComponent(); + expect(wrapper.findAll(GlBadge).length).toBe(1); + }); }); describe('Stacktrace', () => { it('should show stacktrace', () => { - store.state.details.loading = false; - store.state.details.error.id = 1; store.state.details.loadingStacktrace = false; mountComponent(); expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); @@ -97,7 +113,6 @@ describe('ErrorDetails', () => { }); it('should NOT show stacktrace if no entries', () => { - store.state.details.loading = false; store.state.details.loadingStacktrace = false; store.getters = { 'details/sentryUrl': () => 'sentry.io', 'details/stacktrace': () => [] }; mountComponent(); @@ -108,7 +123,6 @@ describe('ErrorDetails', () => { describe('When a user clicks the create issue button', () => { beforeEach(() => { - store.state.details.loading = false; store.state.details.error = { id: 129381, title: 'Issue title', |