1 files changed, 19 insertions, 8 deletions

diff --git a/app/assets/javascripts/tracing/components/tracing_table_list.vue b/app/assets/javascripts/tracing/components/tracing_table_list.vue
index bbed5520b40..59604890c86 100644
--- a/app/assets/javascripts/tracing/components/tracing_table_list.vue
+++ b/app/assets/javascripts/tracing/components/tracing_table_list.vue
@@ -1,37 +1,37 @@
 <script>
 import { GlTable, GlLink } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 
 export const tableDataClass = 'gl-display-flex gl-md-display-table-cell gl-align-items-center';
 export default {
   name: 'TracingTableList',
   i18n: {
-    title: __('Traces'),
-    emptyText: __('No traces to display.'),
-    emptyLinkText: __('Check again'),
+    title: s__('Tracing|Traces'),
+    emptyText: s__('Tracing|No traces to display.'),
+    emptyLinkText: s__('Tracing|Check again'),
   },
   fields: [
     {
       key: 'timestamp',
-      label: __('Date'),
+      label: s__('Tracing|Date'),
       tdClass: tableDataClass,
       sortable: true,
     },
     {
       key: 'service_name',
-      label: __('Service'),
+      label: s__('Tracing|Service'),
       tdClass: tableDataClass,
       sortable: true,
     },
     {
       key: 'operation',
-      label: __('Operation'),
+      label: s__('Tracing|Operation'),
       tdClass: tableDataClass,
       sortable: true,
     },
     {
       key: 'duration',
-      label: __('Duration'),
+      label: s__('Tracing|Duration'),
       thClass: 'gl-w-15p',
       tdClass: tableDataClass,
       sortable: true,
@@ -47,6 +47,13 @@ export default {
       type: Array,
     },
   },
+  methods: {
+    onSelect(items) {
+      if (items[0]) {
+        this.$emit('trace-selected', items[0]);
+      }
+    },
+  },
 };
 </script>
 
@@ -64,6 +71,10 @@ export default {
       fixed
       stacked="md"
       tbody-tr-class="table-row"
+      selectable
+      select-mode="single"
+      selected-variant=""
+      @row-selected="onSelect"
     >
       <template #cell(timestamp)="data">
         {{ data.item.timestamp }}