1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
new file mode 100644
index 00000000000..2f360ea6f6c
--- /dev/null
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -0,0 +1,52 @@
+<script>
+export default {
+  props: {
+    currentRequest: {
+      type: Object,
+      required: true,
+    },
+    requests: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentRequestId: this.currentRequest.id,
+    };
+  },
+  watch: {
+    currentRequestId(newRequestId) {
+      this.$emit('change-current-request', newRequestId);
+    },
+  },
+  methods: {
+    truncatedUrl(requestUrl) {
+      const components = requestUrl.replace(/\/$/, '').split('/');
+      let truncated = components[components.length - 1];
+
+      if (truncated.match(/^\d+$/)) {
+        truncated = `${components[components.length - 2]}/${truncated}`;
+      }
+
+      return truncated;
+    },
+  },
+};
+</script>
+<template>
+  <div
+    id="peek-request-selector"
+    class="append-right-5 pull-right"
+  >
+    <select v-model="currentRequestId">
+      <option
+        v-for="request in requests"
+        :key="request.id"
+        :value="request.id"
+      >
+        {{ truncatedUrl(request.url) }}
+      </option>
+    </select>
+  </div>
+</template>