mirror of
https://github.com/bingohuang/docker-labs.git
synced 2025-10-04 09:23:21 +08:00
Initial commit
This commit is contained in:
Jonathan Leibiusky (@xetorthio)
67
www/assets/app.js
Normal file
67
www/assets/app.js
Normal file
@@ -0,0 +1,67 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('DockerPlay', ['ngMaterial']);
|
||||
|
||||
app.controller('PlayController', ['$scope', '$log', '$http', '$location', '$timeout', function($scope, $log, $http, $location, $timeout) {
|
||||
$scope.sessionId = window.location.pathname.replace('/p/', '');
|
||||
$scope.instances = [];
|
||||
$scope.selectedInstance = null;
|
||||
|
||||
$scope.newInstance = function() {
|
||||
$http({
|
||||
method: 'POST',
|
||||
url: '/sessions/' + $scope.sessionId + '/instances',
|
||||
}).then(function(response) {
|
||||
var i = response.data;
|
||||
$scope.instances.push(i);
|
||||
$scope.showInstance(i);
|
||||
}, function(response) {
|
||||
console.log('error', response);
|
||||
});
|
||||
}
|
||||
|
||||
$scope.getSession = function(sessionId) {
|
||||
$http({
|
||||
method: 'GET',
|
||||
url: '/sessions/' + $scope.sessionId,
|
||||
}).then(function(response) {
|
||||
var i = response.data;
|
||||
for (var k in i.instances) {
|
||||
var instance = i.instances[k];
|
||||
|
||||
$scope.instances.push(instance);
|
||||
}
|
||||
if ($scope.instances.length) {
|
||||
$scope.showInstance($scope.instances[0]);
|
||||
}
|
||||
}, function(response) {
|
||||
console.log('error', response);
|
||||
});
|
||||
}
|
||||
|
||||
$scope.showInstance = function(instance) {
|
||||
$scope.selectedInstance = instance;
|
||||
if (!instance.isAttached) {
|
||||
$timeout(function() {createTerminal(instance.name)});
|
||||
instance.isAttached = true;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.deleteInstance = function(instance) {
|
||||
$http({
|
||||
method: 'DELETE',
|
||||
url: '/sessions/' + $scope.sessionId + '/instances/' + instance.name,
|
||||
}).then(function(response) {
|
||||
$scope.instances = $scope.instances.filter(function(i) { return i.name != instance.name });
|
||||
if ($scope.instances.length) {
|
||||
$scope.showInstance($scope.instances[0]);
|
||||
}
|
||||
}, function(response) {
|
||||
console.log('error', response);
|
||||
});
|
||||
}
|
||||
|
||||
$scope.getSession($scope.sessionId);
|
||||
}]);
|
||||
})();
|
||||
134
www/assets/attach.js
Normal file
134
www/assets/attach.js
Normal file
@@ -0,0 +1,134 @@
|
||||
/*
|
||||
* Implements the attach method, that
|
||||
* attaches the terminal to a WebSocket stream.
|
||||
*
|
||||
* The bidirectional argument indicates, whether the terminal should
|
||||
* send data to the socket as well and is true, by default.
|
||||
*/
|
||||
|
||||
(function (attach) {
|
||||
if (typeof exports === 'object' && typeof module === 'object') {
|
||||
/*
|
||||
* CommonJS environment
|
||||
*/
|
||||
module.exports = attach(require('../../src/xterm'));
|
||||
} else if (typeof define == 'function') {
|
||||
/*
|
||||
* Require.js is available
|
||||
*/
|
||||
define(['../../src/xterm'], attach);
|
||||
} else {
|
||||
/*
|
||||
* Plain browser environment
|
||||
*/
|
||||
attach(window.Terminal);
|
||||
}
|
||||
})(function (Xterm) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* This module provides methods for attaching a terminal to a WebSocket
|
||||
* stream.
|
||||
*
|
||||
* @module xterm/addons/attach/attach
|
||||
*/
|
||||
var exports = {};
|
||||
|
||||
/**
|
||||
* Attaches the given terminal to the given socket.
|
||||
*
|
||||
* @param {Xterm} term - The terminal to be attached to the given socket.
|
||||
* @param {WebSocket} socket - The socket to attach the current terminal.
|
||||
* @param {boolean} bidirectional - Whether the terminal should send data
|
||||
* to the socket as well.
|
||||
* @param {boolean} buffered - Whether the rendering of incoming data
|
||||
* should happen instantly or at a maximum
|
||||
* frequency of 1 rendering per 10ms.
|
||||
*/
|
||||
exports.attach = function (term, socket, bidirectional, buffered) {
|
||||
bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
|
||||
term.socket = socket;
|
||||
|
||||
term._flushBuffer = function () {
|
||||
term.write(term._attachSocketBuffer);
|
||||
term._attachSocketBuffer = null;
|
||||
clearTimeout(term._attachSocketBufferTimer);
|
||||
term._attachSocketBufferTimer = null;
|
||||
};
|
||||
|
||||
term._pushToBuffer = function (data) {
|
||||
if (term._attachSocketBuffer) {
|
||||
term._attachSocketBuffer += data;
|
||||
} else {
|
||||
term._attachSocketBuffer = data;
|
||||
setTimeout(term._flushBuffer, 10);
|
||||
}
|
||||
};
|
||||
|
||||
term._getMessage = function (ev) {
|
||||
if (buffered) {
|
||||
term._pushToBuffer(ev.data);
|
||||
} else {
|
||||
term.write(ev.data);
|
||||
}
|
||||
};
|
||||
|
||||
term._sendData = function (data) {
|
||||
socket.send(data);
|
||||
};
|
||||
|
||||
socket.addEventListener('message', term._getMessage);
|
||||
|
||||
if (bidirectional) {
|
||||
term.on('data', term._sendData);
|
||||
}
|
||||
|
||||
socket.addEventListener('close', term.detach.bind(term, socket));
|
||||
socket.addEventListener('error', term.detach.bind(term, socket));
|
||||
};
|
||||
|
||||
/**
|
||||
* Detaches the given terminal from the given socket
|
||||
*
|
||||
* @param {Xterm} term - The terminal to be detached from the given socket.
|
||||
* @param {WebSocket} socket - The socket from which to detach the current
|
||||
* terminal.
|
||||
*/
|
||||
exports.detach = function (term, socket) {
|
||||
term.off('data', term._sendData);
|
||||
|
||||
socket = (typeof socket == 'undefined') ? term.socket : socket;
|
||||
|
||||
if (socket) {
|
||||
socket.removeEventListener('message', term._getMessage);
|
||||
}
|
||||
|
||||
delete term.socket;
|
||||
};
|
||||
|
||||
/**
|
||||
* Attaches the current terminal to the given socket
|
||||
*
|
||||
* @param {WebSocket} socket - The socket to attach the current terminal.
|
||||
* @param {boolean} bidirectional - Whether the terminal should send data
|
||||
* to the socket as well.
|
||||
* @param {boolean} buffered - Whether the rendering of incoming data
|
||||
* should happen instantly or at a maximum
|
||||
* frequency of 1 rendering per 10ms.
|
||||
*/
|
||||
Xterm.prototype.attach = function (socket, bidirectional, buffered) {
|
||||
return exports.attach(this, socket, bidirectional, buffered);
|
||||
};
|
||||
|
||||
/**
|
||||
* Detaches the current terminal from the given socket.
|
||||
*
|
||||
* @param {WebSocket} socket - The socket from which to detach the current
|
||||
* terminal.
|
||||
*/
|
||||
Xterm.prototype.detach = function (socket) {
|
||||
return exports.detach(this, socket);
|
||||
};
|
||||
|
||||
return exports;
|
||||
});
|
||||
57
www/assets/main.js
Normal file
57
www/assets/main.js
Normal file
@@ -0,0 +1,57 @@
|
||||
//var term,
|
||||
//protocol,
|
||||
//socketURL,
|
||||
//socket,
|
||||
//pid,
|
||||
//charWidth,
|
||||
//charHeight;
|
||||
|
||||
//var terminalContainer = document.getElementById('terminal-container'),
|
||||
//optionElements = {
|
||||
//cursorBlink: document.querySelector('#option-cursor-blink')
|
||||
//},
|
||||
//colsElement = document.getElementById('cols'),
|
||||
//rowsElement = document.getElementById('rows');
|
||||
|
||||
//function setTerminalSize () {
|
||||
//var cols = parseInt(colsElement.value),
|
||||
//rows = parseInt(rowsElement.value),
|
||||
//width = (cols * charWidth).toString() + 'px',
|
||||
//height = (rows * charHeight).toString() + 'px';
|
||||
|
||||
//terminalContainer.style.width = width;
|
||||
//terminalContainer.style.height = height;
|
||||
//term.resize(cols, rows);
|
||||
//}
|
||||
|
||||
//colsElement.addEventListener('change', setTerminalSize);
|
||||
//rowsElement.addEventListener('change', setTerminalSize);
|
||||
|
||||
//optionElements.cursorBlink.addEventListener('change', createTerminal);
|
||||
|
||||
//createTerminal();
|
||||
|
||||
function createTerminal(name) {
|
||||
var terminalContainer = document.getElementById('terminal-' + name);
|
||||
// Clean terminal
|
||||
while (terminalContainer.children.length) {
|
||||
terminalContainer.removeChild(terminalContainer.children[0]);
|
||||
}
|
||||
term = new Terminal({
|
||||
cursorBlink: false
|
||||
});
|
||||
protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
|
||||
socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/exec/' + name;
|
||||
|
||||
term.open(terminalContainer);
|
||||
|
||||
socket = new WebSocket(socketURL);
|
||||
socket.onopen = runRealTerminal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
function runRealTerminal() {
|
||||
term.attach(socket);
|
||||
term._initialized = true;
|
||||
}
|
||||
3
www/assets/style.css
Normal file
3
www/assets/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.selected button {
|
||||
background-color: rgba(158,158,158,0.2);
|
||||
}
|
||||
2196
www/assets/xterm.css
Normal file
2196
www/assets/xterm.css
Normal file
File diff suppressed because it is too large
Load Diff
2137
www/assets/xterm.js
Normal file
2137
www/assets/xterm.js
Normal file
File diff suppressed because it is too large
Load Diff
23
www/assets/xterm.js.map
Normal file
23
www/assets/xterm.js.map
Normal file
File diff suppressed because one or more lines are too long
79
www/index.html
Normal file
79
www/index.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html ng-app="DockerPlay" ng-controller="PlayController">
|
||||
<head>
|
||||
<title>Docker Playground</title>
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
|
||||
<link rel="stylesheet" href="/assets/xterm.css" />
|
||||
<link rel="stylesheet" href="/assets/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div layout="column" style="height:100%;" ng-cloak>
|
||||
|
||||
<section layout="row" flex>
|
||||
|
||||
<md-sidenav
|
||||
class="md-sidenav-left"
|
||||
md-component-id="left"
|
||||
md-is-locked-open="$mdMedia('gt-md')"
|
||||
md-whiteframe="4">
|
||||
|
||||
<md-toolbar class="md-theme-indigo">
|
||||
<h1 class="md-toolbar-tools">Instances</h1>
|
||||
</md-toolbar>
|
||||
<md-content layout-padding>
|
||||
<md-button ng-click="newInstance()" class="md-primary">
|
||||
+ Add new instance
|
||||
</md-button>
|
||||
|
||||
<md-list>
|
||||
<md-list-item class="md-3-line" ng-repeat="instance in instances" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
|
||||
<div class="md-list-item-text">{{instance.name}}</div>
|
||||
<md-divider ng-if="!$last"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-content>
|
||||
|
||||
</md-sidenav>
|
||||
|
||||
<md-content flex layout-padding ng-if="!instances.length">
|
||||
<div layout="column" layout-align="top center">
|
||||
<p>
|
||||
Add instances to your playground.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div flex></div>
|
||||
</md-content>
|
||||
<md-content flex layout-padding ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name">
|
||||
<md-card md-theme="default" md-theme-watch>
|
||||
<md-card-title>
|
||||
<md-card-title-text>
|
||||
<span class="md-headline">{{instance.name}}</span>
|
||||
<span class="md-subhead">{{instance.ip}}</span>
|
||||
<md-card-title-text>
|
||||
</md-card-title>
|
||||
<md-card-actions layout="row">
|
||||
<md-button class="md-warn" ng-click="deleteInstance(instance)">Delete</md-button>
|
||||
</md-card-actions>
|
||||
<md-card-content>
|
||||
<div id="terminal-{{instance.name}}"></div>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</md-content>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
|
||||
<script src="/assets/app.js"></script>
|
||||
<script src="/assets/main.js"></script>
|
||||
<script src="/assets/xterm.js"></script>
|
||||
<script src="/assets/attach.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user