diff --git a/back/api/terminal.ts b/back/api/terminal.ts index 04e56755..65b7cf70 100644 --- a/back/api/terminal.ts +++ b/back/api/terminal.ts @@ -1,6 +1,8 @@ import { Router } from 'express'; import * as pty from 'node-pty'; import os from 'os'; +import Container from 'typedi'; +import { Logger } from 'winston'; // Whether to use binary transport. const USE_BINARY = os.platform() !== 'win32'; const route = Router(); @@ -10,6 +12,7 @@ export default (app: Router) => { const logs = {}; app.use('/', route); route.post('/terminals', (req, res) => { + const logger: Logger = Container.get('logger'); const env = Object.assign({}, process.env); env['COLORTERM'] = 'truecolor'; const cols = parseInt(req.query.cols), @@ -23,7 +26,7 @@ export default (app: Router) => { encoding: USE_BINARY ? null : 'utf8', }); - console.log('Created terminal with PID: ' + term.pid); + logger.info('Created terminal with PID: ' + term.pid); terminals[term.pid] = term; logs[term.pid] = ''; term.on('data', function (data) { @@ -34,13 +37,14 @@ export default (app: Router) => { }); route.post('/terminals/:pid/size', (req, res) => { + const logger: Logger = Container.get('logger'); const pid = parseInt(req.params.pid), cols = parseInt(req.query.cols), rows = parseInt(req.query.rows), term = terminals[pid]; term.resize(cols, rows); - console.log( + logger.info( 'Resized terminal ' + pid + ' to ' + @@ -53,8 +57,9 @@ export default (app: Router) => { }); route.ws('/terminals/:pid', function (ws, req) { + const logger: Logger = Container.get('logger'); const term = terminals[parseInt(req.params.pid)]; - console.log('Connected to terminal ' + term.pid); + logger.info('Connected to terminal ' + term.pid); ws.send(logs[term.pid]); // string message buffering @@ -104,7 +109,7 @@ export default (app: Router) => { }); ws.on('close', function () { term.kill(); - console.log('Closed terminal ' + term.pid); + logger.info('Closed terminal ' + term.pid); // Clean things up delete terminals[term.pid]; delete logs[term.pid]; diff --git a/src/pages/terminal/index.tsx b/src/pages/terminal/index.tsx index 3f229364..0d5939cb 100644 --- a/src/pages/terminal/index.tsx +++ b/src/pages/terminal/index.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback, Key, useRef } from 'react'; +import { useState, useEffect, useRef } from 'react'; import config from '@/utils/config'; import { PageContainer } from '@ant-design/pro-layout'; import { request } from '@/utils/http'; @@ -8,112 +8,31 @@ import { AttachAddon } from 'xterm-addon-attach'; import { FitAddon } from 'xterm-addon-fit'; import { getToken } from '@/utils/auth'; -function getFilterData(keyword: string, data: any) { - const expandedKeys: string[] = []; - if (keyword) { - const tree: any = []; - data.forEach((item) => { - if (item.title.includes(keyword)) { - tree.push(item); - expandedKeys.push(...item.children.map((x) => x.key)); - } else { - const children: any[] = []; - (item.children || []).forEach((subItem: any) => { - if (subItem.title.includes(keyword)) { - children.push(subItem); - } - }); - if (children.length > 0) { - tree.push({ - ...item, - children, - }); - expandedKeys.push(...children.map((x) => x.key)); - } - } - }); - return { tree, expandedKeys }; - } - return { tree: data, expandedKeys }; -} - 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 [filterData, setFilterData] = useState([]); - const [loading, setLoading] = useState(false); - const [isPhone, setIsPhone] = useState(false); - - const getConfig = () => { - request.get(`${config.apiPrefix}logs`).then((data) => { - const result = formatData(data.dirs) as any; - setData(result); - setFilterData(result); - }); - }; - - const formatData = (tree: any[]) => { - return tree.map((x) => { - x.title = x.name; - x.value = x.name; - x.disabled = x.isDir; - x.key = x.name; - x.children = x.files.map((y: string) => ({ - title: y, - value: `${x.name}/${y}`, - key: `${x.name}/${y}`, - parent: x.name, - isLeaf: true, - })); - 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); - }; const ref = useRef(null); useEffect(() => { - setLoading(true); - request - .post(`${config.apiPrefix}terminals?cols=80&rows=24`) - .then((pid) => { - const ws = new WebSocket( - `ws://${location.host}${ - config.apiPrefix - }terminals/${pid}?token=${getToken()}`, - ); - ws.onopen = () => { - const term = new Terminal(); - const attachAddon = new AttachAddon(ws); - const fitAddon = new FitAddon(); - term.loadAddon(attachAddon); - term.loadAddon(fitAddon); - term.open(ref.current); - fitAddon.fit(); - term.focus(); - }; - }) - .finally(() => setLoading(false)); + request.post(`${config.apiPrefix}terminals?cols=80&rows=24`).then((pid) => { + const ws = new WebSocket( + `ws://${location.host}${ + config.apiPrefix + }terminals/${pid}?token=${getToken()}`, + ); + ws.onopen = () => { + const term = new Terminal(); + const attachAddon = new AttachAddon(ws); + const fitAddon = new FitAddon(); + term.loadAddon(attachAddon); + term.loadAddon(fitAddon); + term.open(ref.current); + fitAddon.fit(); + term.focus(); + }; + }); }, []); useEffect(() => { @@ -121,20 +40,17 @@ const Log = () => { setWdith('auto'); setMarginLeft(0); setMarginTop(0); - setIsPhone(true); } else { setWdith('100%'); setMarginLeft(0); setMarginTop(-72); - setIsPhone(false); } - getConfig(); }, []); return (