Add latest changes from gitlab-org/gitlab@master

2 files changed, 181 insertions, 81 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 61c0ddef639..0a661d51576 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -2,7 +2,6 @@
 import {
   GlButton,
   GlFormInput,
-  GlLink,
   GlLoadingIcon,
   GlBadge,
   GlAlert,
@@ -10,7 +9,6 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownDivider,
-  GlIcon,
 } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { createAlert, VARIANT_WARNING } from '~/alert';
@@ -18,16 +16,11 @@ import { __, sprintf, n__ } from '~/locale';
 import Tracking from '~/tracking';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import TrackEventDirective from '~/vue_shared/directives/track_event';
 import query from '../queries/details.query.graphql';
-import {
-  trackClickErrorLinkToSentryOptions,
-  trackErrorDetailsViewsOptions,
-  trackErrorStatusUpdateOptions,
-} from '../utils';
-
+import { trackErrorDetailsViewsOptions, trackErrorStatusUpdateOptions } from '../utils';
 import { severityLevel, severityLevelVariant, errorStatus } from '../constants';
 import Stacktrace from './stacktrace.vue';
+import ErrorDetailsInfo from './error_details_info.vue';
 
 const SENTRY_TIMEOUT = 10000;
 
@@ -35,10 +28,8 @@ export default {
   components: {
     GlButton,
     GlFormInput,
-    GlLink,
     GlLoadingIcon,
     TooltipOnTruncate,
-    GlIcon,
     Stacktrace,
     GlBadge,
     GlAlert,
@@ -47,9 +38,7 @@ export default {
     GlDropdownItem,
     GlDropdownDivider,
     TimeAgoTooltip,
-  },
-  directives: {
-    TrackEvent: TrackEventDirective,
+    ErrorDetailsInfo,
   },
   props: {
     issueUpdatePath: {
@@ -122,18 +111,7 @@ export default {
       'errorStatus',
     ]),
     ...mapGetters('details', ['stacktrace']),
-    firstReleaseLink() {
-      return `${this.error.externalBaseUrl}/releases/${this.error.firstReleaseVersion}`;
-    },
-    lastReleaseLink() {
-      return `${this.error.externalBaseUrl}/releases/${this.error.lastReleaseVersion}`;
-    },
-    firstCommitLink() {
-      return `${this.error.externalBaseUrl}/-/commit/${this.error.firstReleaseVersion}`;
-    },
-    lastCommitLink() {
-      return `${this.error.externalBaseUrl}/-/commit/${this.error.lastReleaseVersion}`;
-    },
+
     showStacktrace() {
       return Boolean(this.stacktrace?.length);
     },
@@ -204,7 +182,6 @@ export default {
       'updateResolveStatus',
       'updateIgnoreStatus',
     ]),
-    trackClickErrorLinkToSentryOptions,
     createIssue() {
       this.issueCreationInProgress = true;
       this.$refs.sentryIssueForm.submit();
@@ -257,6 +234,7 @@ export default {
     <div v-if="errorLoading" class="py-3">
       <gl-loading-icon size="lg" />
     </div>
+
     <div v-else-if="error" class="error-details">
       <gl-alert v-if="isAlertVisible" @dismiss="isAlertVisible = false">
         <gl-sprintf
@@ -386,60 +364,8 @@ export default {
           </gl-badge>
           <gl-badge v-if="error.tags.logger" variant="muted">{{ error.tags.logger }} </gl-badge>
         </template>
-        <ul>
-          <li v-if="error.gitlabCommit">
-            <strong class="bold">{{ __('GitLab commit') }}:</strong>
-            <gl-link :href="error.gitlabCommitPath">
-              <span>{{ error.gitlabCommit.substr(0, 10) }}</span>
-            </gl-link>
-          </li>
-          <li v-if="error.gitlabIssuePath">
-            <strong class="bold">{{ __('GitLab Issue') }}:</strong>
-            <gl-link :href="error.gitlabIssuePath">
-              <span>{{ error.gitlabIssuePath }}</span>
-            </gl-link>
-          </li>
-          <li v-if="!error.integrated">
-            <strong class="bold">{{ __('Sentry event') }}:</strong>
-            <gl-link
-              v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)"
-              :href="error.externalUrl"
-              target="_blank"
-              data-testid="external-url-link"
-            >
-              <span class="text-truncate">{{ error.externalUrl }}</span>
-              <gl-icon name="external-link" class="ml-1 flex-shrink-0" />
-            </gl-link>
-          </li>
-          <li v-if="error.firstReleaseVersion">
-            <strong class="bold">{{ __('First seen') }}:</strong>
-            <time-ago-tooltip :time="error.firstSeen" />
-            <gl-link v-if="error.integrated" :href="firstCommitLink">
-              {{ __('GitLab commit') }}: {{ error.firstReleaseVersion }}
-            </gl-link>
-            <gl-link v-else :href="firstReleaseLink" target="_blank">
-              {{ __('Release') }}: {{ error.firstReleaseVersion }}
-            </gl-link>
-          </li>
-          <li v-if="error.lastReleaseVersion">
-            <strong class="bold">{{ __('Last seen') }}:</strong>
-            <time-ago-tooltip :time="error.lastSeen" />
-            <gl-link v-if="error.integrated" :href="lastCommitLink">
-              {{ __('GitLab commit') }}: {{ error.lastReleaseVersion }}
-            </gl-link>
-            <gl-link v-else :href="lastReleaseLink" target="_blank">
-              {{ __('Release') }}: {{ error.lastReleaseVersion }}
-            </gl-link>
-          </li>
-          <li>
-            <strong class="bold">{{ __('Events') }}:</strong>
-            <span>{{ error.count }}</span>
-          </li>
-          <li>
-            <strong class="bold">{{ __('Users') }}:</strong>
-            <span>{{ error.userCount }}</span>
-          </li>
-        </ul>
+
+        <error-details-info :error="error" />
 
         <div v-if="loadingStacktrace" class="py-3">
           <gl-loading-icon size="lg" />
diff --git a/app/assets/javascripts/error_tracking/components/error_details_info.vue b/app/assets/javascripts/error_tracking/components/error_details_info.vue
new file mode 100644
index 00000000000..bbc7b0de7cf
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/components/error_details_info.vue
@@ -0,0 +1,174 @@
+<script>
+import { GlLink, GlIcon, GlCard, GlTooltipDirective } from '@gitlab/ui';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { trackClickErrorLinkToSentryOptions } from '../utils';
+
+const CARD_CLASS = 'gl-mr-7 gl-w-15p gl-min-w-fit-content';
+const HEADER_CLASS =
+  'gl-p-2 gl-font-weight-bold gl-display-flex gl-justify-content-center gl-align-items-center';
+const BODY_CLASS =
+  'gl-display-flex gl-justify-content-center gl-align-items-center gl-flex-direction-column gl-my-0 gl-p-4 gl-font-weight-bold gl-text-center gl-flex-grow-1 gl-font-lg';
+
+export default {
+  components: {
+    GlCard,
+    GlLink,
+    TimeAgoTooltip,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    TrackEvent: TrackEventDirective,
+  },
+  props: {
+    error: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    firstReleaseLink() {
+      return `${this.error.externalBaseUrl}/releases/${this.error.firstReleaseVersion}`;
+    },
+    lastReleaseLink() {
+      return `${this.error.externalBaseUrl}/releases/${this.error.lastReleaseVersion}`;
+    },
+    firstCommitLink() {
+      return `${this.error.externalBaseUrl}/-/commit/${this.error.firstReleaseVersion}`;
+    },
+    lastCommitLink() {
+      return `${this.error.externalBaseUrl}/-/commit/${this.error.lastReleaseVersion}`;
+    },
+    shortFirstReleaseVersion() {
+      return this.error.firstReleaseVersion.substr(0, 10);
+    },
+    shortLastReleaseVersion() {
+      return this.error.lastReleaseVersion.substr(0, 10);
+    },
+    shortGitlabCommit() {
+      return this.error.gitlabCommit.substr(0, 10);
+    },
+  },
+  methods: {
+    trackClickErrorLinkToSentryOptions,
+  },
+  CARD_CLASS,
+  HEADER_CLASS,
+  BODY_CLASS,
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="error"
+      class="gl-display-flex gl-flex-wrap gl-justify-content-center gl-my-7 gl-row-gap-6"
+    >
+      <gl-card
+        :class="$options.CARD_CLASS"
+        :body-class="$options.BODY_CLASS"
+        :header-class="$options.HEADER_CLASS"
+        data-testid="error-count-card"
+      >
+        <template #header>
+          <span>{{ __('Events') }}</span>
+        </template>
+
+        <template #default>
+          <span>{{ error.count }}</span>
+        </template>
+      </gl-card>
+
+      <gl-card
+        :class="$options.CARD_CLASS"
+        :body-class="$options.BODY_CLASS"
+        :header-class="$options.HEADER_CLASS"
+        data-testid="user-count-card"
+      >
+        <template #header>
+          <span>{{ __('Users') }}</span>
+        </template>
+
+        <template #default>
+          <span>{{ error.userCount }}</span>
+        </template>
+      </gl-card>
+
+      <gl-card
+        v-if="error.firstReleaseVersion"
+        :class="$options.CARD_CLASS"
+        :body-class="$options.BODY_CLASS"
+        :header-class="$options.HEADER_CLASS"
+        data-testid="first-release-card"
+      >
+        <template #header>
+          <gl-icon v-gl-tooltip :title="shortFirstReleaseVersion" name="commit" class="gl-mr-1" />
+          <span>{{ __('First seen') }}</span>
+        </template>
+
+        <template #default>
+          <gl-link v-if="error.integrated" :href="firstCommitLink" class="gl-font-lg">
+            <time-ago-tooltip :time="error.firstSeen" />
+          </gl-link>
+
+          <gl-link v-else :href="firstReleaseLink" target="_blank" class="gl-font-lg">
+            <time-ago-tooltip :time="error.firstSeen" />
+          </gl-link>
+        </template>
+      </gl-card>
+
+      <gl-card
+        v-if="error.lastReleaseVersion"
+        :class="$options.CARD_CLASS"
+        :body-class="$options.BODY_CLASS"
+        :header-class="$options.HEADER_CLASS"
+        data-testid="last-release-card"
+      >
+        <template #header>
+          <gl-icon v-gl-tooltip :title="shortLastReleaseVersion" name="commit" class="gl-mr-1" />
+          {{ __('Last seen') }}
+        </template>
+
+        <template #default>
+          <gl-link v-if="error.integrated" :href="lastCommitLink" class="gl-font-lg">
+            <time-ago-tooltip :time="error.lastSeen" />
+          </gl-link>
+          <gl-link v-else :href="lastReleaseLink" target="_blank" class="gl-font-lg">
+            <time-ago-tooltip :time="error.lastSeen" />
+          </gl-link>
+        </template>
+      </gl-card>
+
+      <gl-card
+        v-if="error.gitlabCommit"
+        :class="$options.CARD_CLASS"
+        :body-class="$options.BODY_CLASS"
+        :header-class="$options.HEADER_CLASS"
+        data-testid="gitlab-commit-card"
+      >
+        <template #header>
+          {{ __('GitLab commit') }}
+        </template>
+
+        <template #default>
+          <gl-link :href="error.gitlabCommitPath" class="gl-font-lg">
+            {{ shortGitlabCommit }}
+          </gl-link>
+        </template>
+      </gl-card>
+    </div>
+    <div v-if="!error.integrated" class="py-3">
+      <span class="gl-font-weight-bold">{{ __('Sentry event') }}:</span>
+      <gl-link
+        v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)"
+        :href="error.externalUrl"
+        target="_blank"
+        data-testid="external-url-link"
+      >
+        <span class="text-truncate">{{ error.externalUrl }}</span>
+        <gl-icon name="external-link" class="ml-1 flex-shrink-0" />
+      </gl-link>
+    </div>
+  </div>
+</template>