diff --git a/ee/app/assets/javascripts/tracing/components/tracing_details_chart.vue b/ee/app/assets/javascripts/tracing/details/tracing_chart.vue
similarity index 84%
rename from ee/app/assets/javascripts/tracing/components/tracing_details_chart.vue
rename to ee/app/assets/javascripts/tracing/details/tracing_chart.vue
index 5df718fa406a1f384b6f9407e8a8b04a169042b9..a5fdd3d3882d1931b9d1424d1c144db19d7dec0a 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_details_chart.vue
+++ b/ee/app/assets/javascripts/tracing/details/tracing_chart.vue
@@ -1,10 +1,10 @@
 <script>
-import TracingDetailsSpansChart from './tracing_details_spans_chart.vue';
-import { mapTraceToTreeRoot, durationNanoToMs, assignColorToServices } from './trace_utils';
+import { mapTraceToTreeRoot, durationNanoToMs, assignColorToServices } from '../trace_utils';
+import TracingSpansChart from './tracing_spans_chart.vue';
 
 export default {
   components: {
-    TracingDetailsSpansChart,
+    TracingSpansChart,
   },
   props: {
     trace: {
@@ -38,7 +38,7 @@ export default {
 </script>
 
 <template>
-  <tracing-details-spans-chart
+  <tracing-spans-chart
     :spans="spans"
     :trace-duration-ms="traceDurationMs"
     :service-to-color="serviceToColor"
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_details.vue b/ee/app/assets/javascripts/tracing/details/tracing_details.vue
similarity index 84%
rename from ee/app/assets/javascripts/tracing/components/tracing_details.vue
rename to ee/app/assets/javascripts/tracing/details/tracing_details.vue
index c567f83244893f2c08b9c30e79c0301bd1b5dd52..98bbf6ab57b84c2ddcc1dcd31c28eeb511c3e43e 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_details.vue
+++ b/ee/app/assets/javascripts/tracing/details/tracing_details.vue
@@ -3,9 +3,9 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import { visitUrl, isSafeURL } from '~/lib/utils/url_utility';
-import TracingDetailsChart from './tracing_details_chart.vue';
-import TracingDetailsHeader from './tracing_details_header.vue';
-import TracingDetailsDrawer from './tracing_details_drawer.vue';
+import TracingChart from './tracing_chart.vue';
+import TracingHeader from './tracing_header.vue';
+import TracingDrawer from './tracing_drawer.vue';
 
 export default {
   i18n: {
@@ -13,9 +13,9 @@ export default {
   },
   components: {
     GlLoadingIcon,
-    TracingDetailsChart,
-    TracingDetailsHeader,
-    TracingDetailsDrawer,
+    TracingChart,
+    TracingHeader,
+    TracingDrawer,
   },
   props: {
     observabilityClient: {
@@ -104,13 +104,13 @@ export default {
   </div>
 
   <div v-else-if="trace" data-testid="trace-details" class="gl-mx-7">
-    <tracing-details-header :trace="trace" />
-    <tracing-details-chart
+    <tracing-header :trace="trace" />
+    <tracing-chart
       :trace="trace"
       :selected-span-id="selectedSpan && selectedSpan.span_id"
       @span-selected="onToggleDrawer"
     />
 
-    <tracing-details-drawer :span="selectedSpan" :open="isDrawerOpen" @close="closeDrawer" />
+    <tracing-drawer :span="selectedSpan" :open="isDrawerOpen" @close="closeDrawer" />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_details_drawer.vue b/ee/app/assets/javascripts/tracing/details/tracing_drawer.vue
similarity index 100%
rename from ee/app/assets/javascripts/tracing/components/tracing_details_drawer.vue
rename to ee/app/assets/javascripts/tracing/details/tracing_drawer.vue
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_details_header.vue b/ee/app/assets/javascripts/tracing/details/tracing_header.vue
similarity index 97%
rename from ee/app/assets/javascripts/tracing/components/tracing_details_header.vue
rename to ee/app/assets/javascripts/tracing/details/tracing_header.vue
index f00ce0b7bf61fc9029997a47c040f2bb214a448c..4a442637bb8ea4f60e15e92fe8b6090266fa309d 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_details_header.vue
+++ b/ee/app/assets/javascripts/tracing/details/tracing_header.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlCard } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
-import { formatTraceDuration } from './trace_utils';
+import { formatTraceDuration } from '../trace_utils';
 
 const CARD_CLASS = 'gl-mr-7 gl-w-15p gl-min-w-fit-content';
 const HEADER_CLASS = 'gl-p-2 gl-font-weight-bold gl--flex-center';
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_details_spans_chart.vue b/ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
similarity index 97%
rename from ee/app/assets/javascripts/tracing/components/tracing_details_spans_chart.vue
rename to ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
index 94d955aca20f56df043a140a3c46935faf5b1086..b52d9d85237dec0444e2bd39f34024e60c4feef0 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_details_spans_chart.vue
+++ b/ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
@@ -2,10 +2,10 @@
 import { GlButton, GlTruncate } from '@gitlab/ui';
 import { clamp } from 'lodash';
 import { s__ } from '~/locale';
-import { formatDurationMs } from './trace_utils';
+import { formatDurationMs } from '../trace_utils';
 
 export default {
-  name: 'TracingDetailsSpansChart',
+  name: 'TracingSpansChart',
   components: {
     GlButton,
     GlTruncate,
@@ -173,7 +173,7 @@ export default {
         </div>
       </div>
 
-      <tracing-details-spans-chart
+      <tracing-spans-chart
         v-show="isExpanded(index)"
         :spans="span.children"
         :depth="depth + 1"
diff --git a/ee/app/assets/javascripts/tracing/details_index.vue b/ee/app/assets/javascripts/tracing/details_index.vue
index faa488dca257b805d80f5c43a9d96e67d15efdc6..1096e59299e1af7ddcd7e15176535e314193f1e4 100644
--- a/ee/app/assets/javascripts/tracing/details_index.vue
+++ b/ee/app/assets/javascripts/tracing/details_index.vue
@@ -1,6 +1,6 @@
 <script>
 import ObservabilityContainer from '~/observability/components/observability_container.vue';
-import TracingDetails from './components/tracing_details.vue';
+import TracingDetails from './details/tracing_details.vue';
 
 export default {
   components: {
diff --git a/ee/app/assets/javascripts/tracing/components/attribute_search_token.vue b/ee/app/assets/javascripts/tracing/list/filter_bar/attribute_search_token.vue
similarity index 100%
rename from ee/app/assets/javascripts/tracing/components/attribute_search_token.vue
rename to ee/app/assets/javascripts/tracing/list/filter_bar/attribute_search_token.vue
diff --git a/ee/app/assets/javascripts/tracing/filters.js b/ee/app/assets/javascripts/tracing/list/filter_bar/filters.js
similarity index 100%
rename from ee/app/assets/javascripts/tracing/filters.js
rename to ee/app/assets/javascripts/tracing/list/filter_bar/filters.js
diff --git a/ee/app/assets/javascripts/tracing/components/operation_search_token.vue b/ee/app/assets/javascripts/tracing/list/filter_bar/operation_search_token.vue
similarity index 97%
rename from ee/app/assets/javascripts/tracing/components/operation_search_token.vue
rename to ee/app/assets/javascripts/tracing/list/filter_bar/operation_search_token.vue
index 18eb2becf53b51a5c925450d9c697ccfd02575f4..995784341553a3af2a024f891530b3fe31eedb76 100644
--- a/ee/app/assets/javascripts/tracing/components/operation_search_token.vue
+++ b/ee/app/assets/javascripts/tracing/list/filter_bar/operation_search_token.vue
@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
-import { SERVICE_NAME_FILTER_TOKEN_TYPE } from '../filters';
+import { SERVICE_NAME_FILTER_TOKEN_TYPE } from './filters';
 
 export default {
   components: {
diff --git a/ee/app/assets/javascripts/tracing/components/service_search_token.vue b/ee/app/assets/javascripts/tracing/list/filter_bar/service_search_token.vue
similarity index 100%
rename from ee/app/assets/javascripts/tracing/components/service_search_token.vue
rename to ee/app/assets/javascripts/tracing/list/filter_bar/service_search_token.vue
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_list_filtered_search.vue b/ee/app/assets/javascripts/tracing/list/filter_bar/tracing_filtered_search.vue
similarity index 99%
rename from ee/app/assets/javascripts/tracing/components/tracing_list_filtered_search.vue
rename to ee/app/assets/javascripts/tracing/list/filter_bar/tracing_filtered_search.vue
index fb77656dd73f4bb80f3a311ee7972f627fa93da0..8fcd7959901333efa4c979735fd4fac2163bc67b 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_list_filtered_search.vue
+++ b/ee/app/assets/javascripts/tracing/list/filter_bar/tracing_filtered_search.vue
@@ -14,7 +14,7 @@ import {
   TRACE_ID_FILTER_TOKEN_TYPE,
   DURATION_MS_FILTER_TOKEN_TYPE,
   ATTRIBUTE_FILTER_TOKEN_TYPE,
-} from '../filters';
+} from './filters';
 import ServiceToken from './service_search_token.vue';
 import OperationToken from './operation_search_token.vue';
 import AttributeSearchToken from './attribute_search_token.vue';
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_list.vue b/ee/app/assets/javascripts/tracing/list/tracing_list.vue
similarity index 96%
rename from ee/app/assets/javascripts/tracing/components/tracing_list.vue
rename to ee/app/assets/javascripts/tracing/list/tracing_list.vue
index e4b2139476da40598d1e7528d8a44f9c40469f3f..141a1c70ef56f5a9393e39fdcb6a4b37e4680696 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_list.vue
+++ b/ee/app/assets/javascripts/tracing/list/tracing_list.vue
@@ -8,16 +8,16 @@ import UrlSync from '~/vue_shared/components/url_sync.vue';
 import { contentTop, isMetaClick } from '~/lib/utils/common_utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { DEFAULT_SORTING_OPTION } from '~/observability/constants';
+import { periodFilterToDate } from '../trace_utils';
 import {
   queryToFilterObj,
   filterObjToQuery,
   filterObjToFilterToken,
   filterTokensToFilterObj,
-} from '../filters';
-import TracingTableList from './tracing_table_list.vue';
-import FilteredSearch from './tracing_list_filtered_search.vue';
+} from './filter_bar/filters';
+import TracingTableList from './tracing_table.vue';
+import FilteredSearch from './filter_bar/tracing_filtered_search.vue';
 import ScatterChart from './tracing_scatter_chart.vue';
-import { periodFilterToDate } from './trace_utils';
 
 const PAGE_SIZE = 500;
 const CHART_HEIGHT = 300;
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_scatter_chart.vue b/ee/app/assets/javascripts/tracing/list/tracing_scatter_chart.vue
similarity index 98%
rename from ee/app/assets/javascripts/tracing/components/tracing_scatter_chart.vue
rename to ee/app/assets/javascripts/tracing/list/tracing_scatter_chart.vue
index 18b51925e910133f56a03c5abe7da94cf9672a2c..2f30b8214482ed6d754d0a6b5d8d8760cf4cd6ca 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_scatter_chart.vue
+++ b/ee/app/assets/javascripts/tracing/list/tracing_scatter_chart.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDiscreteScatterChart } from '@gitlab/ui/dist/charts';
 import { s__, __ } from '~/locale';
-import { durationNanoToMs } from './trace_utils';
+import { durationNanoToMs } from '../trace_utils';
 
 export default {
   components: {
diff --git a/ee/app/assets/javascripts/tracing/components/tracing_table_list.vue b/ee/app/assets/javascripts/tracing/list/tracing_table.vue
similarity index 96%
rename from ee/app/assets/javascripts/tracing/components/tracing_table_list.vue
rename to ee/app/assets/javascripts/tracing/list/tracing_table.vue
index c92cb02dbef2a490733db43f04c632319be9c7a3..04c39f24cb52c5c94048ebe9a6cba10545df4ea0 100644
--- a/ee/app/assets/javascripts/tracing/components/tracing_table_list.vue
+++ b/ee/app/assets/javascripts/tracing/list/tracing_table.vue
@@ -2,10 +2,10 @@
 import { GlTable, GlTruncate } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
-import { formatTraceDuration } from './trace_utils';
+import { formatTraceDuration } from '../trace_utils';
 
 export default {
-  name: 'TracingTableList',
+  name: 'TracingTable',
   i18n: {
     title: s__('Tracing|Traces'),
     emptyText: __('No results found'),
diff --git a/ee/app/assets/javascripts/tracing/list_index.vue b/ee/app/assets/javascripts/tracing/list_index.vue
index cb496f217e895504cb96e36adce7c638ed73f73b..642683c62e16c03d1df36787ce82708844932535 100644
--- a/ee/app/assets/javascripts/tracing/list_index.vue
+++ b/ee/app/assets/javascripts/tracing/list_index.vue
@@ -1,6 +1,6 @@
 <script>
 import ProvisionedObservabilityContainer from '~/observability/components/provisioned_observability_container.vue';
-import TracingList from './components/tracing_list.vue';
+import TracingList from './list/tracing_list.vue';
 
 export default {
   components: {
diff --git a/ee/app/assets/javascripts/tracing/components/trace_utils.js b/ee/app/assets/javascripts/tracing/trace_utils.js
similarity index 100%
rename from ee/app/assets/javascripts/tracing/components/trace_utils.js
rename to ee/app/assets/javascripts/tracing/trace_utils.js
diff --git a/ee/spec/frontend/tracing/components/tracing_details_chart_spec.js b/ee/spec/frontend/tracing/details/tracing_chart_spec.js
similarity index 86%
rename from ee/spec/frontend/tracing/components/tracing_details_chart_spec.js
rename to ee/spec/frontend/tracing/details/tracing_chart_spec.js
index a41ce08ead4a4e93c47adb4008d6b30832b9151b..ebda3b53262ee481dfc7dffc93200c4ef40b9e98 100644
--- a/ee/spec/frontend/tracing/components/tracing_details_chart_spec.js
+++ b/ee/spec/frontend/tracing/details/tracing_chart_spec.js
@@ -1,15 +1,15 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingDetailsChart from 'ee/tracing/components/tracing_details_chart.vue';
-import TracingDetailsSpansChart from 'ee/tracing/components/tracing_details_spans_chart.vue';
 import {
   mapTraceToTreeRoot,
   assignColorToServices,
   durationNanoToMs,
-} from 'ee/tracing/components/trace_utils';
+} from 'ee/tracing/trace_utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import TracingChart from 'ee/tracing/details/tracing_chart.vue';
+import TracingDetailsSpansChart from 'ee/tracing/details/tracing_spans_chart.vue';
 
-jest.mock('ee/tracing/components/trace_utils');
+jest.mock('ee/tracing/trace_utils');
 
-describe('TracingDetailsChart', () => {
+describe('TracingChart', () => {
   let wrapper;
 
   const mockTrace = {
@@ -34,7 +34,7 @@ describe('TracingDetailsChart', () => {
   };
 
   const mountComponent = () => {
-    wrapper = shallowMountExtended(TracingDetailsChart, {
+    wrapper = shallowMountExtended(TracingChart, {
       propsData: {
         trace: mockTrace,
         selectedSpanId: 'foo',
diff --git a/ee/spec/frontend/tracing/components/tracing_details_spec.js b/ee/spec/frontend/tracing/details/tracing_details_spec.js
similarity index 86%
rename from ee/spec/frontend/tracing/components/tracing_details_spec.js
rename to ee/spec/frontend/tracing/details/tracing_details_spec.js
index 326161478b4bf77ea32a0cb199c4f36d2768e6a2..23be1fda0fc7bd30dffaa628adf178f5d0ed7e44 100644
--- a/ee/spec/frontend/tracing/components/tracing_details_spec.js
+++ b/ee/spec/frontend/tracing/details/tracing_details_spec.js
@@ -1,13 +1,13 @@
 import { GlLoadingIcon } from '@gitlab/ui';
+import TracingChart from 'ee/tracing/details/tracing_chart.vue';
+import TracingHeader from 'ee/tracing/details/tracing_header.vue';
+import TracingDrawer from 'ee/tracing/details/tracing_drawer.vue';
 import { createMockClient } from 'helpers/mock_observability_client';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingDetails from 'ee/tracing/components/tracing_details.vue';
+import TracingDetails from 'ee/tracing/details/tracing_details.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
 import { visitUrl, isSafeURL } from '~/lib/utils/url_utility';
-import TracingDetailsChart from 'ee/tracing/components/tracing_details_chart.vue';
-import TracingDetailsHeader from 'ee/tracing/components/tracing_details_header.vue';
-import TracingDetailsDrawer from 'ee/tracing/components/tracing_details_drawer.vue';
 
 jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
@@ -22,9 +22,9 @@ describe('TracingDetails', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
   const findTraceDetails = () => wrapper.findComponentByTestId('trace-details');
-  const findTraceDetailsChart = () => wrapper.findComponent(TracingDetailsChart);
+  const findTraceChart = () => wrapper.findComponent(TracingChart);
 
-  const findDrawer = () => wrapper.findComponent(TracingDetailsDrawer);
+  const findDrawer = () => wrapper.findComponent(TracingDrawer);
   const isDrawerOpen = () => findDrawer().props('open');
   const getDrawerSpan = () => findDrawer().props('span');
 
@@ -77,8 +77,8 @@ describe('TracingDetails', () => {
 
     it('renders the correct components', () => {
       const details = findTraceDetails();
-      expect(findTraceDetailsChart().exists()).toBe(true);
-      expect(details.findComponent(TracingDetailsHeader).exists()).toBe(true);
+      expect(findTraceChart().exists()).toBe(true);
+      expect(details.findComponent(TracingHeader).exists()).toBe(true);
     });
 
     describe('details drawer', () => {
@@ -89,7 +89,7 @@ describe('TracingDetails', () => {
       });
 
       const selectSpan = (spanId = 'span-1') =>
-        findTraceDetailsChart().vm.$emit('span-selected', { spanId });
+        findTraceChart().vm.$emit('span-selected', { spanId });
 
       it('opens the drawer and set the selected span, upond selection', async () => {
         await selectSpan();
@@ -129,9 +129,9 @@ describe('TracingDetails', () => {
       });
 
       it('set the selected-span-in on the chart component', async () => {
-        expect(findTraceDetailsChart().props('selectedSpanId')).toBeNull();
+        expect(findTraceChart().props('selectedSpanId')).toBeNull();
         await selectSpan();
-        expect(findTraceDetailsChart().props('selectedSpanId')).toBe('span-1');
+        expect(findTraceChart().props('selectedSpanId')).toBe('span-1');
       });
     });
   });
diff --git a/ee/spec/frontend/tracing/components/tracing_details_drawer_spec.js b/ee/spec/frontend/tracing/details/tracing_drawer_spec.js
similarity index 95%
rename from ee/spec/frontend/tracing/components/tracing_details_drawer_spec.js
rename to ee/spec/frontend/tracing/details/tracing_drawer_spec.js
index cc17be5210a768368e14dc1a793756a14267196e..86b1caf21c41cffe30ca36d476b88d730e3e78fa 100644
--- a/ee/spec/frontend/tracing/components/tracing_details_drawer_spec.js
+++ b/ee/spec/frontend/tracing/details/tracing_drawer_spec.js
@@ -1,12 +1,12 @@
 import { GlDrawer } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingDetailsDrawer from 'ee/tracing/components/tracing_details_drawer.vue';
+import TracingDrawer from 'ee/tracing/details/tracing_drawer.vue';
 import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 
 jest.mock('~/lib/utils/dom_utils');
 
-describe('TracingDetailsDrawer', () => {
+describe('TracingDrawer', () => {
   let wrapper;
 
   const findDrawer = () => wrapper.findComponent(GlDrawer);
@@ -28,7 +28,7 @@ describe('TracingDetailsDrawer', () => {
   };
 
   const mountComponent = ({ open = true, span = mockSpan } = {}) => {
-    wrapper = shallowMountExtended(TracingDetailsDrawer, {
+    wrapper = shallowMountExtended(TracingDrawer, {
       propsData: {
         span,
         open,
diff --git a/ee/spec/frontend/tracing/components/tracing_details_header_spec.js b/ee/spec/frontend/tracing/details/tracing_header_spec.js
similarity index 84%
rename from ee/spec/frontend/tracing/components/tracing_details_header_spec.js
rename to ee/spec/frontend/tracing/details/tracing_header_spec.js
index 67dc718656992cee75c7d134cf4b8d67be947fe3..369ac7af36845b98772d8d94579b8a69df5e0c5a 100644
--- a/ee/spec/frontend/tracing/components/tracing_details_header_spec.js
+++ b/ee/spec/frontend/tracing/details/tracing_header_spec.js
@@ -1,11 +1,11 @@
+import TracingHeader from 'ee/tracing/details/tracing_header.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingDetailsHeader from 'ee/tracing/components/tracing_details_header.vue';
 
-describe('TracingDetailsHeader', () => {
+describe('TracingHeader', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallowMountExtended(TracingDetailsHeader, {
+    wrapper = shallowMountExtended(TracingHeader, {
       propsData: {
         trace: {
           service_name: 'Service',
diff --git a/ee/spec/frontend/tracing/components/tracing_details_span_chart_spec.js b/ee/spec/frontend/tracing/details/tracing_span_chart_spec.js
similarity index 93%
rename from ee/spec/frontend/tracing/components/tracing_details_span_chart_spec.js
rename to ee/spec/frontend/tracing/details/tracing_span_chart_spec.js
index 24ddf42d9ed62a365e78b95d9c830fde0e7f13d1..4bca0098498fc0c3ecdff5d51d4280bb57d8db22 100644
--- a/ee/spec/frontend/tracing/components/tracing_details_span_chart_spec.js
+++ b/ee/spec/frontend/tracing/details/tracing_span_chart_spec.js
@@ -1,9 +1,9 @@
 import { GlButton, GlTruncate } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import TracingSpansChart from 'ee/tracing/details/tracing_spans_chart.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingDetailsSpansChart from 'ee/tracing/components/tracing_details_spans_chart.vue';
 
-describe('TracingDetailsSpansChart', () => {
+describe('TracingSpansChart', () => {
   const mockSpans = [
     {
       operation: 'operation-1',
@@ -62,13 +62,13 @@ describe('TracingDetailsSpansChart', () => {
     getSpan(index, depth).find('[data-testid="span-duration-bar"]');
 
   const getSpanChildren = (index, depth = 0) =>
-    getSpanWrapper(index, depth).findComponent(TracingDetailsSpansChart);
+    getSpanWrapper(index, depth).findComponent(TracingSpansChart);
 
   const toggleExpandButton = (index) =>
     getToggleButton(index).vm.$emit('click', { stopPropagation: jest.fn() });
 
   beforeEach(() => {
-    wrapper = shallowMountExtended(TracingDetailsSpansChart, {
+    wrapper = shallowMountExtended(TracingSpansChart, {
       propsData: {
         ...mockProps,
       },
@@ -137,7 +137,7 @@ describe('TracingDetailsSpansChart', () => {
 
   describe('span details', () => {
     it('renders the spans details with left padding based on depth', () => {
-      wrapper = shallowMountExtended(TracingDetailsSpansChart, {
+      wrapper = shallowMountExtended(TracingSpansChart, {
         propsData: {
           ...mockProps,
           depth: 2,
@@ -178,7 +178,7 @@ describe('TracingDetailsSpansChart', () => {
       [{ start_ms: 80, duration_ms: 40 }, '40%', '60%'],
       [{ start_ms: -10, duration_ms: 40 }, '40%', '0%'],
     ])('caps the layout width and margin', (spanAttrs, expectedWidth, expectedMargin) => {
-      wrapper = shallowMountExtended(TracingDetailsSpansChart, {
+      wrapper = shallowMountExtended(TracingSpansChart, {
         propsData: {
           serviceToColor: {
             'service-1': 'blue-500',
diff --git a/ee/spec/frontend/tracing/details_index_spec.js b/ee/spec/frontend/tracing/details_index_spec.js
index 826cb70ae43ff63e634bb6f94cf844c356791390..134d3414e01a808525c125eb05902034321a0840 100644
--- a/ee/spec/frontend/tracing/details_index_spec.js
+++ b/ee/spec/frontend/tracing/details_index_spec.js
@@ -1,6 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import DetailsIndex from 'ee/tracing/details_index.vue';
-import TracingDetails from 'ee/tracing/components/tracing_details.vue';
+import TracingDetails from 'ee/tracing/details/tracing_details.vue';
 import ObservabilityContainer from '~/observability/components/observability_container.vue';
 
 describe('DetailsIndex', () => {
diff --git a/ee/spec/frontend/tracing/components/attribute_search_token_spec.js b/ee/spec/frontend/tracing/list/filter_bar/attribute_search_token_spec.js
similarity index 91%
rename from ee/spec/frontend/tracing/components/attribute_search_token_spec.js
rename to ee/spec/frontend/tracing/list/filter_bar/attribute_search_token_spec.js
index 685805040f20d658bf52ca765a1b6de14f66c746..3ddaee0e95313d1feb8522b082c831e8226aa986 100644
--- a/ee/spec/frontend/tracing/components/attribute_search_token_spec.js
+++ b/ee/spec/frontend/tracing/list/filter_bar/attribute_search_token_spec.js
@@ -1,4 +1,4 @@
-import AttributeSearchToken from 'ee/tracing/components/attribute_search_token.vue';
+import AttributeSearchToken from 'ee/tracing/list/filter_bar/attribute_search_token.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
diff --git a/ee/spec/frontend/tracing/filters_spec.js b/ee/spec/frontend/tracing/list/filter_bar/filters_spec.js
similarity index 98%
rename from ee/spec/frontend/tracing/filters_spec.js
rename to ee/spec/frontend/tracing/list/filter_bar/filters_spec.js
index 148a16058289bc7e1fc706051d3c3c5a22fac80e..c42d1ea175fac496c0f0cc752c9db655d6f7dc9e 100644
--- a/ee/spec/frontend/tracing/filters_spec.js
+++ b/ee/spec/frontend/tracing/list/filter_bar/filters_spec.js
@@ -3,7 +3,7 @@ import {
   filterObjToQuery,
   filterObjToFilterToken,
   filterTokensToFilterObj,
-} from 'ee/tracing/filters';
+} from 'ee/tracing/list/filter_bar/filters';
 
 describe('utils', () => {
   const query =
diff --git a/ee/spec/frontend/tracing/components/operation_search_token_spec.js b/ee/spec/frontend/tracing/list/filter_bar/operation_search_token_spec.js
similarity index 98%
rename from ee/spec/frontend/tracing/components/operation_search_token_spec.js
rename to ee/spec/frontend/tracing/list/filter_bar/operation_search_token_spec.js
index 92855db7e95adefd486b1f1eb3293e7a39947f9a..8dd82641f3a5c6950a5f049f1660b0172eb7551a 100644
--- a/ee/spec/frontend/tracing/components/operation_search_token_spec.js
+++ b/ee/spec/frontend/tracing/list/filter_bar/operation_search_token_spec.js
@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { GlDropdownText } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import OperationServiceToken from 'ee/tracing/components/operation_search_token.vue';
+import OperationServiceToken from 'ee/tracing/list/filter_bar/operation_search_token.vue';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
diff --git a/ee/spec/frontend/tracing/components/service_search_token_spec.js b/ee/spec/frontend/tracing/list/filter_bar/service_search_token_spec.js
similarity index 97%
rename from ee/spec/frontend/tracing/components/service_search_token_spec.js
rename to ee/spec/frontend/tracing/list/filter_bar/service_search_token_spec.js
index 74f09b4b85ca7d288d9c2264a46495ba4b5fea32..659d6b2e9498aa17535f67a6d998f7945d924cda 100644
--- a/ee/spec/frontend/tracing/components/service_search_token_spec.js
+++ b/ee/spec/frontend/tracing/list/filter_bar/service_search_token_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ServiceSearchToken from 'ee/tracing/components/service_search_token.vue';
+import ServiceSearchToken from 'ee/tracing/list/filter_bar/service_search_token.vue';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
diff --git a/ee/spec/frontend/tracing/components/tracing_list_filtered_search_spec.js b/ee/spec/frontend/tracing/list/filter_bar/tracing_filtered_search_spec.js
similarity index 88%
rename from ee/spec/frontend/tracing/components/tracing_list_filtered_search_spec.js
rename to ee/spec/frontend/tracing/list/filter_bar/tracing_filtered_search_spec.js
index 72e253557cd7933dda599c11ac9b2c1c451df60d..ae640e575bb9db1e43d3a1b3d5b9bb5bf5f7fd20 100644
--- a/ee/spec/frontend/tracing/components/tracing_list_filtered_search_spec.js
+++ b/ee/spec/frontend/tracing/list/filter_bar/tracing_filtered_search_spec.js
@@ -1,9 +1,9 @@
+import OperationToken from 'ee/tracing/list/filter_bar/operation_search_token.vue';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import OperationToken from 'ee/tracing/components/operation_search_token.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ServiceToken from 'ee/tracing/components/service_search_token.vue';
-import AttributeSearchToken from 'ee/tracing/components/attribute_search_token.vue';
-import TracingListFilteredSearch from 'ee/tracing/components/tracing_list_filtered_search.vue';
+import ServiceToken from 'ee/tracing/list/filter_bar/service_search_token.vue';
+import AttributeSearchToken from 'ee/tracing/list/filter_bar/attribute_search_token.vue';
+import TracingListFilteredSearch from 'ee/tracing/list/filter_bar/tracing_filtered_search.vue';
 import { createMockClient } from 'helpers/mock_observability_client';
 
 describe('TracingListFilteredSearch', () => {
diff --git a/ee/spec/frontend/tracing/components/tracing_list_spec.js b/ee/spec/frontend/tracing/list/tracing_list_spec.js
similarity index 98%
rename from ee/spec/frontend/tracing/components/tracing_list_spec.js
rename to ee/spec/frontend/tracing/list/tracing_list_spec.js
index 67fec72c50b011dab2df774acecc9d3c72d4b182..3417783d61df2cad44d0f34ab78762efcabe1e68 100644
--- a/ee/spec/frontend/tracing/components/tracing_list_spec.js
+++ b/ee/spec/frontend/tracing/list/tracing_list_spec.js
@@ -1,17 +1,17 @@
 import { GlLoadingIcon, GlInfiniteScroll } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import { filterObjToFilterToken } from 'ee/tracing/list/filter_bar/filters';
+import FilteredSearch from 'ee/tracing/list/filter_bar/tracing_filtered_search.vue';
+import ScatterChart from 'ee/tracing/list/tracing_scatter_chart.vue';
+import * as traceUtils from 'ee/tracing/trace_utils';
+import TracingTableList from 'ee/tracing/list/tracing_table.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingList from 'ee/tracing/components/tracing_list.vue';
-import TracingTableList from 'ee/tracing/components/tracing_table_list.vue';
+import TracingList from 'ee/tracing/list/tracing_list.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
 import * as urlUtility from '~/lib/utils/url_utility';
-import { filterObjToFilterToken } from 'ee/tracing/filters';
-import FilteredSearch from 'ee/tracing/components/tracing_list_filtered_search.vue';
-import ScatterChart from 'ee/tracing/components/tracing_scatter_chart.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import * as traceUtils from 'ee/tracing/components/trace_utils';
 import { createMockClient } from 'helpers/mock_observability_client';
 
 jest.mock('~/alert');
diff --git a/ee/spec/frontend/tracing/components/tracing_scatter_chart_spec.js b/ee/spec/frontend/tracing/list/tracing_scatter_chart_spec.js
similarity index 97%
rename from ee/spec/frontend/tracing/components/tracing_scatter_chart_spec.js
rename to ee/spec/frontend/tracing/list/tracing_scatter_chart_spec.js
index 623cb5ec32877a22b2c10e1076e711b08f7e0d0b..20958c3c1342f06256f8bd332aef2a7f94c414fa 100644
--- a/ee/spec/frontend/tracing/components/tracing_scatter_chart_spec.js
+++ b/ee/spec/frontend/tracing/list/tracing_scatter_chart_spec.js
@@ -1,6 +1,6 @@
 import { GlDiscreteScatterChart } from '@gitlab/ui/dist/charts';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TracingScatterChart from 'ee/tracing/components/tracing_scatter_chart.vue';
+import TracingScatterChart from 'ee/tracing/list/tracing_scatter_chart.vue';
 
 describe('TracingScatterChart', () => {
   let wrapper;
diff --git a/ee/spec/frontend/tracing/components/tracing_table_list_spec.js b/ee/spec/frontend/tracing/list/tracing_table_spec.js
similarity index 94%
rename from ee/spec/frontend/tracing/components/tracing_table_list_spec.js
rename to ee/spec/frontend/tracing/list/tracing_table_spec.js
index 6bfc30418e10df7c91bf145b21b5834b9e5f5ae9..b03f4e3306b0c2c95e9cb9dd61aa835c2ff86908 100644
--- a/ee/spec/frontend/tracing/components/tracing_table_list_spec.js
+++ b/ee/spec/frontend/tracing/list/tracing_table_spec.js
@@ -1,9 +1,9 @@
 import { nextTick } from 'vue';
 import { GlTable } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import TracingTableList from 'ee/tracing/components/tracing_table_list.vue';
+import TracingTable from 'ee/tracing/list/tracing_table.vue';
 
-describe('TracingTableList', () => {
+describe('TracingTable', () => {
   let wrapper;
   const mockTraces = [
     {
@@ -40,7 +40,7 @@ describe('TracingTableList', () => {
   ];
 
   const mountComponent = ({ traces = mockTraces, highlightedTraceId } = {}) => {
-    wrapper = mountExtended(TracingTableList, {
+    wrapper = mountExtended(TracingTable, {
       propsData: {
         traces,
         highlightedTraceId,
diff --git a/ee/spec/frontend/tracing/list_index_spec.js b/ee/spec/frontend/tracing/list_index_spec.js
index db920dd024bf86af38cb6dfdfc41b1fbdad11d61..52a9d66128468a6e851ea96f72e52d0afb81e519 100644
--- a/ee/spec/frontend/tracing/list_index_spec.js
+++ b/ee/spec/frontend/tracing/list_index_spec.js
@@ -1,6 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ListIndex from 'ee/tracing/list_index.vue';
-import TracingList from 'ee/tracing/components/tracing_list.vue';
+import TracingList from 'ee/tracing/list/tracing_list.vue';
 import ProvisionedObservabilityContainer from '~/observability/components/provisioned_observability_container.vue';
 
 describe('ListIndex', () => {
diff --git a/ee/spec/frontend/tracing/components/trace_utils_spec.js b/ee/spec/frontend/tracing/trace_utils_spec.js
similarity index 99%
rename from ee/spec/frontend/tracing/components/trace_utils_spec.js
rename to ee/spec/frontend/tracing/trace_utils_spec.js
index 089f33c2b9cc3fa1d36c0a9d8f2fca872f599e7b..c061e53b5c3ec0089da79684a977a10146c4c266 100644
--- a/ee/spec/frontend/tracing/components/trace_utils_spec.js
+++ b/ee/spec/frontend/tracing/trace_utils_spec.js
@@ -6,7 +6,7 @@ import {
   formatTraceDuration,
   assignColorToServices,
   periodFilterToDate,
-} from 'ee/tracing/components/trace_utils';
+} from 'ee/tracing/trace_utils';
 
 describe('trace_utils', () => {
   describe('durationNanoToMs', () => {