1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/tracing/details_index.vue b/app/assets/javascripts/tracing/details_index.vue
new file mode 100644
index 00000000000..5702a88766c
--- /dev/null
+++ b/app/assets/javascripts/tracing/details_index.vue
@@ -0,0 +1,49 @@
+<script>
+import ObservabilityContainer from '~/observability/components/observability_container.vue';
+import TracingDetails from './components/tracing_details.vue';
+
+export default {
+  components: {
+    ObservabilityContainer,
+    TracingDetails,
+  },
+  props: {
+    traceId: {
+      type: String,
+      required: true,
+    },
+    oauthUrl: {
+      type: String,
+      required: true,
+    },
+    tracingUrl: {
+      type: String,
+      required: true,
+    },
+    provisioningUrl: {
+      type: String,
+      required: true,
+    },
+    tracingIndexUrl: {
+      required: true,
+      type: String,
+    },
+  },
+};
+</script>
+
+<template>
+  <observability-container
+    :oauth-url="oauthUrl"
+    :tracing-url="tracingUrl"
+    :provisioning-url="provisioningUrl"
+  >
+    <template #default="{ observabilityClient }">
+      <tracing-details
+        :trace-id="traceId"
+        :tracing-index-url="tracingIndexUrl"
+        :observability-client="observabilityClient"
+      />
+    </template>
+  </observability-container>
+</template>