Skip to content

Commit 7463bea

Browse files
DaneEverittDaneEveritt
committed
fix the console rendering 🚤
1 parent 9515128 commit 7463bea

File tree

6 files changed

+178
-124
lines changed

6 files changed

+178
-124
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@ This file is a running track of new features and fixes to each version of the pa
44
This project follows [Semantic Versioning](http://semver.org) guidelines.
55

66
## v0.6.4 (Courageous Carniadactylus)
7+
###
8+
* Fixed the console rendering on page load, I guess people don't like watching it load line-by-line for 10 minutes. Who would have guessed...
9+
710
### Changed
811
* Panel API for Daemon now responds with a `HTTP/401 Unauthorized` error when unable to locate a node with a given authentication token, rather than a `HTTP/404 Not Found` response.
12+
* Added better colors and styling for the terminal that can be adjusted per-theme.
913

1014
## v0.6.3 (Courageous Carniadactylus)
1115
### Fixed

‎public/themes/pterodactyl/css/pterodactyl.css‎

Lines changed: 0 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -257,22 +257,6 @@ span[aria-labelledby="select2-pUserId-container"] {
257257
position: relative;
258258
}
259259

260-
.terminal-notify {
261-
position: absolute;
262-
right: 27px;
263-
bottom: 10px;
264-
padding: 3.5px 7px;
265-
border-radius: 3px 3px 0 0;
266-
background: #ccc;
267-
color: #000;
268-
opacity: .5;
269-
cursor: pointer;
270-
}
271-
272-
.terminal-notify:hover {
273-
opacity: .9;
274-
}
275-
276260
.no-margin-bottom {
277261
margin-bottom: 0 !important;
278262
}
@@ -311,90 +295,3 @@ input.form-autocomplete-stop[readonly] {
311295
background: white;
312296
box-shadow: none !important;
313297
}
314-
315-
#terminal {
316-
font-family: monospace;
317-
color: #aaa;
318-
background: #000;
319-
font-size: 12px;
320-
line-height: 14px;
321-
padding: 10px 10px 0;
322-
box-sizing: border-box;
323-
height: 500px;
324-
max-height: 500px;
325-
overflow-y: auto;
326-
overflow-x: hidden;
327-
border-radius: 5px 5px 0 0;
328-
}
329-
330-
#terminal > .cmd {
331-
padding: 1px 0;
332-
}
333-
334-
@keyframes blinky {
335-
0% {
336-
background: transparent;
337-
}
338-
100% {
339-
background: rgba(170, 170, 170, 0.9);
340-
}
341-
}
342-
343-
@-webkit-keyframes blinky {
344-
0% {
345-
background: transparent;
346-
}
347-
100% {
348-
background: rgba(170, 170, 170, 0.9);
349-
}
350-
}
351-
352-
#terminal_input {
353-
width: 100%;
354-
background: #000;
355-
border-radius: 0 0 5px 5px;
356-
padding: 5px 10px;
357-
}
358-
359-
.terminal_input--input {
360-
height: 0;
361-
width: 0;
362-
position: absolute;
363-
top: -20px;
364-
}
365-
366-
.terminal_input--text, .terminal_input--prompt {
367-
line-height: 14px;
368-
width: 100%;
369-
vertical-align: middle;
370-
font-size: 12px;
371-
font-family: monospace;
372-
margin-bottom: 0;
373-
background: transparent;
374-
color: #aaa;
375-
}
376-
377-
.terminal_input--text:before, .terminal_input--text:after {
378-
content: "";
379-
display: inline-block;
380-
width: 7px;
381-
height: 14px;
382-
margin: 0 0 -12px -6px;
383-
vertical-align: middle;
384-
}
385-
386-
.terminal_input--text:after {
387-
position: relative;
388-
bottom: 8px;
389-
left: 8px;
390-
background: #ff00;
391-
animation: blinky 0.6s linear infinite alternate;
392-
-webkit-animation: blinky 0.6s linear infinite alternate;
393-
}
394-
395-
.terminal_input--input {
396-
color: transparent;
397-
background-color: transparent;
398-
border: 0;
399-
outline: none;
400-
}

‎public/themes/pterodactyl/css/terminal.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/*Design for Terminal*/
2+
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
3+
4+
#terminal-body {
5+
background: rgb(26, 26, 26);
6+
margin: 0;
7+
width: 100%;
8+
height: 100%;
9+
overflow: hidden;
10+
}
11+
12+
#terminal {
13+
font-family: 'Source Code Pro', monospace;
14+
color: rgb(223, 223, 223);
15+
background: rgb(26, 26, 26);
16+
font-size: 12px;
17+
line-height: 14px;
18+
padding: 10px 10px 0;
19+
box-sizing: border-box;
20+
height: 500px;
21+
max-height: 500px;
22+
overflow-y: auto;
23+
overflow-x: hidden;
24+
border-radius: 5px 5px 0 0;
25+
}
26+
27+
#terminal > .cmd {
28+
padding: 1px 0;
29+
}
30+
31+
@keyframes cursorblink {
32+
0% {
33+
background: transparent;
34+
}
35+
100% {
36+
background: rgba(170, 170, 170, 0.9);
37+
}
38+
}
39+
40+
@-webkit-keyframes cursorblink {
41+
0% {
42+
background: transparent;
43+
}
44+
100% {
45+
background: rgba(170, 170, 170, 0.9);
46+
}
47+
}
48+
49+
#terminal_input {
50+
width: 100%;
51+
background: rgb(26, 26, 26);
52+
border-radius: 0 0 5px 5px;
53+
padding: 5px 10px;
54+
}
55+
56+
.terminal_input--input {
57+
height: 0;
58+
width: 0;
59+
position: absolute;
60+
top: -20px;
61+
}
62+
63+
.terminal_input--text, .terminal_input--prompt {
64+
line-height: 14px;
65+
width: 100%;
66+
vertical-align: middle;
67+
font-size: 12px;
68+
font-family: 'Source Code Pro', monospace;
69+
margin-bottom: 0;
70+
background: transparent;
71+
color: rgb(223, 223, 223);
72+
}
73+
74+
.terminal_input--text:before, .terminal_input--text:after {
75+
content: "";
76+
display: inline-block;
77+
width: 7px;
78+
height: 14px;
79+
margin: 0 0 -12px -6px;
80+
vertical-align: middle;
81+
}
82+
83+
.terminal_input--text:after {
84+
position: relative;
85+
bottom: 8px;
86+
left: 8px;
87+
background: #ff00;
88+
animation: cursorblink 0.6s linear infinite alternate;
89+
-webkit-animation: cursorblink 0.6s linear infinite alternate;
90+
}
91+
92+
.terminal_input--input {
93+
color: transparent;
94+
background-color: transparent;
95+
border: 0;
96+
outline: none;
97+
}
98+
99+
.terminal-notify {
100+
position: absolute;
101+
right: 30px;
102+
bottom: 30px;
103+
padding: 3.5px 7px;
104+
border-radius: 3px;
105+
background: #fff;
106+
color: #000;
107+
opacity: .5;
108+
font-size: 16px;
109+
cursor: pointer;
110+
}
111+
112+
.terminal-notify:hover {
113+
opacity: .9;
114+
}
115+
116+
.ansi-black-fg { color: rgb(0, 0, 0); }
117+
.ansi-red-fg { color: rgb(166, 0, 44); }
118+
.ansi-green-fg { color: rgb(55, 106, 27); }
119+
.ansi-yellow-fg { color: rgb(241, 133, 24); }
120+
.ansi-blue-fg { color: rgb(17, 56, 163); }
121+
.ansi-magenta-fg { color: rgb(67, 0, 117); }
122+
.ansi-cyan-fg { color: rgb(18, 95, 105); }
123+
.ansi-white-fg { color: rgb(255, 255, 255); }
124+
.ansi-bright-black-fg { color: rgb(51, 51, 51); }
125+
.ansi-bright-red-fg { color: rgb(223, 45, 39); }
126+
.ansi-bright-green-fg { color: rgb(105, 175, 45); }
127+
.ansi-bright-yellow-fg { color: rgb(254, 232, 57); }
128+
.ansi-bright-blue-fg { color: rgb(68, 145, 240); }
129+
.ansi-bright-magenta-fg { color: rgb(151, 50, 174); }
130+
.ansi-bright-cyan-fg{ color: rgb(37, 173, 98); }
131+
.ansi-bright-white-fg { color: rgb(208, 208, 208); }
132+
133+
.ansi-black-bg { background: rgb(0, 0, 0); }
134+
.ansi-red-bg { background: rgb(166, 0, 44); }
135+
.ansi-green-bg { background: rgb(55, 106, 27); }
136+
.ansi-yellow-bg { background: rgb(241, 133, 24); }
137+
.ansi-blue-bg { background: rgb(17, 56, 163); }
138+
.ansi-magenta-bg { background: rgb(67, 0, 117); }
139+
.ansi-cyan-bg { background: rgb(18, 95, 105); }
140+
.ansi-white-bg { background: rgb(255, 255, 255); }
141+
.ansi-bright-black-bg { background: rgb(51, 51, 51); }
142+
.ansi-bright-red-bg { background: rgb(223, 45, 39); }
143+
.ansi-bright-green-bg { background: rgb(105, 175, 45); }
144+
.ansi-bright-yellow-bg { background: rgb(254, 232, 57); }
145+
.ansi-bright-blue-bg { background: rgb(68, 145, 240); }
146+
.ansi-bright-magenta-bg { background: rgb(151, 50, 174); }
147+
.ansi-bright-cyan-bg { background: rgb(37, 173, 98); }
148+
.ansi-bright-white-bg { background: rgb(208, 208, 208); }

‎public/themes/pterodactyl/js/frontend/console.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
1818
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
1919
// SOFTWARE.
20-
var CONSOLE_PUSH_COUNT = Pterodactyl.config.console_count || 10;
20+
var CONSOLE_PUSH_COUNT = Pterodactyl.config.console_count || 50;
2121
var CONSOLE_PUSH_FREQ = Pterodactyl.config.console_freq || 200;
2222
var CONSOLE_OUTPUT_LIMIT = Pterodactyl.config.console_limit || 2000;
2323

24-
var InitialLogSent = false;
2524
var AnsiUp = new AnsiUp;
25+
AnsiUp.use_classes = true;
2626

2727
var $terminal = $('#terminal');
2828
var $ghostInput = $('.terminal_input--input');
@@ -61,6 +61,10 @@ window.scrollToBottom = function () {
6161
$terminal.scrollTop($terminal[0].scrollHeight);
6262
};
6363

64+
function pushToTerminal(string) {
65+
$terminal.append('<div class="cmd">' + AnsiUp.ansi_to_html(string + '\u001b[0m') + '</div>');
66+
}
67+
6468
(function initConsole() {
6569
window.TerminalQueue = [];
6670
window.ConsoleServerStatus = 0;
@@ -79,9 +83,7 @@ window.scrollToBottom = function () {
7983

8084
if (TerminalQueue.length > 0) {
8185
for (var i = 0; i < CONSOLE_PUSH_COUNT && TerminalQueue.length > 0; i++) {
82-
$terminal.append(
83-
'<div class="cmd">' + AnsiUp.ansi_to_html(TerminalQueue[0] + '\u001b[0m') + '</div>'
84-
);
86+
pushToTerminal(TerminalQueue[0]);
8587

8688
if (! $scrollNotify.is(':visible')) {
8789
window.scrollToBottom();
@@ -105,12 +107,10 @@ window.scrollToBottom = function () {
105107
// Update Listings on Initial Status
106108
Socket.on('initial status', function (data) {
107109
ConsoleServerStatus = data.status;
108-
if (! InitialLogSent) {
109-
updateServerPowerControls(data.status);
110+
updateServerPowerControls(data.status);
110111

111-
if (data.status === 1 || data.status === 2) {
112-
Socket.emit('send server log');
113-
}
112+
if (data.status === 1 || data.status === 2) {
113+
Socket.emit('send server log');
114114
}
115115
});
116116

@@ -120,14 +120,14 @@ window.scrollToBottom = function () {
120120
updateServerPowerControls(data.status);
121121
});
122122

123+
// Skips the queue so we don't wait
124+
// 10 minutes to load the log...
123125
Socket.on('server log', function (data) {
124-
if (! InitialLogSent) {
125-
$('#terminal').html('');
126-
data.split(/\n/g).forEach(function (item) {
127-
TerminalQueue.push(item);
128-
});
129-
InitialLogSent = true;
130-
}
126+
$('#terminal').html('');
127+
data.split(/\n/g).forEach(function (item) {
128+
pushToTerminal(item);
129+
window.scrollToBottom();
130+
});
131131
});
132132

133133
Socket.on('console', function (data) {

‎resources/themes/pterodactyl/server/console.blade.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
<title>{{ Settings::get('company', 'Pterodactyl') }} - Console &rarr; {{ $server->name }}</title>
2424
@include('layouts.scripts')
2525
{!! Theme::css('vendor/bootstrap/bootstrap.min.css') !!}
26-
{!! Theme::css('css/pterodactyl.css') !!}
26+
{!! Theme::css('css/terminal.css') !!}
2727
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2828
</head>
29-
<body style="margin:0;width:100%;height:100%;background:#000;overflow: hidden;">
29+
<body id="terminal-body">
3030
<div id="terminal" style="width:100%;max-height: none !important;"></div>
3131
<div id="terminal_input">
3232
<span class="terminal_input--prompt">{{ $server->username }}:~$</span> <span class="terminal_input--text"></span>
@@ -47,11 +47,11 @@
4747
{!! Theme::js('js/frontend/console.js') !!}
4848
<script>
4949
$terminal.height($(window).innerHeight() - 40);
50-
$terminal.width($(window).innerWidth() - 40);
50+
$terminal.width($(window).innerWidth());
5151
$(window).on('resize', function () {
5252
window.scrollToBottom();
5353
$terminal.height($(window).innerHeight() - 40);
54-
$terminal.width($(window).innerWidth() - 40);
54+
$terminal.width($(window).innerWidth());
5555
});
5656
</script>
5757
</html>

‎resources/themes/pterodactyl/server/index.blade.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
{{ trans('server.index.title', [ 'name' => $server->name]) }}
2424
@endsection
2525

26+
@section('scripts')
27+
@parent
28+
{!! Theme::css('css/terminal.css') !!}
29+
@endsection
30+
2631
@section('content-header')
2732
<h1>@lang('server.index.header')<small>@lang('server.index.header_sub')</small></h1>
2833
<ol class="breadcrumb">

0 commit comments

Comments
 (0)