Hide the widget when a metric does not have related traces

ee/app/assets/javascripts/metrics/details/metrics_details.vue

@@ -144,6 +144,9 @@ export default {
         createIssueUrl: this.createIssueUrl,
       });
     },
+    metricHasRelatedTraces() {
+      return this.metricData?.some(({ values }) => values.some((value) => value[2]?.length > 0));
+    },
   },
   created() {
     this.validateAndFetch();
@@ -317,6 +320,7 @@ export default {
             />
 
             <related-traces
+              v-if="metricHasRelatedTraces"
               class="gl-mb-5 gl-ml-11"
               :data-points="selectedDatapoints"
               :tracing-index-url="tracingIndexUrl"

ee/spec/frontend/metrics/details/metrics_details_spec.js

@@ -128,7 +128,7 @@ describe('MetricsDetails', () => {
         env: 'production',
       },
       values: [
-        [1700118610000, 0.25595267476015443],
+        [1700118610000, 0.25595267476015443, ['trace-1', 'trace-2']],
         [1700118660000, 0.1881374588830907],
         [1700118720000, 0.28915416028993485],
       ],
@@ -593,6 +593,23 @@ describe('MetricsDetails', () => {
     });
   });
 
+  describe('when the metric has no related traces', () => {
+    beforeEach(async () => {
+      observabilityClientMock.fetchMetric.mockResolvedValue([
+        {
+          ...mockMetricData[0],
+          values: [[1700118660000, 0.1881374588830907]],
+        },
+      ]);
+
+      await mountComponent();
+    });
+
+    it('does not render the related traces component', () => {
+      expect(findRelatedTraces().exists()).toBe(false);
+    });
+  });
+
   describe('with no data', () => {
     beforeEach(async () => {
       observabilityClientMock.fetchMetric.mockResolvedValue([]);