mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
389 lines
16 KiB
HTML
389 lines
16 KiB
HTML
{% extends ../base.html %}
|
|
|
|
{% block meta %}
|
|
<meta http-equiv="refresh" content="60">
|
|
{% end %}
|
|
|
|
{% block title %}Crafty Controller - {{ translate('dashboard', 'dashboard') }}{% end %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="content-wrapper">
|
|
|
|
<!-- Page Title Header Starts-->
|
|
<div class="row page-title-header">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<h4 class="page-title">{{ translate('dashboard', 'dashboard') }}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Page Title Header Ends-->
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="d-flex">
|
|
<div class="wrapper">
|
|
<h5 class="mb-1 font-weight-medium text-primary"> {{ translate('dashboard', 'host') }}</h5>
|
|
<h3 class="mb-0 font-weight-semibold"> <i class="fas fa-chart-line"></i></h3>
|
|
|
|
</div>
|
|
<div class="wrapper my-auto ml-auto ml-lg-4">
|
|
<p id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true" title="{% raw translate('dashboard', 'cpuCores') %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq') %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq') %}: {{ data.get('hosts_data').get('cpu_max_freq') }}" >
|
|
{{ translate('dashboard', 'cpuUsage') }}: <span id="cpu_usage">{{ data.get('hosts_data').get('cpu_usage') }}</span>
|
|
</p>
|
|
<p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top" title="{{ translate('dashboard', 'memUsage') }}: {{ data.get('hosts_data').get('mem_usage') }}" >
|
|
{{ translate('dashboard', 'memUsage') }}: <span id="mem_percent">{{ data.get('hosts_data').get('mem_percent') }}%</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
|
|
<div class="d-flex">
|
|
<div class="wrapper">
|
|
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'servers') }}</h5>
|
|
<h3 class="mb-0 font-weight-semibold">{{ data['server_stats']['total'] }}</h3>
|
|
|
|
</div>
|
|
<div class="wrapper my-auto ml-auto ml-lg-4">
|
|
<p class="mb-0 text-success">{{ data['server_stats']['running'] }} {{ translate('dashboard', 'online').lower() }}</p>
|
|
<p class="mb-0 text-warning"> {{ data['server_stats']['stopped'] }} {{ translate('dashboard', 'offline').lower() }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
|
|
<div class="d-flex">
|
|
<div class="wrapper">
|
|
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'players') }}</h5>
|
|
<h3 class="mb-0 font-weight-semibold">{{ data['num_players'] }}</h3>
|
|
|
|
</div>
|
|
<div class="wrapper my-auto ml-auto ml-lg-4">
|
|
<p class="mb-0 text-success">35 {{ translate('dashboard', 'max') }}</p>
|
|
<p class="mb-0 text-warning">10 {{ translate('dashboard', 'avg') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
|
|
<div class="d-flex">
|
|
<div class="wrapper">
|
|
|
|
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'backups') }}</h5>
|
|
<h3 class="mb-0 font-weight-semibold">7</h3>
|
|
</div>
|
|
<div class="wrapper my-auto ml-auto ml-lg-4">
|
|
<p class="mb-0 text-success">{{ translate('dashboard', 'lastBackup') }} 11-31-2020</p>
|
|
<p class="mb-0 text-success">{{ translate('dashboard', 'nextBackup') }} 12-05-2020</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-header header-sm d-flex justify-content-between align-items-center">
|
|
<h4 class="card-title"><i class="fas fa-server"></i> {{ translate('dashboard', 'allServers') }}</h4>
|
|
<div class="d-md-none">
|
|
<small>{{ translate('dashboard', 'cannotSeeOnMobile') }}<br /> {{ translate('dashboard', 'cannotSeeOnMobile2') }}</small>
|
|
</div>
|
|
<div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> {{ translate('dashboard', 'newServer') }}</a></div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="table-responsive">
|
|
{% if len(data['servers']) == 0%}
|
|
<div style="text-align: center; color: grey;">
|
|
<h1>{{ translate('dashboard', 'welcome') }}</h1>
|
|
<br>
|
|
<h7>{{ translate('dashboard', 'no-servers') }} {{ translate('dashboard', 'newServer') }}.</h7>
|
|
</div>
|
|
|
|
{% end %}
|
|
{% if len(data['servers']) > 0 %}
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr class="rounded">
|
|
<th>{{ translate('dashboard', 'server') }}</th>
|
|
<th>{{ translate('dashboard', 'actions') }}</th>
|
|
<th>{{ translate('dashboard', 'cpuUsage') }}</th>
|
|
<th>{{ translate('dashboard', 'memUsage') }}</th>
|
|
<th>{{ translate('dashboard', 'world') }}</th>
|
|
<th>{{ translate('dashboard', 'players') }}</th>
|
|
<th>{{ translate('dashboard', 'status') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for server in data['servers'] %}
|
|
<tr>
|
|
<td>
|
|
<i class="fas fa-server"></i>
|
|
<a href="/panel/server_detail?id={{server['server_data']['server_id']}}">
|
|
{{ server['server_data']['server_name'] }}
|
|
</a>
|
|
</td>
|
|
|
|
<td id="controls{{server['server_data']['server_id']}}" class="actions_serverlist">
|
|
{% if server['user_command_permission'] %}
|
|
{% if server['stats']['running'] %}
|
|
<a class="stop_button" data-id="{{server['server_data']['server_id']}}" data-toggle="tooltip" title={{ translate('dashboard', 'stop') }}> <i class="fas fa-stop"></i></a>
|
|
<a class="restart_button" data-id="{{server['server_data']['server_id']}}" data-toggle="tooltip" title={{ translate('dashboard', 'restart') }}> <i class="fas fa-sync"></i></a>
|
|
<a class="kill_button" data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip" title={{ translate('dashboard', 'kill') }}> <i class="fas fa-skull"></i></a>
|
|
{% elif server['stats']['updating']%}
|
|
<a data-id="{{server['server_data']['server_id']}}" class="">{{ translate('serverTerm', 'updating') }}</i></a>
|
|
{% elif server['stats']['waiting_start']%}
|
|
<a data-id="{{server['server_data']['server_id']}}" class="" title={{ translate('dashboard', 'delay-explained')}}>{{ translate('dashboard', 'starting') }}</i></a>
|
|
{% else %}
|
|
<a data-id="{{server['server_data']['server_id']}}" class="play_button"><i class="fas fa-play" data-toggle="tooltip" title={{ translate('dashboard', 'start') }}></i></a>
|
|
<a data-id="{{server['server_data']['server_id']}}" class="clone_button"> <i class="fas fa-clone" data-toggle="tooltip" title={{ translate('dashboard', 'clone') }}></i></a>
|
|
<a class="kill_button" data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip" title={{ translate('dashboard', 'kill') }}> <i class="fas fa-skull"></i></a>
|
|
{% end %}
|
|
{% end %}
|
|
</td>
|
|
|
|
<td>
|
|
<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats']['cpu']}}">
|
|
<div class="progress-bar
|
|
{% if server['stats']['cpu'] <= 33 %}
|
|
bg-success
|
|
{% elif 34 <= server['stats']['cpu'] <= 66 %}
|
|
bg-warning
|
|
{% else %}
|
|
bg-danger
|
|
{% end %}
|
|
" role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{server['stats']['cpu']}}%
|
|
</td>
|
|
|
|
<td>
|
|
<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats']['mem']}}">
|
|
<div class="progress-bar
|
|
{% if server['stats']['mem_percent'] <= 33 %}
|
|
bg-success
|
|
{% elif 34 <= server['stats']['mem_percent'] <= 66 %}
|
|
bg-warning
|
|
{% else %}
|
|
bg-danger
|
|
{% end %}
|
|
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{server['stats']['mem_percent']}}% -
|
|
|
|
{% if server['stats']['mem'] == 0 %}
|
|
0 MB
|
|
{% else %}
|
|
{{server['stats']['mem']}}
|
|
{% end %}
|
|
</td>
|
|
<td>
|
|
{{ server['stats']['world_name'] }} : {{ server['stats']['world_size'] }}
|
|
</td>
|
|
<td>
|
|
{% if server['stats']['int_ping_results'] %}
|
|
{{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max') }}<br />
|
|
|
|
{% if server['stats']['desc'] != 'False' %}
|
|
{{ server['stats']['desc'] }} <br />
|
|
{% end %}
|
|
|
|
{% if server['stats']['version'] != 'False' %}
|
|
{{ server['stats']['version'] }}
|
|
{% end %}
|
|
{% end %}
|
|
|
|
</td>
|
|
<td>
|
|
{% if server['stats']['running'] %}
|
|
<i class="fas fa-thumbs-up"></i> <span class="text-success">{{ translate('dashboard', 'online') }}</span>
|
|
{% else %}
|
|
<i class="fas fa-thumbs-down"></i> <span class="text-danger">{{ translate('dashboard', 'offline') }}</span>
|
|
{% end %}
|
|
</td>
|
|
</tr>
|
|
{% end %}
|
|
|
|
</tbody>
|
|
</table>
|
|
{% end %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- content-wrapper ends -->
|
|
|
|
|
|
|
|
{% end %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
|
|
function send_command (server_id, command){
|
|
/* this getCookie function is in base.html */
|
|
var token = getCookie("_xsrf");
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
headers: {'X-XSRFToken': token},
|
|
url: '/server/command?command=' + command + '&id=' + server_id,
|
|
success: function(data){
|
|
console.log("got response:");
|
|
console.log(data);
|
|
setTimeout(function(){
|
|
if (command != 'start_server'){
|
|
location.reload();
|
|
}
|
|
}, 10000);
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function send_kill (server_id){
|
|
/* this getCookie function is in base.html */
|
|
var token = getCookie("_xsrf");
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
headers: {'X-XSRFToken': token},
|
|
url: '/ajax/kill?id=' + server_id,
|
|
success: function(data){
|
|
console.log("got response:");
|
|
console.log(data);
|
|
setTimeout(function(){
|
|
location.reload();
|
|
}, 10000);
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
console.log('ready for JS!')
|
|
|
|
$( ".play_button" ).click(function() {
|
|
server_id = $(this).attr("data-id");
|
|
send_command(server_id, 'start_server');
|
|
bootbox.alert({
|
|
backdrop: true,
|
|
title: '{% raw translate("dashboard", "sendingCommand") %}',
|
|
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> {% raw translate("dashboard", "bePatientStart") %} </div>'
|
|
});
|
|
});
|
|
|
|
$( ".stop_button" ).click(function() {
|
|
console.log("stopping server");
|
|
server_id = $(this).attr("data-id");
|
|
send_command(server_id, 'stop_server');
|
|
bootbox.alert({
|
|
backdrop: true,
|
|
title: '{% raw translate("dashboard", "sendingCommand") %}',
|
|
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> {% raw translate("dashboard", "bePatientStop") %} </div>'
|
|
});
|
|
});
|
|
|
|
$( ".restart_button" ).click(function() {
|
|
server_id = $(this).attr("data-id");
|
|
send_command(server_id, 'restart_server');
|
|
bootbox.alert({
|
|
backdrop: true,
|
|
title: '{% raw translate("dashboard", "sendingCommand") %}',
|
|
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> {% raw translate("dashboard", "bePatientRestart") %} </div>'
|
|
});
|
|
});
|
|
$( ".kill_button" ).click(function() {
|
|
server_id = $(this).attr("data-id");
|
|
bootbox.confirm({
|
|
message: "This will kill the server process and all it's subprocesses. Killing a process can potentially corrupt files. Only do this in extreme circumstances. Are you sure you would like to continue?",
|
|
buttons: {
|
|
confirm: {
|
|
label: '{% raw translate("dashboard", "kill") %}',
|
|
className: 'btn-danger'
|
|
},
|
|
cancel: {
|
|
label: '{% raw translate("panelConfig", "cancel") %}',
|
|
className: 'btn-secondary'
|
|
}
|
|
},
|
|
callback: function (result) {
|
|
if(result){
|
|
send_kill(server_id);
|
|
var dialog = bootbox.dialog({
|
|
title: '{% raw translate("dashboard", "killing") %}',
|
|
message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
|
|
});
|
|
|
|
dialog.init(function(){
|
|
setTimeout(function(){
|
|
location.reload();
|
|
}, 15000);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
if (webSocket) {
|
|
cpu_data = document.getElementById('cpu_data');
|
|
cpu_usage = document.getElementById('cpu_usage');
|
|
mem_usage = document.getElementById('mem_usage');
|
|
mem_percent = document.getElementById('mem_percent');
|
|
|
|
webSocket.on('update_host_stats', function (hostStats) {
|
|
var cpuDataTitle = `{% raw translate('dashboard', 'cpuCores') %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq") %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq") %}: ${hostStats.cpu_max_freq}`;
|
|
cpu_data.setAttribute('data-original-title', cpuDataTitle);
|
|
cpu_usage.textContent = hostStats.cpu_usage;
|
|
mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage") %}: ${hostStats.mem_usage}`);
|
|
mem_percent.textContent = hostStats.mem_percent + '%';
|
|
});
|
|
}
|
|
|
|
if (webSocket) {
|
|
webSocket.on('send_start_reload', function (start_error) {
|
|
location.reload()
|
|
});
|
|
}
|
|
|
|
if (webSocket) {
|
|
webSocket.on('update_button_status', function (updateButton) {
|
|
var id = 'controls';
|
|
var dataId = updateButton.server_id;
|
|
var string = updateButton.string
|
|
var id = id.concat(updateButton.server_id);
|
|
if (updateButton.isUpdating){
|
|
console.log(updateButton.isUpdating)
|
|
document.getElementById(id).innerHTML = string;
|
|
}
|
|
else{
|
|
window.location.reload()
|
|
}
|
|
});
|
|
}
|
|
|
|
$( ".clone_button" ).click(function() {
|
|
server_id = $(this).attr("data-id");
|
|
send_command(server_id, 'clone_server');
|
|
bootbox.alert({
|
|
backdrop: true,
|
|
title: '{% raw translate("dashboard", "sendingCommand") %}',
|
|
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> {% raw translate("dashboard", "bePatientClone") %} </div>'
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
{% end %} |