1 files changed, 44 insertions, 12 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index cd298e2c692..88139ce7403 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -1,11 +1,19 @@
 <script>
-import { mapActions, mapState } from 'vuex';
-import { GlEmptyState, GlButton, GlLink, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import {
+  GlEmptyState,
+  GlButton,
+  GlLink,
+  GlLoadingIcon,
+  GlTable,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
-import { trackViewInSentryOptions, trackClickErrorLinkToSentryOptions } from '../utils';
+import { trackViewInSentryOptions } from '../utils';
 
 export default {
   fields: [
@@ -20,6 +28,7 @@ export default {
     GlLink,
     GlLoadingIcon,
     GlTable,
+    GlSearchBoxByType,
     Icon,
     TimeAgo,
   },
@@ -48,8 +57,17 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      errorSearchQuery: '',
+    };
+  },
   computed: {
-    ...mapState(['errors', 'externalUrl', 'loading']),
+    ...mapState('list', ['errors', 'externalUrl', 'loading']),
+    ...mapGetters('list', ['filterErrorsByTitle']),
+    filteredErrors() {
+      return this.errorSearchQuery ? this.filterErrorsByTitle(this.errorSearchQuery) : this.errors;
+    },
   },
   created() {
     if (this.errorTrackingEnabled) {
@@ -57,9 +75,11 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['startPolling', 'restartPolling']),
+    ...mapActions('list', ['startPolling', 'restartPolling']),
     trackViewInSentryOptions,
-    trackClickErrorLinkToSentryOptions,
+    viewDetails(errorId) {
+      visitUrl(`error_tracking/${errorId}/details`);
+    },
   },
 };
 </script>
@@ -71,10 +91,17 @@ export default {
         <gl-loading-icon :size="3" />
       </div>
       <div v-else>
-        <div class="d-flex justify-content-end">
+        <div class="d-flex flex-row justify-content-around bg-secondary border">
+          <gl-search-box-by-type
+            v-model="errorSearchQuery"
+            class="col-lg-10 m-3 p-0"
+            :placeholder="__('Search or filter results...')"
+            type="search"
+            autofocus
+          />
           <gl-button
             v-track-event="trackViewInSentryOptions(externalUrl)"
-            class="my-3 ml-auto"
+            class="m-3"
             variant="primary"
             :href="externalUrl"
             target="_blank"
@@ -84,7 +111,14 @@ export default {
           </gl-button>
         </div>
 
-        <gl-table :items="errors" :fields="$options.fields" :show-empty="true" fixed stacked="sm">
+        <gl-table
+          class="mt-3"
+          :items="filteredErrors"
+          :fields="$options.fields"
+          :show-empty="true"
+          fixed
+          stacked="sm"
+        >
           <template slot="HEAD_events" slot-scope="data">
             <div class="text-md-right">{{ data.label }}</div>
           </template>
@@ -94,13 +128,11 @@ export default {
           <template slot="error" slot-scope="errors">
             <div class="d-flex flex-column">
               <gl-link
-                v-track-event="trackClickErrorLinkToSentryOptions(errors.item.externalUrl)"
-                :href="errors.item.externalUrl"
                 class="d-flex text-dark"
                 target="_blank"
+                @click="viewDetails(errors.item.id)"
               >
                 <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
-                <icon name="external-link" class="ml-1 flex-shrink-0" />
               </gl-link>
               <span class="text-secondary text-truncate">
                 {{ errors.item.culprit }}