mirror of https://git.48k.eu/ogcp
Add chart to dashboard
This patch adds an example chart using chartjs to the dashboard to show the disk usage. https://www.chartjs.org/docs/latest/getting-started/multi-ogserver
Daniel García Moreno
parent
22dcea19ff
commit
514fb84a56
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
* DOM element rendering detection
|
||||
* https://davidwalsh.name/detect-node-insertion
|
||||
*/
|
||||
@keyframes chartjs-render-animation {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.chartjs-render-monitor {
|
||||
animation: chartjs-render-animation 0.001s;
|
||||
}
|
||||
|
||||
/*
|
||||
* DOM element resizing detection
|
||||
* https://github.com/marcj/css-element-queries
|
||||
*/
|
||||
.chartjs-size-monitor,
|
||||
.chartjs-size-monitor-expand,
|
||||
.chartjs-size-monitor-shrink {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.chartjs-size-monitor-expand > div {
|
||||
position: absolute;
|
||||
width: 1000000px;
|
||||
height: 1000000px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.chartjs-size-monitor-shrink > div {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
|||
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -53,6 +53,8 @@
|
|||
<script src="{{ url_for('static', filename='AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="{{ url_for('static', filename='AdminLTE/dist/js/adminlte.min.js') }}"></script>
|
||||
<!-- ChartJS -->
|
||||
<script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script>
|
||||
|
||||
<script>
|
||||
// error messages
|
||||
|
|
@ -74,5 +76,7 @@
|
|||
})
|
||||
{% endfor %}
|
||||
</script>
|
||||
|
||||
{% block extrabody %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,84 +2,140 @@
|
|||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="m-4 w-25 card text-center">
|
||||
<div class="card-header">
|
||||
Connected clients (ogClient)
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">{{ clients['clients'] | length }}</p>
|
||||
<!-- connected clients -->
|
||||
<div class="col-{{ colsize }}">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Connected clients (ogClient)
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">{{ clients['clients'] | length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-4 w-25 card text-center">
|
||||
<div class="card-header">
|
||||
Disk stats
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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>
|
||||
<li class="list-group-item w-50">
|
||||
use(%)
|
||||
</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
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
{{ disk['free'] // 2**30 }} Gbytes
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
{{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
Number of images
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">{{ images | length }}</p>
|
||||
|
||||
<!-- 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>
|
||||
<div class="m-4 w-25 card text-center">
|
||||
<div class="card-header">
|
||||
Latest images
|
||||
</div>
|
||||
{% for image in images[:10] %}
|
||||
|
||||
<!-- 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">
|
||||
{{ image['name'] }}
|
||||
Disk size
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
{{ image['modified'] }}
|
||||
used
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
available
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
use(%)
|
||||
</li>
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="m-4 w-25 card text-center">
|
||||
<div class="card-header">
|
||||
ogLives
|
||||
</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">
|
||||
{{ disk['total'] // 2**30 }} Gbytes
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<li class="list-group-item w-50">
|
||||
{{ (disk['total'] - disk['free']) // 2**30 }} Gbytes
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
{{ disk['free'] // 2**30 }} Gbytes
|
||||
</li>
|
||||
<li class="list-group-item w-50">
|
||||
{{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
Number of images
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">{{ images | length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ogLives -->
|
||||
<div class="col-{{ colsize }}">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
ogLives
|
||||
</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>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrabody %}
|
||||
<script>
|
||||
const diskChartConfig = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Used', 'Availabel'],
|
||||
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',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Doughnut Chart'
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
var diskChart = new Chart(
|
||||
document.getElementById('diskChart'),
|
||||
diskChartConfig,
|
||||
);
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ def index():
|
|||
disk = images_response.json()['disk']
|
||||
oglive_list = g.server.get('/oglive/list').json()
|
||||
return render_template('dashboard.html', clients=clients,
|
||||
images=images, disk=disk,
|
||||
images=images, disk=disk, colsize="6",
|
||||
oglive_list=oglive_list)
|
||||
|
||||
@app.route('/login', methods=['GET', 'POST'])
|
||||
|
|
|
|||
Loading…
Reference in New Issue