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

Add multiple servers to the dashboard view

async-tree
Daniel García Moreno 2022-09-14 14:01:18 +02:00 committed by Javier Sánchez Parra
parent ea18207998
commit 0c66443db8
8 changed files with 418 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ogcp/og_server.py
View File

@ -37,6 +37,11 @@ class OGServer:
json=payload)
return r
@property
def id(self):
ip = self.ip.replace('.', '-')
return f'server_{ip}_{self.port}'
servers = []
if {'IP', 'PORT', 'API_TOKEN'} <= app.config.keys():

8
ogcp/static/css/soleta.css
View File

@ -11,19 +11,19 @@ html, body {
margin: 10px;
}
.nav {
.nav.ogcp-nav {
position: relative;
}
.nav-item {
.ogcp-nav .nav-item {
padding-left: 20px;
position: relative;
}
.nav-link {
.ogcp-nav .nav-link {
padding: 0;
}
.active > .nav-link {
.ogcp-nav .active > .nav-link {
font-weight: bold;
background: slategrey;
border-radius: 10rem;

2
ogcp/templates/base.html
View File

@ -15,7 +15,7 @@
</head>
<body>
<div class="main d-flex flex-column align-items-stretch h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="ogcp-nav navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">OpenGnsys</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

644
ogcp/templates/dashboard.html
View File

@ -3,310 +3,396 @@
{% block nav_dashboard %}active{% endblock %}
{% block content %}
<div class="row">
<div class="col-{{ colsize }}">
<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">
{{ _('ogServer uptime') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ time_dict['start'] }}</p>
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Connected clients (ogClient)') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ clients['clients'] | length }}</p>
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Number of images') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ images | length }}</p>
</li>
</ul>
</div>
<div class="card col-12">
<table class="table">
<thead>
<tr>
<th>Server</th>
<th>Uptime</th>
<th>ogServer uptime</th>
<th>Connected clients</th>
<th>Number of images</th>
<th>Disk</th>
<th>Memory</th>
<th>Swap</th>
</tr>
</thead>
<tbody>
{% for id, server in servers.items() %}
<tr>
<th>{{ server.name }}</th>
<td>{{ server.time_dict.boot }}</td>
<td>{{ server.time_dict.start }}</td>
<td>{{ server.clients | length }}</td>
<td>{{ server.images | length }}</td>
<td>
{% set disk = server.disk %}
{% set used = (((disk['total'] - disk['free']) / disk['total']) * 100)|int %}
<div class="progress progress-lg">
<div class="progress-bar bg-primary" style="width: {{used}}%"></div>
</div>
</td>
<td>
{% set memory = server.stats.memory %}
{% set used = (((memory['size'] - memory['free']) / memory['size']) * 100)|int %}
<div class="progress progress-lg">
<div class="progress-bar bg-primary" style="width: {{used}}%"></div>
</div>
</td>
{% set swap = server.stats.swap %}
{% if swap.size %}
<td>
{% set used = (((swap['size'] - swap['free']) / swap['size']) * 100)|int %}
<div class="progress progress-lg">
<div class="progress-bar bg-primary" style="width: {{used}}%"></div>
</div>
</td>
{% else %}
<td>No swap</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
<!-- disk stats -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Disk stats') }}
</div>
<div class="card-body">
<canvas id="diskChart" class="mb-2"></canvas>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Disk 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">
{{ disk['total'] // 2**30 }} Gbytes
</li>
<li class="list-group-item w-50">
{{ (disk['total'] - disk['free']) // 2**30 }} Gbytes
({{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%)
</li>
<li class="list-group-item w-50">
{{ disk['free'] // 2**30 }} Gbytes
({{ ((disk['free'] / disk['total']) * 100)|int }}%)
</li>
</ul>
</div>
</div>
</table>
</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>
<hr />
<!-- Swap stats -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Swap') }}
</div>
<div class="card-body">
{% if stats['swap']['size'] %}
<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>
{% else %}
<h2>No swap</h2>
{% endif %}
</div>
</div>
</div>
<ul class="nav nav-tabs" id="serversTab" role="tablist">
{% for id, server in servers.items() %}
<li class="nav-item" role="presentation">
<button class="nav-link {% if loop.first %}active{% endif %}" id="{{ id }}-tab" data-toggle="tab" data-target="#{{ id }}" type="button" role="tab" aria-controls="{{ id }}" aria-selected="true">
{{ server.name }}
</button>
</li>
{% endfor %}
</ul>
<!-- latest images -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Latest images') }}
</div>
{% for image in images[:10] %}
<div class="tab-content" id="serversTabContent">
{% for id, server in servers.items() %}
{% set stats = server.stats %}
{% set time_dict = server.time_dict %}
{% set images = server.images %}
{% set disk = server.disk %}
{% set oglive_list = server.oglive_list %}
<div class="tab-pane {% if loop.first %}show active{% endif %}" id="{{ id }}" role="tabpanel">
<div class="row">
<div class="col-{{ colsize }}">
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ image['name'] }}
{{ _('Date') }}
</li>
<li class="list-group-item w-50">
{{ image['modified'] }}
<p class="card-text">{{ time_dict['now'] }}</p>
</li>
</ul>
{% endfor %}
</div>
</div>
<!-- ogLives -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('ogLive images') }}
</div>
<ul class="list-group">
{% for oglive in oglive_list['oglive'] %}
<li class="list-group-item">
{{ oglive['directory'] }}
{% if loop.index0 == oglive_list['default'] %}
({{ _('default') }})
{% endif %}
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Uptime') }}
</li>
{% endfor %}
</ul>
<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">
{{ _('ogServer uptime') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ time_dict['start'] }}</p>
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Connected clients (ogClient)') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ server.clients | length }}</p>
</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Number of images') }}
</li>
<li class="list-group-item w-50">
<p class="card-text">{{ images | length }}</p>
</li>
</ul>
</div>
<!-- disk stats -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Disk stats') }}
</div>
<div class="card-body">
<canvas id="diskChart-{{ id }}" class="mb-2"></canvas>
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ _('Disk 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">
{{ disk['total'] // 2**30 }} Gbytes
</li>
<li class="list-group-item w-50">
{{ (disk['total'] - disk['free']) // 2**30 }} Gbytes
({{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%)
</li>
<li class="list-group-item w-50">
{{ disk['free'] // 2**30 }} Gbytes
({{ ((disk['free'] / disk['total']) * 100)|int }}%)
</li>
</ul>
</div>
</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-{{ id }}" 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">
{% if stats['swap']['size'] %}
<canvas id="swapChart-{{ id }}" 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>
{% else %}
<h2>No swap</h2>
{% endif %}
</div>
</div>
</div>
<!-- latest images -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('Latest images') }}
</div>
{% for image in images[:10] %}
<ul class="list-group list-group-horizontal">
<li class="list-group-item w-50">
{{ image['name'] }}
</li>
<li class="list-group-item w-50">
{{ image['modified'] }}
</li>
</ul>
{% endfor %}
</div>
</div>
<!-- ogLives -->
<div class="col-{{ colsize }}">
<div class="card text-center">
<div class="card-header">
{{ _('ogLive images') }}
</div>
<ul class="list-group">
{% for oglive in oglive_list['oglive'] %}
<li class="list-group-item">
{{ oglive['directory'] }}
{% if loop.index0 == oglive_list['default'] %}
({{ _('default') }})
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block extrabody %}
<script>
const diskChartConfig = {
type: 'doughnut',
data: {
labels: ['Used', 'Available'],
datasets: [
{
label: 'Disk usage',
data: [
{{ (disk['total'] - disk['free']) // 2**30 }},
{{ disk['free'] // 2**30 }},
],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
{% for id, server in servers.items() %}
{% set stats = server.stats %}
{% set disk = server.disk %}
<script>
var diskChartConfig = {
type: 'doughnut',
data: {
labels: ['Used', 'Available'],
datasets: [
{
label: 'Disk usage',
data: [
{{ (disk['total'] - disk['free']) // 2**30 }},
{{ disk['free'] // 2**30 }},
],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
],
},
],
},
],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
};
var diskChart = new Chart(
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)',
};
var diskChart = new Chart(
document.getElementById('diskChart-{{ id }}'),
diskChartConfig,
);
var 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',
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
};
var memoryChart = new Chart(
document.getElementById('memoryChart'),
memoryChartConfig,
);
{% if stats['swap']['size'] %}
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)',
};
var memoryChart = new Chart(
document.getElementById('memoryChart-{{ id }}'),
memoryChartConfig,
);
{% if stats['swap']['size'] %}
var 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',
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
},
},
};
var swapChart = new Chart(
document.getElementById('swapChart'),
swapChartConfig,
);
{% endif %}
</script>
};
var swapChart = new Chart(
document.getElementById('swapChart-{{ id }}'),
swapChartConfig,
);
{% endif %}
</script>
{% endfor %}
{% endblock %}

4
ogcp/templates/macros.html
View File

@ -1,6 +1,6 @@
{% macro scopes_tree_collapse(scopes, state='', selection_mode='scopes') -%}
<ul id="scopes" class="nav flex-column nav-pills">
<ul id="scopes" class="nav ogcp-nav flex-column nav-pills">
{{ scopes_tree_collapse_level(scopes["scope"], "", state, selection_mode) }}
</ul>
<script>
@ -78,7 +78,7 @@
<hr><h2>{{_('Selected clients')}}</h2>
<div class="card">
<div class="card-body">
<ul id="clients-color-legend" class="d-flex flex-wrap justify-content-center nav nav-pills">
<ul id="clients-color-legend" class="d-flex flex-wrap justify-content-center nav ogcp-nav nav-pills">
<li class="nav-item"><i class="nav-icon far fa-circle"></i> {{_('Apagado')}} </li>
<li class="nav-item"><i class="nav-icon fas fa-circle text-wol"></i> {{_('WoL sent')}} </li>
<li class="nav-item"><i class="nav-icon fas fa-circle text-warning"></i> ogLive </li>

2
ogcp/templates/servers.html
View File

@ -11,7 +11,7 @@
{% endblock %}
{% block sidebar %}
<ul id="servers-list" class="nav flex-column nav-pills">
<ul id="servers-list" class="nav ogcp-nav flex-column nav-pills">
{% for server in servers %}
{% set server_str = server["ip"] ~ ":" ~ server["port"] %}
<li class="nav-item">

2
ogcp/templates/users.html
View File

@ -11,7 +11,7 @@
{% endblock %}
{% block sidebar %}
<ul id="users-list" class="nav flex-column nav-pills">
<ul id="users-list" class="nav ogcp-nav flex-column nav-pills">
{% for user in users %}
<li id="user-{{ user['USER'] }}" class="nav-item">
<input class="form-check-input" type="checkbox" form="usersForm"

61
ogcp/views.py
View File

@ -333,28 +333,45 @@ def index():
if not current_user.is_authenticated:
return redirect(url_for('login'))
try:
clients = get_clients()
except requests.exceptions.RequestException as err:
flash(_('ogServer connection failed: {}.').format(err),
category='error')
logout_user()
return redirect(url_for('index'))
images_response = g.server.get('/images')
images = images_response.json()['images']
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'))
start = display_time(stats.get('time').get('start'))
time_dict = {'now': now, 'boot': boot, 'start': start}
return render_template('dashboard.html', clients=clients,
images=images, disk=disk, colsize="6",
oglive_list=oglive_list, stats=stats,
time_dict=time_dict)
images_response = multi_request('get', '/images')
dashboard_servers = {}
for i in images_response:
server_name = i['server'].name
server_id = i['server'].id
images = i['json']['images']
images.sort(key=image_modified_date_from_str, reverse=True)
disk = i['json']['disk']
if server_name not in dashboard_servers:
dashboard_servers[server_id] = {'name': server_name}
dashboard_servers[server_id]['images'] = images
dashboard_servers[server_id]['disk'] = disk
oglive_list = multi_request('get', '/oglive/list')
for i in oglive_list:
server_id = i['server'].id
dashboard_servers[server_id]['oglive_list'] = i['json']
all_stats = multi_request('get', '/stats')
for i in all_stats:
server_id = i['server'].id
stats = i['json']
dashboard_servers[server_id]['stats'] = stats
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'))
start = display_time(stats.get('time').get('start'))
time_dict = {'now': now, 'boot': boot, 'start': start}
dashboard_servers[server_id]['time_dict'] = time_dict
clients_response = multi_request('get', '/clients')
for i in clients_response:
server_id = i['server'].id
dashboard_servers[server_id]['clients'] = i['json']['clients']
return render_template('dashboard.html', servers=dashboard_servers, colsize="6")
@app.route('/login', methods=['GET', 'POST'])
def login():