Add latest changes from gitlab-org/gitlab@master

3 files changed, 65 insertions, 0 deletions

diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue
new file mode 100644
index 00000000000..54bca8a1b67
--- /dev/null
+++ b/app/assets/javascripts/performance_bar/components/add_request.vue
@@ -0,0 +1,48 @@
+import { __ } from '~/locale';
+
+<script>
+export default {
+  data() {
+    return {
+      inputEnabled: false,
+      urlOrRequestId: '',
+    };
+  },
+  methods: {
+    toggleInput() {
+      this.inputEnabled = !this.inputEnabled;
+    },
+    addRequest() {
+      this.$emit('add-request', this.urlOrRequestId);
+      this.clearForm();
+    },
+    clearForm() {
+      this.urlOrRequestId = '';
+      this.toggleInput();
+    },
+  },
+};
+</script>
+<template>
+  <div id="peek-view-add-request" class="view">
+    <form class="form-inline" @submit.prevent>
+      <button
+        class="btn-blank btn-link bold"
+        type="button"
+        :title="__(`Add request manually`)"
+        @click="toggleInput"
+      >
+        +
+      </button>
+      <input
+        v-if="inputEnabled"
+        v-model="urlOrRequestId"
+        type="text"
+        :placeholder="__(`URL or request ID`)"
+        class="form-control form-control-sm d-inline-block ml-1"
+        @keyup.enter="addRequest"
+        @keyup.esc="clearForm"
+      />
+    </form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 3b07eba02b7..8ce653bf1fb 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,12 +1,14 @@
 <script>
 import { glEmojiTag } from '~/emoji';
 
+import AddRequest from './add_request.vue';
 import DetailedMetric from './detailed_metric.vue';
 import RequestSelector from './request_selector.vue';
 import { s__ } from '~/locale';
 
 export default {
   components: {
+    AddRequest,
     DetailedMetric,
     RequestSelector,
   },
@@ -118,6 +120,7 @@ export default {
       >
         <a :href="currentRequest.details.tracing.tracing_url">{{ s__('PerformanceBar|trace') }}</a>
       </div>
+      <add-request v-on="$listeners" />
       <request-selector
         v-if="currentRequest"
         :current-request="currentRequest"
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 1ae9487f391..735c9d804ee 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import axios from '~/lib/utils/axios_utils';
+
 import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
@@ -32,6 +34,15 @@ export default ({ container }) =>
       PerformanceBarService.removeInterceptor(this.interceptor);
     },
     methods: {
+      addRequestManually(urlOrRequestId) {
+        if (urlOrRequestId.startsWith('https://') || urlOrRequestId.startsWith('http://')) {
+          // We don't need to do anything with the response, we just
+          // want to trace the request.
+          axios.get(urlOrRequestId);
+        } else {
+          this.loadRequestDetails(urlOrRequestId, urlOrRequestId);
+        }
+      },
       loadRequestDetails(requestId, requestUrl) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
@@ -58,6 +69,9 @@ export default ({ container }) =>
           peekUrl: this.peekUrl,
           profileUrl: this.profileUrl,
         },
+        on: {
+          'add-request': this.addRequestManually,
+        },
       });
     },
   });