127 lines
3.0 KiB
HTML
127 lines
3.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script src="/assets/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="/assets/jquery-ui.css">
|
|
<script src="/assets/jquery-ui.js"></script>
|
|
<script src="/assets/distLogo.js"></script>
|
|
<script src="/assets/jquery.terminal.min.js"></script>
|
|
<script src="/assets/unix_formatting.js"></script>
|
|
<link href="/assets/jquery.terminal.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/assets/picluster-iframe.css">
|
|
<script>
|
|
var node;
|
|
|
|
function exec(command, callback) {
|
|
callback = !callback ? function () {} : callback;
|
|
|
|
$.post('/exec', {
|
|
token: parent.token,
|
|
command: command,
|
|
node: node
|
|
}, callback);
|
|
}
|
|
|
|
function init() {
|
|
var node_list = document.getElementById("node_list");
|
|
node = node_list.options[node_list.selectedIndex].value;
|
|
var term = $('#terminal').terminal(function (command) {
|
|
var _this = this;
|
|
command !== '' ? (
|
|
exec(command, function (output) {
|
|
_this.echo(output);
|
|
})
|
|
) : (
|
|
this.echo('')
|
|
);
|
|
}, {
|
|
greetings: '> Connecting to terminal on node ' + node +
|
|
'. There will be a short delay when returning each command output.\n',
|
|
prompt: 'λ ',
|
|
wrap: true
|
|
});
|
|
|
|
exec('uptime', function (output) {
|
|
term.echo(output);
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="modal_container" class="modal">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<span class="close">×</span>
|
|
<h2>PiCluster Terminal</h2>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<fieldset>
|
|
<legend><b>Node</b></legend>
|
|
<select name="node_list" id="node_list"></select>
|
|
</fieldset>
|
|
|
|
<div id="submit_button_div">
|
|
<button id="submit_button">Submit</button>
|
|
</div>
|
|
|
|
<script>
|
|
$(function () {
|
|
var option = '';
|
|
$.get("/nodes?token=" + parent.token, function (data) {
|
|
for (var i in data.nodes) {
|
|
option += '<option value="' + data.nodes[i] + '">' + data.nodes[i] + '</option>';
|
|
}
|
|
$('#node_list').append(option);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="output" class="modal">
|
|
<div id="terminal_modal" class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<span class="close">×</span>
|
|
<h2>PiCluster Terminal</h2>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div id="terminal_container">
|
|
<div id="terminal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var modal = document.getElementById('modal_container');
|
|
var span = document.getElementsByClassName("close")[0];
|
|
var output_modal = document.getElementById('output');
|
|
var output_span = document.getElementsByClassName("close")[1];
|
|
var submit_button = document.getElementById("submit_button");
|
|
|
|
span.onclick = function () {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
output_span.onclick = function () {
|
|
output_modal.style.display = "none";
|
|
}
|
|
|
|
submit_button.onclick = function () {
|
|
modal.style.display = "none";
|
|
output_modal.style.display = "block";
|
|
init();
|
|
}
|
|
|
|
modal.style.display = "block";
|
|
|
|
</script>
|
|
|
|
</html>
|