analytics(trace-eap-waterfall): Adding analytics for having profile and log details (#97423)

- Only triggered if either exists
- Had to push providers a level higher to collect props for the
analytics event
- No change in functionality

---------

Co-authored-by: Abdullah Khan <[email protected]>

Author: Abdkhan14

static/app/utils/analytics/tracingEventMap.tsx

@@ -100,6 +100,10 @@ export type TracingEventParameters = {
   'trace.quality.quota_exceeded.learn_more_clicked': {
     traceType: string;
   };
+  'trace.trace_drawer_details.eap_span_has_details': {
+    has_logs_details: boolean;
+    has_profile_details: boolean;
+  };
   'trace.trace_drawer_explore_search': {
     key: string;
     kind: TraceDrawerActionKind;
@@ -222,6 +226,7 @@ export const tracingEventMap: Record<TracingEventKey, string | null> = {
   'trace.trace_layout.change': 'Changed Trace Layout',
   'trace.trace_layout.drawer_minimize': 'Minimized Trace Drawer',
   'trace.trace_drawer_explore_search': 'Searched Trace Explorer',
+  'trace.trace_drawer_details.eap_span_has_details': 'EAP Span has Details',
   'trace.tracing_onboarding': 'Tracing Onboarding UI',
   'trace.tracing_onboarding_platform_docs_viewed':
     'Viewed Platform Docs for Onboarding UI',

static/app/views/performance/newTraceDetails/traceAnalytics.tsx

@@ -148,6 +148,17 @@ const trackSearchFocus = (organization: Organization) =>
     organization,
   });
 
+const trackEAPSpanHasDetails = (
+  organization: Organization,
+  hasProfileDetails: boolean,
+  hasLogsDetails: boolean
+) =>
+  trackAnalytics('trace.trace_drawer_details.eap_span_has_details', {
+    organization,
+    has_profile_details: hasProfileDetails,
+    has_logs_details: hasLogsDetails,
+  });
+
 const trackResetZoom = (organization: Organization) =>
   trackAnalytics('trace.trace_layout.reset_zoom', {
     organization,
@@ -318,6 +329,8 @@ const traceAnalytics = {
   // Trace Preferences
   trackAutogroupingPreferenceChange,
   trackMissingInstrumentationPreferenceChange,
+  // Trace Drawer Details
+  trackEAPSpanHasDetails,
 };
 
 export {traceAnalytics};

static/app/views/performance/newTraceDetails/traceDrawer/details/span/components/logDetails.tsx

@@ -0,0 +1,34 @@
+import {useRef} from 'react';
+
+import {t} from 'sentry/locale';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useLogsPageDataQueryResult} from 'sentry/views/explore/contexts/logs/logsPageData';
+import {LogsInfiniteTable} from 'sentry/views/explore/logs/tables/logsInfiniteTable';
+import {LogsTable} from 'sentry/views/explore/logs/tables/logsTable';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
+
+export function LogDetails() {
+  const logsQueryResult = useLogsPageDataQueryResult();
+  const hasInfiniteFeature = useOrganization().features.includes(
+    'ourlogs-infinite-scroll'
+  );
+  const scrollContainer = useRef<HTMLDivElement>(null);
+  if (!logsQueryResult?.data?.length) {
+    return null;
+  }
+  return (
+    <FoldSection
+      ref={scrollContainer}
+      sectionKey={SectionKey.LOGS}
+      title={t('Logs')}
+      disableCollapsePersistence
+    >
+      {hasInfiniteFeature ? (
+        <LogsInfiniteTable embedded scrollContainer={scrollContainer} />
+      ) : (
+        <LogsTable embedded />
+      )}
+    </FoldSection>
+  );
+}

static/app/views/performance/newTraceDetails/traceDrawer/details/span/components/profileDetails.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+
+import {
+  SpanProfileDetails,
+  type SpanProfileDetailsProps,
+  useSpanProfileDetails,
+} from 'sentry/components/events/interfaces/spans/spanProfileDetails';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {EventTransaction} from 'sentry/types/event';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
+import {defined} from 'sentry/utils';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
+
+export function ProfileDetails({
+  organization,
+  project,
+  event,
+  span,
+}: {
+  event: Readonly<EventTransaction>;
+  organization: Organization;
+  project: Project | undefined;
+  span: Readonly<SpanProfileDetailsProps['span']>;
+}) {
+  const {profile, frames} = useSpanProfileDetails(organization, project, event, span);
+
+  if (!defined(profile) || frames.length === 0) {
+    return null;
+  }
+
+  return (
+    <InterimSection
+      title={t('Profile')}
+      type="span_profile_details"
+      disableCollapsePersistence
+    >
+      <EmbededContentWrapper>
+        <SpanProfileDetails span={span} event={event} />
+      </EmbededContentWrapper>
+    </InterimSection>
+  );
+}
+
+const EmbededContentWrapper = styled('div')`
+  margin-top: ${space(0.5)};
+`;