|
1 | | -import React, { memo, useEffect } from 'react'; |
| 1 | +import React, { memo } from 'react'; |
2 | 2 | import styles from './index.less'; |
3 | 3 | import classnames from 'classnames'; |
4 | 4 | import Iconfont from '@/components/Iconfont'; |
| 5 | +import ScrollLoading from '@/components/ScrollLoading'; |
5 | 6 | import historyService, { IHistoryRecord } from '@/service/history'; |
6 | | -import MonacoEditor from '@/components/Console/MonacoEditor'; |
| 7 | +import * as monaco from 'monaco-editor'; |
| 8 | +import i18n from '@/i18n'; |
| 9 | + |
7 | 10 | interface IProps { |
8 | 11 | className?: string; |
| 12 | + curWorkspaceParams: any; |
| 13 | +} |
| 14 | + |
| 15 | +interface IDatasource extends IHistoryRecord { |
| 16 | + highlightedCode: string; // sql处理过的高亮代码 |
9 | 17 | } |
10 | 18 |
|
11 | 19 | export default memo<IProps>((props) => { |
12 | 20 | const { className } = props; |
13 | | - const [dataSource, setDataSource] = React.useState<IHistoryRecord[]>([]); |
14 | | - |
15 | | - useEffect(() => { |
16 | | - getHistoryList(); |
17 | | - }, []); |
18 | | - |
| 21 | + const [dataSource, setDataSource] = React.useState<IDatasource[]>([]); |
| 22 | + const outputContentRef = React.useRef<HTMLDivElement>(null); |
| 23 | + const curPageRef = React.useRef(1); |
| 24 | + const finishedRef = React.useRef(false); |
| 25 | + |
19 | 26 | const getHistoryList = () => { |
20 | | - historyService |
| 27 | + return historyService |
21 | 28 | .getHistoryList({ |
22 | | - pageNo: 3, |
23 | | - pageSize: 100, |
| 29 | + dataSourceId:props.curWorkspaceParams.dataSourceId, |
| 30 | + pageNo: curPageRef.current++, |
| 31 | + pageSize: 40, |
24 | 32 | }) |
25 | 33 | .then((res) => { |
26 | | - setDataSource(res.data); |
| 34 | + finishedRef.current = !res.hasNextPage; |
| 35 | + const promiseList = res.data.map((item) => { |
| 36 | + return new Promise((resolve) => { |
| 37 | + // 不换行 |
| 38 | + const ddl = (item.ddl || '')?.replace(/\n/g, ' '); |
| 39 | + monaco.editor.colorize(ddl, 'sql', {}).then((_res) => { |
| 40 | + resolve({ |
| 41 | + ...item, |
| 42 | + highlightedCode: _res, |
| 43 | + }); |
| 44 | + }); |
| 45 | + }); |
| 46 | + }); |
| 47 | + Promise.all(promiseList).then((_res) => { |
| 48 | + setDataSource([...dataSource, ..._res] as any); |
| 49 | + }); |
27 | 50 | }); |
28 | 51 | }; |
29 | 52 |
|
30 | 53 | return ( |
31 | 54 | <div className={classnames(styles.output, className)}> |
32 | 55 | <div className={styles.outputTitle}> |
33 | 56 | <Iconfont code="" /> |
34 | | - 执行记录 |
| 57 | + {i18n('common.title.executiveLogging')} |
35 | 58 | </div> |
36 | | - <div className={styles.outputContent}> |
37 | | - {dataSource.map((item, index) => { |
38 | | - const nameList = [item.dataSourceName, item.databaseName, item.schemaName]; |
39 | | - return ( |
40 | | - <div key={index} className={styles.outputItem}> |
41 | | - <div className={styles.timeBox}> |
42 | | - <div className={styles.iconBox}> |
43 | | - <Iconfont code="" /> |
| 59 | + <div className={styles.outputContent} ref={outputContentRef}> |
| 60 | + <ScrollLoading |
| 61 | + onReachBottom={getHistoryList} |
| 62 | + scrollerElement={outputContentRef} |
| 63 | + threshold={300} |
| 64 | + finished={finishedRef.current} |
| 65 | + > |
| 66 | + <> |
| 67 | + {dataSource.map((item, index) => { |
| 68 | + const nameList = [item.databaseName, item.schemaName]; |
| 69 | + return ( |
| 70 | + <div key={index} className={styles.outputItem}> |
| 71 | + <div className={styles.timeBox}> |
| 72 | + <div className={classnames(styles.iconBox, { [styles.failureIconBox]: item.status !== 'success' })}> |
| 73 | + <Iconfont code="" /> |
| 74 | + </div> |
| 75 | + <span className={styles.timeSpan}>[2023-10-15 14:50:29]</span> |
| 76 | + {!!item.operationRows && <span>{item.operationRows} rows</span>} |
| 77 | + {!!item.useTime && <span>affected in {item.useTime} ms</span>} |
| 78 | + </div> |
| 79 | + <div className={styles.sqlPlace}>{nameList.filter((name) => name).join(' > ')}</div> |
| 80 | + <div className={styles.sqlBox} dangerouslySetInnerHTML={{ __html: item.highlightedCode }} /> |
44 | 81 | </div> |
45 | | - <span>[2023-10-15 14:50:29]</span> |
46 | | - {item.operationRows && <span>{item.operationRows} rows</span>} |
47 | | - {item.useTime && <span>affected in{item.useTime} ms</span>} |
48 | | - </div> |
49 | | - <div>{nameList.filter((name) => name).join(' > ')}</div> |
50 | | - <div className={styles.sqlBox}> |
51 | | - {item.ddl} |
52 | | - {/* <MonacoEditor |
53 | | - options={{ |
54 | | - // 不需要行号 |
55 | | - lineNumbers: 'off', |
56 | | - readOnly: true, |
57 | | - minimap: { |
58 | | - enabled: false, |
59 | | - }, |
60 | | - }} |
61 | | - id={`output-content-${index}`} |
62 | | - defaultValue={item.ddl || ''} |
63 | | - /> */} |
64 | | - </div> |
65 | | - </div> |
66 | | - ); |
67 | | - })} |
| 82 | + ); |
| 83 | + })} |
| 84 | + </> |
| 85 | + </ScrollLoading> |
68 | 86 | </div> |
69 | 87 | </div> |
70 | 88 | ); |
|
0 commit comments