|
@@ -19,7 +19,11 @@
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
- .ui.toggle.checkbox input:checked ~ label::before{
|
|
|
+ .upstreamEntry .ui.toggle.checkbox input:checked ~ label::before{
|
|
|
+ background-color: #00ca52 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #activateNewUpstream.ui.toggle.checkbox input:checked ~ label::before{
|
|
|
background-color: #00ca52 !important;
|
|
|
}
|
|
|
|
|
@@ -80,7 +84,12 @@
|
|
|
</div>
|
|
|
<small>E.g. 192.168.0.101:8000 or example.com</small>
|
|
|
<br><br>
|
|
|
- <div class="ui checkbox">
|
|
|
+ <div id="activateNewUpstream" class="ui toggle checkbox" style="display:inline-block;">
|
|
|
+ <input type="checkbox" id="activateNewUpstreamCheckbox" style="margin-top: 0.4em;" checked>
|
|
|
+ <label>Activate<br>
|
|
|
+ <small>Enable this upstream for load balancing</small></label>
|
|
|
+ </div><br>
|
|
|
+ <div class="ui checkbox" style="margin-top: 1.2em;">
|
|
|
<input type="checkbox" id="requireTLS">
|
|
|
<label>Require TLS<br>
|
|
|
<small>Proxy target require HTTPS connection</small></label>
|
|
@@ -115,11 +124,11 @@
|
|
|
|
|
|
function initOriginList(){
|
|
|
$.ajax({
|
|
|
- url: "/api/proxy/detail",
|
|
|
+ url: "/api/proxy/upstream/list",
|
|
|
method: "POST",
|
|
|
data: {
|
|
|
"type":"host",
|
|
|
- "epname": editingEndpoint.ep
|
|
|
+ "ep": editingEndpoint.ep
|
|
|
},
|
|
|
success: function(data){
|
|
|
if (data.error != undefined){
|
|
@@ -128,65 +137,17 @@
|
|
|
return;
|
|
|
}else{
|
|
|
$("#upstreamTable").html("");
|
|
|
- if (data.Origins != undefined){
|
|
|
- origins = data.Origins;
|
|
|
- console.log(origins);
|
|
|
- data.Origins.forEach(upstream => {
|
|
|
- let tlsIcon = "";
|
|
|
- if (upstream.RequireTLS){
|
|
|
- tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
|
|
|
- if (upstream.SkipCertValidations){
|
|
|
- tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
|
|
|
- }
|
|
|
- }
|
|
|
+ if (data != undefined){
|
|
|
+ console.log(data);
|
|
|
+ data.ActiveOrigins.forEach(upstream => {
|
|
|
+ renderUpstreamEntryToTable(upstream, true);
|
|
|
+ });
|
|
|
|
|
|
- //Priority Arrows
|
|
|
- let upArrowClass = "";
|
|
|
- if (upstream.Priority == 0 ){
|
|
|
- //Cannot go any higher
|
|
|
- upArrowClass = "disabled";
|
|
|
- }
|
|
|
- let url = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`
|
|
|
-
|
|
|
- $("#upstreamTable").append(`<div class="ui segment">
|
|
|
- <h4 class="ui header">
|
|
|
- <div class="ui toggle checkbox" style="display:inline-block;">
|
|
|
- <input type="checkbox" name="enabled" style="margin-top: 0.4em;" ${!upstream.Disabled?"checked":""}>
|
|
|
- <label></label>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <a href="${url}" target="_blank" class="upstreamLink">${upstream.OriginIpOrDomain} ${tlsIcon}</a>
|
|
|
- <div class="sub header">Online | Priority: ${upstream.Priority}</div>
|
|
|
- </div>
|
|
|
- </h4>
|
|
|
- <div class="ui divider"></div>
|
|
|
- <div class="ui checkbox">
|
|
|
- <input type="checkbox" name="example">
|
|
|
- <label>Require TLS<br>
|
|
|
- <small>Proxy target require HTTPS connection</small></label>
|
|
|
- </div><br>
|
|
|
- <div class="ui checkbox" style="margin-top: 0.6em;">
|
|
|
- <input type="checkbox" name="example">
|
|
|
- <label>Skip Verification<br>
|
|
|
- <small>Check this if proxy target is using self signed certificates</small></label>
|
|
|
- </div><br>
|
|
|
- <div class="ui checkbox" style="margin-top: 0.4em;">
|
|
|
- <input type="checkbox" class="SkipWebSocketOriginCheck" ${upstream.SkipWebSocketOriginCheck?"checked":""}>
|
|
|
- <label>Skip WebSocket Origin Check<br>
|
|
|
- <small>Check this to allow cross-origin websocket requests</small></label>
|
|
|
- </div><br>
|
|
|
-
|
|
|
- <div class="upstreamActions">
|
|
|
- <!-- Change Priority -->
|
|
|
- <button class="ui basic circular icon button ${upArrowClass} highPriorityButton" title="Higher Priority"><i class="ui arrow up icon"></i></button>
|
|
|
- <button class="ui basic circular icon button lowPriorityButton" title="Lower Priority"><i class="ui arrow down icon"></i></button>
|
|
|
- <button class="ui basic circular icon button" title="Edit Upstream Destination"><i class="ui grey edit icon"></i></button>
|
|
|
- <button class="ui basic circular icon button" title="Remove Upstream"><i class="ui red trash icon"></i></button>
|
|
|
- </div>
|
|
|
- </div>`);
|
|
|
+ data.InactiveOrigins.forEach(upstream => {
|
|
|
+ renderUpstreamEntryToTable(upstream, false);
|
|
|
});
|
|
|
|
|
|
- if (data.Origins.length == 1){
|
|
|
+ if (data.ActiveOrigins.length == 1){
|
|
|
$(".lowPriorityButton").addClass('disabled');
|
|
|
}
|
|
|
|
|
@@ -204,6 +165,72 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ function renderUpstreamEntryToTable(upstream, isActive){
|
|
|
+ function newUID(){return"00000000-0000-4000-8000-000000000000".replace(/0/g,function(){return(0|Math.random()*16).toString(16)})};
|
|
|
+ let tlsIcon = "";
|
|
|
+ if (upstream.RequireTLS){
|
|
|
+ tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
|
|
|
+ if (upstream.SkipCertValidations){
|
|
|
+ tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //Priority Arrows
|
|
|
+ let upArrowClass = "";
|
|
|
+ if (upstream.Priority == 0 ){
|
|
|
+ //Cannot go any higher
|
|
|
+ upArrowClass = "disabled";
|
|
|
+ }
|
|
|
+ let url = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`
|
|
|
+ let payload = encodeURIComponent(JSON.stringify(upstream));
|
|
|
+ let domUID = newUID();
|
|
|
+ $("#upstreamTable").append(`<div class="ui upstreamEntry ${isActive?"":"disabled"} segment" data-domid="${domUID}" data-payload="${payload}" data-priority="${upstream.Priority}">
|
|
|
+ <h4 class="ui header">
|
|
|
+ <div class="ui toggle checkbox" style="display:inline-block;">
|
|
|
+ <input type="checkbox" class="enableState" name="enabled" style="margin-top: 0.4em;" onchange="saveUpstreamUpdate('${domUID}');" ${isActive?"checked":""}>
|
|
|
+ <label></label>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <a href="${url}" target="_blank" class="upstreamLink">${upstream.OriginIpOrDomain} ${tlsIcon}</a>
|
|
|
+ <div class="sub header">Priority: ${upstream.Priority}</div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ <div class="advanceOptions" style="display:none;">
|
|
|
+ <div class="upstreamOriginField">
|
|
|
+ <p>New upstream origin IP address or domain</p>
|
|
|
+ <div class="ui small fluid input" style="margin-top: -0.6em;">
|
|
|
+ <input type="text" class="newOrigin" value="${upstream.OriginIpOrDomain}" onchange="handleAutoOriginClean('${domUID}');">
|
|
|
+ </div>
|
|
|
+ <small>e.g. 192.168.0.101:8000 or example.com</small>
|
|
|
+ </div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
+ <div class="ui checkbox">
|
|
|
+ <input type="checkbox" class="reqTLSCheckbox" ${upstream.RequireTLS?"checked":""}>
|
|
|
+ <label>Require TLS<br>
|
|
|
+ <small>Proxy target require HTTPS connection</small></label>
|
|
|
+ </div><br>
|
|
|
+ <div class="ui checkbox" style="margin-top: 0.6em;">
|
|
|
+ <input type="checkbox" class="skipVerificationCheckbox" ${upstream.SkipCertValidations?"checked":""}>
|
|
|
+ <label>Skip Verification<br>
|
|
|
+ <small>Check this if proxy target is using self signed certificates</small></label>
|
|
|
+ </div><br>
|
|
|
+ <div class="ui checkbox" style="margin-top: 0.4em;">
|
|
|
+ <input type="checkbox" class="SkipWebSocketOriginCheck" ${upstream.SkipWebSocketOriginCheck?"checked":""}>
|
|
|
+ <label>Skip WebSocket Origin Check<br>
|
|
|
+ <small>Check this to allow cross-origin websocket requests</small></label>
|
|
|
+ </div><br>
|
|
|
+ </div>
|
|
|
+ <div class="upstreamActions">
|
|
|
+ <!-- Change Priority -->
|
|
|
+ <button class="ui basic circular icon button ${upArrowClass} highPriorityButton" title="Higher Priority"><i class="ui arrow up icon"></i></button>
|
|
|
+ <button class="ui basic circular icon button lowPriorityButton" title="Lower Priority"><i class="ui arrow down icon"></i></button>
|
|
|
+ <button class="ui basic circular icon editbtn button" onclick="handleUpstreamOriginEdit('${domUID}');" title="Edit Upstream Destination"><i class="ui grey edit icon"></i></button>
|
|
|
+ <button style="display:none;" class="ui basic circular icon savebtn button" onclick="saveUpstreamUpdate('${domUID}');" title="Save New Destination"><i class="ui green save icon"></i></button>
|
|
|
+ <button style="display:none;" class="ui basic circular icon cancelbtn button" onclick="initOriginList();" title="Cancel"><i class="ui grey times icon"></i></button>
|
|
|
+ <button style="display:none;" class="ui basic circular icon trashbtn button" title="Remove Upstream"><i class="ui red trash icon"></i></button>
|
|
|
+ </div>
|
|
|
+ </div>`);
|
|
|
+ }
|
|
|
|
|
|
/* New Upstream Origin Functions */
|
|
|
|
|
@@ -244,6 +271,7 @@
|
|
|
let requireTLS = $("#requireTLS")[0].checked;
|
|
|
let skipVerification = $("#skipTlsVerification")[0].checked;
|
|
|
let skipWebSocketOriginCheck = $("#SkipWebSocketOriginCheck")[0].checked;
|
|
|
+ let activateLoadbalancer = $("#activateNewUpstreamCheckbox")[0].checked;
|
|
|
|
|
|
if (origin == ""){
|
|
|
parent.msgbox("Upstream origin cannot be empty", false);
|
|
@@ -258,7 +286,8 @@
|
|
|
"origin": origin,
|
|
|
"tls": requireTLS,
|
|
|
"tlsval": skipVerification,
|
|
|
- "bpwsorg":skipWebSocketOriginCheck
|
|
|
+ "bpwsorg":skipWebSocketOriginCheck,
|
|
|
+ "active": activateLoadbalancer,
|
|
|
},
|
|
|
success: function(data){
|
|
|
if (data.error != undefined){
|
|
@@ -266,11 +295,111 @@
|
|
|
}else{
|
|
|
parent.msgbox("New upstream origin added");
|
|
|
initOriginList();
|
|
|
+ $("#originURL").val("");
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ //Get a upstream setting data from DOM element
|
|
|
+ function getUpstreamSettingFromDOM(upstream){
|
|
|
+ //Get the original setting from DOM payload
|
|
|
+ let originalSettings = $(upstream).attr("data-payload");
|
|
|
+ originalSettings = JSON.parse(decodeURIComponent(originalSettings));
|
|
|
+
|
|
|
+ //Get the updated settings if any
|
|
|
+ let requireTLS = $(upstream).find(".reqTLSCheckbox")[0].checked;
|
|
|
+ let skipTLSVerification = $(upstream).find(".skipVerificationCheckbox")[0].checked;
|
|
|
+ let skipWebSocketOriginCheck = $(upstream).find(".SkipWebSocketOriginCheck")[0].checked;
|
|
|
+
|
|
|
+ //Update the original setting with new one just applied
|
|
|
+ originalSettings.OriginIpOrDomain = $(upstream).find(".newOrigin").val();
|
|
|
+ originalSettings.RequireTLS = requireTLS;
|
|
|
+ originalSettings.SkipCertValidations = skipTLSVerification;
|
|
|
+ originalSettings.SkipWebSocketOriginCheck = skipWebSocketOriginCheck;
|
|
|
+
|
|
|
+ //console.log(originalSettings);
|
|
|
+ return originalSettings;
|
|
|
+ }
|
|
|
+
|
|
|
+ //Handle setting change on upstream config
|
|
|
+ function saveUpstreamUpdate(upstreamDomID){
|
|
|
+ let targetDOM = $(`.upstreamEntry[data-domid=${upstreamDomID}]`);
|
|
|
+ let originalSettings = $(targetDOM).attr("data-payload");
|
|
|
+ originalSettings = JSON.parse(decodeURIComponent(originalSettings));
|
|
|
+ let newConfig = getUpstreamSettingFromDOM(targetDOM);
|
|
|
+ let isActive = $(targetDOM).find(".enableState")[0].checked;
|
|
|
+ console.log(newConfig);
|
|
|
+ $.ajax({
|
|
|
+ url: "/api/proxy/upstream/update",
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ ep: editingEndpoint.ep,
|
|
|
+ origin: originalSettings.OriginIpOrDomain, //Original ip or domain as key
|
|
|
+ payload: JSON.stringify(newConfig),
|
|
|
+ active: isActive,
|
|
|
+ },
|
|
|
+ success: function(data){
|
|
|
+ if (data.error != undefined){
|
|
|
+ parent.msgbox(data.error, false);
|
|
|
+
|
|
|
+ }else{
|
|
|
+ parent.msgbox("Upstream setting updated");
|
|
|
+ initOriginList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //Edit the upstream origin of this upstream entry
|
|
|
+ function handleUpstreamOriginEdit(upstreamDomID){
|
|
|
+ let targetDOM = $(`.upstreamEntry[data-domid=${upstreamDomID}]`);
|
|
|
+ let originalSettings = $(targetDOM).attr("data-payload");
|
|
|
+ originalSettings = JSON.parse(decodeURIComponent(originalSettings));
|
|
|
+ let originIP = originalSettings.OriginIpOrDomain;
|
|
|
+
|
|
|
+ //Change the UI to edit mode
|
|
|
+ $(".editbtn").hide();
|
|
|
+ $(".lowPriorityButton").hide();
|
|
|
+ $(".highPriorityButton").hide();
|
|
|
+ $(targetDOM).find(".trashbtn").show();
|
|
|
+ $(targetDOM).find(".savebtn").show();
|
|
|
+ $(targetDOM).find(".cancelbtn").show();
|
|
|
+ $(targetDOM).find(".advanceOptions").show();
|
|
|
+ }
|
|
|
+
|
|
|
+ //Check if the entered URL contains http or https
|
|
|
+ function handleAutoOriginClean(domid){
|
|
|
+ let targetDOM = $(`.upstreamEntry[data-domid=${domid}]`);
|
|
|
+ let targetTLSCheckbox = $(targetDOM).find(".reqTLSCheckbox");
|
|
|
+ let targetDomain = $(targetDOM).find(".newOrigin").val().trim();
|
|
|
+ if (targetDomain.startsWith("http://")){
|
|
|
+ targetDomain = targetDomain.substr(7);
|
|
|
+ $(input).val(targetDomain);
|
|
|
+ $(targetTLSCheckbox).parent().checkbox("set unchecked");
|
|
|
+ }else if (targetDomain.startsWith("https://")){
|
|
|
+ targetDomain = targetDomain.substr(8);
|
|
|
+ $(input).val(targetDomain);
|
|
|
+ $(targetTLSCheckbox).parent().checkbox("set checked");
|
|
|
+ }else{
|
|
|
+ //URL does not contains https or http protocol tag
|
|
|
+ //sniff header
|
|
|
+ $.ajax({
|
|
|
+ url: "/api/proxy/tlscheck",
|
|
|
+ data: {url: targetDomain},
|
|
|
+ success: function(data){
|
|
|
+ if (data.error != undefined){
|
|
|
+
|
|
|
+ }else if (data == "https"){
|
|
|
+ $(targetTLSCheckbox).parent().checkbox("set checked");
|
|
|
+ }else if (data == "http"){
|
|
|
+ $(targetTLSCheckbox).parent().checkbox("set unchecked");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
if (window.location.hash.length > 1){
|
|
|
let payloadHash = window.location.hash.substr(1);
|
|
|
try{
|