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 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 164 insertions(+), 7 deletions(-) (limited to 'ogcp/templates/dashboard.html') 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 %} -- cgit v1.2.3-18-g5258