diff --git a/web/src/app/components/nodes/main.jsx b/web/src/app/components/nodes/main.jsx
index 4071e4b4e51..1c3c49e9a46 100644
--- a/web/src/app/components/nodes/main.jsx
+++ b/web/src/app/components/nodes/main.jsx
@@ -22,7 +22,7 @@ const TagCell = ({rowIndex, data, columnKey, ...props}) => (
);
-const LoginCell = ({user, rowIndex, data, ...props}) => {
+const LoginCell = ({user, onLoginClick, rowIndex, data, ...props}) => {
if(!user || user.logins.length === 0){
return
| ;
}
@@ -30,19 +30,23 @@ const LoginCell = ({user, rowIndex, data, ...props}) => {
var serverId = data[rowIndex].id;
var $lis = [];
- function onNewSessionClick(i){
+ function onClick(i){
var login = user.logins[i];
- return () => createNewSession(serverId, login);
+ if(onLoginClick){
+ return ()=> onLoginClick(serverId, login);
+ }else{
+ return () => createNewSession(serverId, login);
+ }
}
for(var i = 0; i < user.logins.length; i++){
- $lis.push(
{user.logins[i]});
+ $lis.push(
{user.logins[i]});
}
return (
-
+
{
$lis.length > 1 ? (
[
@@ -73,6 +77,7 @@ var Nodes = React.createClass({
render: function() {
var data = this.state.nodeRecords;
+ var onLoginClick = this.props.onLoginClick;
return (
Nodes
@@ -97,6 +102,7 @@ var Nodes = React.createClass({
/>
Login as }
cell={ }
/>
diff --git a/web/src/app/components/selectNodeDialog.jsx b/web/src/app/components/selectNodeDialog.jsx
new file mode 100644
index 00000000000..3347020603b
--- /dev/null
+++ b/web/src/app/components/selectNodeDialog.jsx
@@ -0,0 +1,60 @@
+var React = require('react');
+var reactor = require('app/reactor');
+var {getters} = require('app/modules/dialogs');
+var {closeSelectNodeDialog} = require('app/modules/dialogs/actions');
+var {changeServer} = require('app/modules/activeTerminal/actions');
+var NodeList = require('./nodes/main.jsx');
+
+var SelectNodeDialog = React.createClass({
+
+ mixins: [reactor.ReactMixin],
+
+ getDataBindings() {
+ return {
+ dialogs: getters.dialogs
+ }
+ },
+
+ render() {
+ return this.state.dialogs.isSelectNodeDialogOpen ? : null;
+ }
+});
+
+var Dialog = React.createClass({
+
+ onLoginClick(serverId, login){
+ changeServer(serverId, login);
+ closeSelectNodeDialog();
+ },
+
+ componentWillUnmount(callback){
+ $('.modal').modal('hide');
+ },
+
+ componentDidMount(){
+ $('.modal').modal('show');
+ },
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+});
+
+module.exports = SelectNodeDialog;
diff --git a/web/src/app/modules/activeTerminal/actionTypes.js b/web/src/app/modules/activeTerminal/actionTypes.js
index 6cfd0ad700f..7b904a3ae30 100644
--- a/web/src/app/modules/activeTerminal/actionTypes.js
+++ b/web/src/app/modules/activeTerminal/actionTypes.js
@@ -2,5 +2,6 @@ import keyMirror from 'keymirror'
export default keyMirror({
TLPT_TERM_OPEN: null,
- TLPT_TERM_CLOSE: null
+ TLPT_TERM_CLOSE: null,
+ TLPT_TERM_CHANGE_SERVER: null
})
diff --git a/web/src/app/modules/activeTerminal/actions.js b/web/src/app/modules/activeTerminal/actions.js
index f59160eb8a3..406c912d84f 100644
--- a/web/src/app/modules/activeTerminal/actions.js
+++ b/web/src/app/modules/activeTerminal/actions.js
@@ -6,10 +6,17 @@ var cfg = require('app/config');
var getters = require('./getters');
var sessionModule = require('./../sessions');
-var { TLPT_TERM_OPEN, TLPT_TERM_CLOSE } = require('./actionTypes');
+var { TLPT_TERM_OPEN, TLPT_TERM_CLOSE, TLPT_TERM_CHANGE_SERVER } = require('./actionTypes');
var actions = {
+ changeServer(serverId, login){
+ reactor.dispatch(TLPT_TERM_CHANGE_SERVER, {
+ serverId,
+ login
+ });
+ },
+
close(){
let {isNewSession} = reactor.evaluate(getters.activeSession);
diff --git a/web/src/app/modules/activeTerminal/activeTermStore.js b/web/src/app/modules/activeTerminal/activeTermStore.js
index e8131735902..5978e27dd5d 100644
--- a/web/src/app/modules/activeTerminal/activeTermStore.js
+++ b/web/src/app/modules/activeTerminal/activeTermStore.js
@@ -1,5 +1,5 @@
var { Store, toImmutable } = require('nuclear-js');
-var { TLPT_TERM_OPEN, TLPT_TERM_CLOSE } = require('./actionTypes');
+var { TLPT_TERM_OPEN, TLPT_TERM_CLOSE, TLPT_TERM_CHANGE_SERVER } = require('./actionTypes');
export default Store({
getInitialState() {
@@ -9,9 +9,15 @@ export default Store({
initialize() {
this.on(TLPT_TERM_OPEN, setActiveTerminal);
this.on(TLPT_TERM_CLOSE, close);
+ this.on(TLPT_TERM_CHANGE_SERVER, changeServer);
}
})
+function changeServer(state, {serverId, login}){
+ return state.set('serverId', serverId)
+ .set('login', login);
+}
+
function close(){
return toImmutable(null);
}
diff --git a/web/src/app/modules/activeTerminal/getters.js b/web/src/app/modules/activeTerminal/getters.js
index 451146b3a08..037bc5e5257 100644
--- a/web/src/app/modules/activeTerminal/getters.js
+++ b/web/src/app/modules/activeTerminal/getters.js
@@ -1,3 +1,5 @@
+var {createView} = require('app/modules/sessions/getters');
+
const activeSession = [
['tlpt_active_terminal'], ['tlpt_sessions'],
(activeTerm, sessions) => {
@@ -5,26 +7,37 @@ const activeSession = [
return null;
}
- let view = {
+ /*
+ * active session needs to have its own view as an actual session might not
+ * exist at this point. For example, upon creating a new session we need to know
+ * login and serverId. It will be simplified once server API gets extended.
+ */
+ let asView = {
isNewSession: activeTerm.get('isNewSession'),
notFound: activeTerm.get('notFound'),
addr: activeTerm.get('addr'),
serverId: activeTerm.get('serverId'),
+ serverIp: undefined,
login: activeTerm.get('login'),
sid: activeTerm.get('sid'),
cols: undefined,
rows: undefined
};
- let session = sessions.get(view.sid);
+ // in case if session already exists, get the data from there
+ // (for example, when joining an existing session)
+ if(sessions.has(asView.sid)){
+ let sView = createView(sessions.get(asView.sid));
- if(session){
- view.active = session.get('active'),
- view.cols = session.getIn(['terminal_params', 'w']);
- view.rows = session.getIn(['terminal_params', 'h']);
+ asView.parties = sView.parties;
+ asView.serverIp = sView.serverIp;
+ asView.serverId = sView.serverId;
+ asView.active = sView.active;
+ asView.cols = sView.cols;
+ asView.rows = sView.rows;
}
- return view;
+ return asView;
}
];
diff --git a/web/src/app/modules/dialogs/actionTypes.js b/web/src/app/modules/dialogs/actionTypes.js
new file mode 100644
index 00000000000..e393b959950
--- /dev/null
+++ b/web/src/app/modules/dialogs/actionTypes.js
@@ -0,0 +1,6 @@
+import keyMirror from 'keymirror'
+
+export default keyMirror({
+ TLPT_DIALOG_SHOW_SELECT_NODE: null,
+ TLPT_DIALOG_CLOSE_SELECT_NODE: null
+})
diff --git a/web/src/app/modules/dialogs/actions.js b/web/src/app/modules/dialogs/actions.js
new file mode 100644
index 00000000000..6134d90cd4f
--- /dev/null
+++ b/web/src/app/modules/dialogs/actions.js
@@ -0,0 +1,14 @@
+var reactor = require('app/reactor');
+var { TLPT_DIALOG_SHOW_SELECT_NODE, TLPT_DIALOG_CLOSE_SELECT_NODE } = require('./actionTypes');
+
+var actions = {
+ showSelectNodeDialog(){
+ reactor.dispatch(TLPT_DIALOG_SHOW_SELECT_NODE);
+ },
+
+ closeSelectNodeDialog(){
+ reactor.dispatch(TLPT_DIALOG_CLOSE_SELECT_NODE);
+ }
+}
+
+export default actions;
diff --git a/web/src/app/modules/dialogs/dialogStore.js b/web/src/app/modules/dialogs/dialogStore.js
new file mode 100644
index 00000000000..c7714081dac
--- /dev/null
+++ b/web/src/app/modules/dialogs/dialogStore.js
@@ -0,0 +1,25 @@
+var { Store, toImmutable } = require('nuclear-js');
+
+var { TLPT_DIALOG_SHOW_SELECT_NODE, TLPT_DIALOG_CLOSE_SELECT_NODE } = require('./actionTypes');
+
+export default Store({
+
+ getInitialState() {
+ return toImmutable({
+ isSelectNodeDialogOpen: false
+ });
+ },
+
+ initialize() {
+ this.on(TLPT_DIALOG_SHOW_SELECT_NODE, showSelectNodeDialog);
+ this.on(TLPT_DIALOG_CLOSE_SELECT_NODE, closeSelectNodeDialog);
+ }
+})
+
+function showSelectNodeDialog(state){
+ return state.set('isSelectNodeDialogOpen', true);
+}
+
+function closeSelectNodeDialog(state){
+ return state.set('isSelectNodeDialogOpen', false);
+}
diff --git a/web/src/app/modules/dialogs/getters.js b/web/src/app/modules/dialogs/getters.js
new file mode 100644
index 00000000000..70cac0a718c
--- /dev/null
+++ b/web/src/app/modules/dialogs/getters.js
@@ -0,0 +1,5 @@
+const dialogs = [['tlpt_dialogs'], state=> state.toJS()];
+
+export default {
+ dialogs
+}
diff --git a/web/src/app/modules/dialogs/index.js b/web/src/app/modules/dialogs/index.js
new file mode 100644
index 00000000000..345306c7243
--- /dev/null
+++ b/web/src/app/modules/dialogs/index.js
@@ -0,0 +1,3 @@
+module.exports.getters = require('./getters');
+module.exports.actions = require('./actions');
+module.exports.dialogStore = require('./dialogStore');
diff --git a/web/src/app/modules/index.js b/web/src/app/modules/index.js
index 5971a415f8e..e9fdc6bfc14 100644
--- a/web/src/app/modules/index.js
+++ b/web/src/app/modules/index.js
@@ -1,6 +1,7 @@
var reactor = require('app/reactor');
reactor.registerStores({
'tlpt': require('./app/appStore'),
+ 'tlpt_dialogs': require('./dialogs/dialogStore'),
'tlpt_active_terminal': require('./activeTerminal/activeTermStore'),
'tlpt_user': require('./user/userStore'),
'tlpt_nodes': require('./nodes/nodeStore'),
diff --git a/web/src/app/modules/sessions/getters.js b/web/src/app/modules/sessions/getters.js
index d73494c2e1e..6e7f11c3de7 100644
--- a/web/src/app/modules/sessions/getters.js
+++ b/web/src/app/modules/sessions/getters.js
@@ -65,7 +65,9 @@ function createView(session){
created: new Date(session.get('created')),
lastActive: new Date(session.get('last_active')),
login: session.get('login'),
- parties: parties
+ parties: parties,
+ cols: session.getIn(['terminal_params', 'w']),
+ rows: session.getIn(['terminal_params', 'h'])
}
}
@@ -73,5 +75,6 @@ export default {
partiesBySessionId,
sessionsByServer,
sessionsView,
- sessionViewById
+ sessionViewById,
+ createView
}
diff --git a/web/src/styles/bootstrap.scss b/web/src/styles/bootstrap.scss
index 2f129a42234..248d591e9ac 100644
--- a/web/src/styles/bootstrap.scss
+++ b/web/src/styles/bootstrap.scss
@@ -49,6 +49,7 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
//
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
diff --git a/web/src/styles/grv-app.scss b/web/src/styles/grv-app.scss
index 81486e98634..0fbcf7b16e2 100644
--- a/web/src/styles/grv-app.scss
+++ b/web/src/styles/grv-app.scss
@@ -10,6 +10,7 @@
@import "grv-slider";
@import "grv-session-player";
@import "grv-terminal";
+@import "grv-dialog-select-node";
.grv {
background-color: white;
diff --git a/web/src/styles/grv-current-session.scss b/web/src/styles/grv-current-session.scss
index 55c9a5ec858..b1850d97149 100644
--- a/web/src/styles/grv-current-session.scss
+++ b/web/src/styles/grv-current-session.scss
@@ -22,3 +22,11 @@
}
}
}
+
+
+.grv-current-session-server-info{
+ text-align: center;
+ span{
+ margin-left: 5px
+ }
+}
diff --git a/web/src/styles/grv-dialog-select-node.scss b/web/src/styles/grv-dialog-select-node.scss
new file mode 100644
index 00000000000..e77a7ac27c1
--- /dev/null
+++ b/web/src/styles/grv-dialog-select-node.scss
@@ -0,0 +1,9 @@
+.grv-dialog-select-node{
+ .modal-header{
+ border: none;
+ }
+
+ .modal-footer{
+ border: none;
+ }
+}
|