admin/logs: denser table
Massimo Melina committed
Nov 21, 2023 at 23:59 UTC
da09c5fe308f4c85d098fb91b3e93c98c2bcbdfb
2 files changed
+17
-18
admin/src/DataTable.ts
+5
-2
@@ -19,8 +19,9 @@ interface DataTableProps<R extends GridValidRowModel=any> extends Omit<DataGridP
19
initializing?: boolean
20
noRows?: ReactNode
21
error?: ReactNode
22
+ compact?: true
23
}
23
-export function DataTable({ columns, initialState={}, actions, actionsProps, initializing, noRows, error, ...rest }: DataTableProps) {
24
+export function DataTable({ columns, initialState={}, actions, actionsProps, initializing, noRows, error, compact, ...rest }: DataTableProps) {
25
const { width } = useWindowSize()
26
const theme = useTheme()
27
const apiRef = useGridApiRef()
@@ -38,7 +39,8 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
39
const { columns } = params.api.store.getSnapshot()
40
const showOther = columns.columnVisibilityModel[other] === false
41
return h(Box, {}, col.renderCell ? col.renderCell(params) : params.formattedValue,
41
- showOther && h(Box, props, renderCell({ ...columns.lookup[other], ...override }, params.row)))
42
+ showOther && h(Box, { ...compact && { lineHeight: '1em', fontSize: 'smaller' }, ...props },
43
+ renderCell({ ...columns.lookup[other], ...override }, params.row) ) )
44
}
45
}
46
})
@@ -89,6 +91,7 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
91
h(DataGrid, {
92
initialState,
93
style: { height: 0, flex: 'auto' }, // limit table to available screen space
94
+ density: compact ? 'compact' : 'standard',
95
columns: manipulatedColumns,
96
apiRef,
97
slots: {
admin/src/LogsPage.ts
+12
-16
@@ -7,6 +7,7 @@ import { DataTable } from './DataTable'
7
import { formatBytes, tryJson } from '@hfs/shared'
8
import { logLabels } from './OptionsPage'
9
import { Flex, typedKeys, usePauseButton } from './misc';
10
+import { GridColDef } from '@mui/x-data-grid'
11
12
export default function LogsPage() {
13
const [tab, setTab] = useState(0)
@@ -35,10 +36,19 @@ function LogFile({ file, pause }: { file: string, pause?: boolean }) {
36
x.notes = notes
37
}
38
})
39
+ const tsColumn: GridColDef = {
40
+ field: 'ts',
41
+ headerName: "Timestamp",
42
+ type: 'dateTime',
43
+ width: 90,
44
+ valueGetter: ({ value }) => new Date(value as string),
45
+ renderCell: ({ value }) => h(Box, { lineHeight: '1em' }, value.toLocaleDateString(), h(Box, {}, value.toLocaleTimeString()))
46
+ }
47
return h(DataTable, {
48
error,
49
loading: connecting,
50
rows: list as any,
51
+ compact: true,
52
componentsProps: {
53
pagination: {
54
showFirstButton: true,
@@ -46,14 +56,7 @@ function LogFile({ file, pause }: { file: string, pause?: boolean }) {
56
}
57
},
58
columns: file === 'console' ? [
49
- {
50
- field: 'ts',
51
- headerName: "Timestamp",
52
- type: 'dateTime',
53
- width: 90,
54
- valueGetter: ({ value }) => new Date(value as string),
55
- renderCell: ({ value }) => h(Box, {}, value.toLocaleDateString(), h('br'), value.toLocaleTimeString())
56
- },
59
+ tsColumn,
60
{
61
field: 'k',
62
headerName: "Level",
@@ -81,14 +84,7 @@ function LogFile({ file, pause }: { file: string, pause?: boolean }) {
84
maxWidth: 200,
85
hideUnder: 'lg',
86
},
84
- {
85
- field: 'ts',
86
- headerName: "Timestamp",
87
- type: 'dateTime',
88
- width: 90,
89
- valueGetter: ({ value }) => new Date(value as string),
90
- renderCell: ({ value }) => h(Box, {}, value.toLocaleDateString(), h('br'), value.toLocaleTimeString())
91
- },
87
+ tsColumn,
88
{
89
field: 'method',
90
headerName: "Method",