Add latest changes from gitlab-org/gitlab@master

3 files changed, 57 insertions, 44 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 2000377530b..21f487f09f7 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -1,8 +1,9 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
-import { __, sprintf } from '~/locale';
-import { GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { __, sprintf, n__ } from '~/locale';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import Stacktrace from './stacktrace.vue';
@@ -12,7 +13,8 @@ import { trackClickErrorLinkToSentryOptions } from '../utils';
 
 export default {
   components: {
-    GlButton,
+    LoadingButton,
+    GlFormInput,
     GlLink,
     GlLoadingIcon,
     TooltipOnTruncate,
@@ -32,10 +34,19 @@ export default {
       type: String,
       required: true,
     },
-    issueProjectPath: {
+    projectIssuesPath: {
       type: String,
       required: true,
     },
+    csrfToken: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      issueCreationInProgress: false,
+    };
   },
   computed: {
     ...mapState('details', ['error', 'loading', 'loadingStacktrace', 'stacktraceData']),
@@ -62,33 +73,26 @@ export default {
     showStacktrace() {
       return Boolean(!this.loadingStacktrace && this.stacktrace && this.stacktrace.length);
     },
-    errorTitle() {
-      return `${this.error.title}`;
-    },
-    errorUrl() {
-      return sprintf(__('Sentry event: %{external_url}'), {
-        external_url: this.error.external_url,
-      });
-    },
-    errorFirstSeen() {
-      return sprintf(__('First seen: %{first_seen}'), { first_seen: this.error.first_seen });
-    },
-    errorLastSeen() {
-      return sprintf(__('Last seen: %{last_seen}'), { last_seen: this.error.last_seen });
-    },
-    errorCount() {
-      return sprintf(__('Events: %{count}'), { count: this.error.count });
-    },
-    errorUserCount() {
-      return sprintf(__('Users: %{user_count}'), { user_count: this.error.user_count });
-    },
-    issueLink() {
-      return `${this.issueProjectPath}?issue[title]=${encodeURIComponent(
-        this.errorTitle,
-      )}&issue[description]=${encodeURIComponent(this.issueDescription)}`;
+    issueTitle() {
+      return this.error.title;
     },
     issueDescription() {
-      return `${this.errorUrl}${this.errorFirstSeen}${this.errorLastSeen}${this.errorCount}${this.errorUserCount}`;
+      return sprintf(
+        __(
+          '%{description}- Sentry event: %{errorUrl}- First seen: %{firstSeen}- Last seen: %{lastSeen} %{countLabel}: %{count}%{userCountLabel}: %{userCount}',
+        ),
+        {
+          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`,
+        },
+        false,
+      );
     },
   },
   mounted() {
@@ -98,6 +102,10 @@ export default {
   methods: {
     ...mapActions('details', ['startPollingDetails', 'startPollingStacktrace']),
     trackClickErrorLinkToSentryOptions,
+    createIssue() {
+      this.issueCreationInProgress = true;
+      this.$refs.sentryIssueForm.submit();
+    },
     formatDate(date) {
       return `${this.timeFormated(date)} (${dateFormat(date, 'UTC:yyyy-mm-dd h:MM:ssTT Z')})`;
     },
@@ -114,9 +122,17 @@ export default {
     <div v-else-if="showDetails" class="error-details">
       <div class="top-area align-items-center justify-content-between py-3">
         <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
-        <gl-button variant="success" :href="issueLink">
-          {{ __('Create issue') }}
-        </gl-button>
+        <form ref="sentryIssueForm" :action="projectIssuesPath" method="POST">
+          <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
+          <input name="issue[description]" :value="issueDescription" type="hidden" />
+          <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
+          <loading-button
+            class="btn-success"
+            :label="__('Create issue')"
+            :loading="issueCreationInProgress"
+            @click="createIssue"
+          />
+        </form>
       </div>
       <div>
         <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">
diff --git a/app/assets/javascripts/error_tracking/details.js b/app/assets/javascripts/error_tracking/details.js
index 435315842bd..872cb8868a2 100644
--- a/app/assets/javascripts/error_tracking/details.js
+++ b/app/assets/javascripts/error_tracking/details.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import store from './store';
 import ErrorDetails from './components/error_details.vue';
+import csrf from '~/lib/utils/csrf';
 
 export default () => {
   // eslint-disable-next-line no-new
@@ -12,13 +13,14 @@ export default () => {
     store,
     render(createElement) {
       const domEl = document.querySelector(this.$options.el);
-      const { issueDetailsPath, issueStackTracePath, issueProjectPath } = domEl.dataset;
+      const { issueDetailsPath, issueStackTracePath, projectIssuesPath } = domEl.dataset;
 
       return createElement('error-details', {
         props: {
           issueDetailsPath,
           issueStackTracePath,
-          issueProjectPath,
+          projectIssuesPath,
+          csrfToken: csrf.token,
         },
       });
     },
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index c08b471bd51..9e376a52702 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -252,23 +252,18 @@ export default {
       'setEndpoints',
       'setPanelGroupMetrics',
     ]),
-    updateMetrics(key, panels) {
+    updatePanels(key, panels) {
       this.setPanelGroupMetrics({
         panels,
         key,
       });
     },
-    removeMetric(key, metrics, graphIndex) {
+    removePanel(key, panels, graphIndex) {
       this.setPanelGroupMetrics({
-        metrics: metrics.filter((v, i) => i !== graphIndex),
+        panels: panels.filter((v, i) => i !== graphIndex),
         key,
       });
     },
-    removeGraph(metrics, graphIndex) {
-      // At present graphs will not be removed, they should removed using the vuex store
-      // See https://gitlab.com/gitlab-org/gitlab/issues/27835
-      metrics.splice(graphIndex, 1);
-    },
     showInvalidDateError() {
       createFlash(s__('Metrics|Link contains an invalid time window.'));
     },
@@ -463,7 +458,7 @@ export default {
           group="metrics-dashboard"
           :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
           :disabled="!isRearrangingPanels"
-          @input="updateMetrics(groupData.key, $event)"
+          @input="updatePanels(groupData.key, $event)"
         >
           <div
             v-for="(graphData, graphIndex) in groupData.panels"
@@ -475,7 +470,7 @@ export default {
               <div
                 v-if="isRearrangingPanels"
                 class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
-                @click="removeGraph(groupData.panels, graphIndex)"
+                @click="removePanel(groupData.key, groupData.panels, graphIndex)"
               >
                 <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')"
                   ><icon name="close"