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 v2realbot.enums.enums import Env, Mode
from typing import Annotated from typing import Annotated
import os import os
import psutil
import uvicorn import uvicorn
import orjson import orjson
from queue import Queue, Empty from queue import Queue, Empty
@ -1025,7 +1026,24 @@ def get_metadata(model_name: str):
# "last_modified": os.path.getmtime(model_path), # "last_modified": os.path.getmtime(model_path),
# # ... other metadata fields ... # # ... 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 # Thread function to insert data from the queue into the database
def insert_queue2db(): 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/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 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> </head>
<body> <body>
<div id="main" class="mainConteiner flex-container content"> <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"> <div id="chartContainer" class="flex-items">
<label data-bs-toggle="collapse" data-bs-target="#chartContainerInner" aria-expanded="true"> <label data-bs-toggle="collapse" data-bs-target="#chartContainerInner" aria-expanded="true">
<h4>Chart</h4> <h4>Chart</h4>
@ -215,7 +233,7 @@
</div> </div>
</div> </div>
<div id="hist-trades" class="flex-items"> <div id="hist-trades" class="flex-items">
<div id="form-trades"> <div id="form-trades">
<label data-bs-toggle="collapse" data-bs-target="#trades-data"> <label data-bs-toggle="collapse" data-bs-target="#trades-data">
<h4>Trade History</h4> <h4>Trade History</h4>
</label> </label>
@ -230,6 +248,7 @@
<!-- <table id="trades-data-table" class="dataTable no-footer" style="width: 300px;display: contents;"></table> --> <!-- <table id="trades-data-table" class="dataTable no-footer" style="width: 300px;display: contents;"></table> -->
</div> </div>
</div> </div>
<div id="runner-table" class="flex-items"> <div id="runner-table" class="flex-items">
<label data-bs-toggle="collapse" data-bs-target="#runner-table-inner"> <label data-bs-toggle="collapse" data-bs-target="#runner-table-inner">
<h4>Running Strategies</h4> <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 { #datepicker:disabled {
background-color: #f2f2f2; 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;
}