!19 完成主机管理在线终端功能

* 完成主机管理在线终端功能
* 规范化前端代码结构

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',
@@ -41,11 +56,11 @@ export default [
         path: 'dashboard',
         name: 'dashboard',
         hideInBreadcrumb:true,
-        component: './monitor/SystemDashboard',
+        component: './Monitor/SystemDashboard',
       },
       {
         path: 'dashboard/:host?',
-        component: './monitor/SystemDashboard',
+        component: './Monitor/SystemDashboard',
       },
       {
         component: './404',
@@ -63,7 +78,7 @@ export default [
       {
         path: '/vmcore/list',
         name: 'list',
-        component: './vmcore/list',
+        component: './vmcore/List',
       },
       {
         path: '/vmcore/detail/:id?',
@@ -72,12 +87,11 @@ export default [
       {
         path: '/vmcore/match',
         name: 'match',
-        component: './vmcore/match',
+        component: './vmcore/Match',
       },
       {
-        path: '/vmcore/analyse',
+        path: '/vmcore/analyse/:id?',
-        name: 'analyse',
+        component: './vmcore/Analyse',
-        component: './vmcore/analyse',
       },
     ],
   },
@@ -92,12 +106,12 @@ export default [
       {
         path: '/diagnose/io',
         name: 'io',
-        component: './diagnose/io',
+        component: './diagnose/Io',
       },
       {
         path: '/diagnose/net',
         name: 'net',
-        component: './diagnose/net',
+        component: './diagnose/Net',
       },
     ],
   },

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': '系统监控',

sysom_web/src/pages/Monitor/SystemDashboard.jsx

@@ -5,7 +5,7 @@ import { Card, Statistic } from 'antd';
 import { Space, Row, Col } from 'antd';
 import { useIntl, useRequest, useParams, FormattedMessage } from 'umi';
 import { useState } from 'react'
-import { getHost } from '../Host/service';
+import { getHost } from '../host/service';
 
 const ServerList = (props) => {
 

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 { getCluster, getHost, addHost, deleteHost } from '../service';
-import Cluster from './components/ClusterForm';
+import Cluster from '../components/ClusterForm';
 
 const handleAddHost = async (fields) => {
   const hide = message.loading('正在添加');
@@ -124,6 +124,11 @@ const HostList = () => {
           }}>
           <a><FormattedMessage id="pages.hostTable.delete" defaultMessage="host delete" /></a>
         </Popconfirm>
+        </span>,
+        <span key='terminal'>
+          <a href={"/host/terminal/" + record.id} target="_blank">
+            终端
+          </a>
         </span>
       ],
     },

sysom_web/src/pages/host/Terminal/index.jsx

@@ -0,0 +1,12 @@
+import WebConsole from '@/pages/host/components/WebConsole'
+
+const Terminal = (props) => {
+  const userId = localStorage.getItem('userId');
+  return (
+    <>
+      <WebConsole id={props.match.params.id}  user_id={userId} />
+    </>
+  )
+};
+
+export default Terminal

sysom_web/src/pages/host/components/WebConsole/index.jsx

@@ -6,22 +6,23 @@ 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 terminal = new Terminal({
+    socket = new WebSocket(`ws://127.0.0.1:8001/ws/ssh/${props.id}/?user_id=${props.user_id}`);
-      cursorBlink: true,
-    });
-    socket = new WebSocket(`ws://127.0.0.1:8001/ws/ssh/2/?user_id=1`);
     socket.onopen = () => {
       terminal.focus();
     };
     socket.onerror = () => {
       message.error('连接出错')
     };
+    const terminal = new Terminal({
+      cursorBlink: true,
+    });
     const webLinksAddon = new WebLinksAddon();
     const fitAddon = new FitAddon();
     const attachAddon = new AttachAddon(socket);
@@ -45,7 +46,7 @@ const WebConsole = (props) => {
 
   return (
     <PageContainer>
-      <div style={{ marginTop: 10, width: 760, height: 500 }} ref={divRef} />;
+      <div className={styles.webconsole} ref={divRef} />
     </PageContainer>
   )
 };

sysom_web/src/pages/host/components/WebConsole/index.less

@@ -0,0 +1,7 @@
+@import '~antd/es/style/themes/default.less';
+
+.webconsole{
+  margin-top: 10px;
+  height: 600px;
+  width: 100%;
+}

sysom_web/src/pages/vmcore/Analyse/index.jsx

@@ -0,0 +1,12 @@
+import WebConsole from '@/pages/host/components/WebConsole'
+
+const VmcoreAnalyse = (props) => {
+  const userId = localStorage.getItem('userId');
+  return (
+    <>
+      <WebConsole id={props.match.params.id}  user_id={userId}  />
+    </>
+  )
+};
+
+export default VmcoreAnalyse

sysom_web/src/pages/vmcore/Detail/index.jsx

@@ -78,9 +78,7 @@ const VmcoreDetail = (props) => {
             </Button>
             <Button
               type="primary"
-              onClick={() => {
+              href={`/vmcore/analyse/${data?.id}`}
-                actionRef.current?.reload();
-              }}
               key="analyse"
             >
               在线分析Vmcore