mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-08-09 14:47:47 +02:00
Added Zoraxy experimental
This commit is contained in:
Toby Chui
277
src/web/components/status.html
Normal file
277
src/web/components/status.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<div class="ui stackable four column grid">
|
||||
<div class="column">
|
||||
<div id="serverstatus" class="ui green statustab inverted segment">
|
||||
<h4 class="ui header">
|
||||
<i class="power off icon"></i>
|
||||
<div class="content">
|
||||
<span id="statusTitle">Offline</span>
|
||||
<div style="color: white;" class="sub header" id="statusText">Reverse proxy server is offline</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="connections" class="ui statustab summary segment">
|
||||
<h4 class="ui header">
|
||||
<i class="exchange icon"></i>
|
||||
<div class="content">
|
||||
<span id="summaryTotalCount"></span> <small>Req. Today</small>
|
||||
<div class="sub header" style="margin-top: 0.4em;">
|
||||
<i class="green circle check icon"></i> <span id="summarySuccCount"></span>
|
||||
/ <i class="red red exclamation circle icon"></i> <span id="summaryErrCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="connections" class="ui yellow statustab inverted segment">
|
||||
<h4 class="ui header">
|
||||
<i class="exchange icon"></i>
|
||||
<div class="content">
|
||||
<span></span>
|
||||
<div class="sub header"></div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="connections" class="ui pink statustab inverted segment">
|
||||
<h4 class="ui header">
|
||||
<i class="exchange icon"></i>
|
||||
<div class="content">
|
||||
<span></span>
|
||||
<div class="sub header"></div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui divider"></div>
|
||||
<p>Inbound Port (Port to be proxied)</p>
|
||||
<div class="ui action fluid input">
|
||||
<input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
|
||||
<button class="ui button" onclick="handlePortChange();">Apply</button>
|
||||
</div>
|
||||
<br>
|
||||
<div id="tls" class="ui toggle checkbox">
|
||||
<input type="checkbox">
|
||||
<label>Use TLS to serve proxy request</label>
|
||||
</div>
|
||||
<br>
|
||||
<div id="redirect" class="ui toggle checkbox" style="margin-top: 0.6em;">
|
||||
<input type="checkbox">
|
||||
<label>Force redirect HTTP request to HTTPS<br>
|
||||
<small>(Only apply when listening port is 443)</small></label>
|
||||
</div>
|
||||
<br>
|
||||
<div id="portUpdateSucc" class="ui green message" style="display:none;">
|
||||
<i class="ui green checkmark icon"></i> Setting Updated
|
||||
</div>
|
||||
<Br>
|
||||
<button id="startbtn" class="ui teal button" onclick="startService();">Start Service</button>
|
||||
<button id="stopbtn" class="ui red disabled button" onclick="stopService();">Stop Service</button>
|
||||
<div id="rploopbackWarning" class="ui segment" style="display:none;">
|
||||
<b><i class="yellow warning icon"></i> Loopback Routing Warning</b><br>
|
||||
<small>This management interface is a loopback proxied service. <br>If you want to shutdown the reverse proxy server, please remove the proxy rule for the management interface and refresh.</small>
|
||||
</div>
|
||||
<div id="statusErrmsg" class="ui red message" style="display: none;"></div>
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui two column stackable grid">
|
||||
<div class="column">
|
||||
<p>Visitor Counts</p>
|
||||
<table class="ui basic celled table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Country ISO Code</th>
|
||||
<th>Visitor Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- insert table rows here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>Proxy Request Types</p>
|
||||
<table class="ui basic celled table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Proxy Type</th>
|
||||
<th>Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- insert table rows here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="ui basic green button"><i class="refresh icon"></i> Refresh</button>
|
||||
<script>
|
||||
let loopbackProxiedInterface = false;
|
||||
//Initial the start stop button if this is reverse proxied
|
||||
$.get("/api/proxy/requestIsProxied", function(data){
|
||||
if (data == true){
|
||||
//This management interface is reverse proxied by itself
|
||||
//do not allow turning off the proxy
|
||||
$("#stopbtn").addClass("disabled");
|
||||
loopbackProxiedInterface = true;
|
||||
$("#rploopbackWarning").show();
|
||||
}
|
||||
});
|
||||
|
||||
//Get the latest server status from proxy server
|
||||
function initRPStaste(){
|
||||
$.get("/api/proxy/status", function(data){
|
||||
if (data.Running == true){
|
||||
$("#startbtn").addClass("disabled");
|
||||
if (!loopbackProxiedInterface){
|
||||
$("#stopbtn").removeClass("disabled");
|
||||
}
|
||||
$("#serverstatus").addClass("green");
|
||||
$("#statusTitle").text("Online");
|
||||
$("#statusText").text("Serving request on port: " + data.Option.Port);
|
||||
}else{
|
||||
$("#startbtn").removeClass("disabled");
|
||||
$("#stopbtn").addClass("disabled");
|
||||
$("#statusTitle").text("Offline");
|
||||
$("#statusText").text("Reverse proxy server is offline");
|
||||
$("#serverstatus").removeClass("green");
|
||||
}
|
||||
$("#incomingPort").val(data.Option.Port);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function abbreviateNumber(value) {
|
||||
var newValue = value;
|
||||
var suffixes = ["", "K", "M", "B", "T"];
|
||||
var suffixNum = 0;
|
||||
while (newValue >= 1000 && suffixNum < suffixes.length - 1) {
|
||||
newValue /= 1000;
|
||||
suffixNum++;
|
||||
}
|
||||
if (value > 1000){
|
||||
newValue = newValue.toFixed(2);
|
||||
}
|
||||
|
||||
return newValue + suffixes[suffixNum];
|
||||
}
|
||||
|
||||
|
||||
function getDailySummary(){
|
||||
$.get("/api/stats/summary?fast=true", function(data){
|
||||
console.log(data);
|
||||
|
||||
$("#summaryTotalCount").text(abbreviateNumber(data.TotalRequest));
|
||||
$("#summarySuccCount").text(abbreviateNumber(data.ValidRequest));
|
||||
$("#summaryErrCount").text(abbreviateNumber(data.ErrorRequest));
|
||||
});
|
||||
}
|
||||
setInterval(function(){
|
||||
getDailySummary();
|
||||
}, 10000);
|
||||
getDailySummary();
|
||||
|
||||
//Start and stop service button
|
||||
function startService(){
|
||||
$.post("/api/proxy/enable", {enable: true}, function(data){
|
||||
if (data.error != undefined){
|
||||
statusErrmsg(data.error);
|
||||
}
|
||||
initRPStaste();
|
||||
});
|
||||
}
|
||||
|
||||
function stopService(){
|
||||
$.post("/api/proxy/enable", {enable: false}, function(data){
|
||||
if (data.error != undefined){
|
||||
statusErrmsg(data.error);
|
||||
}
|
||||
initRPStaste();
|
||||
});
|
||||
}
|
||||
|
||||
//Show error message
|
||||
function statusErrmsg(message){
|
||||
$("#statusErrmsg").html(`<i class="red remove icon"></i> ${message}`);
|
||||
$("#statusErrmsg").slideDown('fast').delay(5000).slideUp('fast');
|
||||
}
|
||||
|
||||
function handlePortChange(){
|
||||
var newPortValue = $("#incomingPort").val();
|
||||
if (isNaN(newPortValue - 1)){
|
||||
alert("Invalid incoming port value");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post("/api/proxy/setIncoming", {incoming: newPortValue}, function(data){
|
||||
if (data.error != undefined){
|
||||
statusErrmsg(data.error);
|
||||
}
|
||||
$("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
|
||||
initRPStaste();
|
||||
});
|
||||
}
|
||||
|
||||
function initHTTPtoHTTPSRedirectSetting(){
|
||||
$.get("/api/proxy/useHttpsRedirect", function(data){
|
||||
if (data == true){
|
||||
$("#redirect").checkbox("set checked");
|
||||
}
|
||||
|
||||
//Initiate the input listener on the checkbox
|
||||
$("#redirect").find("input").on("change", function(){
|
||||
let thisValue = $("#redirect").checkbox("is checked");
|
||||
$.ajax({
|
||||
url: "/api/proxy/useHttpsRedirect",
|
||||
data: {set: thisValue},
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
alert(data.error);
|
||||
}else{
|
||||
//Updated
|
||||
$("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
|
||||
initRPStaste();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
initHTTPtoHTTPSRedirectSetting();
|
||||
|
||||
function initTlsSetting(){
|
||||
$.get("/api/cert/tls", function(data){
|
||||
if (data == true){
|
||||
$("#tls").checkbox("set checked");
|
||||
}
|
||||
|
||||
//Initiate the input listener on the checkbox
|
||||
$("#tls").find("input").on("change", function(){
|
||||
let thisValue = $("#tls").checkbox("is checked");
|
||||
$.ajax({
|
||||
url: "/api/cert/tls",
|
||||
data: {set: thisValue},
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
alert(data.error);
|
||||
}else{
|
||||
//Updated
|
||||
$("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
|
||||
initRPStaste();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
initTlsSetting();
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user