Browse Source

fix(profiling): Show p75 only for suspect functions table (#46140)

To align with suspect spans, we also only show p75 of function duration
in suspect functions. This also reduces the width of the table.

Closes getsentry/team-profiling#196
Tony Xiao 2 years ago
parent
commit
0159e2cd59

+ 3 - 6
static/app/components/profiling/suspectFunctions/functionsTable.spec.tsx

@@ -72,7 +72,7 @@ describe('FunctionsTable', function () {
           error={null}
           error={null}
           functions={[func]}
           functions={[func]}
           project={project}
           project={project}
-          sort="-p99"
+          sort="-pr5"
         />
         />
       </TestContext>
       </TestContext>
     );
     );
@@ -83,14 +83,11 @@ describe('FunctionsTable', function () {
     expect(screen.getByText('Package')).toBeInTheDocument();
     expect(screen.getByText('Package')).toBeInTheDocument();
     expect(screen.getByText('bar')).toBeInTheDocument();
     expect(screen.getByText('bar')).toBeInTheDocument();
 
 
-    expect(screen.getByText('Total Occurrences')).toBeInTheDocument();
+    expect(screen.getByText('Occurrences')).toBeInTheDocument();
     expect(screen.getByText('10')).toBeInTheDocument();
     expect(screen.getByText('10')).toBeInTheDocument();
 
 
-    expect(screen.getByText('P75 Total Duration')).toBeInTheDocument();
+    expect(screen.getByText('P75 Duration')).toBeInTheDocument();
     expect(screen.getByText('10.00ms')).toBeInTheDocument();
     expect(screen.getByText('10.00ms')).toBeInTheDocument();
-
-    expect(screen.getByText('P99 Total Duration')).toBeInTheDocument();
-    expect(screen.getByText('12.50ms')).toBeInTheDocument();
   });
   });
 
 
   it('renders empty name', function () {
   it('renders empty name', function () {

+ 13 - 14
static/app/components/profiling/suspectFunctions/functionsTable.tsx

@@ -42,7 +42,7 @@ function FunctionsTable(props: FunctionsTableProps) {
     }
     }
 
 
     if (!SORTABLE_COLUMNS.has(column as any)) {
     if (!SORTABLE_COLUMNS.has(column as any)) {
-      column = 'p99';
+      column = 'p75';
     }
     }
 
 
     return {
     return {
@@ -131,7 +131,7 @@ function FunctionsTable(props: FunctionsTableProps) {
   );
   );
 }
 }
 
 
-const RIGHT_ALIGNED_COLUMNS = new Set<TableColumnKey>(['p75', 'p99', 'count']);
+const RIGHT_ALIGNED_COLUMNS = new Set<TableColumnKey>(['p75', 'p95', 'p99', 'count']);
 const SORTABLE_COLUMNS = RIGHT_ALIGNED_COLUMNS;
 const SORTABLE_COLUMNS = RIGHT_ALIGNED_COLUMNS;
 
 
 function renderFunctionsTableCell(
 function renderFunctionsTableCell(
@@ -175,6 +175,7 @@ function ProfilingFunctionsTableCell({
         </NumberContainer>
         </NumberContainer>
       );
       );
     case 'p75':
     case 'p75':
+    case 'p95':
     case 'p99':
     case 'p99':
       return (
       return (
         <NumberContainer>
         <NumberContainer>
@@ -198,16 +199,9 @@ type TableDataRow = Record<TableColumnKey, any>;
 
 
 type TableColumn = GridColumnOrder<TableColumnKey>;
 type TableColumn = GridColumnOrder<TableColumnKey>;
 
 
-const COLUMN_ORDER: TableColumnKey[] = [
-  'name',
-  'package',
-  'count',
-  'p75',
-  'p99',
-  'examples',
-];
+const COLUMN_ORDER: TableColumnKey[] = ['name', 'package', 'count', 'p75', 'examples'];
 
 
-const COLUMNS: Record<Exclude<TableColumnKey, 'p95'>, TableColumn> = {
+const COLUMNS: Record<TableColumnKey, TableColumn> = {
   name: {
   name: {
     key: 'name',
     key: 'name',
     name: t('Name'),
     name: t('Name'),
@@ -225,17 +219,22 @@ const COLUMNS: Record<Exclude<TableColumnKey, 'p95'>, TableColumn> = {
   },
   },
   p75: {
   p75: {
     key: 'p75',
     key: 'p75',
-    name: t('P75 Total Duration'),
+    name: t('P75 Duration'),
+    width: COL_WIDTH_UNDEFINED,
+  },
+  p95: {
+    key: 'p95',
+    name: t('P95 Duration'),
     width: COL_WIDTH_UNDEFINED,
     width: COL_WIDTH_UNDEFINED,
   },
   },
   p99: {
   p99: {
     key: 'p99',
     key: 'p99',
-    name: t('P99 Total Duration'),
+    name: t('P99 Duration'),
     width: COL_WIDTH_UNDEFINED,
     width: COL_WIDTH_UNDEFINED,
   },
   },
   count: {
   count: {
     key: 'count',
     key: 'count',
-    name: t('Total Occurrences'),
+    name: t('Occurrences'),
     width: COL_WIDTH_UNDEFINED,
     width: COL_WIDTH_UNDEFINED,
   },
   },
   examples: {
   examples: {

+ 1 - 1
static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx

@@ -36,7 +36,7 @@ export function SuspectFunctionsTable({
     [location.query.functionsCursor]
     [location.query.functionsCursor]
   );
   );
   const functionsSort = useMemo(
   const functionsSort = useMemo(
-    () => decodeScalar(location.query.functionsSort, '-p99'),
+    () => decodeScalar(location.query.functionsSort, '-p75'),
     [location.query.functionsSort]
     [location.query.functionsSort]
   );
   );