diff --git a/.changeset/curvy-mails-laugh.md b/.changeset/curvy-mails-laugh.md new file mode 100644 index 00000000..1d8cfbee --- /dev/null +++ b/.changeset/curvy-mails-laugh.md @@ -0,0 +1,5 @@ +--- +'@hyperdx/app': patch +--- + +style(ui): improve duration column representation diff --git a/packages/app/src/LogTable.tsx b/packages/app/src/LogTable.tsx index 725b4f32..b0baf4a8 100644 --- a/packages/app/src/LogTable.tsx +++ b/packages/app/src/LogTable.tsx @@ -27,8 +27,12 @@ import { useHotkeys } from 'react-hotkeys-hook'; type Row = Record & { duration: number }; type AccessorFn = (row: Row, column: string) => any; +const SPECIAL_VALUES = { + not_available: 'NULL', +}; const ACCESSOR_MAP: Record = { - duration: row => (row.duration >= 0 ? row.duration : 'N/A'), + duration: row => + row.duration >= 0 ? row.duration : SPECIAL_VALUES.not_available, default: (row, column) => row[column], }; @@ -367,16 +371,18 @@ export const RawLogTable = memo( ...(displayedColumns.map(column => ({ accessorFn: curry(retrieveColumnValue)(column), // Columns can contain '.' and will not work with accessorKey header: column, - cell: info => ( - - // onPropertySearchClick(column, info.getValue()) - // } - > - {info.getValue()} - - ), + cell: info => { + const value = info.getValue(); + return ( + + {value} + + ); + }, size: 150, })) as ColumnDef[]), {