self-hosted/teleport
self-hosted/teleport
1
0
Fork 0
mirror of https://github.com/gravitational/teleport synced 2024-10-22 10:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

(web) adding event-streamer component

Browse source
This commit is contained in:
Alexey Kontsevoy 2016-02-26 18:41:16 -05:00
parent dbca78bd3e
commit 5a975046d8
15 changed files with 1505 additions and 1185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/web/connect.go
View file

@ -40,7 +40,7 @@ type connectReq struct {
// Term sets PTY params like width and height
Term connectTerm `json:"term"`
// SessionID is a teleport session ID to join as
SessionID string `json:"session_id"`
SessionID string `json:"sid"`
}
type connectTerm struct {

14
web/devServer.js
View file

@ -16,9 +16,17 @@ var compiler = webpack(webpackConfig);
var server = new WebpackDevServer(compiler, {
proxy: {
//"v1/webapi/users/invites": "http://x220:3080"
"/v1/webapi/*": "http://0.0.0.0:3080/",
"/portal/*": "http://localhost:33009",
"/sites/v1/*": "http://localhost:33009"
/*"/v1/socket/*" : {
target: 'ws://localhost:3080/v1/webapi/',
ws: true
},*/
"/v1/webapi/*": {
target: "http://0.0.0.0:3080/"
},
"/socket/*": {
target: "ws://0.0.0.0:3080/v1/",
ws: true
}
///"/sites/v1/*": "http://172.28.128.4:34444"
},
publicPath: ROOT +'/app',

759
web/dist/app/app.js vendored
View file

File diff suppressed because one or more lines are too long

26
web/dist/app/styles.js vendored
View file

File diff suppressed because one or more lines are too long

1758
web/dist/app/vendor.js vendored
View file

File diff suppressed because one or more lines are too long

6
web/dist/index.html vendored
View file

@ -10,11 +10,11 @@
<script src="/web/app/assets/js/jquery-validate-1.14.0.js"></script>
<script src="/web/app/assets/js/bootstrap.js"></script>
<script src="/web/app/assets/js/term.js"></script>
<script src="/web/app/vendor.js?ver=0.11456463877805"></script>
<script src="/web/app/styles.js?ver=0.11456463877805"></script>
<script src="/web/app/vendor.js?ver=0.11456529747900"></script>
<script src="/web/app/styles.js?ver=0.11456529747900"></script>
</head>
<body class="grv">
<div id="app"></div>
</body>
<script src="/web/app/app.js?ver=0.11456463877805"></script>
<script src="/web/app/app.js?ver=0.11456529747900"></script>
</html>

2
web/package.json
View file

@ -59,6 +59,6 @@
"url-loader": "^0.5.7",
"webpack": "^1.4.13",
"webpack-dev-middleware": "^1.5.1",
"webpack-dev-server": "^1.10.1"
"webpack-dev-server": "^1.14.1"
}
}

27
web/src/app/components/eventStreamer.jsx Normal file
View file

@ -0,0 +1,27 @@
var cfg = require('app/config');
var React = require('react');
var EventStreamer = React.createClass({
componentDidMount() {
var {token, sid} = this.props;
var connStr = cfg.api.getEventStreamerConnStr(token, sid);
this.socket = new WebSocket(connStr, "proto");
this.socket.onmessage = () => {};
this.socket.onclose = () => {};
},
componentWillUnmount() {
this.socket.close();
},
shouldComponentUpdate(){
return false;
},
render() {
return null;
}
});
export default EventStreamer;

4
web/src/app/components/nodes/main.jsx
View file

@ -30,13 +30,13 @@ const LoginCell = ({user, rowIndex, data, ...props}) => {
var $lis = [];
for(var i = 0; i < user.logins.length; i++){
$lis.push(<li key={i}><a href="#" target="_blank" onClick={connect.bind(null, data[rowIndex].addr, user.logins[i])}>{user.logins[i]}</a></li>);
$lis.push(<li key={i}><a href="#" target="_blank" onClick={connect.bind(null, data[rowIndex].addr, user.logins[i], undefined)}>{user.logins[i]}</a></li>);
}
return (
<Cell {...props}>
<div className="btn-group">
<button type="button" onClick={connect.bind(null, data[rowIndex].addr, user.logins[0])} className="btn btn-sm btn-primary">{user.logins[0]}</button>
<button type="button" onClick={connect.bind(null, data[rowIndex].addr, user.logins[0], undefined)} className="btn btn-sm btn-primary">{user.logins[0]}</button>
{
$lis.length > 1 ? (
<div className="btn-group">

39
web/src/app/components/terminalHost.jsx
View file

@ -2,23 +2,31 @@ var session = require('app/session');
var cfg = require('app/config');
var React = require('react');
var {getters, actions} = require('app/modules/activeTerminal/');
var EventStreamer = require('./eventStreamer.jsx');
var TerminalHost = React.createClass({
mixins: [reactor.ReactMixin],
onOpen(){
actions.connected();
},
getDataBindings() {
return {
terminal: getters.terminal
activeSession: getters.activeSession
}
},
render: function() {
if(!this.state.terminal){
if(!this.state.activeSession){
return null;
}
return (
var {term, isConnected} = this.state.activeSession;
var {token} = session.getUserData();
return (
<div className="grv-terminal-host">
<div className="grv-terminal-participans">
<ul className="nav">
@ -32,7 +40,22 @@ var TerminalHost = React.createClass({
</li>
</ul>
</div>
<TerminalBox settings={this.state.terminal} />
<div>
<div className="btn-group">
<span className="btn btn-xs btn-primary">128.0.0.1:8888</span>
<div className="btn-group">
<button data-toggle="dropdown" className="btn btn-default btn-xs dropdown-toggle" aria-expanded="true">
<span className="caret"></span>
</button>
<ul className="dropdown-menu">
<li><a href="#" target="_blank">Logs</a></li>
<li><a href="#" target="_blank">Logs</a></li>
</ul>
</div>
</div>
</div>
{ isConnected ? <EventStreamer token={token} sid={term.sid}/> : null }
<TerminalBox settings={term} token={token} onOpen={actions.connected}/>
</div>
);
}
@ -40,17 +63,18 @@ var TerminalHost = React.createClass({
var TerminalBox = React.createClass({
renderTerminal: function() {
var {token} = session.getUserData();
var isNew
var parent = document.getElementById("terminal-box");
var settings = this.props.settings;
var {settings, token, sid } = this.props;
//settings.sid = 5555;
settings.term = {
h: 120,
w: 100
};
var connectionStr = cfg.api.getTermConnString(token, settings);
var connectionStr = cfg.api.getSessionConnStr(token, settings);
this.term = new Terminal({
cols: 180,
@ -65,6 +89,7 @@ var TerminalBox = React.createClass({
this.term.write('\x1b[94mconnecting to "pod"\x1b[m\r\n');
this.socket.onopen = () => {
this.props.onOpen();
this.term.on('data', (data) => {
this.socket.send(data);
});

17
web/src/app/config.js
View file

@ -13,11 +13,16 @@ let cfg = {
return formatPattern(cfg.api.invitePath, {inviteToken});
},
getTermConnString: (token, params) => {
getEventStreamerConnStr: (token, sid) => {
var hostname = getWsHostName();
return `${hostname}/v1/webapi/sites/-current-/sessions/${sid}/events/stream?access_token=${token}`;
},
getSessionConnStr: (token, params) => {
var json = JSON.stringify(params);
var jsonEncoded = window.encodeURI(json);
var prefix = location.protocol == "https:"?"wss://":"ws://";
return `${prefix}${params.addr}/v1/webapi/sites/-current-/connect?access_token=${token}&params=${jsonEncoded}`;
var hostname = getWsHostName();
return `${hostname}/v1/webapi/sites/-current-/connect?access_token=${token}&params=${jsonEncoded}`;
}
},
@ -33,3 +38,9 @@ let cfg = {
}
export default cfg;
function getWsHostName(){
var prefix = location.protocol == "https:"?"wss://":"ws://";
var hostport = location.hostname+(location.port ? ':'+location.port: '');
return `${prefix}${hostport}`;
}

3
web/src/app/modules/activeTerminal/actionTypes.js
View file

@ -2,5 +2,6 @@ import keyMirror from 'keymirror'
export default keyMirror({
TLPT_TERM_CONNECT: null,
TLPT_TERM_CLOSE: null
TLPT_TERM_CLOSE: null,
TLPT_TERM_CONNECTED: null
})

11
web/src/app/modules/activeTerminal/actions.js
View file

@ -1,5 +1,6 @@
var reactor = require('app/reactor');
var { TLPT_TERM_CONNECT, TLPT_TERM_CLOSE } = require('./actionTypes');
var {uuid} = require('app/utils');
var { TLPT_TERM_CONNECT, TLPT_TERM_CLOSE, TLPT_TERM_CONNECTED } = require('./actionTypes');
export default {
@ -7,7 +8,11 @@ export default {
reactor.dispatch(TLPT_TERM_CLOSE);
},
connect(addr, login){
connected(){
reactor.dispatch(TLPT_TERM_CONNECTED);
},
connect(addr, login, sid=uuid()){
/*
* {
* "addr": "127.0.0.1:5000",
@ -16,6 +21,6 @@ export default {
* "sid": "123"
* }
*/
reactor.dispatch(TLPT_TERM_CONNECT, {addr, login});
reactor.dispatch(TLPT_TERM_CONNECT, {addr, login, sid} );
}
}

13
web/src/app/modules/activeTerminal/activeTermStore.js
View file

@ -1,5 +1,5 @@
var { Store, toImmutable } = require('nuclear-js');
var { TLPT_TERM_CONNECT, TLPT_TERM_CLOSE } = require('./actionTypes');
var { TLPT_TERM_CONNECT, TLPT_TERM_CLOSE, TLPT_TERM_CONNECTED } = require('./actionTypes');
export default Store({
getInitialState() {
@ -7,6 +7,7 @@ export default Store({
},
initialize() {
this.on(TLPT_TERM_CONNECTED, connected);
this.on(TLPT_TERM_CONNECT, connect);
this.on(TLPT_TERM_CLOSE, close);
}
@ -18,5 +19,13 @@ function close(){
}
function connect(state, term){
return toImmutable(term);
return toImmutable({
isConnecting: true,
term
});
}
function connected(state){
return state.set('isConnected', true)
.set('isConnecting', false);
}

9
web/src/app/modules/activeTerminal/getters.js
View file

@ -1,13 +1,12 @@
const terminal = [ ['tlpt_active_terminal'], (settings) => {
if(!settings){
const activeSession = [ ['tlpt_active_terminal'], (activeSession) => {
if(!activeSession){
return null;
}
var {addr, login } = settings.toJS();
return {addr, login }
return activeSession.toJS();
}
];
export default {
terminal
activeSession
}