Feature/disk space (#199)

* new backend API to get disk info from psutil

* Disk info div + disk space gauge div

* styling for git disk space gauge

* inital commit - jquery request to system-info endpoint

* div disk_info created

* get_system_info function is initiated once DOM is fully loaded.

* styling for disk-gauge-bar added

* get_system_info endpoint returns additionally an information about network, cpu_time and memory

* new <div> for graphical output of system info

* increased widht for disk-gauge-container

* if condition testing an index of response and rendering an output within div for graphical output

* div deleted
This commit is contained in:
pvlasak
2024-06-14 12:45:34 +02:00
committed by GitHub
parent ad45b424f7
commit d7bde54533
4 changed files with 91 additions and 2 deletions

View File

@ -18,6 +18,7 @@ from fastapi.security import HTTPBasic, HTTPBasicCredentials
from v2realbot.enums.enums import Env, Mode
from typing import Annotated
import os
import psutil
import uvicorn
import orjson
from queue import Queue, Empty
@ -1025,7 +1026,24 @@ def get_metadata(model_name: str):
# "last_modified": os.path.getmtime(model_path),
# # ... other metadata fields ...
# }
@app.get("/system-info")
def get_system_info():
"""Get system info, e.g. disk free space, used percentage ... """
disk_total = round(psutil.disk_usage('/').total / 1024**3, 1)
disk_used = round(psutil.disk_usage('/').used / 1024**3, 1)
disk_free = round(psutil.disk_usage('/').free / 1024**3, 1)
disk_used_percentage = round(psutil.disk_usage('/').percent, 1)
memory_total = round(psutil.virtual_memory().total / 1024**3, 1)
memory_perc = round(psutil.virtual_memory().percent, 1)
cpu_time_user = round(psutil.cpu_times().user,1)
cpu_time_system = round(psutil.cpu_times().system,1)
cpu_time_idle = round(psutil.cpu_times().idle,1)
network_sent = round(psutil.net_io_counters().bytes_sent / 1024**3, 6)
network_recv = round(psutil.net_io_counters().bytes_recv / 1024**3, 6)
return {"disk_space": {"total": disk_total, "used": disk_used, "free" : disk_free, "used_percentage" : disk_used_percentage},
"memory": {"total": memory_total, "used_percentage": memory_perc},
"cpu_time" : {"user": cpu_time_user, "system": cpu_time_system, "idle": cpu_time_idle},
"network": {"sent": network_sent, "received": network_recv}}
# Thread function to insert data from the queue into the database
def insert_queue2db():

View File

@ -131,9 +131,27 @@
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.41.0/min/vs/editor/editor.main.js"></script> -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.41.0/min/vs/loader.min.js"></script> -->
<script src="/static/js/systeminfo.js"> </script>
</head>
<body>
<div id="main" class="mainConteiner flex-container content">
<div id="system-info" class="flex-items">
<label data-bs-toggle="collapse" data-bs-target="#disk-gauge-container" aria-expanded="true">
<h4>System Info </h4>
</label>
<div id="system-info-output"> </div>
<div id="graphical-output">
<div id="disk-gauge-container">
<span id="title"> Disk Space: </span>
<span id="free-space">Free: -- GB</span> |
<span id="total-space">Total: -- GB</span> |
<span id="used-percent">Used: -- %</span>
<div id="disk-gauge">
<div id="disk-gauge-bar"></div>
</div>
</div>
</div>
</div>
<div id="chartContainer" class="flex-items">
<label data-bs-toggle="collapse" data-bs-target="#chartContainerInner" aria-expanded="true">
<h4>Chart</h4>
@ -230,6 +248,7 @@
<!-- <table id="trades-data-table" class="dataTable no-footer" style="width: 300px;display: contents;"></table> -->
</div>
</div>
<div id="runner-table" class="flex-items">
<label data-bs-toggle="collapse" data-bs-target="#runner-table-inner">
<h4>Running Strategies</h4>

View File

@ -0,0 +1,31 @@
function get_system_info() {
console.log('Button get system status clicked')
$.ajax({
url: '/system-info',
type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('X-API-Key',
API_KEY); },
success: function(response) {
$.each(response, function(index, item) {
if (index=="disk_space") {
$('#disk-gauge-bar').css('width', response.disk_space.used_percentage + '%');
$('#free-space').text('Free: ' + response.disk_space.free + ' GB');
$('#total-space').text('Total: ' + response.disk_space.total + ' GB');
$('#used-percent').text('Used: ' + response.disk_space.used_percentage + '%');
} else {
var formatted_item = JSON.stringify(item, null, 4)
$('#system-info-output').append('<p>' + index + ': ' + formatted_item + '</p>');
}
});
},
error: function(xhr, status, error) {
$('#disk-gauge-bar').html('An error occurred: ' + error + xhr.responseText + status);
}
});
}
$(document).ready(function(){
get_system_info()
});

View File

@ -994,3 +994,24 @@ pre {
#datepicker:disabled {
background-color: #f2f2f2;
}
#disk-gauge-container {
text-align: center;
width: 400px;
}
#disk-gauge {
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
}
#disk-gauge-bar {
height: 100%;
background-color: #4285F4;
width: 0%; /* Initial state */
border-radius: 10px;
}