1
- import React , { useState } from 'react' ;
1
+ import React , { useMemo , useState } from 'react' ;
2
2
import { Table , Pagination , Button , useToaster , Message } from 'rsuite' ;
3
- import { Column , Cell , HeaderCell } from 'rsuite-table' ;
4
3
import { StandardProps } from 'rsuite-table/lib/@types/common' ;
5
- import { getLogs , Log , Result } from '../../api/logs' ;
6
4
import { TypeAttributes } from 'rsuite/esm/@types/common' ;
7
- import DateCell from './date_cell/date_cell' ;
5
+ import { renderColumn } from './render_columns' ;
6
+ import {
7
+ getLogs ,
8
+ getLogDescription ,
9
+ Result ,
10
+ FieldMetaData ,
11
+ } from '../../api/logs' ;
8
12
import 'rsuite/dist/rsuite.min.css' ;
9
13
import './log_table.scss' ;
10
14
11
15
export interface LogTableProps extends StandardProps {
12
- logLevels ?: string ;
13
- queryText ?: string ;
14
- jobID ?: number ;
15
- startDate ?: Date ;
16
- endDate ?: Date ;
16
+ columns ?: FieldMetaData [ ] ;
17
+ filters ?: any ;
17
18
}
18
19
19
- export default function LogTable ( {
20
- logLevels,
21
- queryText,
22
- jobID,
23
- startDate,
24
- endDate,
25
- } : LogTableProps ) {
20
+ export default function LogTable ( { columns, filters } : LogTableProps ) {
26
21
const [ loading , setLoading ] = useState < boolean > ( false ) ;
27
- const [ logs , setLogs ] = useState < Log [ ] | null > ( [ ] ) ;
22
+ const [ logs , setLogs ] = useState < any [ ] | null > ( [ ] ) ;
28
23
const [ count , setCount ] = useState < number > ( 0 ) ;
29
24
const [ page , setPage ] = useState < number > ( 0 ) ;
30
25
const [ limit , setLimit ] = useState < number > ( 20 ) ;
31
26
27
+ const renderedColumns = useMemo (
28
+ ( ) =>
29
+ columns
30
+ ?. sort ( ( a , b ) => ( a . type . length > b . type . length ? 1 : - 1 ) )
31
+ . map ( ( c , idx ) => renderColumn ( c , idx ) ) ,
32
+ [ columns ]
33
+ ) ;
34
+
32
35
const toaster = useToaster ( ) ;
33
36
const pageSizes = [ 20 , 50 , 100 ] ;
34
37
@@ -41,16 +44,14 @@ export default function LogTable({
41
44
) ;
42
45
} ;
43
46
const updateLogsTable = async ( page : number , limit : number ) => {
47
+ getLogDescription ( ) ;
48
+
44
49
setLoading ( true ) ;
45
50
try {
46
51
let result : Result = await getLogs ( {
47
- job_id : jobID ?? undefined ,
48
- text : queryText ,
49
52
page : page ,
50
53
page_size : limit ,
51
- log_level : logLevels ,
52
- start_date : startDate ?. toJSON ( ) ,
53
- end_date : endDate ?. toJSON ( ) ,
54
+ ...filters ,
54
55
} ) ;
55
56
56
57
setLogs ( result . logs ) ;
@@ -83,22 +84,7 @@ export default function LogTable({
83
84
wordWrap = "break-word"
84
85
rowHeight = { 30 }
85
86
>
86
- < Column width = { 80 } align = "center" fixed >
87
- < HeaderCell > JobID</ HeaderCell >
88
- < Cell className = "log-table__cell" dataKey = "job_id" />
89
- </ Column >
90
- < Column width = { 250 } align = "center" fixed >
91
- < HeaderCell > Date</ HeaderCell >
92
- < DateCell className = "log-table__cell" dataKey = "date" />
93
- </ Column >
94
- < Column width = { 80 } align = "center" fixed >
95
- < HeaderCell > Level</ HeaderCell >
96
- < Cell className = "log-table__cell" dataKey = "log_level" />
97
- </ Column >
98
- < Column width = { 600 } align = "left" flexGrow = { 1 } >
99
- < HeaderCell > Data</ HeaderCell >
100
- < Cell className = "log-table__cell" dataKey = "log_data" />
101
- </ Column >
87
+ { renderedColumns }
102
88
</ Table >
103
89
< div >
104
90
< Pagination
0 commit comments