github/docker-labs
1
0
Fork 0
mirror of https://github.com/bingohuang/docker-labs.git synced 2025-07-14 01:57:32 +08:00
Code Issues Releases Wiki Activity

Update to 163yun and Chinese

Browse Source
This commit is contained in:
bingohuang 2017-05-09 19:18:47 +08:00
parent 24f8c9fc62
commit 87e75f59ae
9 changed files with 83 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,2 +1,4 @@
play-with-docker play-with-docker
node_modules node_modules
.idea

4
docker-compose.yml
View File

@ -23,6 +23,8 @@ services:
- $GOPATH/src:/go/src - $GOPATH/src:/go/src
environment: environment:
GOOGLE_RECAPTCHA_DISABLED: "true" GOOGLE_RECAPTCHA_DISABLED: "true"
DIND_IMAGE: "hub.c.163.com/bingohuang/dind:17.04.0-ce-vfs"
EXPIRY: "3h"
pwd2: pwd2:
# pwd daemon container always needs to be named this way # pwd daemon container always needs to be named this way
container_name: pwd2 container_name: pwd2
@ -37,3 +39,5 @@ services:
- $GOPATH/src:/go/src - $GOPATH/src:/go/src
environment: environment:
GOOGLE_RECAPTCHA_DISABLED: "true" GOOGLE_RECAPTCHA_DISABLED: "true"
DIND_IMAGE: "hub.c.163.com/bingohuang/dind:17.04.0-ce-vfs"
EXPIRY: "3h"

BIN
www/assets/163yun-logo.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

43
www/assets/app.js
View File

@ -5,11 +5,11 @@
// Automatically redirects user to a new session when bypassing captcha. // Automatically redirects user to a new session when bypassing captcha.
// Controller keeps code/logic separate from the HTML // Controller keeps code/logic separate from the HTML
app.controller("BypassController", ['$scope', '$log', '$http', '$location', '$timeout', function($scope, $log, $http, $location, $timeout) { // app.controller("BypassController", ['$scope', '$log', '$http', '$location', '$timeout', function($scope, $log, $http, $location, $timeout) {
setTimeout(function() { // setTimeout(function() {
document.getElementById("welcomeFormBypass").submit(); // document.getElementById("welcomeFormBypass").submit();
}, 500); // }, 500);
}]); // }]);
app.controller('PlayController', ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$window', 'TerminalService', 'KeyboardShortcutService', 'InstanceService', function($scope, $log, $http, $location, $timeout, $mdDialog, $window, TerminalService, KeyboardShortcutService, InstanceService) { app.controller('PlayController', ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$window', 'TerminalService', 'KeyboardShortcutService', 'InstanceService', function($scope, $log, $http, $location, $timeout, $mdDialog, $window, TerminalService, KeyboardShortcutService, InstanceService) {
$scope.sessionId = window.location.pathname.replace('/p/', ''); $scope.sessionId = window.location.pathname.replace('/p/', '');
@ -20,8 +20,8 @@
$scope.ttl = '--:--:--'; $scope.ttl = '--:--:--';
$scope.connected = true; $scope.connected = true;
$scope.isInstanceBeingCreated = false; $scope.isInstanceBeingCreated = false;
$scope.newInstanceBtnText = '+ Add new instance'; $scope.newInstanceBtnText = '+ 创建工作台';
$scope.deleteInstanceBtnText = 'Delete'; $scope.deleteInstanceBtnText = '删除工作台';
$scope.isInstanceBeingDeleted = false; $scope.isInstanceBeingDeleted = false;
var selectedKeyboardShortcuts = KeyboardShortcutService.getCurrentShortcuts(); var selectedKeyboardShortcuts = KeyboardShortcutService.getCurrentShortcuts();
@ -44,7 +44,7 @@
.clickOutsideToClose(true) .clickOutsideToClose(true)
.title(title) .title(title)
.textContent(content) .textContent(content)
.ok('Got it!') .ok('收到！')
); );
} }
@ -83,7 +83,7 @@
$scope.showInstance(i); $scope.showInstance(i);
}, function(response) { }, function(response) {
if (response.status == 409) { if (response.status == 409) {
$scope.showAlert('Max instances reached', 'Maximum number of instances reached') $scope.showAlert('工作台到达上限', '工作台最大个数是 5，已达上限')
} }
}).finally(function() { }).finally(function() {
updateNewInstanceBtnState(false); updateNewInstanceBtnState(false);
@ -120,7 +120,7 @@
}); });
socket.on('session end', function() { socket.on('session end', function() {
$scope.showAlert('Session timed out!', 'Your session has expired and all of your instances have been deleted.', '#sessionEnd') $scope.showAlert('实验室关门啦!', '你的实验室关门了，所有工作台都已删除。', '#sessionEnd')
$scope.isAlive = false; $scope.isAlive = false;
}); });
@ -178,7 +178,7 @@
if (inst) $scope.showInstance(inst); if (inst) $scope.showInstance(inst);
}, function(response) { }, function(response) {
if (response.status == 404) { if (response.status == 404) {
document.write('session not found'); document.write('该实验室没找到');
return return
} }
}); });
@ -291,20 +291,20 @@
function updateNewInstanceBtnState(isInstanceBeingCreated) { function updateNewInstanceBtnState(isInstanceBeingCreated) {
if (isInstanceBeingCreated === true) { if (isInstanceBeingCreated === true) {
$scope.newInstanceBtnText = '+ Creating...'; $scope.newInstanceBtnText = '+ 创建中...';
$scope.isInstanceBeingCreated = true; $scope.isInstanceBeingCreated = true;
} else { } else {
$scope.newInstanceBtnText = '+ Add new instance'; $scope.newInstanceBtnText = '+ 创建工作台';
$scope.isInstanceBeingCreated = false; $scope.isInstanceBeingCreated = false;
} }
} }
function updateDeleteInstanceBtnState(isInstanceBeingDeleted) { function updateDeleteInstanceBtnState(isInstanceBeingDeleted) {
if (isInstanceBeingDeleted === true) { if (isInstanceBeingDeleted === true) {
$scope.deleteInstanceBtnText = 'Deleting...'; $scope.deleteInstanceBtnText = '删除中...';
$scope.isInstanceBeingDeleted = true; $scope.isInstanceBeingDeleted = true;
} else { } else {
$scope.deleteInstanceBtnText = 'Delete'; $scope.deleteInstanceBtnText = '删除工作台';
$scope.isInstanceBeingDeleted = false; $scope.isInstanceBeingDeleted = false;
} }
} }
@ -424,14 +424,17 @@
function getAvailablePresets() { function getAvailablePresets() {
return [ return [
{ name : "None", presets : [ {
{ description : "Toggle terminal fullscreen", command : "Alt+enter", altKey : true, keyCode : 13, action : function(context) { TerminalService.toggleFullscreen(context.terminal, resizeFunc); }} name : "None",
] }, presets : [
{ description : "全屏终端", command : "Alt+enter", altKey : true, keyCode : 13, action : function(context) { TerminalService.toggleFullscreen(context.terminal, resizeFunc); }}
]
},
{ {
name : "Mac OSX", name : "Mac OSX",
presets : [ presets : [
{ description : "Clear terminal", command : "Cmd+K", metaKey : true, keyCode : 75, action : function(context) { context.terminal.clear(); }}, { description : "清空终端", command : "Cmd+K", metaKey : true, keyCode : 75, action : function(context) { context.terminal.clear(); }},
{ description : "Toggle terminal fullscreen", command : "Alt+enter", altKey : true, keyCode : 13, action : function(context) { TerminalService.toggleFullscreen(context.terminal, resizeFunc); }} { description : "全屏终端", command : "Alt+enter", altKey : true, keyCode : 13, action : function(context) { TerminalService.toggleFullscreen(context.terminal, resizeFunc); }}
] ]
} }
] ]

7
www/assets/baidu-tongji.js Normal file
View File

@ -0,0 +1,7 @@
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e917a968ccce0f45ca7b7405bae48d9a";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();

6
www/assets/style.css
View File

@ -49,3 +49,9 @@ md-input-container .md-errors-spacer {
.stats { .stats {
min-height: 230px; min-height: 230px;
} }
.footer__copyright {
font-size: 14px;
position:absolute;
bottom: 0;
}

10
www/bypass.html
View File

@ -1,17 +1,19 @@
<!doctype html> <!doctype html>
<html ng-app="DockerPlay" ng-controller="BypassController"> <html ng-app="DockerPlay" ng-controller="BypassController">
<head> <head>
<title>Docker Playground</title> <title>Docker 在线实验室</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="/assets/style.css" /> <link rel="stylesheet" href="/assets/style.css" />
<script src='/assets/baidu-tongji.js'></script>
</head> </head>
<body class="welcome"> <body class="welcome">
<div> <div>
<h1>Welcome!</h1> <h1>欢迎来到 Docker 在线实验室!</h1>
<h2>We're bypassing the Captcha and redirecting you now..</h2> <h3>请点击开始，无需安装任何环境，在线体验 Docker！</h3>
<form id="welcomeFormBypass" method="POST" action="/"> <form id="welcomeFormBypass" method="POST" action="/">
<button id="start" type="submit">Start Session</button> <button id="start" type="submit">开启一个新实验室</button>
</form> </form>
<img src="/assets/large_h.png" />
</div> </div>
</body> </body>

54
www/index.html
View File

@ -1,20 +1,21 @@
<!doctype html> <!doctype html>
<html ng-app="DockerPlay" ng-controller="PlayController"> <html ng-app="DockerPlay" ng-controller="PlayController">
<head> <head>
<title>Docker Playground</title> <title>Docker 在线实验室</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> <link rel="stylesheet" href="https://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/xterm.css" />
<link rel="stylesheet" href="/assets/xterm-addons/fullscreen.css" /> <link rel="stylesheet" href="/assets/xterm-addons/fullscreen.css" />
<link rel="stylesheet" href="/assets/style.css" /> <link rel="stylesheet" href="/assets/style.css" />
<script> <!--<script>-->
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ <!--(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){-->
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), <!--(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),-->
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) <!--m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)-->
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); <!--})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');-->
ga('create', 'UA-89019737-1', 'auto'); <!--ga('create', 'UA-89019737-1', 'auto');-->
ga('send', 'pageview'); <!--ga('send', 'pageview');-->
</script> <!--</script>-->
<script src='/assets/baidu-tongji.js'></script>
</head> </head>
<body> <body>
@ -23,7 +24,7 @@
<md-content flex layout-padding ng-if="!instances.length"> <md-content flex layout-padding ng-if="!instances.length">
<div layout="column" layout-align="top center"> <div layout="column" layout-align="top center">
<p> <p>
<strong>Your session has expired.</strong> <strong>你的实验室关门了</strong>
</p> </p>
</div> </div>
<div flex></div> <div flex></div>
@ -31,7 +32,7 @@
</section> </section>
<section ng-if="!connected" class="disconnected" layout="row" layout-align="center center"> <section ng-if="!connected" class="disconnected" layout="row" layout-align="center center">
<h1 class="md-headline">No connection to server. Reconnecting...</h1> <h1 class="md-headline">和实验室管理员失去联系，呼叫中...</h1>
<md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular> <md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
</section> </section>
@ -42,11 +43,14 @@
md-is-locked-open="$mdMedia('gt-sm')" md-is-locked-open="$mdMedia('gt-sm')"
md-whiteframe="4" layout="column"> md-whiteframe="4" layout="column">
<a href="http://163yun.com" class="m-logo" target="_blank">
<center><img src="/assets/163yun-logo.png" alt="网易云" title="网易云" width="160px"></center>
</a>
<md-toolbar class="md-theme-indigo"> <md-toolbar class="md-theme-indigo">
<span class="clock">{{ttl}}</span> <span class="clock">{{ttl}}</span>
<md-button class="md-warn md-raised" ng-click="closeSession()">Close session</md-button> <md-button class="md-warn md-raised" ng-click="closeSession()">关闭实验室</md-button>
<div class="md-toolbar-tools"> <div class="md-toolbar-tools">
<h1 class="md-toolbar-tools">Instances</h1> <h1 class="md-toolbar-tools">工作台</h1>
<settings-icon></settings-icon> <settings-icon></settings-icon>
</div> </div>
</md-toolbar> </md-toolbar>
@ -62,11 +66,15 @@
</md-list> </md-list>
</md-content> </md-content>
<div class="footer__copyright">
<b>© 2017 <a class="footer__link" href="https://163yun.com/" target="_blank">163yun</a> & <a class="footer__link" href="https://github.com/bingohuang" target="_blank">Bingo Huang</a></b><br><br>
</div>
</md-sidenav> </md-sidenav>
<md-content flex layout-padding ng-if="!instances.length"> <md-content flex layout-padding ng-if="!instances.length">
<div layout="column" layout-align="top center"> <div layout="column" layout-align="top center">
<p>Add instances to your playground.</p> <p>在你的实验室中添加工作台（独立的 Docker 环境）</p>
<p><strong>Sessions and all their instances are deleted after {{ttl}} hours.</strong></p> <p><strong>当前实验室和所属工作台将在 {{ttl}} 后删除</strong></p>
</div> </div>
<div flex></div> <div flex></div>
@ -92,7 +100,7 @@
</div> </div>
<div layout-gt-sm="row"> <div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<label>Memory</label> <label>MEM</label>
<input ng-model="instance.mem" type="text" readonly="readonly"> <input ng-model="instance.mem" type="text" readonly="readonly">
</md-input-container> </md-input-container>
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
@ -116,10 +124,10 @@
<script type="text/ng-template" id="settings-modal.html"> <script type="text/ng-template" id="settings-modal.html">
<md-toolbar> <md-toolbar>
<div class="md-toolbar-tools"> <div class="md-toolbar-tools">
<h2>Settings</h2> <h2>设置</h2>
<span flex></span> <span flex></span>
<md-button class="md-icon-button" ng-click="$ctrl.close()"> <md-button class="md-icon-button" ng-click="$ctrl.close()">
<md-icon class="material-icon" aria-label="Close dialog">close</md-icon> <md-icon class="material-icon" aria-label="Close dialog">✘</md-icon>
</md-button> </md-button>
</div> </div>
</md-toolbar> </md-toolbar>
@ -129,7 +137,7 @@
<div layout="row"> <div layout="row">
<div flex="50"> <div flex="50">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<label>Keyboard Shortcut Preset</label> <label>快捷键预设</label>
<md-select ng-model="$ctrl.currentShortcutConfig" ng-model-options="{getterSetter: true}" placeholder="Keyboard shortcut prefix"> <md-select ng-model="$ctrl.currentShortcutConfig" ng-model-options="{getterSetter: true}" placeholder="Keyboard shortcut prefix">
<md-option ng-repeat="preset in $ctrl.keyboardShortcutPresets" value="{{preset}}"> <md-option ng-repeat="preset in $ctrl.keyboardShortcutPresets" value="{{preset}}">
{{preset.name}} {{preset.name}}
@ -140,9 +148,9 @@
<div flex="10"></div> <div flex="10"></div>
<div flex="40"> <div flex="40">
<div ng-if="$ctrl.selectedShortcutPreset"> <div ng-if="$ctrl.selectedShortcutPreset">
Preset details: 预设详情:
<ul> <ul>
<li ng-if="$ctrl.selectedShortcutPreset.presets.length == 0">No presets defined</li> <li ng-if="$ctrl.selectedShortcutPreset.presets.length == 0">无</li>
<li ng-repeat="preset in $ctrl.selectedShortcutPreset.presets"> <li ng-repeat="preset in $ctrl.selectedShortcutPreset.presets">
<code>{{preset.command}}</code> - {{preset.description}} <code>{{preset.command}}</code> - {{preset.description}}
</li> </li>
@ -180,7 +188,7 @@
<md-dialog-actions layout="row"> <md-dialog-actions layout="row">
<span flex></span> <span flex></span>
<md-button ng-click="$ctrl.close()"> <md-button ng-click="$ctrl.close()">
Close 关闭
</md-button> </md-button>
</md-dialog-actions> </md-dialog-actions>
</script> </script>

7
www/welcome.html
View File

@ -2,15 +2,16 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Docker Playground</title> <title>Docker 在线实验室</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="/assets/style.css" /> <link rel="stylesheet" href="/assets/style.css" />
<script src='https://www.google.com/recaptcha/api.js'></script> <script src='https://www.google.com/recaptcha/api.js'></script>
<script src='/assets/baidu-tongji.js'></script>
</head> </head>
<body class="welcome"> <body class="welcome">
<div> <div>
<h1>Welcome!</h1> <h1>欢迎来到 Docker 在线实验室!</h1>
<h2>Before starting we need to verify you are a human</h2> <h2>请先确认你不是机器人哦！</h2>
<form id="welcomeForm" method="POST" action="/"> <form id="welcomeForm" method="POST" action="/">
<div id="recaptcha" class="g-recaptcha" data-callback="iAmHuman" data-sitekey="{{.}}"></div> <div id="recaptcha" class="g-recaptcha" data-callback="iAmHuman" data-sitekey="{{.}}"></div>
<input type="hidden" name="session-duration" value="4h"/> <input type="hidden" name="session-duration" value="4h"/>