Add latest changes from gitlab-org/gitlab@master

3 files changed, 102 insertions, 34 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index d4562d4a9a5..23a1ec4e367 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
+import createFlash from '~/flash';
 import { GlFormInput, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -11,6 +12,8 @@ import TrackEventDirective from '~/vue_shared/directives/track_event';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { trackClickErrorLinkToSentryOptions } from '../utils';
 
+import query from '../queries/details.query.graphql';
+
 export default {
   components: {
     LoadingButton,
@@ -27,6 +30,14 @@ export default {
   },
   mixins: [timeagoMixin],
   props: {
+    issueId: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     issueDetailsPath: {
       type: String,
       required: true,
@@ -44,8 +55,28 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    GQLerror: {
+      query,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          errorId: `gid://gitlab/Gitlab::ErrorTracking::DetailedError/${this.issueId}`,
+        };
+      },
+      pollInterval: 2000,
+      update: data => data.project.sentryDetailedError,
+      error: () => createFlash(__('Failed to load error details from Sentry.')),
+      result(res) {
+        if (res.data.project?.sentryDetailedError) {
+          this.$apollo.queries.GQLerror.stopPolling();
+        }
+      },
+    },
+  },
   data() {
     return {
+      GQLerror: null,
       issueCreationInProgress: false,
     };
   },
@@ -56,26 +87,28 @@ export default {
       return sprintf(
         __('Reported %{timeAgo} by %{reportedBy}'),
         {
-          reportedBy: `<strong>${this.error.culprit}</strong>`,
+          reportedBy: `<strong>${this.GQLerror.culprit}</strong>`,
           timeAgo: this.timeFormatted(this.stacktraceData.date_received),
         },
         false,
       );
     },
     firstReleaseLink() {
-      return `${this.error.external_base_url}/releases/${this.error.first_release_short_version}`;
+      return `${this.error.external_base_url}/releases/${this.GQLerror.firstReleaseShortVersion}`;
     },
     lastReleaseLink() {
-      return `${this.error.external_base_url}releases/${this.error.last_release_short_version}`;
+      return `${this.error.external_base_url}releases/${this.GQLerror.lastReleaseShortVersion}`;
     },
     showDetails() {
-      return Boolean(!this.loading && this.error && this.error.id);
+      return Boolean(
+        !this.loading && !this.$apollo.queries.GQLerror.loading && this.error && this.GQLerror,
+      );
     },
     showStacktrace() {
       return Boolean(!this.loadingStacktrace && this.stacktrace && this.stacktrace.length);
     },
     issueTitle() {
-      return this.error.title;
+      return this.GQLerror.title;
     },
     issueDescription() {
       return sprintf(
@@ -84,13 +117,13 @@ export default {
         ),
         {
           description: '# Error Details:\n',
-          errorUrl: `${this.error.external_url}\n`,
-          firstSeen: `\n${this.error.first_seen}\n`,
-          lastSeen: `${this.error.last_seen}\n`,
-          countLabel: n__('- Event', '- Events', this.error.count),
-          count: `${this.error.count}\n`,
-          userCountLabel: n__('- User', '- Users', this.error.user_count),
-          userCount: `${this.error.user_count}\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`,
         },
         false,
       );
@@ -119,7 +152,7 @@ export default {
 
 <template>
   <div>
-    <div v-if="loading" class="py-3">
+    <div v-if="$apollo.queries.GQLerror.loading || loading" class="py-3">
       <gl-loading-icon :size="3" />
     </div>
     <div v-else-if="showDetails" class="error-details">
@@ -129,7 +162,7 @@ export default {
           <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
           <input name="issue[description]" :value="issueDescription" type="hidden" />
           <gl-form-input
-            :value="error.id"
+            :value="GQLerror.id"
             class="hidden"
             name="issue[sentry_issue_attributes][sentry_issue_identifier]"
           />
@@ -145,16 +178,16 @@ export default {
         </form>
       </div>
       <div>
-        <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">
-          <h2 class="text-truncate">{{ error.title }}</h2>
+        <tooltip-on-truncate :title="GQLerror.title" truncate-target="child" placement="top">
+          <h2 class="text-truncate">{{ GQLerror.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>
+          <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>
@@ -168,35 +201,35 @@ export default {
           <li>
             <span class="bold">{{ __('Sentry event') }}:</span>
             <gl-link
-              v-track-event="trackClickErrorLinkToSentryOptions(error.external_url)"
-              :href="error.external_url"
+              v-track-event="trackClickErrorLinkToSentryOptions(GQLerror.externalUrl)"
+              :href="GQLerror.externalUrl"
               target="_blank"
             >
-              <span class="text-truncate">{{ error.external_url }}</span>
+              <span class="text-truncate">{{ GQLerror.externalUrl }}</span>
               <icon name="external-link" class="ml-1 flex-shrink-0" />
             </gl-link>
           </li>
-          <li v-if="error.first_release_short_version">
+          <li v-if="GQLerror.firstReleaseShortVersion">
             <span class="bold">{{ __('First seen') }}:</span>
-            {{ formatDate(error.first_seen) }}
+            {{ formatDate(GQLerror.firstSeen) }}
             <gl-link :href="firstReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ error.first_release_short_version }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.firstReleaseShortVersion }}</span>
             </gl-link>
           </li>
-          <li v-if="error.last_release_short_version">
+          <li v-if="GQLerror.lastReleaseShortVersion">
             <span class="bold">{{ __('Last seen') }}:</span>
-            {{ formatDate(error.last_seen) }}
+            {{ formatDate(GQLerror.lastSeen) }}
             <gl-link :href="lastReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ error.last_release_short_version }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.lastReleaseShortVersion }}</span>
             </gl-link>
           </li>
           <li>
             <span class="bold">{{ __('Events') }}:</span>
-            <span>{{ error.count }}</span>
+            <span>{{ GQLerror.count }}</span>
           </li>
           <li>
             <span class="bold">{{ __('Users') }}:</span>
-            <span>{{ error.user_count }}</span>
+            <span>{{ GQLerror.userCount }}</span>
           </li>
         </ul>
 
diff --git a/app/assets/javascripts/error_tracking/details.js b/app/assets/javascripts/error_tracking/details.js
index 872cb8868a2..b9761cdf2c1 100644
--- a/app/assets/javascripts/error_tracking/details.js
+++ b/app/assets/javascripts/error_tracking/details.js
@@ -1,22 +1,39 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import store from './store';
 import ErrorDetails from './components/error_details.vue';
 import csrf from '~/lib/utils/csrf';
 
+Vue.use(VueApollo);
+
 export default () => {
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-error_details',
+    apolloProvider,
     components: {
       ErrorDetails,
     },
     store,
     render(createElement) {
       const domEl = document.querySelector(this.$options.el);
-      const { issueDetailsPath, issueStackTracePath, projectIssuesPath } = domEl.dataset;
+      const {
+        issueId,
+        projectPath,
+        issueDetailsPath,
+        issueStackTracePath,
+        projectIssuesPath,
+      } = domEl.dataset;
 
       return createElement('error-details', {
         props: {
+          issueId,
+          projectPath,
           issueDetailsPath,
           issueStackTracePath,
           projectIssuesPath,
diff --git a/app/assets/javascripts/error_tracking/queries/details.query.graphql b/app/assets/javascripts/error_tracking/queries/details.query.graphql
new file mode 100644
index 00000000000..f65bdb9b968
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/queries/details.query.graphql
@@ -0,0 +1,18 @@
+query errorDetails($fullPath: ID!, $errorId: ID!) {
+    project(fullPath: $fullPath) {
+        sentryDetailedError(id: $errorId) {
+            id
+            sentryId
+            title
+            userCount
+            count
+            firstSeen
+            lastSeen
+            message
+            culprit
+            externalUrl
+            firstReleaseShortVersion
+            lastReleaseShortVersion
+        }
+    }
+}