12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- import {Fragment, useMemo} from 'react';
- import styled from '@emotion/styled';
- import type {GridColumnOrder} from 'sentry/components/gridEditable';
- import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
- import type {CursorHandler} from 'sentry/components/pagination';
- import Pagination from 'sentry/components/pagination';
- import {useLocation} from 'sentry/utils/useLocation';
- import {getFieldRenderer} from './table/fieldRenderers';
- import type {ColumnKey, DataRow} from './table/types';
- interface TracesSpansTableProps {
- data: DataRow[];
- fields: string[];
- handleCursor: CursorHandler;
- isLoading: boolean;
- pageLinks?: string;
- }
- export function TracesSpansTable({
- data,
- fields,
- isLoading,
- pageLinks,
- handleCursor,
- }: TracesSpansTableProps) {
- const location = useLocation();
- const columnOrder: GridColumnOrder<ColumnKey>[] = useMemo(() => {
- return fields.map(field => {
- return {
- key: field,
- width: COL_WIDTH_UNDEFINED,
- name: field, // TODO: add more user friendly names for them
- };
- });
- }, [fields]);
- return (
- <Fragment>
- <StyledGridEditable
- isLoading={isLoading}
- columnOrder={columnOrder}
- columnSortBy={[]}
- data={data}
- grid={{
- renderBodyCell: renderBodyCell(),
- }}
- location={location}
- />
- <StyledPagination pageLinks={pageLinks} onCursor={handleCursor} />
- </Fragment>
- );
- }
- function renderBodyCell() {
- return function (column: GridColumnOrder<ColumnKey>, row: DataRow) {
- const Renderer = getFieldRenderer(column.key);
- return <Renderer column={column} row={row} />;
- };
- }
- const StyledGridEditable = styled(GridEditable)`
- margin: 0px;
- `;
- const StyledPagination = styled(Pagination)`
- margin: 0px;
- `;
|