mirror of https://github.com/q191201771/lal.git
Add lal Web UI using http api
Jae-Sung Lee
2 years ago
parent
6dff63cbfd
commit
61a7c2e128
@ -0,0 +1,565 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>lal</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #5e5e5e;
|
||||
color: #dadada;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
background-color: #25252b;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
background-color: #19191d;
|
||||
}
|
||||
|
||||
tbody>tr:nth-child(even) {
|
||||
background-color: #29292e;
|
||||
}
|
||||
|
||||
tbody>tr:hover {
|
||||
background-color: #442727;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #ccc;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
td:hover {
|
||||
background-color: #813737;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #dadada;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1>Server Info</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Server ID</th>
|
||||
<td>{{.ServerID}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Git Tag</th>
|
||||
<td>{{.GitTag}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Git Commit Log</th>
|
||||
<td>{{.GitCommitLog}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Git Status</th>
|
||||
<td>{{.GitStatus}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Build Time</th>
|
||||
<td>{{.BuildTime}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Go Version</th>
|
||||
<td>{{.GoVersion}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Runtime</th>
|
||||
<td>{{.runtime}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>lal Version</th>
|
||||
<td>{{.LalVersion}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>API Version</th>
|
||||
<td>{{.ApiVersion}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Notify Version</th>
|
||||
<td>{{.NotifyVersion}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Start Time</th>
|
||||
<td>{{.StartTime}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="allGroupSection">
|
||||
<h1>All Group</h1>
|
||||
<div>
|
||||
Sort:
|
||||
<select id="selAllGroupSortCol">
|
||||
<option value="name">Name</option>
|
||||
<option value="start">Pub StartTime</option>
|
||||
</select>
|
||||
<input type="radio" name="rbAllGroupSort" value="asc" checked> ASC
|
||||
<input type="radio" name="rbAllGroupSort" value="desc"> DESC
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="chkAllGroupAuto" onclick="onCheckBoxAllGroupAutoClick();"> Auto
|
||||
<input type="number" id="txtAllGroupInterval" value="1" min="1" onchange="onChangeTxtAllGroupInterval();">s
|
||||
<button id="btnAllGroupRefresh" onclick="requestAllGroup();">Refresh</button>
|
||||
</div>
|
||||
<div>
|
||||
Update Time: <label id="lblAllGroupUpdateTime"></label>
|
||||
</div><br>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="3">#</th>
|
||||
<th colspan="2">Name</th>
|
||||
<th colspan="3">Video</th>
|
||||
<th>Audio</th>
|
||||
<th colspan="7">Pub</th>
|
||||
<th rowspan="3">Subs</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2">App</th>
|
||||
<th rowspan="2">Stream</th>
|
||||
<th rowspan="2">Codec</th>
|
||||
<th rowspan="2">Width</th>
|
||||
<th rowspan="2">Height</th>
|
||||
<th rowspan="2">Codec</th>
|
||||
<th rowspan="2">Session ID</th>
|
||||
<th rowspan="2">Remote Addr</th>
|
||||
<th rowspan="2">Start Time</th>
|
||||
<th colspan="2">Read</th>
|
||||
<th colspan="2">Write</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="allGroupTable"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="groupSection" style="display: none;">
|
||||
<h1 id="groupName">Group</h1>
|
||||
<a href="javascript:GroupClose()">Back</a>
|
||||
<div>
|
||||
<input type="checkbox" id="chkGroupAuto" onclick="onCheckBoxGroupAutoClick();"> Auto
|
||||
<input type="number" id="txtGroupInterval" value="1" min="1" onchange="onChangeTxtGroupInterval();">s
|
||||
<button id="btnGroupRefresh" onclick="requestGroup();">Refresh</button>
|
||||
</div>
|
||||
<div>
|
||||
Update Time: <label id="lblGroupUpdateTime"></label>
|
||||
</div>
|
||||
<h4>Group Info</h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Name</th>
|
||||
<th colspan="3">Video</th>
|
||||
<th>Audio</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>App Name</th>
|
||||
<th>Stream Name</th>
|
||||
<th>Video Codec</th>
|
||||
<th>Video Width</th>
|
||||
<th>Video Height</th>
|
||||
<th>Audio Codec</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groupInfoTable"></tbody>
|
||||
</table>
|
||||
|
||||
<h4>Pub</h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Session ID</th>
|
||||
<th rowspan="2">Remote Addr</th>
|
||||
<th rowspan="2">Start Time</th>
|
||||
<th colspan="2">Read</th>
|
||||
<th colspan="2">Write</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groupPubTable"></tbody>
|
||||
</table>
|
||||
|
||||
<h4>Pull</h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Session ID</th>
|
||||
<th rowspan="2">Protocol</th>
|
||||
<th rowspan="2">Remote Addr</th>
|
||||
<th rowspan="2">Start Time</th>
|
||||
<th colspan="2">Read</th>
|
||||
<th colspan="2">Write</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groupPullTable"></tbody>
|
||||
</table>
|
||||
|
||||
<h4>Subs</h4>
|
||||
<div>
|
||||
Sort:
|
||||
<input type="radio" name="rbSubSort" value="asc" checked> ASC
|
||||
<input type="radio" name="rbSubSort" value="desc"> DESC
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">#</th>
|
||||
<th rowspan="2">Session ID</th>
|
||||
<th rowspan="2">Protocol</th>
|
||||
<th rowspan="2">Remote Addr</th>
|
||||
<th rowspan="2">Start Time</th>
|
||||
<th colspan="2">Read</th>
|
||||
<th colspan="2">Write</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
<th>Bytes Sum</th>
|
||||
<th>Bitrate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groupSubTable"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<hr>lal
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const allGroupSection = document.getElementById("allGroupSection");
|
||||
const selAllGroupSortCol = document.getElementById("selAllGroupSortCol");
|
||||
const rbAllGroupSort = document.getElementsByName("rbAllGroupSort");
|
||||
const chkAllGroupAuto = document.getElementById("chkAllGroupAuto");
|
||||
const btnAllGroupRefresh = document.getElementById("btnAllGroupRefresh");
|
||||
const txtAllGroupInterval = document.getElementById("txtAllGroupInterval");
|
||||
const lblAllGroupUpdateTime = document.getElementById("lblAllGroupUpdateTime");
|
||||
const allGroupTable = document.getElementById("allGroupTable");
|
||||
let allGroupTimer;
|
||||
|
||||
const groupSection = document.getElementById("groupSection");
|
||||
const groupName = document.getElementById("groupName");
|
||||
const chkGroupAuto = document.getElementById("chkGroupAuto");
|
||||
const btnGroupRefresh = document.getElementById("btnGroupRefresh");
|
||||
const txtGroupInterval = document.getElementById("txtGroupInterval");
|
||||
const lblGroupUpdateTime = document.getElementById("lblGroupUpdateTime");
|
||||
const groupInfoTable = document.getElementById("groupInfoTable");
|
||||
const groupPubTable = document.getElementById("groupPubTable");
|
||||
const groupPullTable = document.getElementById("groupPullTable");
|
||||
const rbSubSort = document.getElementsByName("rbSubSort");
|
||||
const groupSubTable = document.getElementById("groupSubTable");
|
||||
let groupTimer;
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
const params = new URLSearchParams(location.search);
|
||||
let sort = params.get("sort");
|
||||
if(sort == "start") {
|
||||
selAllGroupSortCol.value = "start";
|
||||
}
|
||||
let isDesc = params.get("desc");
|
||||
if(isDesc == 1) {
|
||||
for(let index = 0; index < rbAllGroupSort.length; index++) {
|
||||
if(rbAllGroupSort[index].value == "desc") {
|
||||
rbAllGroupSort[index].checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
let interval = params.get("interval");
|
||||
if(interval > 0) {
|
||||
txtAllGroupInterval.value = interval;
|
||||
}
|
||||
let isAuto = params.get("auto");
|
||||
if(isAuto == 1) {
|
||||
chkAllGroupAuto.checked = true;
|
||||
onCheckBoxAllGroupAutoClick();
|
||||
return;
|
||||
}
|
||||
requestAllGroup();
|
||||
}
|
||||
|
||||
function StartAllGroupTimer() {
|
||||
let interval = txtAllGroupInterval.value * 1000;
|
||||
btnAllGroupRefresh.disabled = "disabled";
|
||||
allGroupTimer = setInterval(requestAllGroup, interval);
|
||||
}
|
||||
|
||||
function StopAllGroupTimer() {
|
||||
btnAllGroupRefresh.disabled = false;
|
||||
clearInterval(allGroupTimer);
|
||||
}
|
||||
|
||||
function onCheckBoxAllGroupAutoClick() {
|
||||
if(chkAllGroupAuto.checked) {
|
||||
requestAllGroup();
|
||||
StartAllGroupTimer();
|
||||
} else {
|
||||
StopAllGroupTimer();
|
||||
}
|
||||
}
|
||||
|
||||
function onChangeTxtAllGroupInterval() {
|
||||
if(chkAllGroupAuto.checked) {
|
||||
StopAllGroupTimer();
|
||||
StartAllGroupTimer();
|
||||
}
|
||||
}
|
||||
|
||||
function httpAsync(url, method, callback) {
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function() {
|
||||
if(xmlHttp.readyState == 4)
|
||||
callback(xmlHttp.status, xmlHttp.responseText);
|
||||
}
|
||||
xmlHttp.open(method, url, true);
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
|
||||
function allGroupSort(a, b) {
|
||||
const sortCol = selAllGroupSortCol.options[selAllGroupSortCol.selectedIndex].value;
|
||||
let isDesc = false;
|
||||
for(let index = 0; index < rbAllGroupSort.length; index++) {
|
||||
if(rbAllGroupSort[index].checked) {
|
||||
if(rbAllGroupSort[index].value == "desc") {
|
||||
isDesc = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
let data1 = sortCol == "name" ? a["app_name"] : a["pub"]["start_time"];
|
||||
let data2 = sortCol == "name" ? b["app_name"] : b["pub"]["start_time"];
|
||||
if(data1 == data2) {
|
||||
data1 = a["stream_name"];
|
||||
data2 = b["stream_name"];
|
||||
}
|
||||
if(isDesc) {
|
||||
let tmp = data1;
|
||||
data1 = data2;
|
||||
data2 = tmp;
|
||||
}
|
||||
return data1 < data2 ? -1 : 1
|
||||
}
|
||||
|
||||
function requestAllGroup() {
|
||||
httpAsync("/api/stat/all_group", "GET", function(code, resp) {
|
||||
if(code == 200) {
|
||||
const obj = JSON.parse(resp);
|
||||
obj["data"]["groups"].sort(allGroupSort);
|
||||
for(let index = allGroupTable.rows.length; index > 0; index--) {
|
||||
allGroupTable.deleteRow(-1);
|
||||
}
|
||||
|
||||
for(let i=0;i<obj["data"]["groups"].length;i++) {
|
||||
const group = obj["data"]["groups"][i];
|
||||
const newRow = allGroupTable.insertRow();
|
||||
newRow.insertCell(0).innerText = i + 1;
|
||||
newRow.insertCell(1).innerText = group["app_name"];
|
||||
newRow.insertCell(2).innerText = group["stream_name"];
|
||||
newRow.insertCell(3).innerText = group["video_codec"];
|
||||
newRow.insertCell(4).innerText = group["video_width"];
|
||||
newRow.insertCell(5).innerText = group["video_height"];
|
||||
newRow.insertCell(6).innerText = group["audio_codec"];
|
||||
newRow.insertCell(7).innerText = group["pub"]["session_id"];
|
||||
newRow.insertCell(8).innerText = group["pub"]["remote_addr"];
|
||||
newRow.insertCell(9).innerText = group["pub"]["start_time"];
|
||||
newRow.insertCell(10).innerText = group["pub"]["read_bytes_sum"];
|
||||
newRow.insertCell(11).innerText = group["pub"]["read_bitrate_kbits"];
|
||||
newRow.insertCell(12).innerText = group["pub"]["wrote_bytes_sum"];
|
||||
newRow.insertCell(13).innerText = group["pub"]["write_bitrate_kbits"];
|
||||
let subsCnt = 0;
|
||||
if(group["subs"]) {
|
||||
subsCnt = group["subs"].length;
|
||||
}
|
||||
newRow.insertCell(14).innerText = subsCnt;
|
||||
newRow.addEventListener("click", function() {GroupOpen(group["stream_name"]);});
|
||||
}
|
||||
lblAllGroupUpdateTime.innerText = (new Date().toString());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function GroupOpen(streamName) {
|
||||
txtGroupInterval.value = txtAllGroupInterval.value;
|
||||
chkGroupAuto.checked = chkAllGroupAuto.checked;
|
||||
for(let i = 0; i < rbAllGroupSort.length; i++) {
|
||||
if(rbAllGroupSort[i].checked) {
|
||||
for(let j = 0; j < rbSubSort.length; j++) {
|
||||
if(rbSubSort[j].value == rbAllGroupSort[i].value) {
|
||||
rbSubSort[j].checked = true;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
StopAllGroupTimer();
|
||||
groupName.innerText = streamName;
|
||||
allGroupSection.style.display = "none";
|
||||
groupSection.style.display = "block";
|
||||
if(chkGroupAuto.checked) {
|
||||
onCheckBoxGroupAutoClick();
|
||||
return;
|
||||
}
|
||||
requestGroup();
|
||||
}
|
||||
|
||||
function GroupClose() {
|
||||
txtAllGroupInterval.value = txtGroupInterval.value;
|
||||
chkAllGroupAuto.checked = chkGroupAuto.checked;
|
||||
for(let i = 0; i < rbSubSort.length; i++) {
|
||||
if(rbSubSort[i].checked) {
|
||||
for(let j = 0; j < rbAllGroupSort.length; j++) {
|
||||
if(rbAllGroupSort[j].value == rbSubSort[i].value) {
|
||||
rbAllGroupSort[j].checked = true;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
StopGroupTimer();
|
||||
onCheckBoxAllGroupAutoClick();
|
||||
allGroupSection.style.display = "block";
|
||||
groupSection.style.display = "none";
|
||||
}
|
||||
|
||||
function onCheckBoxGroupAutoClick() {
|
||||
if(chkGroupAuto.checked) {
|
||||
requestGroup();
|
||||
StartGroupTimer();
|
||||
} else {
|
||||
StopGroupTimer();
|
||||
}
|
||||
}
|
||||
|
||||
function onChangeTxtGroupInterval() {
|
||||
if(chkGroupAuto.checked) {
|
||||
StopGroupTimer();
|
||||
StartGroupTimer();
|
||||
}
|
||||
}
|
||||
|
||||
function StartGroupTimer() {
|
||||
let interval = txtGroupInterval.value * 1000;
|
||||
btnGroupRefresh.disabled = "disabled";
|
||||
groupTimer = setInterval(requestGroup, interval);
|
||||
}
|
||||
|
||||
function StopGroupTimer() {
|
||||
btnGroupRefresh.disabled = false;
|
||||
clearInterval(groupTimer);
|
||||
}
|
||||
|
||||
function subSort(a, b) {
|
||||
let isDesc = false;
|
||||
for(let index = 0; index < rbSubSort.length; index++) {
|
||||
if(rbSubSort[index].checked) {
|
||||
if(rbSubSort[index].value == "desc") {
|
||||
isDesc = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
let data1 = isDesc ? b["session_id"] : a["session_id"];
|
||||
let data2 = isDesc ? a["session_id"] : b["session_id"];
|
||||
return data1 < data2 ? -1 : 1
|
||||
}
|
||||
|
||||
function requestGroup() {
|
||||
httpAsync("/api/stat/group?stream_name="+groupName.innerText, "GET", function(code, resp) {
|
||||
if(code == 200) {
|
||||
const obj = JSON.parse(resp);
|
||||
for(let index = groupInfoTable.rows.length; index > 0; index--) {
|
||||
groupInfoTable.deleteRow(-1);
|
||||
}
|
||||
for(let index = groupPubTable.rows.length; index > 0; index--) {
|
||||
groupPubTable.deleteRow(-1);
|
||||
}
|
||||
for(let index = groupPullTable.rows.length; index > 0; index--) {
|
||||
groupPullTable.deleteRow(-1);
|
||||
}
|
||||
for(let index = groupSubTable.rows.length; index > 0; index--) {
|
||||
groupSubTable.deleteRow(-1);
|
||||
}
|
||||
|
||||
if(obj["error_code"] > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const infoRow = groupInfoTable.insertRow();
|
||||
infoRow.insertCell(0).innerText = obj["data"]["app_name"];
|
||||
infoRow.insertCell(1).innerText = obj["data"]["stream_name"];
|
||||
infoRow.insertCell(2).innerText = obj["data"]["video_codec"];
|
||||
infoRow.insertCell(3).innerText = obj["data"]["video_width"];
|
||||
infoRow.insertCell(4).innerText = obj["data"]["video_height"];
|
||||
infoRow.insertCell(5).innerText = obj["data"]["audio_codec"];
|
||||
|
||||
const pubRow = groupPubTable.insertRow();
|
||||
pubRow.insertCell(0).innerText = obj["data"]["pub"]["session_id"];
|
||||
pubRow.insertCell(1).innerText = obj["data"]["pub"]["remote_addr"];
|
||||
pubRow.insertCell(2).innerText = obj["data"]["pub"]["start_time"];
|
||||
pubRow.insertCell(3).innerText = obj["data"]["pub"]["read_bytes_sum"];
|
||||
pubRow.insertCell(4).innerText = obj["data"]["pub"]["read_bitrate_kbits"];
|
||||
pubRow.insertCell(5).innerText = obj["data"]["pub"]["wrote_bytes_sum"];
|
||||
pubRow.insertCell(6).innerText = obj["data"]["pub"]["write_bitrate_kbits"];
|
||||
|
||||
const pullRow = groupPullTable.insertRow();
|
||||
pullRow.insertCell(0).innerText = obj["data"]["pull"]["session_id"];
|
||||
pullRow.insertCell(1).innerText = obj["data"]["pull"]["protocol"];
|
||||
pullRow.insertCell(2).innerText = obj["data"]["pull"]["remote_addr"];
|
||||
pullRow.insertCell(3).innerText = obj["data"]["pull"]["start_time"];
|
||||
pullRow.insertCell(4).innerText = obj["data"]["pull"]["read_bytes_sum"];
|
||||
pullRow.insertCell(5).innerText = obj["data"]["pull"]["read_bitrate_kbits"];
|
||||
pullRow.insertCell(6).innerText = obj["data"]["pull"]["wrote_bytes_sum"];
|
||||
pullRow.insertCell(7).innerText = obj["data"]["pull"]["write_bitrate_kbits"];
|
||||
|
||||
if(obj["data"]["subs"]) {
|
||||
obj["data"]["subs"].sort(subSort);
|
||||
for(let i = 0; i < obj["data"]["subs"].length; i++) {
|
||||
const sub = obj["data"]["subs"][i];
|
||||
const subRow = groupSubTable.insertRow();
|
||||
subRow.insertCell(0).innerText = i + 1;
|
||||
subRow.insertCell(1).innerText = sub["session_id"];
|
||||
subRow.insertCell(2).innerText = sub["protocol"];
|
||||
subRow.insertCell(3).innerText = sub["remote_addr"];
|
||||
subRow.insertCell(4).innerText = sub["start_time"];
|
||||
subRow.insertCell(5).innerText = sub["read_bytes_sum"];
|
||||
subRow.insertCell(6).innerText = sub["read_bitrate_kbits"];
|
||||
subRow.insertCell(7).innerText = sub["wrote_bytes_sum"];
|
||||
subRow.insertCell(8).innerText = sub["write_bitrate_kbits"];
|
||||
}
|
||||
}
|
||||
lblGroupUpdateTime.innerText = (new Date().toString());
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue