diff options
Diffstat (limited to 'app/assets/javascripts/error_tracking')
5 files changed, 79 insertions, 37 deletions
diff --git a/app/assets/javascripts/error_tracking/components/constants.js b/app/assets/javascripts/error_tracking/components/constants.js index 60b217443de..41b952e26d8 100644 --- a/app/assets/javascripts/error_tracking/components/constants.js +++ b/app/assets/javascripts/error_tracking/components/constants.js @@ -8,10 +8,10 @@ export const severityLevel = { export const severityLevelVariant = { [severityLevel.FATAL]: 'danger', - [severityLevel.ERROR]: 'dark', + [severityLevel.ERROR]: 'neutral', [severityLevel.WARNING]: 'warning', [severityLevel.INFO]: 'info', - [severityLevel.DEBUG]: 'light', + [severityLevel.DEBUG]: 'muted', }; export const errorStatus = { diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 148edfe3a51..1e8f5a26125 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -1,6 +1,5 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import dateFormat from 'dateformat'; import createFlash from '~/flash'; import { GlDeprecatedButton, @@ -19,9 +18,14 @@ import Icon from '~/vue_shared/components/icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import Stacktrace from './stacktrace.vue'; import TrackEventDirective from '~/vue_shared/directives/track_event'; -import timeagoMixin from '~/vue_shared/mixins/timeago'; -import { trackClickErrorLinkToSentryOptions } from '../utils'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import { severityLevel, severityLevelVariant, errorStatus } from './constants'; +import Tracking from '~/tracking'; +import { + trackClickErrorLinkToSentryOptions, + trackErrorDetailsViewsOptions, + trackErrorStatusUpdateOptions, +} from '../utils'; import query from '../queries/details.query.graphql'; @@ -42,11 +46,11 @@ export default { GlDropdown, GlDropdownItem, GlDropdownDivider, + TimeAgoTooltip, }, directives: { TrackEvent: TrackEventDirective, }, - mixins: [timeagoMixin], props: { issueUpdatePath: { type: String, @@ -172,6 +176,7 @@ export default { }, }, mounted() { + this.trackPageViews(); this.startPollingStacktrace(this.issueStackTracePath); this.errorPollTimeout = Date.now() + SENTRY_TIMEOUT; this.$apollo.queries.error.setOptions({ @@ -194,7 +199,10 @@ export default { onIgnoreStatusUpdate() { const status = this.errorStatus === errorStatus.IGNORED ? errorStatus.UNRESOLVED : errorStatus.IGNORED; - this.updateIgnoreStatus({ endpoint: this.issueUpdatePath, status }); + // eslint-disable-next-line promise/catch-or-return + this.updateIgnoreStatus({ endpoint: this.issueUpdatePath, status }).then(() => { + this.trackStatusUpdate(status); + }); }, onResolveStatusUpdate() { const status = @@ -206,6 +214,7 @@ export default { if (this.closedIssueId) { this.isAlertVisible = true; } + this.trackStatusUpdate(status); }); }, onNoApolloResult() { @@ -215,8 +224,13 @@ export default { createFlash(__('Could not connect to Sentry. Refresh the page to try again.'), 'warning'); } }, - formatDate(date) { - return `${this.timeFormatted(date)} (${dateFormat(date, 'UTC:yyyy-mm-dd h:MM:ssTT Z')})`; + trackPageViews() { + const { category, action } = trackErrorDetailsViewsOptions; + Tracking.event(category, action); + }, + trackStatusUpdate(status) { + const { category, action } = trackErrorStatusUpdateOptions(status); + Tracking.event(category, action); }, }, }; @@ -251,7 +265,7 @@ export default { <strong class="error-details-meta-culprit">{{ error.culprit }}</strong> </template> <template #timeAgo> - {{ timeFormatted(stacktraceData.date_received) }} + <time-ago-tooltip :time="stacktraceData.date_received" /> </template> </gl-sprintf> </div> @@ -259,7 +273,7 @@ export default { <div class="d-inline-flex bv-d-sm-down-none"> <gl-deprecated-button :loading="updatingIgnoreStatus" - data-qa-selector="update_ignore_status_button" + data-testid="update-ignore-status-btn" @click="onIgnoreStatusUpdate" > {{ ignoreBtnLabel }} @@ -267,7 +281,7 @@ export default { <gl-deprecated-button class="btn-outline-info ml-2" :loading="updatingResolveStatus" - data-qa-selector="update_resolve_status_button" + data-testid="update-resolve-status-btn" @click="onResolveStatusUpdate" > {{ resolveBtnLabel }} @@ -275,7 +289,7 @@ export default { <gl-deprecated-button v-if="error.gitlabIssuePath" class="ml-2" - data-qa-selector="view_issue_button" + data-testid="view_issue_button" :href="error.gitlabIssuePath" variant="success" > @@ -345,16 +359,10 @@ export default { <h2 class="text-truncate">{{ error.title }}</h2> </tooltip-on-truncate> <template v-if="error.tags"> - <gl-badge - v-if="error.tags.level" - :variant="errorSeverityVariant" - class="rounded-pill mr-2" - > + <gl-badge v-if="error.tags.level" :variant="errorSeverityVariant" class="mr-2"> {{ errorLevel }} </gl-badge> - <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill" - >{{ error.tags.logger }} - </gl-badge> + <gl-badge v-if="error.tags.logger" variant="muted">{{ error.tags.logger }} </gl-badge> </template> <ul> <li v-if="error.gitlabCommit"> @@ -375,6 +383,7 @@ export default { v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)" :href="error.externalUrl" target="_blank" + data-testid="external-url-link" > <span class="text-truncate">{{ error.externalUrl }}</span> <icon name="external-link" class="ml-1 flex-shrink-0" /> @@ -382,14 +391,14 @@ export default { </li> <li v-if="error.firstReleaseShortVersion"> <strong class="bold">{{ __('First seen') }}:</strong> - {{ formatDate(error.firstSeen) }} + <time-ago-tooltip :time="error.firstSeen" /> <gl-link :href="firstReleaseLink" target="_blank"> <span>{{ __('Release') }}: {{ error.firstReleaseShortVersion.substr(0, 10) }}</span> </gl-link> </li> <li v-if="error.lastReleaseShortVersion"> <strong class="bold">{{ __('Last seen') }}:</strong> - {{ formatDate(error.lastSeen) }} + <time-ago-tooltip :time="error.lastSeen" /> <gl-link :href="lastReleaseLink" target="_blank"> <span>{{ __('Release') }}: {{ error.lastReleaseShortVersion.substr(0, 10) }}</span> </gl-link> 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 45432e8ebd8..62a73e21096 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -19,6 +19,8 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { __ } from '~/locale'; import { isEmpty } from 'lodash'; import ErrorTrackingActions from './error_tracking_actions.vue'; +import Tracking from '~/tracking'; +import { trackErrorListViewsOptions, trackErrorStatusUpdateOptions } from '../utils'; export const tableDataClass = 'table-col d-flex d-md-table-cell align-items-center'; @@ -150,6 +152,9 @@ export default { this.startPolling(); } }, + mounted() { + this.trackPageViews(); + }, methods: { ...mapActions('list', [ 'startPolling', @@ -197,13 +202,25 @@ export default { this.filterValue = label; return this.filterByStatus(status); }, - updateIssueStatus({ errorId, status }) { + updateErrosStatus({ errorId, status }) { + // eslint-disable-next-line promise/catch-or-return this.updateStatus({ endpoint: this.getIssueUpdatePath(errorId), status, + }).then(() => { + this.trackStatusUpdate(status); }); + this.removeIgnoredResolvedErrors(errorId); }, + trackPageViews() { + const { category, action } = trackErrorListViewsOptions; + Tracking.event(category, action); + }, + trackStatusUpdate(status) { + const { category, action } = trackErrorStatusUpdateOptions(status); + Tracking.event(category, action); + }, }, }; </script> @@ -359,7 +376,7 @@ export default { </div> </template> <template #cell(status)="errors"> - <error-tracking-actions :error="errors.item" @update-issue-status="updateIssueStatus" /> + <error-tracking-actions :error="errors.item" @update-issue-status="updateErrosStatus" /> </template> <template #empty> {{ __('No errors to display.') }} diff --git a/app/assets/javascripts/error_tracking/store/list/actions.js b/app/assets/javascripts/error_tracking/store/list/actions.js index 4170c1bf759..94cf444d2e4 100644 --- a/app/assets/javascripts/error_tracking/store/list/actions.js +++ b/app/assets/javascripts/error_tracking/store/list/actions.js @@ -2,7 +2,7 @@ import Service from '../../services'; import * as types from './mutation_types'; import createFlash from '~/flash'; import Poll from '~/lib/utils/poll'; -import { __, sprintf } from '~/locale'; +import { __ } from '~/locale'; let eTagPoll; @@ -31,17 +31,9 @@ export function startPolling({ state, commit, dispatch }) { commit(types.SET_LOADING, false); dispatch('stopPolling'); }, - errorCallback: ({ response }) => { - let errorMessage = ''; - if (response && response.data && response.data.message) { - errorMessage = response.data.message; - } + errorCallback: () => { commit(types.SET_LOADING, false); - createFlash( - sprintf(__(`Failed to load errors from Sentry. Error message: %{errorMessage}`), { - errorMessage, - }), - ); + createFlash(__('Failed to load errors from Sentry.')); }, }); diff --git a/app/assets/javascripts/error_tracking/utils.js b/app/assets/javascripts/error_tracking/utils.js index d1cd70a72fa..5b705cc5510 100644 --- a/app/assets/javascripts/error_tracking/utils.js +++ b/app/assets/javascripts/error_tracking/utils.js @@ -1,4 +1,4 @@ -/* eslint-disable @gitlab/require-i18n-strings, import/prefer-default-export */ +/* eslint-disable @gitlab/require-i18n-strings */ /** * Tracks snowplow event when User clicks on error link to Sentry @@ -10,3 +10,27 @@ export const trackClickErrorLinkToSentryOptions = url => ({ label: 'Error Link', property: url, }); + +/** + * Tracks snowplow event when user views error list + */ +export const trackErrorListViewsOptions = { + category: 'Error Tracking', + action: 'view_errors_list', +}; + +/** + * Tracks snowplow event when user views error details + */ +export const trackErrorDetailsViewsOptions = { + category: 'Error Tracking', + action: 'view_error_details', +}; + +/** + * Tracks snowplow event when error status is updated + */ +export const trackErrorStatusUpdateOptions = status => ({ + category: 'Error Tracking', + action: `update_${status}_status`, +}); |