diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-05 09:08:43 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-05 09:08:43 +0000 |
commit | 26384c9a61da9922b8fa4b8351d4e42d51661b37 (patch) | |
tree | ef3decbed644db3c97dcdbb5b71d4ade77f3155d /app/assets/javascripts/error_tracking | |
parent | 79cbe31b18159ea394c6f6e3027c1dc69bdabb75 (diff) | |
download | gitlab-ce-26384c9a61da9922b8fa4b8351d4e42d51661b37.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/error_tracking')
8 files changed, 92 insertions, 143 deletions
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 88861b7da0e..7abe3be3e99 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -54,10 +54,6 @@ export default { type: String, required: true, }, - issueDetailsPath: { - type: String, - required: true, - }, issueStackTracePath: { type: String, required: true, @@ -72,7 +68,7 @@ export default { }, }, apollo: { - GQLerror: { + error: { query, variables() { return { @@ -81,19 +77,19 @@ export default { }; }, pollInterval: 2000, - update: data => data.project.sentryDetailedError, + update: data => data.project.sentryErrors.detailedError, error: () => createFlash(__('Failed to load error details from Sentry.')), result(res) { - if (res.data.project?.sentryDetailedError) { - this.$apollo.queries.GQLerror.stopPolling(); - this.setStatus(this.GQLerror.status); + if (res.data.project?.sentryErrors?.detailedError) { + this.$apollo.queries.error.stopPolling(); + this.setStatus(this.error.status); } }, }, }, data() { return { - GQLerror: null, + error: null, issueCreationInProgress: false, isAlertVisible: false, closedIssueId: null, @@ -101,8 +97,6 @@ export default { }, computed: { ...mapState('details', [ - 'error', - 'loading', 'loadingStacktrace', 'stacktraceData', 'updatingResolveStatus', @@ -114,28 +108,23 @@ export default { return sprintf( __('Reported %{timeAgo} by %{reportedBy}'), { - reportedBy: `<strong>${this.GQLerror.culprit}</strong>`, + reportedBy: `<strong>${this.error.culprit}</strong>`, timeAgo: this.timeFormatted(this.stacktraceData.date_received), }, false, ); }, firstReleaseLink() { - return `${this.error.external_base_url}/releases/${this.GQLerror.firstReleaseShortVersion}`; + return `${this.error.externalBaseUrl}/releases/${this.error.firstReleaseShortVersion}`; }, lastReleaseLink() { - return `${this.error.external_base_url}releases/${this.GQLerror.lastReleaseShortVersion}`; - }, - showDetails() { - return Boolean( - !this.loading && !this.$apollo.queries.GQLerror.loading && this.error && this.GQLerror, - ); + return `${this.error.externalBaseUrl}/releases/${this.error.lastReleaseShortVersion}`; }, showStacktrace() { - return Boolean(!this.loadingStacktrace && this.stacktrace && this.stacktrace.length); + return Boolean(this.stacktrace?.length); }, issueTitle() { - return this.GQLerror.title; + return this.error.title; }, issueDescription() { return sprintf( @@ -144,13 +133,13 @@ export default { ), { description: '# Error Details:\n', - errorUrl: `${this.GQLerror.externalUrl}\n`, - firstSeen: `\n${this.GQLerror.firstSeen}\n`, - lastSeen: `${this.GQLerror.lastSeen}\n`, - countLabel: n__('- Event', '- Events', this.GQLerror.count), - count: `${this.GQLerror.count}\n`, - userCountLabel: n__('- User', '- Users', this.GQLerror.userCount), - userCount: `${this.GQLerror.userCount}\n`, + errorUrl: `${this.error.externalUrl}\n`, + firstSeen: `\n${this.error.firstSeen}\n`, + lastSeen: `${this.error.lastSeen}\n`, + countLabel: n__('- Event', '- Events', this.error.count), + count: `${this.error.count}\n`, + userCountLabel: n__('- User', '- Users', this.error.userCount), + userCount: `${this.error.userCount}\n`, }, false, ); @@ -171,12 +160,10 @@ export default { }, }, mounted() { - this.startPollingDetails(this.issueDetailsPath); this.startPollingStacktrace(this.issueStackTracePath); }, methods: { ...mapActions('details', [ - 'startPollingDetails', 'startPollingStacktrace', 'updateStatus', 'setStatus', @@ -214,10 +201,10 @@ export default { <template> <div> - <div v-if="$apollo.queries.GQLerror.loading || loading" class="py-3"> + <div v-if="$apollo.queries.error.loading" class="py-3"> <gl-loading-icon :size="3" /> </div> - <div v-else-if="showDetails" class="error-details"> + <div v-else-if="error" class="error-details"> <gl-alert v-if="isAlertVisible" @dismiss="isAlertVisible = false"> <gl-sprintf :message=" @@ -232,7 +219,7 @@ export default { <div class="top-area align-items-center justify-content-between py-3"> <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span> - <div class="d-inline-flex"> + <div class="d-inline-flex ml-lg-auto"> <loading-button :label="ignoreBtnLabel" :loading="updatingIgnoreStatus" @@ -247,10 +234,10 @@ export default { @click="onResolveStatusUpdate" /> <gl-button - v-if="error.gitlab_issue" + v-if="error.gitlabIssuePath" class="ml-2" data-qa-selector="view_issue_button" - :href="error.gitlab_issue" + :href="error.gitlabIssuePath" variant="success" > {{ __('View issue') }} @@ -264,13 +251,13 @@ export default { <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" /> <input name="issue[description]" :value="issueDescription" type="hidden" /> <gl-form-input - :value="GQLerror.sentryId" + :value="error.sentryId" class="hidden" name="issue[sentry_issue_attributes][sentry_issue_identifier]" /> <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" /> <loading-button - v-if="!error.gitlab_issue" + v-if="!error.gitlabIssuePath" class="btn-success" :label="__('Create issue')" :loading="issueCreationInProgress" @@ -281,8 +268,8 @@ export default { </div> </div> <div> - <tooltip-on-truncate :title="GQLerror.title" truncate-target="child" placement="top"> - <h2 class="text-truncate">{{ GQLerror.title }}</h2> + <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 @@ -297,53 +284,51 @@ export default { </gl-badge> </template> <ul> - <li v-if="GQLerror.gitlabCommit"> + <li v-if="error.gitlabCommit"> <strong class="bold">{{ __('GitLab commit') }}:</strong> - <gl-link :href="GQLerror.gitlabCommitPath"> - <span>{{ GQLerror.gitlabCommit.substr(0, 10) }}</span> + <gl-link :href="error.gitlabCommitPath"> + <span>{{ error.gitlabCommit.substr(0, 10) }}</span> </gl-link> </li> - <li v-if="error.gitlab_issue"> + <li v-if="error.gitlabIssuePath"> <strong class="bold">{{ __('GitLab Issue') }}:</strong> - <gl-link :href="error.gitlab_issue"> - <span>{{ error.gitlab_issue }}</span> + <gl-link :href="error.gitlabIssuePath"> + <span>{{ error.gitlabIssuePath }}</span> </gl-link> </li> <li> <strong class="bold">{{ __('Sentry event') }}:</strong> <gl-link - v-track-event="trackClickErrorLinkToSentryOptions(GQLerror.externalUrl)" + v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)" class="d-inline-flex align-items-center" - :href="GQLerror.externalUrl" + :href="error.externalUrl" target="_blank" > - <span class="text-truncate">{{ GQLerror.externalUrl }}</span> + <span class="text-truncate">{{ error.externalUrl }}</span> <icon name="external-link" class="ml-1 flex-shrink-0" /> </gl-link> </li> - <li v-if="GQLerror.firstReleaseShortVersion"> + <li v-if="error.firstReleaseShortVersion"> <strong class="bold">{{ __('First seen') }}:</strong> - {{ formatDate(GQLerror.firstSeen) }} + {{ formatDate(error.firstSeen) }} <gl-link :href="firstReleaseLink" target="_blank"> - <span> - {{ __('Release') }}: {{ GQLerror.firstReleaseShortVersion.substr(0, 10) }} - </span> + <span>{{ __('Release') }}: {{ error.firstReleaseShortVersion.substr(0, 10) }}</span> </gl-link> </li> - <li v-if="GQLerror.lastReleaseShortVersion"> + <li v-if="error.lastReleaseShortVersion"> <strong class="bold">{{ __('Last seen') }}:</strong> - {{ formatDate(GQLerror.lastSeen) }} + {{ formatDate(error.lastSeen) }} <gl-link :href="lastReleaseLink" target="_blank"> - <span>{{ __('Release') }}: {{ GQLerror.lastReleaseShortVersion.substr(0, 10) }}</span> + <span>{{ __('Release') }}: {{ error.lastReleaseShortVersion.substr(0, 10) }}</span> </gl-link> </li> <li> <strong class="bold">{{ __('Events') }}:</strong> - <span>{{ GQLerror.count }}</span> + <span>{{ error.count }}</span> </li> <li> <strong class="bold">{{ __('Users') }}:</strong> - <span>{{ GQLerror.userCount }}</span> + <span>{{ error.userCount }}</span> </li> </ul> @@ -351,7 +336,7 @@ export default { <gl-loading-icon :size="3" /> </div> - <template v-if="showStacktrace"> + <template v-else-if="showStacktrace"> <h3 class="my-4">{{ __('Stack trace') }}</h3> <stacktrace :entries="stacktrace" /> </template> 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 6f3a5f683f8..1c996cbc13b 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -13,6 +13,7 @@ import { GlDropdownDivider, GlTooltipDirective, GlPagination, + GlButtonGroup, } from '@gitlab/ui'; import AccessorUtils from '~/lib/utils/accessor'; import Icon from '~/vue_shared/components/icon.vue'; @@ -20,12 +21,16 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { __ } from '~/locale'; import _ from 'underscore'; -export const tableDataClass = 'table-col d-flex d-sm-table-cell'; +export const tableDataClass = 'table-col d-flex d-sm-table-cell align-items-center'; export default { FIRST_PAGE: 1, PREV_PAGE: 1, NEXT_PAGE: 2, + statusButtons: [ + { status: 'ignored', icon: 'eye-slash', title: __('Ignore') }, + { status: 'resolved', icon: 'check-circle', title: __('Resolve') }, + ], fields: [ { key: 'error', @@ -48,20 +53,13 @@ export default { { key: 'lastSeen', label: __('Last seen'), - thClass: '', + thClass: 'w-15p', tdClass: `${tableDataClass}`, }, { - key: 'ignore', - label: '', - thClass: 'w-3rem', - tdClass: `${tableDataClass} pl-0`, - }, - { - key: 'resolved', + key: 'status', label: '', - thClass: 'w-3rem', - tdClass: `${tableDataClass} pl-0`, + tdClass: `${tableDataClass} text-right`, }, { key: 'details', @@ -88,6 +86,7 @@ export default { Icon, GlPagination, TimeAgo, + GlButtonGroup, }, directives: { GlTooltip: GlTooltipDirective, @@ -332,25 +331,19 @@ export default { <time-ago :time="errors.item.lastSeen" class="text-secondary" /> </div> </template> - <template #cell(ignore)="errors"> - <gl-button - ref="ignoreError" - v-gl-tooltip.hover - :title="__('Ignore')" - @click="updateIssueStatus(errors.item.id, 'ignored')" - > - <gl-icon name="eye-slash" :size="12" /> - </gl-button> - </template> - <template #cell(resolved)="errors"> - <gl-button - ref="resolveError" - v-gl-tooltip - :title="__('Resolve')" - @click="updateIssueStatus(errors.item.id, 'resolved')" - > - <gl-icon name="check-circle" :size="12" /> - </gl-button> + <template #cell(status)="errors"> + <gl-button-group> + <gl-button + v-for="button in $options.statusButtons" + :key="button.status" + :ref="button.title.toLowerCase() + 'Error'" + v-gl-tooltip.hover + :title="button.title" + @click="updateIssueStatus(errors.item.id, button.status)" + > + <gl-icon :name="button.icon" :size="12" /> + </gl-button> + </gl-button-group> </template> <template #cell(details)="errors"> <gl-button diff --git a/app/assets/javascripts/error_tracking/details.js b/app/assets/javascripts/error_tracking/details.js index a5a7ddc907b..1a92681374b 100644 --- a/app/assets/javascripts/error_tracking/details.js +++ b/app/assets/javascripts/error_tracking/details.js @@ -26,7 +26,6 @@ export default () => { issueId, projectPath, issueUpdatePath, - issueDetailsPath, issueStackTracePath, projectIssuesPath, } = domEl.dataset; @@ -36,7 +35,6 @@ export default () => { issueId, projectPath, issueUpdatePath, - issueDetailsPath, issueStackTracePath, projectIssuesPath, csrfToken: csrf.token, diff --git a/app/assets/javascripts/error_tracking/queries/details.query.graphql b/app/assets/javascripts/error_tracking/queries/details.query.graphql index 488a3ecc3ab..fa579c94257 100644 --- a/app/assets/javascripts/error_tracking/queries/details.query.graphql +++ b/app/assets/javascripts/error_tracking/queries/details.query.graphql @@ -1,21 +1,29 @@ query errorDetails($fullPath: ID!, $errorId: ID!) { project(fullPath: $fullPath) { - sentryDetailedError(id: $errorId) { - id - sentryId - title - userCount - count - status - firstSeen - lastSeen - message - culprit - externalUrl - firstReleaseShortVersion - lastReleaseShortVersion - gitlabCommit - gitlabCommitPath + sentryErrors { + detailedError(id: $errorId) { + id + sentryId + title + userCount + count + status + firstSeen + lastSeen + message + culprit + tags { + level + logger + } + externalUrl + externalBaseUrl + firstReleaseShortVersion + lastReleaseShortVersion + gitlabCommit + gitlabCommitPath + gitlabIssuePath + } } } } diff --git a/app/assets/javascripts/error_tracking/store/details/actions.js b/app/assets/javascripts/error_tracking/store/details/actions.js index 2b216d910ce..5914a79f092 100644 --- a/app/assets/javascripts/error_tracking/store/details/actions.js +++ b/app/assets/javascripts/error_tracking/store/details/actions.js @@ -5,36 +5,11 @@ import Poll from '~/lib/utils/poll'; import { __ } from '~/locale'; let stackTracePoll; -let detailPoll; const stopPolling = poll => { if (poll) poll.stop(); }; -export function startPollingDetails({ commit }, endpoint) { - detailPoll = new Poll({ - resource: service, - method: 'getSentryData', - data: { endpoint }, - successCallback: ({ data }) => { - if (!data) { - return; - } - - commit(types.SET_ERROR, data.error); - commit(types.SET_LOADING, false); - - stopPolling(detailPoll); - }, - errorCallback: () => { - commit(types.SET_LOADING, false); - createFlash(__('Failed to load error details from Sentry.')); - }, - }); - - detailPoll.makeRequest(); -} - export function startPollingStacktrace({ commit }, endpoint) { stackTracePoll = new Poll({ resource: service, diff --git a/app/assets/javascripts/error_tracking/store/details/mutation_types.js b/app/assets/javascripts/error_tracking/store/details/mutation_types.js index a2592253a2d..0dd49e727e6 100644 --- a/app/assets/javascripts/error_tracking/store/details/mutation_types.js +++ b/app/assets/javascripts/error_tracking/store/details/mutation_types.js @@ -1,4 +1,2 @@ -export const SET_ERROR = 'SET_ERRORS'; -export const SET_LOADING = 'SET_LOADING'; export const SET_LOADING_STACKTRACE = 'SET_LOADING_STACKTRACE'; export const SET_STACKTRACE_DATA = 'SET_STACKTRACE_DATA'; diff --git a/app/assets/javascripts/error_tracking/store/details/mutations.js b/app/assets/javascripts/error_tracking/store/details/mutations.js index 6f4720444e0..b2bde96c6a9 100644 --- a/app/assets/javascripts/error_tracking/store/details/mutations.js +++ b/app/assets/javascripts/error_tracking/store/details/mutations.js @@ -1,12 +1,6 @@ import * as types from './mutation_types'; export default { - [types.SET_ERROR](state, data) { - state.error = data; - }, - [types.SET_LOADING](state, loading) { - state.loading = loading; - }, [types.SET_LOADING_STACKTRACE](state, data) { state.loadingStacktrace = data; }, diff --git a/app/assets/javascripts/error_tracking/store/details/state.js b/app/assets/javascripts/error_tracking/store/details/state.js index f53cbe29c67..4a6bafe3114 100644 --- a/app/assets/javascripts/error_tracking/store/details/state.js +++ b/app/assets/javascripts/error_tracking/store/details/state.js @@ -1,7 +1,5 @@ export default () => ({ - error: {}, stacktraceData: {}, - loading: true, loadingStacktrace: true, updatingResolveStatus: false, updatingIgnoreStatus: false, |