chore(explore): Better samples mode default columns (#83946)

Change the columns available in the samples mode by default.
getsentry · Jan 23, 2025 · e17dca0 · e17dca0
1 parent 5a3924a
commit e17dca0
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 14 deletions.
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
@@ -109,7 +109,7 @@ export function useTableStyles(
         }
 
         const newWidth = Math.max(
-          MINIMUM_COLUMN_WIDTH,
+          minimumColumnWidth,
           initialWidth + (e.clientX - startX)
         );
 

diff --git a/static/app/views/explore/contexts/pageParamsContext/fields.tsx b/static/app/views/explore/contexts/pageParamsContext/fields.tsx
@@ -4,7 +4,14 @@ import {defined} from 'sentry/utils';
 import {decodeList} from 'sentry/utils/queryString';
 
 export function defaultFields(): string[] {
-  return ['id', 'project', 'span.op', 'span.description', 'span.duration', 'timestamp'];
+  return [
+    'id',
+    'span.op',
+    'span.description',
+    'span.duration',
+    'transaction',
+    'timestamp',
+  ];
 }
 
 export function getFieldsFromLocation(location: Location): string[] {

diff --git a/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx b/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx
@@ -80,10 +80,10 @@ describe('PageParamsProvider', function () {
       dataset: undefined,
       fields: [
         'id',
-        'project',
         'span.op',
         'span.description',
         'span.duration',
+        'transaction',
         'timestamp',
       ],
       groupBys: ['span.op'],

diff --git a/static/app/views/explore/hooks/useAddToDashboard.spec.tsx b/static/app/views/explore/hooks/useAddToDashboard.spec.tsx
@@ -66,10 +66,10 @@ describe('AddToDashboardButton', () => {
           dataset: WidgetType.SPANS,
           defaultTableColumns: [
             'id',
-            'project',
             'span.op',
             'span.description',
             'span.duration',
+            'transaction',
             'timestamp',
           ],
           defaultTitle: 'Custom Widget',
@@ -78,10 +78,10 @@ describe('AddToDashboardButton', () => {
           displayType: DisplayType.LINE,
           field: [
             'id',
-            'project',
             'span.op',
             'span.description',
             'span.duration',
+            'transaction',
             'timestamp',
           ],
         }),
@@ -139,10 +139,10 @@ describe('AddToDashboardButton', () => {
           dataset: WidgetType.SPANS,
           defaultTableColumns: [
             'id',
-            'project',
             'span.op',
             'span.description',
             'span.duration',
+            'transaction',
             'timestamp',
           ],
           defaultTitle: 'Custom Widget',
@@ -151,10 +151,10 @@ describe('AddToDashboardButton', () => {
           displayType: DisplayType.LINE,
           field: [
             'id',
-            'project',
             'span.op',
             'span.description',
             'span.duration',
+            'transaction',
             'timestamp',
           ],
         }),

diff --git a/static/app/views/explore/tables/aggregatesTable.tsx b/static/app/views/explore/tables/aggregatesTable.tsx
@@ -92,6 +92,7 @@ export function AggregatesTable({
 
   const tableRef = useRef<HTMLTableElement>(null);
   const {initialTableStyles, onResizeMouseDown} = useTableStyles(fields, tableRef, {
+    minimumColumnWidth: 50,
     prefixColumnWidth: 'min-content',
   });
 

diff --git a/static/app/views/explore/tables/fieldRenderer.tsx b/static/app/views/explore/tables/fieldRenderer.tsx
@@ -1,18 +1,24 @@
 import styled from '@emotion/styled';
 
+import ProjectBadge from 'sentry/components/idBadge/projectBadge';
+import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import TimeSince from 'sentry/components/timeSince';
+import {Tooltip} from 'sentry/components/tooltip';
+import {space} from 'sentry/styles/space';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type {EventData, MetaType} from 'sentry/utils/discover/eventView';
 import EventView from 'sentry/utils/discover/eventView';
-import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
+import {getFieldRenderer, nullableValue} from 'sentry/utils/discover/fieldRenderers';
 import {Container} from 'sentry/utils/discover/styles';
 import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {getShortEventId} from 'sentry/utils/events';
 import {generateProfileFlamechartRouteWithQuery} from 'sentry/utils/profiling/routes';
+import {isUrl} from 'sentry/utils/string/isUrl';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 import CellAction, {updateQuery} from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
 import {
@@ -114,6 +120,9 @@ function getExploreFieldRenderer(
   if (field === 'id' || field === 'span_id') {
     return eventIdRenderFunc(field);
   }
+  if (field === 'span.description') {
+    return SpanDescriptionRenderer;
+  }
   return getFieldRenderer(field, meta, false);
 }
 
@@ -129,6 +138,54 @@ function eventIdRenderFunc(field: string) {
   return renderer;
 }
 
+function SpanDescriptionRenderer(data: EventData) {
+  const {projects} = useProjects();
+  const project = projects.find(p => p.slug === data.project);
+
+  const value = data['span.description'];
+
+  return (
+    <span>
+      <Tooltip
+        title={value}
+        containerDisplayMode="block"
+        showOnlyOnOverflow
+        maxWidth={400}
+      >
+        <Description>
+          {project && (
+            <ProjectBadge
+              project={project ? project : {slug: data.project}}
+              avatarSize={16}
+              hideName
+            />
+          )}
+          <WrappingText>
+            {isUrl(value) ? (
+              <ExternalLink href={value}>{value}</ExternalLink>
+            ) : (
+              nullableValue(value)
+            )}
+          </WrappingText>
+        </Description>
+      </Tooltip>
+    </span>
+  );
+}
+
 const StyledTimeSince = styled(TimeSince)`
   width: fit-content;
 `;
+
+const Description = styled('div')`
+  ${p => p.theme.overflowEllipsis};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${space(1)};
+`;
+
+const WrappingText = styled('div')`
+  ${p => p.theme.overflowEllipsis};
+  width: auto;
+`;
diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx
@@ -76,7 +76,13 @@ export function SpansTable({confidences, spansTableResult}: SpansTableProps) {
   });
 
   const tableRef = useRef<HTMLTableElement>(null);
-  const {initialTableStyles, onResizeMouseDown} = useTableStyles(visibleFields, tableRef);
+  const {initialTableStyles, onResizeMouseDown} = useTableStyles(
+    visibleFields,
+    tableRef,
+    {
+      minimumColumnWidth: 50,
+    }
+  );
 
   const meta = result.meta ?? {};
 

diff --git a/static/app/views/explore/toolbar/index.spec.tsx b/static/app/views/explore/toolbar/index.spec.tsx
@@ -171,10 +171,10 @@ describe('ExploreToolbar', function () {
 
     expect(fields).toEqual([
       'id',
-      'project',
       'span.op',
       'span.description',
       'span.duration',
+      'transaction',
       'timestamp',
     ]); // default
 
@@ -190,10 +190,10 @@ describe('ExploreToolbar', function () {
     await userEvent.click(samples);
     expect(fields).toEqual([
       'id',
-      'project',
       'span.op',
       'span.description',
       'span.duration',
+      'transaction',
       'timestamp',
       'release',
     ]); // default
@@ -397,11 +397,11 @@ describe('ExploreToolbar', function () {
     // check the default field options
     const fields = [
       'id',
-      'project',
       'span.description',
       'span.duration',
       'span.op',
       'timestamp',
+      'transaction',
     ];
     await userEvent.click(within(section).getByRole('button', {name: 'timestamp'}));
     const fieldOptions = await within(section).findAllByRole('option');
@@ -561,10 +561,10 @@ describe('ExploreToolbar', function () {
             dataset: 'spans',
             defaultTableColumns: [
               'id',
-              'project',
               'span.op',
               'span.description',
               'span.duration',
+              'transaction',
               'timestamp',
             ],
             defaultTitle: 'Custom Widget',
@@ -574,10 +574,10 @@ describe('ExploreToolbar', function () {
             end: undefined,
             field: [
               'id',
-              'project',
               'span.op',
               'span.description',
               'span.duration',
+              'transaction',
               'timestamp',
             ],
             limit: undefined,