mirror of
https://github.com/whyour/qinglong.git
synced 2025-05-28 02:16:07 +08:00
115 lines
2.9 KiB
TypeScript
115 lines
2.9 KiB
TypeScript
import React, { PureComponent, Fragment, useState, useEffect } from 'react';
|
|
import { Button, message, Modal, TreeSelect } from 'antd';
|
|
import config from '@/utils/config';
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
|
import { Controlled as CodeMirror } from 'react-codemirror2';
|
|
import { request } from '@/utils/http';
|
|
const Log = () => {
|
|
const [width, setWdith] = useState('100%');
|
|
const [marginLeft, setMarginLeft] = useState(0);
|
|
const [marginTop, setMarginTop] = useState(-72);
|
|
const [title, setTitle] = useState('请选择日志文件');
|
|
const [value, setValue] = useState('请选择日志文件');
|
|
const [select, setSelect] = useState();
|
|
const [data, setData] = useState();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const getConfig = () => {
|
|
request.get(`${config.apiPrefix}logs`).then((data) => {
|
|
setData(formatData(data.dirs) as any);
|
|
});
|
|
};
|
|
|
|
const formatData = (tree: any[]) => {
|
|
return tree.map((x) => {
|
|
x.title = x.name;
|
|
x.value = x.name;
|
|
x.disabled = x.isDir;
|
|
x.children = x.files.map((y: string) => ({
|
|
title: y,
|
|
value: `${x.name}/${y}`,
|
|
parent: x.name,
|
|
}));
|
|
return x;
|
|
});
|
|
};
|
|
|
|
const getLog = (node: any) => {
|
|
setLoading(true);
|
|
request
|
|
.get(`${config.apiPrefix}logs/${node.value}`)
|
|
.then((data) => {
|
|
setValue(data.data);
|
|
})
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
const onSelect = (value: any, node: any) => {
|
|
setSelect(value);
|
|
setTitle(node.parent || node.value);
|
|
getLog(node);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (document.body.clientWidth < 768) {
|
|
setWdith('auto');
|
|
setMarginLeft(0);
|
|
setMarginTop(0);
|
|
} else {
|
|
setWdith('100%');
|
|
setMarginLeft(0);
|
|
setMarginTop(-72);
|
|
}
|
|
getConfig();
|
|
}, []);
|
|
|
|
return (
|
|
<PageContainer
|
|
className="ql-container-wrapper log-wrapper"
|
|
title={title}
|
|
extra={[
|
|
<TreeSelect
|
|
className="log-select"
|
|
value={select}
|
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
|
treeData={data}
|
|
placeholder="请选择日志文件"
|
|
showSearch
|
|
key="value"
|
|
onSelect={onSelect}
|
|
/>,
|
|
]}
|
|
header={{
|
|
style: {
|
|
padding: '4px 16px 4px 15px',
|
|
position: 'sticky',
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: 20,
|
|
marginTop,
|
|
width,
|
|
marginLeft,
|
|
},
|
|
}}
|
|
>
|
|
<CodeMirror
|
|
value={value}
|
|
options={{
|
|
lineNumbers: true,
|
|
lineWrapping: true,
|
|
styleActiveLine: true,
|
|
matchBrackets: true,
|
|
mode: 'shell',
|
|
readOnly: true,
|
|
}}
|
|
onBeforeChange={(editor, data, value) => {
|
|
setValue(value);
|
|
}}
|
|
onChange={(editor, data, value) => {}}
|
|
/>
|
|
</PageContainer>
|
|
);
|
|
};
|
|
|
|
export default Log;
|