- 
- {
- !this.state.collapsed ?
+ {
+ isAdmin() ?
+ <>
+
+
+
- {
- !this.state.collapsed ?
+ {
+ isAdmin() ?
+ <>
+
+ 
+ {
+ !this.state.collapsed ?
+ <>
- <>
+ {
+ !this.state.collapsed ?
+ <> Next Terminal
: + null + } +Next Terminal
: - null - } -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ :
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
-
-
diff --git a/web/src/common/constants.js b/web/src/common/constants.js
index 7bead42..1ef0fc7 100644
--- a/web/src/common/constants.js
+++ b/web/src/common/constants.js
@@ -4,4 +4,10 @@ export const PROTOCOL_COLORS = {
'telnet': 'geekblue',
'vnc': 'purple',
'kubernetes': 'volcano'
+}
+
+export const MODE_COLORS = {
+ 'guacd': 'green',
+ 'naive': 'orange',
+ 'terminal': 'purple',
}
\ No newline at end of file
diff --git a/web/src/components/access/Access.js b/web/src/components/access/Access.js
index cc67eb7..1d57418 100644
--- a/web/src/components/access/Access.js
+++ b/web/src/components/access/Access.js
@@ -1,20 +1,24 @@
import React, {Component} from 'react';
import Guacamole from 'guacamole-common-js';
-import {Affix, Button, Col, Drawer, Dropdown, Form, Input, Menu, message, Modal, Row} from 'antd'
+import {Affix, Button, Drawer, Dropdown, Form, Input, Menu, message, Modal, Tooltip} from 'antd'
import qs from "qs";
import request from "../../common/request";
import {wsServer} from "../../common/env";
import {
- AppstoreTwoTone,
- CopyTwoTone,
- DesktopOutlined,
+ CodeOutlined,
+ CopyOutlined,
ExclamationCircleOutlined,
- ExpandOutlined
+ ExpandOutlined,
+ FolderOutlined,
+ LineChartOutlined,
+ WindowsOutlined
} from '@ant-design/icons';
import {exitFull, getToken, isEmpty, requestFullScreen} from "../../utils/utils";
import './Access.css'
import Draggable from 'react-draggable';
-import FileSystem from "./FileSystem";
+import FileSystem from "../devops/FileSystem";
+import Stats from "./Stats";
+import {Base64} from "js-base64";
const {TextArea} = Input;
@@ -28,8 +32,11 @@ const STATE_DISCONNECTED = 5;
class Access extends Component {
clipboardFormRef = React.createRef();
+ statsRef = undefined;
+ error = false;
state = {
+ session: {},
sessionId: '',
client: {},
clientState: STATE_IDLE,
@@ -48,7 +55,9 @@ class Access extends Component {
startTime: new Date(),
fullScreen: false,
fullScreenBtnText: '进入全屏',
- sink: undefined
+ sink: undefined,
+ commands: [],
+ showFileSystem: false
};
async componentDidMount() {
@@ -57,14 +66,20 @@ class Access extends Component {
let assetId = urlParams.get('assetId');
document.title = urlParams.get('assetName');
let protocol = urlParams.get('protocol');
- let sessionId = await this.createSession(assetId);
+ let session = await this.createSession(assetId);
+ if (!session) {
+ return;
+ }
+ let sessionId = session['id'];
if (isEmpty(sessionId)) {
return;
}
this.setState({
+ session: session,
sessionId: sessionId,
- protocol: protocol
+ protocol: protocol,
+ showFileSystem: session['fileSystem'] === '1'
});
this.renderDisplay(sessionId, protocol);
@@ -130,6 +145,17 @@ class Access extends Component {
}
}
+ getCommands = async () => {
+ let result = await request.get('/commands');
+ if (result.code !== 1) {
+ message.error(result.message);
+ return;
+ }
+ this.setState({
+ commands: result['data']
+ })
+ }
+
onClientStateChange = (state) => {
this.setState({
clientState: state
@@ -154,11 +180,18 @@ class Access extends Component {
// 向后台发送请求，更新会话的状态
this.updateSessionStatus(this.state.sessionId).then(_ => {
})
+ if (this.state.protocol === 'ssh') {
+ // 加载指令
+ this.getCommands();
+ }
break;
case STATE_DISCONNECTING:
break;
case STATE_DISCONNECTED:
+ if (!this.error) {
+ this.showMessage('连接已关闭');
+ }
break;
default:
@@ -167,7 +200,7 @@ class Access extends Component {
};
onError = (status) => {
-
+ this.error = true;
console.log('通道异常。', status);
switch (status.code) {
@@ -175,7 +208,7 @@ class Access extends Component {
this.showMessage('未支持的访问');
break;
case 512:
- this.showMessage('远程服务异常');
+ this.showMessage('远程服务异常，请检查目标设备能否正常访问。');
break;
case 513:
this.showMessage('服务器忙碌');
@@ -196,11 +229,7 @@ class Access extends Component {
this.showMessage('资源已关闭');
break;
case 519:
- if (new Date().getTime() - this.state.startTime.getTime() <= 1000 * 30) {
- this.showMessage('认证失败');
- } else {
- this.showMessage('远程服务未找到');
- }
+ this.showMessage('远程服务未找到');
break;
case 520:
this.showMessage('远程服务不可用');
@@ -236,13 +265,19 @@ class Access extends Component {
this.showMessage('会话不存在');
break;
case 801:
- this.showMessage('创建隧道失败');
+ this.showMessage('创建隧道失败，请检查Guacd服务是否正常。');
break;
case 802:
this.showMessage('管理员强制关闭了此会话');
break;
default:
- this.showMessage('未知错误。');
+ if (status.message) {
+ // guacd 无法处理中文字符，所以进行了base64编码。
+ this.showMessage(Base64.decode(status.message));
+ } else {
+ this.showMessage('未知错误。');
+ }
+
}
};
@@ -270,10 +305,7 @@ class Access extends Component {
// If the received data is text, read it as a simple string
if (/^text\//.exec(mimetype)) {
-
reader = new Guacamole.StringReader(stream);
-
- // Assemble received data into a single string
let data = '';
reader.ontext = function textReceived(text) {
data += text;
@@ -281,7 +313,6 @@ class Access extends Component {
// Set clipboard contents once stream is finished
reader.onend = async () => {
-
// message.info('您选择的内容已复制到您的粘贴板中，在右侧的输入框中可同时查看到。');
this.setState({
clipboardText: data
@@ -335,18 +366,16 @@ class Access extends Component {
fullScreenBtnText: '退出全屏'
})
}
- if (this.state.sink) {
- this.state.sink.focus();
- }
+ this.focus();
}
async createSession(assetsId) {
let result = await request.post(`/sessions?assetId=${assetsId}&mode=guacd`);
if (result['code'] !== 1) {
this.showMessage(result['message']);
- return null;
+ return undefined;
}
- return result['data']['id'];
+ return result['data'];
}
async renderDisplay(sessionId, protocol) {
@@ -517,6 +546,12 @@ class Access extends Component {
}
};
+ focus = () => {
+ if (this.state.sink) {
+ this.state.sink.focus();
+ }
+ }
+
sendCombinationKey = (keys) => {
for (let i = 0; i < keys.length; i++) {
this.state.client.sendKeyEvent(1, keys[i]);
@@ -526,9 +561,23 @@ class Access extends Component {
}
}
+ writeCommand = (command) => {
+ let client = this.state.client;
+ let outputStream = client.createPipeStream('text/plain', 'STDIN');
+ // Wrap output stream in writer
+ let writer = new Guacamole.StringWriter(outputStream);
+ writer.sendText(command);
+ writer.sendEnd();
+ this.focus();
+ }
+
+ onRef = (statsRef) => {
+ this.statsRef = statsRef;
+ }
+
render() {
- const menu = (
+ const hotKeyMenu = (
);
+ const cmdMenuItems = this.state.commands.map(item => {
+ return
+ {
+ this.writeCommand(item['content'])
+ }} key={'i-' + item['id']}>{item['name']}
+ ;
+ });
+
+ const cmdMenu = (
+
+ );
+
return (
-
+
-
-
{
- this.state.protocol === 'rdp' ?
+ this.state.protocol === 'vnc' ?
<>
-
+
+ : undefined
+ }
+
+ {
+ this.state.protocol === 'rdp' && this.state.showFileSystem ?
+ <>
+
+
+
+ : undefined
+ }
+ {
+ this.state.protocol === 'rdp' ?
+ <>
-
-
-
-
-
-
-
-
-
-
-
- {getCurrentUser()['nickname']}
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+ {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+ className: 'trigger',
+ onClick: this.onCollapse,
+ })}
-
-
-
-
+
-
+
+
+
+
+
+
+
+ {getCurrentUser()['nickname']}
+
+
+
+
+
+ Next Terminal
+
+
+
+
+
+
+
+
+
+
+
+ Next Terminal
+
+
+
+
+
+
+
+
+
+
+
+
+ {getCurrentUser()['nickname']}
+
+
+
+
@@ -559,7 +622,7 @@ class Access extends Component {