diff options
| -rw-r--r-- | ogcp/templates/dashboard.html | 171 | ||||
| -rw-r--r-- | 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 %} <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(): |