Add language and error urgency level for Sentry issue details page

Added related badges under issue title

app/assets/javascripts/error_tracking/components/error_details.vue

 <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">

changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml

+---
+title: Add language and error urgency level for Sentry issue details page
+merge_request: 22122
+author:
+type: added

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 ""
 

spec/frontend/error_tracking/components/error_details_spec.js

 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',