Browse Source

ref(profiling) trim text on slowest functions table (#78021)

Long fn names or packages can overflow table cells
Jonas 5 months ago
parent
commit
8146d2a0eb
1 changed files with 15 additions and 10 deletions
  1. 15 10
      static/app/views/profiling/landing/slowestFunctionsTable.tsx

+ 15 - 10
static/app/views/profiling/landing/slowestFunctionsTable.tsx

@@ -9,6 +9,7 @@ import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Link from 'sentry/components/links/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import TextOverflow from 'sentry/components/textOverflow';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconChevron, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -237,13 +238,15 @@ function SlowestFunction(props: SlowestFunctionProps) {
         </TableBodyCell>
         <TableBodyCell>
           <Tooltip title={props.function.name}>
-            {exampleLink ? (
-              <Link to={exampleLink}>
-                {props.function.name || t('<unknown function>')}
-              </Link>
-            ) : (
-              props.function.name || t('<unknown function>')
-            )}
+            <TextOverflow>
+              {exampleLink ? (
+                <Link to={exampleLink}>
+                  {props.function.name || t('<unknown function>')}
+                </Link>
+              ) : (
+                props.function.name || t('<unknown function>')
+              )}
+            </TextOverflow>
           </Tooltip>
         </TableBodyCell>
         <TableBodyCell>
@@ -253,9 +256,11 @@ function SlowestFunction(props: SlowestFunctionProps) {
           />{' '}
         </TableBodyCell>
         <TableBodyCell>
-          <Tooltip title={props.function.package || t('<unknown package>')}>
-            {props.function.package}
-          </Tooltip>
+          <TextOverflow>
+            <Tooltip title={props.function.package || t('<unknown package>')}>
+              {props.function.package}
+            </Tooltip>
+          </TextOverflow>
         </TableBodyCell>
         <TableBodyCell>{getPerformanceDuration(props.function.p75 / 1e6)}</TableBodyCell>
         <TableBodyCell>{getPerformanceDuration(props.function.p95 / 1e6)}</TableBodyCell>