feat(suspect-spans): Show more results and add description (#31022)

Increase the number of results on the span tab to 10 and use the span
description instead of the span group.

static/app/utils/performance/suspectSpans/suspectSpansQuery.tsx

@@ -46,7 +46,6 @@ function SuspectSpansQuery(props: Props) {
     <GenericDiscoverQuery<SuspectSpans, SuspectSpansProps>
       route="events-spans-performance"
       getRequestPayload={getSuspectSpanPayload}
-      limit={4}
       {...omit(props, 'children')}
     >
       {({tableData, ...rest}) => {

static/app/utils/performance/suspectSpans/types.tsx

@@ -17,6 +17,7 @@ export type ExampleTransaction = {
 export type SpanExample = {
   op: string;
   group: string;
+  description: string | null;
   examples: ExampleTransaction[];
 };
 

static/app/views/performance/transactionSummary/transactionOverview/suspectSpans.tsx

@@ -60,6 +60,7 @@ export default function SuspectSpans(props: Props) {
       location={location}
       orgSlug={organization.slug}
       eventView={sortedEventView}
+      limit={4}
       perSuspect={0}
       cursor={cursor}
     >

static/app/views/performance/transactionSummary/transactionSpans/content.tsx

@@ -132,6 +132,7 @@ function SpansContent(props: Props) {
               location={location}
               orgSlug={organization.slug}
               eventView={spansView}
+              limit={10}
               perSuspect={0}
               spanOps={defined(spanOp) ? [spanOp] : []}
               spanGroups={defined(spanGroup) ? [spanGroup] : []}

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/content.tsx

@@ -151,13 +151,11 @@ function SpanDetailsContent(props: ContentProps) {
   // There should always be exactly 1 result
   const suspectSpan = suspectSpansResults.suspectSpans[0];
   const examples = spanExamplesResults.examples?.[0]?.examples;
-  const description = examples?.[0]?.description ?? null;
 
   return (
     <Fragment>
       <SpanDetailsHeader
         spanSlug={spanSlug}
-        description={description}
         suspectSpan={suspectSpan}
         totalCount={totalCount}
       />
@@ -176,15 +174,15 @@ function SpanDetailsContent(props: ContentProps) {
 
 type HeaderProps = {
   spanSlug: SpanSlug;
-  description: string | null;
   suspectSpan: SuspectSpan;
   totalCount: number | null;
 };
 
 function SpanDetailsHeader(props: HeaderProps) {
-  const {spanSlug, description, suspectSpan, totalCount} = props;
+  const {spanSlug, suspectSpan, totalCount} = props;
 
   const {
+    description,
     frequency,
     p75ExclusiveTime,
     p95ExclusiveTime,

static/app/views/performance/transactionSummary/transactionSpans/suspectSpansTable.tsx

@@ -44,8 +44,7 @@ export default function SuspectSpansTable(props: Props) {
   const data: TableDataRowWithExtras[] = suspectSpans.map(suspectSpan => ({
     operation: suspectSpan.op,
     group: suspectSpan.group,
-    // TODO: currently the descriptions are only retrieved with examples
-    description: suspectSpan.group,
+    description: suspectSpan.description,
     totalCount: suspectSpan.count,
     frequency:
       defined(suspectSpan.frequency) && defined(totals?.count)

tests/js/sentry-test/performance/initializePerformanceData.ts

@@ -51,6 +51,7 @@ export const SAMPLE_SPANS = [
   {
     op: 'op1',
     group: 'aaaaaaaaaaaaaaaa',
+    description: 'span-1',
     examples: [
       {
         id: 'abababababababab',
@@ -72,6 +73,7 @@ export const SAMPLE_SPANS = [
   {
     op: 'op2',
     group: 'bbbbbbbbbbbbbbbb',
+    description: 'span-4',
     examples: [
       {
         id: 'bcbcbcbcbcbcbcbc',
@@ -105,6 +107,7 @@ type ExampleOpt = {
 type SuspectOpt = {
   op: string;
   group: string;
+  description: string;
   examples: ExampleOpt[];
 };
 
@@ -131,10 +134,11 @@ function makeExample(opt: ExampleOpt): ExampleTransaction {
 }
 
 function makeSuspectSpan(opt: SuspectOpt): SuspectSpan {
-  const {op, group, examples} = opt;
+  const {op, group, description, examples} = opt;
   return {
     op,
     group,
+    description,
     frequency: 1,
     count: 1,
     avgOccurrences: 1,