summaryrefslogtreecommitdiffstats
path: root/ogcp/templates
diff options
context:
space:
mode:
Diffstat (limited to 'ogcp/templates')
-rw-r--r--ogcp/templates/base.html4
-rw-r--r--ogcp/templates/dashboard.html188
2 files changed, 126 insertions, 66 deletions
diff --git a/ogcp/templates/base.html b/ogcp/templates/base.html
index dca6205..372381a 100644
--- a/ogcp/templates/base.html
+++ b/ogcp/templates/base.html
@@ -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>
diff --git a/ogcp/templates/dashboard.html b/ogcp/templates/dashboard.html
index c2b10e8..4774804 100644
--- a/ogcp/templates/dashboard.html
+++ b/ogcp/templates/dashboard.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 %}
+ <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>
+ </div>
+ </div>
</div>
- <div class="m-4 w-25 card text-center">
- <div class="card-header">
- ogLives
+
+ <!-- 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>
- <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>
{% 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 %}