From d1df9263dc60ce98a0f7ab626f3b15c20fd14de5 Mon Sep 17 00:00:00 2001 From: wb-dxy672209 Date: Tue, 18 Jan 2022 10:24:21 +0800 Subject: [PATCH 1/3] =?UTF-8?q?webconsole=E5=81=9A=E6=88=90=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=BB=88=E7=AB=AF=E6=8C=89?= =?UTF-8?q?=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Link: https://code.aone.alibaba-inc.com/sa/sysom/codereview/7549752 * webconsole做成组件，添加终端按钮 --- sysom_web/config/routes.js | 17 +++++- sysom_web/src/locales/zh-CN/menu.js | 2 + sysom_web/src/pages/Host/{ => list}/index.jsx | 10 +++- sysom_web/src/pages/Host/terminal/index.jsx | 11 ++++ .../src/pages/components/webconsole/index.jsx | 56 +++++++++++++++++++ .../pages/components/webconsole/index.less | 7 +++ sysom_web/src/pages/vmcore/Detail/index.jsx | 3 +- sysom_web/src/pages/vmcore/analyse/index.jsx | 54 ++---------------- 8 files changed, 108 insertions(+), 52 deletions(-) rename sysom_web/src/pages/Host/{ => list}/index.jsx (96%) create mode 100644 sysom_web/src/pages/Host/terminal/index.jsx create mode 100644 sysom_web/src/pages/components/webconsole/index.jsx create mode 100644 sysom_web/src/pages/components/webconsole/index.less diff --git a/sysom_web/config/routes.js b/sysom_web/config/routes.js index d4348e06..09e4c7d1 100644 --- a/sysom_web/config/routes.js +++ b/sysom_web/config/routes.js @@ -27,7 +27,22 @@ export default [ { path: '/host', name: 'host', - component: './Host', + // component: './Host', + routes: [ + { + path: './host', + redirect: './Host/list', + }, + { + path: '/host/list', + name: 'list', + component: './Host/list', + }, + { + path: '/host/terminal/:id?', + component: './Host/terminal', + } + ], }, { path: '/monitor', diff --git a/sysom_web/src/locales/zh-CN/menu.js b/sysom_web/src/locales/zh-CN/menu.js index 542c6892..3183d720 100644 --- a/sysom_web/src/locales/zh-CN/menu.js +++ b/sysom_web/src/locales/zh-CN/menu.js @@ -1,6 +1,8 @@ export default { 'menu.welcome': '首页', 'menu.host': '主机管理', + 'menu.host.list': '主机列表', + 'menu.host.terminal': '主机终端', 'menu.monitor': '监控中心', 'menu.monitor.': '监控中心', 'menu.monitor.dashboard': '系统监控', diff --git a/sysom_web/src/pages/Host/index.jsx b/sysom_web/src/pages/Host/list/index.jsx similarity index 96% rename from sysom_web/src/pages/Host/index.jsx rename to sysom_web/src/pages/Host/list/index.jsx index 5dba8518..8db8d5cd 100644 --- a/sysom_web/src/pages/Host/index.jsx +++ b/sysom_web/src/pages/Host/list/index.jsx @@ -5,8 +5,8 @@ import { useIntl, FormattedMessage } from 'umi'; import { PageContainer } from '@ant-design/pro-layout'; import ProTable from '@ant-design/pro-table'; import { ModalForm, ProFormText, ProFormTextArea, ProFormSelect } from '@ant-design/pro-form'; -import { getCluster, getHost, addHost, deleteHost } from './service'; -import Cluster from './components/ClusterForm'; +import { getCluster, getHost, addHost, deleteHost } from '../service'; +import Cluster from '../components/ClusterForm'; const handleAddHost = async (fields) => { const hide = message.loading('正在添加'); @@ -117,6 +117,7 @@ const HostList = () => { dataIndex: 'option', valueType: 'option', render: (_, record) => [ + // console.log(record) { await handleDeleteHost(record); @@ -124,6 +125,11 @@ const HostList = () => { }}> + , + + + 终端 + ], }, diff --git a/sysom_web/src/pages/Host/terminal/index.jsx b/sysom_web/src/pages/Host/terminal/index.jsx new file mode 100644 index 00000000..eb0b4128 --- /dev/null +++ b/sysom_web/src/pages/Host/terminal/index.jsx @@ -0,0 +1,11 @@ +import WebConsole from '../../components/webconsole' + +const Terminal = (props) => { + return ( + <> + + + ) +}; + +export default Terminal \ No newline at end of file diff --git a/sysom_web/src/pages/components/webconsole/index.jsx b/sysom_web/src/pages/components/webconsole/index.jsx new file mode 100644 index 00000000..6bef7a05 --- /dev/null +++ b/sysom_web/src/pages/components/webconsole/index.jsx @@ -0,0 +1,56 @@ +import React, { useEffect, useRef } from 'react'; +import 'xterm/css/xterm.css'; +import { message } from 'antd'; +import { PageContainer } from '@ant-design/pro-layout'; +import { Terminal } from 'xterm'; +import { WebLinksAddon } from 'xterm-addon-web-links'; +import { FitAddon } from 'xterm-addon-fit'; +import { AttachAddon } from 'xterm-addon-attach'; +import styles from './index.less'; + +const WebConsole = (props) => { + const divRef = useRef(null); + let socket = null; + + const initTerminal = () => { + // const { namespace, pod_Name, container_Name } = props; + // console.log(111,props) + socket = new WebSocket(`ws://127.0.0.1:8001/ws/ssh/${props.id}/?user_id=34`); + socket.onopen = () => { + console.log('connection success'); + }; + socket.onerror = () => { + message.error('连接出错') + }; + const terminal = new Terminal({ + cursorBlink: true, + }); + const webLinksAddon = new WebLinksAddon(); + const fitAddon = new FitAddon(); + const attachAddon = new AttachAddon(socket); + terminal.loadAddon(webLinksAddon); + terminal.loadAddon(fitAddon); + terminal.loadAddon(attachAddon); + terminal.open(divRef.current); + fitAddon.fit(); + terminal.prompt = () => { + terminal.write('\r\n '); + }; + terminal.prompt(); + }; + + useEffect(() => { + if (socket) { + socket.close(); + } + initTerminal(); + }, []); + + return ( + +
+ + ) +}; + +export default WebConsole \ No newline at end of file diff --git a/sysom_web/src/pages/components/webconsole/index.less b/sysom_web/src/pages/components/webconsole/index.less new file mode 100644 index 00000000..0e91a3e4 --- /dev/null +++ b/sysom_web/src/pages/components/webconsole/index.less @@ -0,0 +1,7 @@ +@import '~antd/es/style/themes/default.less'; + +.webconsole{ + margin-top: 10px; + height: 600px; + width: 100%; +} diff --git a/sysom_web/src/pages/vmcore/Detail/index.jsx b/sysom_web/src/pages/vmcore/Detail/index.jsx index 923dbbbb..6f16169d 100644 --- a/sysom_web/src/pages/vmcore/Detail/index.jsx +++ b/sysom_web/src/pages/vmcore/Detail/index.jsx @@ -79,7 +79,8 @@ const VmcoreDetail = (props) => {