feat(new-trace): Adding direct routing to traceview from areas using … …hard coded paths to event details. (#69594)

Currently clicking the 3 dots does nothing:
<img width="625" alt="Screenshot 2024-04-24 at 1 43 00 PM"
src="https://github.com/getsentry/sentry/assets/60121741/c1066f92-6611-4952-b16d-35d0d386811f">

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/components/events/eventCustomPerformanceMetrics.tsx

@@ -19,6 +19,8 @@ import {
 import {isCustomMeasurement} from 'sentry/views/dashboards/utils';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 
+import {Tooltip} from '../tooltip';
+
 export enum EventDetailPageSource {
   PERFORMANCE = 'performance',
   DISCOVER = 'discover',
@@ -248,7 +250,9 @@ export function TraceEventCustomPerformanceMetric({
   }
   return (
     <TraceStyledPanel>
-      <div>{name}</div>
+      <Tooltip title={name} showOnlyOnOverflow>
+        <StyledMeasurementsName>{name}</StyledMeasurementsName>
+      </Tooltip>
       <div>{rendered}</div>
       <div>
         <StyledDropdownMenuControl
@@ -330,3 +334,8 @@ const StyledPanel = styled(Panel)`
 const StyledDropdownMenuControl = styled(DropdownMenu)`
   margin-left: auto;
 `;
+
+const StyledMeasurementsName = styled('div')`
+  max-width: 200px;
+  ${p => p.theme.overflowEllipsis};
+`;

static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/table.tsx

@@ -74,7 +74,7 @@ function CustomPerformanceMetrics({event, location, organization}) {
   return (
     <tr>
       <td className="key">{t('Measurements')}</td>
-      <td className="value">
+      <MeasurementsTd className="value">
         <Measurements>
           {measurementNames.map(name => {
             return (
@@ -92,7 +92,7 @@ function CustomPerformanceMetrics({event, location, organization}) {
             );
           })}
         </Measurements>
-      </td>
+      </MeasurementsTd>
     </tr>
   );
 }
@@ -280,3 +280,7 @@ const Measurements = styled('div')`
   gap: ${space(1)};
   padding-top: 10px;
 `;
+
+const MeasurementsTd = styled('td')`
+  overflow: visible !important;
+`;