Make server overview cleaner and easier to follow

Also adds allocation information tab, still need to make it so users
can actually change their default connection address
This commit is contained in:
Dane Everitt 2016-01-03 00:28:33 -05:00
parent 79214c2cb2
commit fb77e23eb4
4 changed files with 142 additions and 84 deletions

View file

@ -6,6 +6,7 @@ use Auth;
use Pterodactyl\Models\Server; use Pterodactyl\Models\Server;
use Pterodactyl\Models\Node; use Pterodactyl\Models\Node;
use Pterodactyl\Models\Download; use Pterodactyl\Models\Download;
use Pterodactyl\Models\Allocation;
use Debugbar; use Debugbar;
use Uuid; use Uuid;
use Alert; use Alert;
@ -46,6 +47,7 @@ class ServerController extends Controller
$server = Server::getByUUID($request->route()->server); $server = Server::getByUUID($request->route()->server);
return view('server.index', [ return view('server.index', [
'server' => $server, 'server' => $server,
'allocations' => Allocation::where('assigned_to', $server->id)->orderBy('ip', 'asc')->orderBy('port', 'asc')->get(),
'node' => Node::find($server->node) 'node' => Node::find($server->node)
]); ]);
} }

View file

@ -23,7 +23,8 @@ return [
'mem_limit' => 'Memory Limit', 'mem_limit' => 'Memory Limit',
'disk_space' => 'Disk Space', 'disk_space' => 'Disk Space',
'control' => 'Control Server', 'control' => 'Control Server',
'info_use' => 'Information & Usage', 'usage' => 'Usage',
'allocation' => 'Allocation',
'command' => 'Enter Console Command', 'command' => 'Enter Console Command',
], ],
'files' => [ 'files' => [

View file

@ -140,6 +140,13 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"></div> <div class="panel-heading"></div>
<div class="panel-body"> <div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="alert alert-info">
After editing any of the options below you will need to restart the server for changes to take effect. If the server is currently off, you just need to start it and the container will be rebuilt with the new settings.
</div>
</div>
</div>
<form action="/admin/servers/view/{{ $server->id }}/build" method="POST"> <form action="/admin/servers/view/{{ $server->id }}/build" method="POST">
<div class="row"> <div class="row">
<div class="col-md-6 form-group {{ $errors->has('memory') ? 'has-error' : '' }}"> <div class="col-md-6 form-group {{ $errors->has('memory') ? 'has-error' : '' }}">
@ -244,18 +251,55 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"></div> <div class="panel-heading"></div>
<div class="panel-body"> <div class="panel-body">
<div class="col-md-12"> <table class="table table-striped" style="margin-bottom: 0;">
<div class="col-md-4 text-center"> <tbody>
<tr>
<td class="text-center" style="vertical-align:middle;">
<a href="/server/{{ $server->uuidShort }}/">
<button type="submit" class="btn btn-sm btn-primary">Manage Server</button>
</a>
</td>
<td>
<p>This will take you to the server management page that users normally see and allow you to manage server files as well as check the console and data usage.</p>
</td>
</tr>
<tr>
<td class="text-center" style="vertical-align:middle;">
<form action="/admin/servers/view/{{ $server->id }}/installed" method="POST">
{!! csrf_field() !!}
<button type="submit" class="btn btn-sm btn-primary">Toggle Install Status</button>
</form>
</td>
<td>
<p>This will toggle the install status for the server.</p>
<div class="alert alert-warning">If you have just created this server it is ill advised to perform this action as the daemon will contact the panel when finished which could cause the install status to be wrongly set.</div>
</td>
</tr>
<tr>
<td class="text-center" style="vertical-align:middle;">
<form action="/admin/servers/view/{{ $server->id }}/rebuild" method="POST"> <form action="/admin/servers/view/{{ $server->id }}/rebuild" method="POST">
{!! csrf_field() !!} {!! csrf_field() !!}
<button type="submit" class="btn btn-sm btn-primary">Rebuild Server Container</button> <button type="submit" class="btn btn-sm btn-primary">Rebuild Server Container</button>
</form> </form>
</div> </td>
<div class="col-md-8"> <td>
<p>This will trigger a rebuild of the server container when it next starts up. This is useful if you modified the server configuration file manually, or something just didn't work out correctly. Please be aware: if you manually updated the server's configuration file, you will need to restart the daemon before doing this, or it will be overwritten.</p> <p>This will trigger a rebuild of the server container when it next starts up. This is useful if you modified the server configuration file manually, or something just didn't work out correctly. Please be aware: if you manually updated the server's configuration file, you will need to restart the daemon before doing this, or it will be overwritten.</p>
<div class="alert alert-info">A rebuild will automatically occur whenever you edit build configuration settings for the server.</div> <div class="alert alert-info">A rebuild will automatically occur whenever you edit build configuration settings for the server.</div>
</div> </td>
</div> </tr>
<tr>
<td class="text-center" style="vertical-align:middle;">
<form action="/admin/servers/view/{{ $server->id }}/delete" method="POST">
{!! csrf_field() !!}
<button type="submit" class="btn btn-sm btn-danger">Delete Server</button>
</form>
</td>
<td>
<div class="alert alert-danger" style="margin-top:21px;">Deleting a server is an irreversible action. <strong>All data will be immediately removed relating to this server.</strong></div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>

View file

@ -20,52 +20,16 @@
</div> </div>
@endforeach @endforeach
@endforeach @endforeach
<ul class="nav nav-tabs" id="config_tabs"> <ul class="nav nav-tabs tabs_with_panel" id="config_tabs">
<li class="active"><a href="#stats" data-toggle="tab">{{ trans('server.index.info_use') }}</a></li> <li id="triggerConsoleView" class="active"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li>
<li id="triggerConsoleView"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li> <li><a href="#stats" data-toggle="tab">{{ trans('server.index.usage') }}</a></li>
</ul><br /> <li><a href="#allocation" data-toggle="tab">{{ trans('server.index.allocation') }}</a></li>
</ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="stats"> <div class="tab-pane active" id="console">
<div class="row"> <div class="panel panel-default">
<div class="col-md-12" id="chart_memory" style="height:250px;"></div> <div class="panel-heading"></div>
<div class="col-md-12" id="chart_cpu" style="height:250px;"></div> <div class="panel-body">
</div>
<div class="row">
<div class="col-md-12" id="stats_players">
<h3 class="nopad">Active Players</h3><hr />
<div id="players_notice" class="alert alert-info">
<i class="fa fa-spinner fa-spin"></i> Waiting for response from server...
</div>
<span id="toggle_players" style="display:none;">
<p class="text-muted">No players are online.</p>
</span>
</div>
<div class="col-md-12">
<h3>{{ trans('server.index.server_info') }}</h3><hr />
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<td><strong>{{ trans('server.index.connection') }}</strong></td>
<td><code>{{ $server->ip }}:{{ $server->port }}</code></td>
</tr>
<tr>
<td><strong>{{ trans('strings.node') }}</strong></td>
<td>{{ $node->name }}</td>
</tr>
<tr>
<td><strong>{{ trans('server.index.mem_limit') }}</strong></td>
<td>{{ $server->memory }} MB</td>
</tr>
<tr>
<td><strong>{{ trans('server.index.disk_space') }}</strong></td>
<td>{{ $server->disk }} MB</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="console">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<textarea id="live_console" class="form-control console" readonly="readonly">Loading Previous Content...</textarea> <textarea id="live_console" class="form-control console" readonly="readonly">Loading Previous Content...</textarea>
@ -94,7 +58,47 @@
<div id="pw_resp" style="display:none;margin-top: 15px;"></div> <div id="pw_resp" style="display:none;margin-top: 15px;"></div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-12" id="stats_players">
<h3>Active Players</h3><hr />
<div id="players_notice" class="alert alert-info">
<i class="fa fa-spinner fa-spin"></i> Waiting for response from server...
</div> </div>
<span id="toggle_players" style="display:none;">
<p class="text-muted">No players are online.</p>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="stats">
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-11 text-center" id="chart_memory" style="height:250px;"></div>
<div class="col-xs-11 text-center" id="chart_cpu" style="height:250px;"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="allocation">
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="alert alert-info">Below is a listing of all avaliable IPs and Ports for your service. To change the default connection address for your server, simply click on the one you would like to make default below.</div>
<ul class="nav nav-pills nav-stacked">
@foreach ($allocations as $allocation)
<li role="presentation" @if($allocation->ip === $server->ip && $allocation->port === $server->port) class="active" @endif><a href="#/set-connnection/{{ $allocation->ip }}:{{ $allocation->port }}" data-action="set-connection" data-connection="{{ $allocation->ip }}:{{ $allocation->port }}">{{ $allocation->ip }} <span class="badge">{{ $allocation->port }}</span></a></li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-11" id="col11_setter"></div>
</div> </div>
</div> </div>
<div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true"> <div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true">
@ -124,11 +128,17 @@ $(window).load(function () {
// -----------------+ // -----------------+
// Charting Methods | // Charting Methods |
// -----------------+ // -----------------+
$(window).resize(function() {
$('#chart_memory').highcharts().setSize($('#col11_setter').width(), 250);
$('#chart_cpu').highcharts().setSize($('#col11_setter').width(), 250);
});
$('#chart_memory').highcharts({ $('#chart_memory').highcharts({
chart: { chart: {
type: 'area', type: 'area',
animation: Highcharts.svg, animation: Highcharts.svg,
marginRight: 10, marginRight: 10,
renderTo: 'container',
width: $('#col11_setter').width()
}, },
colors: [ colors: [
'#113F8C', '#113F8C',
@ -196,6 +206,8 @@ $(window).load(function () {
type: 'area', type: 'area',
animation: Highcharts.svg, animation: Highcharts.svg,
marginRight: 10, marginRight: 10,
renderTo: 'container',
width: $('#col11_setter').width()
}, },
colors: [ colors: [
'#113F8C', '#113F8C',
@ -365,6 +377,7 @@ $(window).load(function () {
$('#stats_players').hide(); $('#stats_players').hide();
} }
} }
@can('command', $server) @can('command', $server)
// Send Command to Server // Send Command to Server
$('#console_command').submit(function (event) { $('#console_command').submit(function (event) {
@ -442,8 +455,6 @@ $(window).load(function () {
}), }),
url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/power', url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/power',
timeout: 10000 timeout: 10000
}).done(function(data) {
$('#pw_resp').attr('class', 'alert alert-success').html('Server has been ' + action + 'ed successfully.').fadeIn().delay(5000).fadeOut();
}).fail(function(jqXHR) { }).fail(function(jqXHR) {
var error = 'An unknown error occured processing this request.'; var error = 'An unknown error occured processing this request.';
if (typeof jqXHR.responseJSON.error !== 'undefined') { if (typeof jqXHR.responseJSON.error !== 'undefined') {