48k.eu-mirror
/
ogcp
mirror of https://git.48k.eu/ogcp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add /stats data to the dashboard 

Add certain statistics on memory and swap usage, as well as the uptime.
multi-ogserver
Javier Sánchez Parra 2022-03-15 12:00:36 +01:00
parent 57ab7c11a9
commit 3283843d56
2 changed files with 190 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
ogcp/templates/dashboard.html
View File

@ -4,16 +4,31 @@
{% block content %}
<div class="row">
<!-- connected clients -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Date') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ time_dict['now'] }}</p>
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Uptime') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ time_dict['boot'] }}</p>
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Connected clients (ogClient)') }}
</div>
<div class="card-body">
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ clients['clients'] | length }}</p>
</div>
</div>
</li>
</ul>
</div>
<!-- latest images -->
@ -99,6 +114,78 @@
</ul>
</div>
</div>
<!-- Memory stats -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Memory') }}
</div>
<div class="card-body">
<canvas id="memoryChart" class="mb-2"></canvas>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Memory size') }}
</li>
<li class="list-group-item w-50">
{{ _('used') }} (%)
</li>
<li class="list-group-item w-50">
{{ _('available') }} (%)
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ (stats['memory']['size'] / 2**30)|round(3) }} Gbytes
</li>
<li class="list-group-item w-50">
{{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }} Gbytes
({{ (((stats['memory']['size'] - stats['memory']['free']) / stats['memory']['size']) * 100)|int }}%)
</li>
<li class="list-group-item w-50">
{{ (stats['memory']['free'] / 2**30)|round(3) }} Gbytes
({{ ((stats['memory']['free'] / stats['memory']['size']) * 100)|int }}%)
</li>
</ul>
</div>
</div>
</div>
<!-- Swap stats -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Swap') }}
</div>
<div class="card-body">
<canvas id="swapChart" class="mb-2"></canvas>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('swap size') }}
</li>
<li class="list-group-item w-50">
{{ _('used') }} (%)
</li>
<li class="list-group-item w-50">
{{ _('available') }} (%)
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ (stats['swap']['size'] / 2**30)|round(3) }} Gbytes
</li>
<li class="list-group-item w-50">
{{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }} Gbytes
({{ (((stats['swap']['size'] - stats['swap']['free']) / stats['swap']['size']) * 100)|int }}%)
</li>
<li class="list-group-item w-50">
{{ (stats['swap']['free'] / 2**30)|round(3) }} Gbytes
({{ ((stats['swap']['free'] / stats['swap']['size']) * 100)|int }}%)
</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
@ -139,5 +226,75 @@
document.getElementById('diskChart'),
diskChartConfig,
);
const memoryChartConfig = {
type: 'doughnut',
data: {
labels: ['Used', 'Available'],
datasets: [
{
label: 'Memory usage',
data: [
{{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }},
{{ (stats['memory']['free'] / 2**30)|round(3) }},
],
backgroundColor: [
'rgb(179, 180, 146)',
'rgb(203, 184, 169)',
],
},
],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
};
var memoryChart = new Chart(
document.getElementById('memoryChart'),
memoryChartConfig,
);
const swapChartConfig = {
type: 'doughnut',
data: {
labels: ['Used', 'Available'],
datasets: [
{
label: 'Swap usage',
data: [
{{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }},
{{ (stats['swap']['free'] / 2**30)|round(3) }},
],
backgroundColor: [
'rgb(191, 171, 37)',
'rgb(216, 164, 127)',
],
},
],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
};
var swapChart = new Chart(
document.getElementById('swapChart'),
swapChartConfig,
);
</script>
{% endblock %}

27
ogcp/views.py
View File

@ -183,6 +183,25 @@ def get_user(username):
return user
return None
intervals = (
(_('days'), 86400), # 60 * 60 * 24
(_('hours'), 3600), # 60 * 60
(_('minutes'), 60),
)
def display_time(seconds):
result = []
for name, count in intervals:
value = seconds // count
if value:
seconds -= value * count
result.append("{} {}".format(value, name))
return ', '.join(result)
@login_manager.user_loader
def load_user(username):
user_dict = get_user(username)
@ -218,9 +237,15 @@ def index():
images.sort(key=image_modified_date_from_str, reverse=True)
disk = images_response.json()['disk']
oglive_list = g.server.get('/oglive/list').json()
stats = g.server.get('/stats').json()
timestamp = datetime.datetime.fromtimestamp(stats.get('time').get('now'))
now = timestamp.strftime('%Y-%m-%d %H:%M:%S')
boot = display_time(stats.get('time').get('boot'))
time_dict = {'now': now, 'boot': boot}
return render_template('dashboard.html', clients=clients,
images=images, disk=disk, colsize="6",
oglive_list=oglive_list)
oglive_list=oglive_list, stats=stats,
time_dict=time_dict)
@app.route('/login', methods=['GET', 'POST'])
def login():