summaryrefslogtreecommitdiffstats
path: root/ogcp
diff options
context:
space:
mode:
authorJavier Sánchez Parra <jsanchez@soleta.eu>2022-03-15 12:00:36 +0100
committerJavier Sánchez Parra <jsanchez@soleta.eu>2022-03-16 17:33:34 +0100
commit3283843d564a188190a3b4a453c1ea867910400f (patch)
treec4951ad44debc6c8923a6199266d8ca25adff747 /ogcp
parent57ab7c11a90f6d4b9a2d54d5590aad88ae7a133f (diff)
Add /stats data to the dashboard
Add certain statistics on memory and swap usage, as well as the uptime.
Diffstat (limited to 'ogcp')
-rw-r--r--ogcp/templates/dashboard.html171
-rw-r--r--ogcp/views.py27
2 files changed, 190 insertions, 8 deletions
diff --git a/ogcp/templates/dashboard.html b/ogcp/templates/dashboard.html
index 75f4cb6..9e644a2 100644
--- a/ogcp/templates/dashboard.html
+++ b/ogcp/templates/dashboard.html
@@ -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 %}
diff --git a/ogcp/views.py b/ogcp/views.py
index cb1f4de..752db62 100644
--- a/ogcp/views.py
+++ b/ogcp/views.py
@@ -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():