diff options
Diffstat (limited to 'app/assets/javascripts/error_tracking/components/error_tracking_list.vue')
| -rw-r--r-- | app/assets/javascripts/error_tracking/components/error_tracking_list.vue | 53 |
1 files changed, 35 insertions, 18 deletions
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue index b1d568532a6..cd298e2c692 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -4,13 +4,15 @@ import { GlEmptyState, GlButton, GlLink, GlLoadingIcon, GlTable } from '@gitlab/ import Icon from '~/vue_shared/components/icon.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { __ } from '~/locale'; +import TrackEventDirective from '~/vue_shared/directives/track_event'; +import { trackViewInSentryOptions, trackClickErrorLinkToSentryOptions } from '../utils'; export default { fields: [ - { key: 'error', label: __('Open errors') }, + { key: 'error', label: __('Open errors'), thClass: 'w-70p' }, { key: 'events', label: __('Events') }, { key: 'users', label: __('Users') }, - { key: 'lastSeen', label: __('Last seen') }, + { key: 'lastSeen', label: __('Last seen'), thClass: 'w-15p' }, ], components: { GlEmptyState, @@ -21,6 +23,9 @@ export default { Icon, TimeAgo, }, + directives: { + TrackEvent: TrackEventDirective, + }, props: { indexPath: { type: String, @@ -53,6 +58,8 @@ export default { }, methods: { ...mapActions(['startPolling', 'restartPolling']), + trackViewInSentryOptions, + trackClickErrorLinkToSentryOptions, }, }; </script> @@ -65,42 +72,52 @@ export default { </div> <div v-else> <div class="d-flex justify-content-end"> - <gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank"> + <gl-button + v-track-event="trackViewInSentryOptions(externalUrl)" + class="my-3 ml-auto" + variant="primary" + :href="externalUrl" + target="_blank" + > {{ __('View in Sentry') }} - <icon name="external-link" /> + <icon name="external-link" class="flex-shrink-0" /> </gl-button> </div> - <gl-table :items="errors" :fields="$options.fields" :show-empty="true"> + + <gl-table :items="errors" :fields="$options.fields" :show-empty="true" fixed stacked="sm"> <template slot="HEAD_events" slot-scope="data"> - <div class="text-right">{{ data.label }}</div> + <div class="text-md-right">{{ data.label }}</div> </template> <template slot="HEAD_users" slot-scope="data"> - <div class="text-right">{{ data.label }}</div> + <div class="text-md-right">{{ data.label }}</div> </template> <template slot="error" slot-scope="errors"> <div class="d-flex flex-column"> - <div class="d-flex"> - <gl-link :href="errors.item.externalUrl" class="d-flex text-dark" target="_blank"> - <strong>{{ errors.item.title.trim() }}</strong> - <icon name="external-link" class="ml-1" /> - </gl-link> - <span class="text-secondary ml-2">{{ errors.item.culprit }}</span> - </div> - {{ errors.item.message || __('No details available') }} + <gl-link + v-track-event="trackClickErrorLinkToSentryOptions(errors.item.externalUrl)" + :href="errors.item.externalUrl" + class="d-flex text-dark" + target="_blank" + > + <strong class="text-truncate">{{ errors.item.title.trim() }}</strong> + <icon name="external-link" class="ml-1 flex-shrink-0" /> + </gl-link> + <span class="text-secondary text-truncate"> + {{ errors.item.culprit }} + </span> </div> </template> <template slot="events" slot-scope="errors"> - <div class="text-right">{{ errors.item.count }}</div> + <div class="text-md-right">{{ errors.item.count }}</div> </template> <template slot="users" slot-scope="errors"> - <div class="text-right">{{ errors.item.userCount }}</div> + <div class="text-md-right">{{ errors.item.userCount }}</div> </template> <template slot="lastSeen" slot-scope="errors"> <div class="d-flex align-items-center"> - <icon name="calendar" css-classes="text-secondary mr-1" /> <time-ago :time="errors.item.lastSeen" class="text-secondary" /> </div> </template> |