tracesSpansTable.tsx 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import {Fragment, useMemo} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {GridColumnOrder} from 'sentry/components/gridEditable';
  4. import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
  5. import type {CursorHandler} from 'sentry/components/pagination';
  6. import Pagination from 'sentry/components/pagination';
  7. import {useLocation} from 'sentry/utils/useLocation';
  8. import {getFieldRenderer} from './table/fieldRenderers';
  9. import type {ColumnKey, DataRow} from './table/types';
  10. interface TracesSpansTableProps {
  11. data: DataRow[];
  12. fields: string[];
  13. handleCursor: CursorHandler;
  14. isLoading: boolean;
  15. pageLinks?: string;
  16. }
  17. export function TracesSpansTable({
  18. data,
  19. fields,
  20. isLoading,
  21. pageLinks,
  22. handleCursor,
  23. }: TracesSpansTableProps) {
  24. const location = useLocation();
  25. const columnOrder: GridColumnOrder<ColumnKey>[] = useMemo(() => {
  26. return fields.map(field => {
  27. return {
  28. key: field,
  29. width: COL_WIDTH_UNDEFINED,
  30. name: field, // TODO: add more user friendly names for them
  31. };
  32. });
  33. }, [fields]);
  34. return (
  35. <Fragment>
  36. <StyledGridEditable
  37. isLoading={isLoading}
  38. columnOrder={columnOrder}
  39. columnSortBy={[]}
  40. data={data}
  41. grid={{
  42. renderBodyCell: renderBodyCell(),
  43. }}
  44. location={location}
  45. />
  46. <StyledPagination pageLinks={pageLinks} onCursor={handleCursor} />
  47. </Fragment>
  48. );
  49. }
  50. function renderBodyCell() {
  51. return function (column: GridColumnOrder<ColumnKey>, row: DataRow) {
  52. const Renderer = getFieldRenderer(column.key);
  53. return <Renderer column={column} row={row} />;
  54. };
  55. }
  56. const StyledGridEditable = styled(GridEditable)`
  57. margin: 0px;
  58. `;
  59. const StyledPagination = styled(Pagination)`
  60. margin: 0px;
  61. `;