diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-21 18:09:05 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-21 18:09:05 +0300 |
commit | cf6a3e7ed4cb10a3e9fcbda810601387afc8b8d6 (patch) | |
tree | bda3707e95a53cb225793fded61d5073950b0b68 /app/assets | |
parent | 2a040e2655fe0a99df61ad0a7bd0c27e68af0c38 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/error_tracking/components/error_details.vue | 134 | ||||
-rw-r--r-- | app/assets/javascripts/notifications_dropdown.js | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/error_details.scss | 20 |
3 files changed, 111 insertions, 45 deletions
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 7abe3be3e99..89d32efec6d 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -10,6 +10,9 @@ import { GlBadge, GlAlert, GlSprintf, + GlDropdown, + GlDropdownItem, + GlDropdownDivider, } from '@gitlab/ui'; import { __, sprintf, n__ } from '~/locale'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; @@ -36,6 +39,9 @@ export default { GlBadge, GlAlert, GlSprintf, + GlDropdown, + GlDropdownItem, + GlDropdownDivider, }, directives: { TrackEvent: TrackEventDirective, @@ -108,7 +114,7 @@ export default { return sprintf( __('Reported %{timeAgo} by %{reportedBy}'), { - reportedBy: `<strong>${this.error.culprit}</strong>`, + reportedBy: `<strong class="error-details-meta-culprit">${this.error.culprit}</strong>`, timeAgo: this.timeFormatted(this.stacktraceData.date_received), }, false, @@ -144,6 +150,11 @@ export default { false, ); }, + issueUpdateInProgress() { + return ( + this.updatingIgnoreStatus || this.updatingResolveStatus || this.issueCreationInProgress + ); + }, errorLevel() { return sprintf(__('level: %{level}'), { level: this.error.tags.level }); }, @@ -217,54 +228,90 @@ export default { </gl-sprintf> </gl-alert> - <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 ml-lg-auto"> - <loading-button - :label="ignoreBtnLabel" - :loading="updatingIgnoreStatus" - data-qa-selector="update_ignore_status_button" - @click="onIgnoreStatusUpdate" - /> - <loading-button - class="btn-outline-info ml-2" - :label="resolveBtnLabel" - :loading="updatingResolveStatus" - data-qa-selector="update_resolve_status_button" - @click="onResolveStatusUpdate" - /> - <gl-button - v-if="error.gitlabIssuePath" - class="ml-2" - data-qa-selector="view_issue_button" - :href="error.gitlabIssuePath" - variant="success" - > - {{ __('View issue') }} - </gl-button> - <form - ref="sentryIssueForm" - :action="projectIssuesPath" - method="POST" - class="d-inline-block ml-2" - > - <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" /> - <input name="issue[description]" :value="issueDescription" type="hidden" /> - <gl-form-input - :value="error.sentryId" - class="hidden" - name="issue[sentry_issue_attributes][sentry_issue_identifier]" + <div class="error-details-header d-flex py-2 justify-content-between"> + <div class="error-details-meta my-auto"> + <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span> + </div> + <div class="error-details-actions"> + <div class="d-inline-flex bv-d-sm-down-none"> + <loading-button + :label="ignoreBtnLabel" + :loading="updatingIgnoreStatus" + data-qa-selector="update_ignore_status_button" + @click="onIgnoreStatusUpdate" /> - <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" /> <loading-button + class="btn-outline-info ml-2" + :label="resolveBtnLabel" + :loading="updatingResolveStatus" + data-qa-selector="update_resolve_status_button" + @click="onResolveStatusUpdate" + /> + <gl-button + v-if="error.gitlabIssuePath" + class="ml-2" + data-qa-selector="view_issue_button" + :href="error.gitlabIssuePath" + variant="success" + > + {{ __('View issue') }} + </gl-button> + <form + ref="sentryIssueForm" + :action="projectIssuesPath" + method="POST" + class="d-inline-block ml-2" + > + <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" /> + <input name="issue[description]" :value="issueDescription" type="hidden" /> + <gl-form-input + :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.gitlabIssuePath" + class="btn-success" + :label="__('Create issue')" + :loading="issueCreationInProgress" + data-qa-selector="create_issue_button" + @click="createIssue" + /> + </form> + </div> + <gl-dropdown + text="Options" + class="error-details-options d-md-none" + right + :disabled="issueUpdateInProgress" + > + <gl-dropdown-item + data-qa-selector="update_ignore_status_button" + @click="onIgnoreStatusUpdate" + >{{ ignoreBtnLabel }}</gl-dropdown-item + > + <gl-dropdown-item + data-qa-selector="update_resolve_status_button" + @click="onResolveStatusUpdate" + >{{ resolveBtnLabel }}</gl-dropdown-item + > + <gl-dropdown-divider /> + <gl-dropdown-item + v-if="error.gitlabIssuePath" + data-qa-selector="view_issue_button" + :href="error.gitlabIssuePath" + variant="success" + >{{ __('View issue') }}</gl-dropdown-item + > + <gl-dropdown-item v-if="!error.gitlabIssuePath" - class="btn-success" - :label="__('Create issue')" :loading="issueCreationInProgress" data-qa-selector="create_issue_button" @click="createIssue" - /> - </form> + >{{ __('Create issue') }}</gl-dropdown-item + > + </gl-dropdown> </div> </div> <div> @@ -300,7 +347,6 @@ export default { <strong class="bold">{{ __('Sentry event') }}:</strong> <gl-link v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)" - class="d-inline-flex align-items-center" :href="error.externalUrl" target="_blank" > diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js index ab87b0d973c..07e69fa297a 100644 --- a/app/assets/javascripts/notifications_dropdown.js +++ b/app/assets/javascripts/notifications_dropdown.js @@ -15,7 +15,7 @@ export default function notificationsDropdown() { .parents('.notification-form') .first(); - form.find('.js-notification-loading').toggleClass('fa-bell fa-spin fa-spinner'); + form.find('.js-notification-loading').toggleClass('spinner'); if (form.hasClass('no-label')) { form.find('.js-notification-loading').toggleClass('hidden'); form.find('.js-notifications-icon').toggleClass('hidden'); diff --git a/app/assets/stylesheets/pages/error_details.scss b/app/assets/stylesheets/pages/error_details.scss index 61e2df7ea26..78cac12d6be 100644 --- a/app/assets/stylesheets/pages/error_details.scss +++ b/app/assets/stylesheets/pages/error_details.scss @@ -7,6 +7,26 @@ color: $blue-500; border-color: $blue-500; } + + .error-details-header { + border-bottom: 1px solid $border-color; + + @include media-breakpoint-down(xs) { + flex-flow: column; + + .error-details-meta-culprit { + display: flex; + } + + .error-details-options { + width: 100%; + + .dropdown-toggle { + text-align: center; + } + } + } + } } .stacktrace { |