From 3283843d564a188190a3b4a453c1ea867910400f Mon Sep 17 00:00:00 2001 From: Javier Sánchez Parra Date: Tue, 15 Mar 2022 12:00:36 +0100 Subject: Add /stats data to the dashboard Add certain statistics on memory and swap usage, as well as the uptime. --- ogcp/templates/dashboard.html | 171 ++++++++++++++++++++++++++++++++++++++++-- ogcp/views.py | 27 ++++++- 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 %}
-
-
-
+
    +
  • + {{ _('Date') }} +
    • +
  • +

    {{ time_dict['now'] }}

    +
    • +
+
    +
  • + {{ _('Uptime') }} +
    • +
  • +

    {{ time_dict['boot'] }}

    +
    • +
+
    +
  • {{ _('Connected clients (ogClient)') }} -
-
+ +

  • {{ clients['clients'] | length }}

    -
    • -
    + +
    @@ -99,6 +114,78 @@
    + + +
    +
    +
    + {{ _('Memory') }} +
    +
    + +
      +
    • + {{ _('Memory size') }} +
      • +
    • + {{ _('used') }} (%) +
      • +
    • + {{ _('available') }} (%) +
      • +
    +
      +
    • + {{ (stats['memory']['size'] / 2**30)|round(3) }} Gbytes +
      • +
    • + {{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }} Gbytes + ({{ (((stats['memory']['size'] - stats['memory']['free']) / stats['memory']['size']) * 100)|int }}%) +
      • +
    • + {{ (stats['memory']['free'] / 2**30)|round(3) }} Gbytes + ({{ ((stats['memory']['free'] / stats['memory']['size']) * 100)|int }}%) +
      • +
    +
    +
    +
    + + +
    +
    +
    + {{ _('Swap') }} +
    +
    + +
      +
    • + {{ _('swap size') }} +
      • +
    • + {{ _('used') }} (%) +
      • +
    • + {{ _('available') }} (%) +
      • +
    +
      +
    • + {{ (stats['swap']['size'] / 2**30)|round(3) }} Gbytes +
      • +
    • + {{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }} Gbytes + ({{ (((stats['swap']['size'] - stats['swap']['free']) / stats['swap']['size']) * 100)|int }}%) +
      • +
    • + {{ (stats['swap']['free'] / 2**30)|round(3) }} Gbytes + ({{ ((stats['swap']['free'] / stats['swap']['size']) * 100)|int }}%) +
      • +
    +
    +
    +
    {% 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, + ); {% 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(): -- cgit v1.2.3-18-g5258