ref(stack-trace-interfaces): Add Native Stack Trace V2 - Part 1 - [INGEST-508]

static/app/components/events/eventDataSection.tsx

@@ -81,7 +81,7 @@ class EventDataSection extends React.Component<Props> {
                   {titleNode}
                 </Permalink>
               ) : (
-                <div>{titleNode}</div>
+                titleNode
               )}
             </Title>
             {type === 'extra' && (
@@ -123,6 +123,7 @@ const StyledIconAnchor = styled(IconAnchor)`
 `;
 
 const Permalink = styled('a')`
+  width: 100%;
   :hover ${StyledIconAnchor} {
     display: block;
     color: ${p => p.theme.gray300};

static/app/components/events/eventEntry.tsx

@@ -12,6 +12,7 @@ import Spans from 'app/components/events/interfaces/spans';
 import Stacktrace from 'app/components/events/interfaces/stacktrace';
 import Template from 'app/components/events/interfaces/template';
 import Threads from 'app/components/events/interfaces/threads';
+import ThreadsV2 from 'app/components/events/interfaces/threadsV2';
 import {Group, Organization, Project, SharedViewOrganization} from 'app/types';
 import {Entry, EntryType, Event, EventTransaction} from 'app/types/event';
 
@@ -36,6 +37,10 @@ function EventEntry({
     !!organization.features?.includes('grouping-stacktrace-ui') &&
     !!(event.metadata.current_tree_label || event.metadata.finest_tree_label);
 
+  const hasNativeStackTraceV2 = !!organization.features?.includes(
+    'native-stack-trace-v2'
+  );
+
   const groupingCurrentLevel = group?.metadata?.current_level;
 
   switch (entry.type) {
@@ -102,7 +107,16 @@ function EventEntry({
     }
     case EntryType.THREADS: {
       const {data, type} = entry;
-      return (
+      return hasNativeStackTraceV2 ? (
+        <ThreadsV2
+          type={type}
+          event={event}
+          data={data}
+          projectId={projectSlug}
+          groupingCurrentLevel={groupingCurrentLevel}
+          hasHierarchicalGrouping={hasHierarchicalGrouping}
+        />
+      ) : (
         <Threads
           type={type}
           event={event}

static/app/components/events/interfaces/threads/threadSelector/index.tsx

@@ -1,3 +1,4 @@
+import {ClassNames} from '@emotion/react';
 import styled from '@emotion/styled';
 import partition from 'lodash/partition';
 
@@ -18,13 +19,21 @@ type Props = {
   threads: Array<Thread>;
   activeThread: Thread;
   event: Event;
+  fullWidth?: boolean;
   exception?: Required<ExceptionType>;
   onChange?: (thread: Thread) => void;
 };
 
 const DROPDOWN_MAX_HEIGHT = 400;
 
-const ThreadSelector = ({threads, event, exception, activeThread, onChange}: Props) => {
+const ThreadSelector = ({
+  threads,
+  event,
+  exception,
+  activeThread,
+  onChange,
+  fullWidth = false,
+}: Props) => {
   const getDropDownItem = (thread: Thread) => {
     const {label, filename, crashedInfo} = filterThreadInfo(event, thread, exception);
     const threadInfo = {label, filename};
@@ -56,35 +65,46 @@ const ThreadSelector = ({threads, event, exception, activeThread, onChange}: Pro
   };
 
   return (
-    <StyledDropdownAutoComplete
-      items={getItems()}
-      onSelect={item => {
-        handleChange(item.thread);
-      }}
-      maxHeight={DROPDOWN_MAX_HEIGHT}
-      searchPlaceholder={t('Filter Threads')}
-      emptyMessage={t('You have no threads')}
-      noResultsMessage={t('No threads found')}
-      menuHeader={<Header />}
-      closeOnSelect
-      emptyHidesInput
-    >
-      {({isOpen, selectedItem}) => (
-        <StyledDropdownButton size="small" isOpen={isOpen} align="left">
-          {selectedItem ? (
-            <SelectedOption
-              id={selectedItem.thread.id}
-              details={selectedItem.threadInfo}
-            />
-          ) : (
-            <SelectedOption
-              id={activeThread.id}
-              details={filterThreadInfo(event, activeThread, exception)}
-            />
+    <ClassNames>
+      {({css}) => (
+        <StyledDropdownAutoComplete
+          items={getItems()}
+          onSelect={item => {
+            handleChange(item.thread);
+          }}
+          maxHeight={DROPDOWN_MAX_HEIGHT}
+          searchPlaceholder={t('Filter Threads')}
+          emptyMessage={t('You have no threads')}
+          noResultsMessage={t('No threads found')}
+          menuHeader={<Header />}
+          rootClassName={
+            fullWidth
+              ? css`
+                  width: 100%;
+                `
+              : undefined
+          }
+          closeOnSelect
+          emptyHidesInput
+        >
+          {({isOpen, selectedItem}) => (
+            <StyledDropdownButton isOpen={isOpen} size="small" align="left">
+              {selectedItem ? (
+                <SelectedOption
+                  id={selectedItem.thread.id}
+                  details={selectedItem.threadInfo}
+                />
+              ) : (
+                <SelectedOption
+                  id={activeThread.id}
+                  details={filterThreadInfo(event, activeThread, exception)}
+                />
+              )}
+            </StyledDropdownButton>
           )}
-        </StyledDropdownButton>
+        </StyledDropdownAutoComplete>
       )}
-    </StyledDropdownAutoComplete>
+    </ClassNames>
   );
 };
 

static/app/components/events/interfaces/threadsV2/index.tsx

@@ -0,0 +1,212 @@
+import {Fragment, useState} from 'react';
+import styled from '@emotion/styled';
+import isNil from 'lodash/isNil';
+
+import {isStacktraceNewestFirst} from 'app/components/events/interfaces/stacktrace';
+import Pill from 'app/components/pill';
+import Pills from 'app/components/pills';
+import {t} from 'app/locale';
+import {PlatformType, Project} from 'app/types';
+import {Event} from 'app/types/event';
+import {Thread} from 'app/types/events';
+import {STACK_TYPE, STACK_VIEW} from 'app/types/stacktrace';
+import {defined} from 'app/utils';
+
+import TraceEventDataSection from '../../traceEventDataSection';
+import {DisplayOption} from '../../traceEventDataSection/displayOptions';
+import Exception from '../crashContent/exception';
+import StackTrace from '../crashContent/stackTrace';
+import NoStackTraceMessage from '../noStackTraceMessage';
+import ThreadSelector from '../threads/threadSelector';
+import findBestThread from '../threads/threadSelector/findBestThread';
+import getThreadException from '../threads/threadSelector/getThreadException';
+import getThreadStacktrace from '../threads/threadSelector/getThreadStacktrace';
+
+type ExceptionProps = React.ComponentProps<typeof Exception>;
+
+type Props = Pick<ExceptionProps, 'groupingCurrentLevel' | 'hasHierarchicalGrouping'> & {
+  event: Event;
+  projectId: Project['id'];
+  type: string;
+  data: {
+    values?: Array<Thread>;
+  };
+};
+
+type State = {
+  stackType: STACK_TYPE;
+  activeThread?: Thread;
+};
+
+function getIntendedStackView(thread: Thread, event: Event) {
+  const exception = getThreadException(event, thread);
+  if (exception) {
+    return !!exception.values.find(value => !!value.stacktrace?.hasSystemFrames)
+      ? STACK_VIEW.APP
+      : STACK_VIEW.FULL;
+  }
+
+  const stacktrace = getThreadStacktrace(false, thread);
+
+  return stacktrace?.hasSystemFrames ? STACK_VIEW.APP : STACK_VIEW.FULL;
+}
+
+function Threads({
+  data,
+  event,
+  projectId,
+  type,
+  hasHierarchicalGrouping,
+  groupingCurrentLevel,
+}: Props) {
+  const [state, setState] = useState<State>(() => {
+    const thread = defined(data.values) ? findBestThread(data.values) : undefined;
+    return {
+      activeThread: thread,
+      stackType: STACK_TYPE.ORIGINAL,
+    };
+  });
+
+  if (!data.values) {
+    return null;
+  }
+
+  const threads = data.values;
+  const {stackType, activeThread} = state;
+
+  const platform = (event.platform ?? 'other') as PlatformType;
+  const hasMoreThanOneThread = threads.length > 1;
+  const exception = getThreadException(event, activeThread);
+  const stackView = activeThread ? getIntendedStackView(activeThread, event) : undefined;
+
+  function renderPills() {
+    const {id, name, current, crashed} = activeThread ?? {};
+
+    if (isNil(id) || !name) {
+      return null;
+    }
+
+    return (
+      <Pills>
+        {!isNil(id) && <Pill name={t('id')} value={String(id)} />}
+        {!!name?.trim() && <Pill name={t('name')} value={name} />}
+        {current !== undefined && <Pill name={t('was active')} value={current} />}
+        {crashed !== undefined && (
+          <Pill name={t('errored')} className={crashed ? 'false' : 'true'}>
+            {crashed ? t('yes') : t('no')}
+          </Pill>
+        )}
+      </Pills>
+    );
+  }
+
+  function renderContent({
+    recentFirst,
+    raw,
+    activeDisplayOptions,
+  }: Parameters<React.ComponentProps<typeof TraceEventDataSection>['children']>[0]) {
+    if (exception) {
+      return (
+        <Exception
+          stackType={stackType}
+          stackView={
+            raw
+              ? STACK_VIEW.RAW
+              : activeDisplayOptions.includes(DisplayOption.FULL_STACK_TRACE)
+              ? STACK_VIEW.FULL
+              : STACK_VIEW.APP
+          }
+          projectId={projectId}
+          newestFirst={recentFirst}
+          event={event}
+          platform={platform}
+          values={exception.values}
+          groupingCurrentLevel={groupingCurrentLevel}
+          hasHierarchicalGrouping={hasHierarchicalGrouping}
+        />
+      );
+    }
+
+    const stacktrace = getThreadStacktrace(
+      stackType !== STACK_TYPE.ORIGINAL,
+      activeThread
+    );
+
+    if (stacktrace) {
+      return (
+        <StackTrace
+          stacktrace={stacktrace}
+          stackView={
+            raw
+              ? STACK_VIEW.RAW
+              : activeDisplayOptions.includes(DisplayOption.FULL_STACK_TRACE)
+              ? STACK_VIEW.FULL
+              : STACK_VIEW.APP
+          }
+          newestFirst={recentFirst}
+          event={event}
+          platform={platform}
+          groupingCurrentLevel={groupingCurrentLevel}
+          hasHierarchicalGrouping={hasHierarchicalGrouping}
+        />
+      );
+    }
+
+    return (
+      <NoStackTraceMessage
+        message={activeThread?.crashed ? t('Thread Errored') : undefined}
+      />
+    );
+  }
+
+  function getTitle() {
+    if (hasMoreThanOneThread && activeThread) {
+      return (
+        <ThreadSelector
+          threads={threads}
+          activeThread={activeThread}
+          event={event}
+          onChange={thread => {
+            setState({
+              ...state,
+              activeThread: thread,
+              stackType: STACK_TYPE.ORIGINAL,
+            });
+          }}
+          exception={exception}
+          fullWidth
+        />
+      );
+    }
+
+    return <Title>{t('Stack Trace')}</Title>;
+  }
+
+  return (
+    <TraceEventDataSection
+      type={type}
+      stackType={stackType}
+      projectId={projectId}
+      eventId={event.id}
+      recentFirst={isStacktraceNewestFirst()}
+      fullStackTrace={stackView === STACK_VIEW.FULL}
+      title={getTitle()}
+      platform={platform}
+      showPermalink={!hasMoreThanOneThread}
+      wrapTitle={false}
+    >
+      {childrenProps => (
+        <Fragment>
+          {renderPills()}
+          {renderContent(childrenProps)}
+        </Fragment>
+      )}
+    </TraceEventDataSection>
+  );
+}
+
+export default Threads;
+
+const Title = styled('h3')`
+  margin-bottom: 0;
+`;