mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Add Update Dashboard by websocket
This commit is contained in:
Silversthorn
parent
97cad998e8
commit
b385d1add3
@ -306,6 +306,7 @@ class TasksManager:
|
||||
srv['raw_ping_result'] = self.controller.stats.get_raw_server_stats(server_id)
|
||||
if ("{}".format(srv['raw_ping_result'].get('icon')) == "b''"):
|
||||
srv['raw_ping_result']['icon'] = False
|
||||
|
||||
servers_ping.append({
|
||||
'id': srv['raw_ping_result'].get('id'),
|
||||
'started': srv['raw_ping_result'].get('started'),
|
||||
@ -326,8 +327,8 @@ class TasksManager:
|
||||
})
|
||||
|
||||
if (len(servers_ping) > 0) & (len(websocket_helper.clients) > 0):
|
||||
#TODO websocket_helper.broadcast_page('/panel/dashboard', 'update_server_status', servers)
|
||||
try:
|
||||
websocket_helper.broadcast_page('/panel/dashboard', 'update_server_status', servers_ping)
|
||||
websocket_helper.broadcast_page('/status', 'update_server_status', servers_ping)
|
||||
except:
|
||||
console.warning("Can't broadcast server status to websocket")
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
{% extends ../base.html %}
|
||||
|
||||
{% block meta %}
|
||||
<meta http-equiv="refresh" content="60">
|
||||
{% end %}
|
||||
|
||||
{% block title %}Crafty Controller - {{ translate('dashboard', 'dashboard', data['lang']) }}{% end %}
|
||||
@ -29,16 +28,21 @@
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="d-flex">
|
||||
<div class="wrapper">
|
||||
<h5 class="mb-1 font-weight-medium text-primary"> {{ translate('dashboard', 'host', data['lang']) }}</h5>
|
||||
<h5 class="mb-1 font-weight-medium text-primary"> {{ translate('dashboard', 'host', data['lang']) }}
|
||||
</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['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}" >
|
||||
{{ translate('dashboard', 'cpuUsage', data['lang']) }}: <span id="cpu_usage">{{ data.get('hosts_data').get('cpu_usage') }}</span>
|
||||
<p id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true"
|
||||
title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}">
|
||||
{{ translate('dashboard', 'cpuUsage', data['lang']) }}: <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['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}" >
|
||||
{{ translate('dashboard', 'memUsage', data['lang']) }}: <span id="mem_percent">{{ data.get('hosts_data').get('mem_percent') }}%</span>
|
||||
<p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top"
|
||||
title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}">
|
||||
{{ translate('dashboard', 'memUsage', data['lang']) }}: <span id="mem_percent">{{
|
||||
data.get('hosts_data').get('mem_percent') }}%</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,20 +50,24 @@
|
||||
<div class="col-lg-4 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', data['lang']) }}</h5>
|
||||
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'servers', data['lang']) }}
|
||||
</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', data['lang']).lower() }}</p>
|
||||
<p class="mb-0 text-warning"> {{ data['server_stats']['stopped'] }} {{ translate('dashboard', 'offline', data['lang']).lower() }}</p>
|
||||
<p class="mb-0 text-success">{{ data['server_stats']['running'] }} {{ translate('dashboard', 'online',
|
||||
data['lang']).lower() }}</p>
|
||||
<p class="mb-0 text-warning"> {{ data['server_stats']['stopped'] }} {{ translate('dashboard',
|
||||
'offline', data['lang']).lower() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 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', data['lang']) }}</h5>
|
||||
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'players', data['lang']) }}
|
||||
</h5>
|
||||
<h3 class="mb-0 font-weight-semibold">{{ data['num_players'] }}</h3>
|
||||
|
||||
</div>
|
||||
@ -79,11 +87,15 @@
|
||||
<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', data['lang']) }}</h4>
|
||||
<h4 class="card-title"><i class="fas fa-server"></i> {{ translate('dashboard', 'allServers',
|
||||
data['lang']) }}</h4>
|
||||
{% if len(data['servers']) > 0 %}
|
||||
<span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}", data-placement="top"></span>
|
||||
<span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}" ,
|
||||
data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
|
||||
data-placement="top"></span>
|
||||
{% end %}
|
||||
<div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> {{ translate('dashboard', 'newServer', data['lang']) }}</a></div>
|
||||
<div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> {{
|
||||
translate('dashboard', 'newServer', data['lang']) }}</a></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
@ -92,7 +104,8 @@
|
||||
<div style="text-align: center; color: grey;">
|
||||
<h1>{{ translate('dashboard', 'welcome', data['lang']) }}</h1>
|
||||
<br>
|
||||
<h7>{{ translate('dashboard', 'no-servers', data['lang']) }} {{ translate('dashboard', 'newServer', data['lang']) }}.</h7>
|
||||
<h7>{{ translate('dashboard', 'no-servers', data['lang']) }} {{ translate('dashboard', 'newServer',
|
||||
data['lang']) }}.</h7>
|
||||
</div>
|
||||
|
||||
{% end %}
|
||||
@ -122,23 +135,36 @@
|
||||
<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', data['lang']) }}> <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', data['lang']) }}> <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', data['lang']) }}> <i class="fas fa-skull"></i></a>
|
||||
<a class="stop_button" data-id="{{server['server_data']['server_id']}}" data-toggle="tooltip"
|
||||
title={{ translate('dashboard', 'stop' , data['lang']) }}> <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' , data['lang']) }}> <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' , data['lang']) }}> <i
|
||||
class="fas fa-skull"></i></a>
|
||||
{% elif server['stats']['updating']%}
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="">{{ translate('serverTerm', 'updating', data['lang']) }}</i></a>
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="">{{ translate('serverTerm', 'updating',
|
||||
data['lang']) }}</i></a>
|
||||
{% elif server['stats']['waiting_start']%}
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="" title={{ translate('dashboard', 'delay-explained', data['lang'])}}>{{ translate('dashboard', 'starting', data['lang']) }}</i></a>
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="" title={{
|
||||
translate('dashboard', 'delay-explained' , data['lang'])}}>{{ translate('dashboard', 'starting',
|
||||
data['lang']) }}</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', data['lang']) }}></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', data['lang']) }}></i></a>
|
||||
<a class="kill_button" data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip" title={{ translate('dashboard', 'kill', data['lang']) }}> <i class="fas fa-skull"></i></a>
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="play_button"><i class="fas fa-play"
|
||||
data-toggle="tooltip" title={{ translate('dashboard', 'start' , data['lang']) }}></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' , data['lang']) }}></i></a>
|
||||
<a class="kill_button" data-id="{{server['server_data']['server_id']}}" class="kill_button"
|
||||
data-toggle="tooltip" title={{ translate('dashboard', 'kill' , data['lang']) }}> <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']}}">
|
||||
<td id="server_cpu_{{server['server_data']['server_id']}}">
|
||||
<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
|
||||
@ -147,13 +173,15 @@
|
||||
{% else %}
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
" 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']}}">
|
||||
<td id="server_mem_{{server['server_data']['server_id']}}">
|
||||
<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
|
||||
@ -162,7 +190,8 @@
|
||||
{% else %}
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{server['stats']['mem_percent']}}% -
|
||||
|
||||
@ -172,12 +201,13 @@
|
||||
{{server['stats']['mem']}}
|
||||
{% end %}
|
||||
</td>
|
||||
<td>
|
||||
<td id="server_world_{{server['server_data']['server_id']}}">
|
||||
{{ server['stats']['world_name'] }} : {{ server['stats']['world_size'] }}
|
||||
</td>
|
||||
<td>
|
||||
<td id="server_desc_{{server['server_data']['server_id']}}">
|
||||
{% if server['stats']['int_ping_results'] %}
|
||||
{{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max', data['lang']) }}<br />
|
||||
{{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max',
|
||||
data['lang']) }} <br />
|
||||
|
||||
{% if server['stats']['desc'] != 'False' %}
|
||||
{{ server['stats']['desc'] }} <br />
|
||||
@ -189,11 +219,13 @@
|
||||
{% end %}
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<td id="server_running_status_{{server['server_data']['server_id']}}">
|
||||
{% if server['stats']['running'] %}
|
||||
<i class="fas fa-thumbs-up"></i> <span class="text-success">{{ translate('dashboard', 'online', data['lang']) }}</span>
|
||||
<i class="fas fa-thumbs-up"></i> <span class="text-success">{{ translate('dashboard', 'online',
|
||||
data['lang']) }}</span>
|
||||
{% else %}
|
||||
<i class="fas fa-thumbs-down"></i> <span class="text-danger">{{ translate('dashboard', 'offline', data['lang']) }}</span>
|
||||
<i class="fas fa-thumbs-down"></i> <span class="text-danger">{{ translate('dashboard', 'offline',
|
||||
data['lang']) }}</span>
|
||||
{% end %}
|
||||
</td>
|
||||
</tr>
|
||||
@ -213,7 +245,8 @@
|
||||
<!-- content-wrapper ends -->
|
||||
<style>
|
||||
.popover-body {
|
||||
color: white !important;;
|
||||
color: white !important;
|
||||
;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -221,6 +254,8 @@
|
||||
{% end %}
|
||||
|
||||
{% block js %}
|
||||
|
||||
<script src="/static/assets/js/motd.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('[data-toggle="popover"]').popover();
|
||||
@ -286,6 +321,105 @@ function send_kill (server_id){
|
||||
});
|
||||
}
|
||||
|
||||
function update_one_server_status(server) {
|
||||
server_cpu = document.getElementById('server_cpu_' + server.id);
|
||||
server_mem = document.getElementById('server_mem_' + server.id);
|
||||
server_world = document.getElementById('server_world_' + server.id);
|
||||
server_desc = document.getElementById('server_desc_' + server.id);
|
||||
server_online_status = document.getElementById('server_running_status_' + server.id);
|
||||
|
||||
console.log("Received Data : " + server.id + ": " + server);
|
||||
/* TODO Update each element */
|
||||
|
||||
/* Update CPU */
|
||||
cpu_status = "";
|
||||
if (server.cpu <= 33)
|
||||
{
|
||||
cpu_status = "bg-success";
|
||||
}
|
||||
else if (server.cpu > 33 && server.cpu <= 66)
|
||||
{
|
||||
cpu_status = "bg-warning";
|
||||
}
|
||||
else
|
||||
{
|
||||
cpu_status = "bg-danger";
|
||||
}
|
||||
server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server.cpu +`"><div class="progress-bar `+ cpu_status + `" role="progressbar" style="width: `+ server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.cpu +`%`;
|
||||
|
||||
|
||||
/* Update Memory */
|
||||
mem_status = "";
|
||||
total_mem = "";
|
||||
if (server.mem_percent <= 33)
|
||||
{
|
||||
mem_status = "bg-success";
|
||||
} else if (server.mem_percent > 33 && server.mem_percent <= 66)
|
||||
{
|
||||
mem_status = "bg-warning";
|
||||
}
|
||||
else
|
||||
{
|
||||
mem_status = "bg-danger";
|
||||
}
|
||||
|
||||
if (server.mem == 0)
|
||||
{
|
||||
total_mem = "0 MB";
|
||||
}
|
||||
else
|
||||
{
|
||||
total_mem = server.mem;
|
||||
}
|
||||
|
||||
server_mem.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server_mem +`"><div class="progress-bar `+ mem_status + `" role="progressbar" style="width: `+ server.mem_percent + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.mem_percent +`% - ` + total_mem;
|
||||
|
||||
/* Update World Infos */
|
||||
server_world.innerHTML = server.world_name + ` : ` + server.world_size
|
||||
|
||||
/* Update Server Infos */
|
||||
if (server.int_ping_results) {
|
||||
/* Update Players */
|
||||
if (server.players) {
|
||||
server_desc.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
|
||||
|
||||
server_infos = "";
|
||||
server_infos = server.online + " / " + server.max + "{{ translate('dashboard', 'max', data['lang']) }}<br />"
|
||||
}
|
||||
|
||||
/* Update Motd */
|
||||
var motd = "";
|
||||
if (server.desc) {
|
||||
motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span>`;
|
||||
server_infos = server_infos + motd + "<br />";
|
||||
}
|
||||
|
||||
/* Version */
|
||||
if (server.version) {
|
||||
server_infos = server_infos + server.version
|
||||
}
|
||||
server_desc.innerHTML = server_infos;
|
||||
}
|
||||
|
||||
/* Update Online Status */
|
||||
var online_status = "";
|
||||
if (server.running) {
|
||||
online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`;
|
||||
}
|
||||
else {
|
||||
online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
|
||||
}
|
||||
server_online_status.innerHTML = online_status;
|
||||
}
|
||||
|
||||
function update_servers_status(data) {
|
||||
console.log(data);
|
||||
for (server of data) {
|
||||
update_one_server_status(server);
|
||||
}
|
||||
display_motd();
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log('ready for JS!')
|
||||
|
||||
@ -387,6 +521,10 @@ dialog.init(function(){
|
||||
});
|
||||
}
|
||||
|
||||
if (webSocket) {
|
||||
webSocket.on('update_server_status', update_servers_status);
|
||||
}
|
||||
|
||||
$(".clone_button").click(function () {
|
||||
server_id = $(this).attr("data-id");
|
||||
send_command(server_id, 'clone_server');
|
||||
|
||||
@ -91,14 +91,11 @@
|
||||
}
|
||||
|
||||
function update_one_server_status(server) {
|
||||
server_name = document.getElementById('server_name_' + server.id).get;
|
||||
server_players = document.getElementById('server_players_' + server.id);
|
||||
server_motd = document.getElementById('server_motd_' + server.id);
|
||||
server_version = document.getElementById('server_version_' + server.id);
|
||||
server_online_status = document.getElementById('server_online_status_' + server.id);
|
||||
server_no_data = document.getElementById('server_players_' + server.id);
|
||||
|
||||
console.log("Received Data : " + server.id + ": " + server.world_name);
|
||||
/* TODO Update each element */
|
||||
if (server.int_ping_results) {
|
||||
|
||||
@ -146,7 +143,6 @@
|
||||
}
|
||||
|
||||
function update_servers_status(data) {
|
||||
console.log(data);
|
||||
for (server of data) {
|
||||
update_one_server_status(server);
|
||||
}
|
||||
@ -157,7 +153,10 @@
|
||||
console.log("ready!");
|
||||
display_motd()
|
||||
|
||||
if (webSocket)
|
||||
{
|
||||
webSocket.on('update_server_status', update_servers_status);
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user