Files
camserver_sf/configuration/camera_config/www/index.html
T
2021-05-17 17:13:03 +02:00

248 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Server Management</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<script type="text/javascript">
var base = 'api/v1/proxy/';
function deleteInstance(key){
$.delete(base + key).error(function (xhr, textStatus, errorThrown) {
$("#scripterror").show()
$("#scripterror").html(xhr.responseText)
});
}
function deleteAllInstances(server_index){
$.delete(base + "server/" + server_index).error(function (xhr, textStatus, errorThrown) {
$("#scripterror").show()
$("#scripterror").html(xhr.responseText)
});
}
function showLogs(server_index){
//window.open(server + "/api/v1/logs/txt");
window.open(base + "server/logs/" + server_index + "/txt" );
}
function getServers() {
$.get(base + 'servers', function (data) {
}).error(function (xhr, textStatus, errorThrown) {
$("#scripterror").show()
$("#scripterror").html(xhr.responseText)
});
}
//Adding $.delete and $.put functions
jQuery.each( [ "put", "delete" ], function( i, method ) {
jQuery[ method ] = function( url, data, callback, type ) {
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = undefined;
}
return jQuery.ajax({
url: url,
type: method,
dataType: type,
data: data,
success: callback
});
};
});
function update() {
$.get(base + 'info', function (data) {
var info = data["info"]
//Servers table
var servers_info = info["servers"]
var table = $("#servers_table")
var i=0
$.each(servers_info, function(server_url, server_info) {
var version = server_info["version"]
var load = server_info["load"]
var cpu = server_info["cpu"]
var memory = server_info["memory"]
var tx = server_info["tx"]
var rx = server_info["rx"]
var instances = server_info["instances"]
instances = listToStr(instances, false)
if (load >=1000) {
load = "off"
}
if (getRows(table) <= i){
var row = appendTableRow(table, [server_url, version, load,
formatNum(cpu), formatNum(memory), formatNum(tx), formatNum(rx), instances])
var callback = 'onclick="showLogs(\'' + i + '\')"'
row.append($('<td align="center"><button ' + callback + '>Logs</button></td>'))
var callback = 'onclick="deleteAllInstances(\'' + i + '\')"'
row.append($('<td align="center"><button ' + callback + '>Stop</button></td>'))
} else {
setTableCell(server_url , "servers_table", i, 0)
setTableCell(version , "servers_table", i, 1)
setTableCell(load, "servers_table", i, 2)
setTableCell(formatNum(cpu), "servers_table", i, 3)
setTableCell(formatNum(memory), "servers_table", i, 4)
setTableCell(formatNum(tx), "servers_table", i, 5)
setTableCell(formatNum(rx), "servers_table", i, 6)
setTableCell(instances, "servers_table", i, 7)
}
i=i+1
});
//Instances table
var active_instances = info["active_instances"]
var table = $("#instances_table")
clear(table)
$.each(active_instances, function(key, value) {
//Compact display
for (var k in value["statistics"]) {
var cur = value["statistics"][k]
if(typeof cur == 'number'){
value["statistics"][k] = formatNum(cur, false)
}
}
//Save columns
if (value["camera_geometry"] != undefined) {
value["statistics"]["geometry"] = value["camera_geometry"]
}
if (value["read_only"] != undefined) {
value["statistics"]["read_only"] = value["read_only"]
}
value["statistics"]["camera"] = value["camera_name"]
value["statistics"]["start"] = dateToStr(value["last_start_time"])
var statistics = dictToStr(value["statistics"])
var config = dictToStr(value["config"])
var instance = {}
instance["name"] = key
instance["host"] = value["host"]
instance["stream"] = value["stream_address"]
instance = dictToStr(instance)
var row = appendTableRow(table, [
instance,
statistics,
config,
]
)
var callback = 'onclick="deleteInstance(\'' + key + '\')"'
row.append($('<td align="center"><button ' + callback + '>Stop</button></td>'))
});
}).error(function (xhr, textStatus, errorThrown) {
$("#scripterror").show()
$("#scripterror").text(xhr.responseText)
});
}
function timer() {
if ($("#servers").is(":visible")) {
update();
}
window.setTimeout(
"timer()",
2000
);
}
$(document).ready(function(){
//$("#scripterror").hide()
//update()
timer()
});
</script>
<div id="msgid">
</div>
<p>
<section>
<h1>
Servers <input type="button" value="Manager Logs" style="float: right;" onclick="window.open('/api/v1/logs/txt')" />
</h1>
<div id="servers">
<table id="servers_table" border="1" width="100%" >
<thead>
<tr>
<th width="20%">Host</th>
<th width="3%">Ver</th>
<th width="1%">Load</th>
<th width="1%">CPU</th>
<th width="1%">Mem</th>
<th width="1%">TX</th>
<th width="1%">RX</th>
<th width="70%">Active Instances</th>
<th width="1%">Logs</th>
<th width="1%">Stop</th>
</tr>
</thead>
<tbody id="servers_table_rows">
</tbody>
</table>
</div>
</section>
<p><br>
<section>
<h1>
Instances
</h1>
<div id="instances">
<table id="instances_table" border="1" width="100%">
<thead>
<tr>
<th width="33%">Instance</th>
<!--<th>Host</th>-->
<!--<th>Stream Address</th>-->
<!--<th>Active</th>-->
<!--<th>Camera</th>-->
<!--<th>Geometry</th>-->
<!--<th>Start</th>-->
<th width="33%">Info</th>
<th width="33%">Config</th>
<th width="1%">Stop</th>
</tr>
</thead>
<tbody id="instances_table_rows">
</tbody>
</table>
</div>
</section>
<p><br>
<section>
<div id="scripterror" style="color:red">
</div>
</section>
<p>
</body>
</html>