styles(functions): Clean up slowest functions styles (#76560)

getsentry · Aug 27, 2024 · 2ff06d3 · 2ff06d3
1 parent ea1ffed
commit 2ff06d3
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 246 deletions.
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
@@ -6,6 +6,7 @@ import {
  Grid as _Table,
  GridBody,
  GridBodyCell,
+ GridBodyCellStatus,
  GridHead,
  GridHeadCell,
  GridRow,
@@ -21,10 +22,28 @@ export function Table({children, style, ...props}: TableProps) {
  );
 }
 
+interface TableStatusProps {
+ children: React.ReactNode;
+}
+
+export function TableStatus({children}: TableStatusProps) {
+ return (
+ <GridRow>
+ <GridBodyCellStatus>{children}</GridBodyCellStatus>
+ </GridRow>
+ );
+}
+
 const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;
 
+type Item = {
+ label: string;
+ value: React.ReactNode;
+ width?: 'min-content';
+};
+
 interface UseTableStylesOptions {
- items: any[];
+ items: Item[];
  minimumColumnWidth?: number;
 }
 
@@ -33,12 +52,16 @@ export function useTableStyles({
  minimumColumnWidth = MINIMUM_COLUMN_WIDTH,
 }: UseTableStylesOptions) {
  const tableStyles = useMemo(() => {
- const columns = new Array(items.length).fill(`minmax(${minimumColumnWidth}px, auto)`);
+ const columns = new Array(items.length);
+
+ for (let i = 0; i < items.length; i++) {
+ columns[i] = items[i].width ?? `minmax(${minimumColumnWidth}px, auto)`;
+ }
 
  return {
  gridTemplateColumns: columns.join(' '),
  };
- }, [items.length, minimumColumnWidth]);
+ }, [items, minimumColumnWidth]);
 
  return {tableStyles};
 }

diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx
@@ -54,7 +54,15 @@ export function SpansTable({}: SpansTableProps) {
  referrer: 'api.explore.spans-samples-table',
  });
 
- const {tableStyles} = useTableStyles({items: fields});
+ const {tableStyles} = useTableStyles({
+ items: fields.map(field => {
+ return {
+ label: field,
+ value: field,
+ };
+ }),
+ });
+
  const meta = result.meta ?? {};
 
  return (

diff --git a/static/app/views/profiling/landing/slowestFunctionsTable.spec.tsx b/static/app/views/profiling/landing/slowestFunctionsTable.spec.tsx
@@ -79,14 +79,7 @@ describe('SlowestFunctionsTable', () => {
  });
 
  render(<SlowestFunctionsTable />);
- for (const value of [
- 'slow-function',
- 'slow-package',
- '5k',
- '1.50s',
- '2.00s',
- '3.00s',
- ]) {
+ for (const value of ['slow-function', 'slow-package', '1.50s', '2.00s', '3.00s']) {
  expect(await screen.findByText(value)).toBeInTheDocument();
  }
  });