Added load balancer (wip)

+ Added support for multiple upstreams + Added load balancer + Added upstream abstraction in endpoint + Added load balancer structure + Added breaking change auto-updater + Added uptime monitor proxy type definitions + Added upstream editor UI + Fixed charset bug in many snippets HTML files
2025-09-24 21:20:04 +02:00 · 2024-07-01 21:17:20 +08:00
parent 7e62fef879
commit 2aa35cbe6d
46 changed files with 1908 additions and 351 deletions
--- a/src/web/components/httprp.html
+++ b/src/web/components/httprp.html
@@ -51,13 +51,29 @@
                //Sort by RootOrMatchingDomain field
                data.sort((a,b) => (a.RootOrMatchingDomain > b.RootOrMatchingDomain) ? 1 : ((b.RootOrMatchingDomain > a.RootOrMatchingDomain) ? -1 : 0))
                data.forEach(subd => {
-                    let tlsIcon = "";
                    let subdData = encodeURIComponent(JSON.stringify(subd));
-                    if (subd.RequireTLS){
-                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
-                        if (subd.SkipCertValidations){
-                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
-                        }
+                    
+                    //Build the upstream list
+                    let upstreams = "";
+                    if (subd.ActiveOrigins.length == 0){
+                        //Invalid config
+                        upstreams = `<i class="ui yellow exclamation triangle icon"></i> No Active Upstream Origin<br>`;
+                    }else{
+                        subd.ActiveOrigins.forEach(upstream => {
+                            console.log(upstream);
+                            //Check if the upstreams require TLS connections
+                            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>`
+                                }
+                            }
+
+                            let upstreamLink = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`;
+
+                            upstreams += `<a href="${upstreamLink}" target="_blank">${upstream.OriginIpOrDomain} ${tlsIcon}</a><br>`;
+                        })
                    }

                    let inboundTlsIcon = "";
@@ -102,7 +118,11 @@
                            ${aliasDomains}
                            <small class="accessRuleNameUnderHost" ruleid="${subd.AccessFilterUUID}"></small>
                        </td>
-                        <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
+                        <td data-label="" editable="true" datatype="domain">
+                            <div class="upstreamList">
+                                ${upstreams}        
+                            </div>
+                        </td>
                        <td data-label="" editable="true" datatype="vdir">${vdList}</td>
                        <td data-label="" editable="true" datatype="advanced" style="width: 350px;">
                            ${subd.RequireBasicAuth?`<i class="ui green check icon"></i> Basic Auth`:``}
@@ -228,39 +248,21 @@
            var input;
            var datatype = $(this).attr("datatype");
            if (datatype == "domain"){
-                let domain = payload.Domain;
-                //Target require TLS for proxying
-                let tls = payload.RequireTLS;
-                if (tls){
-                    tls = "checked";
-                }else{
-                    tls = "";
+                let useStickySessionChecked = "";
+                if (payload.UseStickySession){
+                    useStickySessionChecked = "checked";
                }
+                input = `<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 1em;" onclick="editUpstreams('${uuid}');"><i class="grey server icon"></i> Edit Upstreams</button>
+                <div class="ui divider"></div>
+                <div class="ui checkbox" style="margin-top: 0.4em;">
+                    <input type="checkbox" class="UseStickySession" ${useStickySessionChecked}>
+                    <label>Use Sticky Session<br>
+                        <small>Enable stick session on load balancing</small></label>
+                </div>

-                //Require TLS validation
-                let skipTLSValidation = payload.SkipCertValidations;
-                let checkstate = "";
-                if (skipTLSValidation){
-                    checkstate = "checked";
-                }
-
-                input = `
-                    <div class="ui mini fluid input">
-                        <input type="text" class="Domain" onchange="cleanProxyTargetValue(this)" value="${domain}">
-                    </div>
-                    <div class="ui checkbox" style="margin-top: 0.6em;">
-                        <input type="checkbox" class="RequireTLS" ${tls}>
-                        <label>Require TLS<br>
-                            <small>Proxy target require HTTPS connection</small></label>
-                    </div><br>
-                    <div class="ui checkbox" style="margin-top: 0.4em;">
-                        <input type="checkbox" class="SkipCertValidations" ${checkstate}>
-                        <label>Skip Verification<br>
-                        <small>Check this if proxy target is using self signed certificates</small></label>
-                    </div><br>
-                    <!-- <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editLoadBalanceOptions('${uuid}');"><i class="purple server icon"></i> Load Balance</button> -->
                `;
-                column.empty().append(input);
+                column.append(input);
+                $(column).find(".upstreamList").addClass("editing");
            }else if (datatype == "vdir"){
                //Append a quick access button for vdir page
                column.append(`<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="quickEditVdir('${uuid}');">
@@ -311,12 +313,6 @@
                                Security Options
                            </div>
                            <div class="content">
-                                <div class="ui checkbox" style="margin-top: 0.4em;">
-                                    <input type="checkbox" class="SkipWebSocketOriginCheck" ${wsCheckstate}>
-                                    <label>Skip WebSocket Origin Check<br>
-                                    <small>Check this to allow cross-origin websocket requests</small></label>
-                                </div>
-                                <br>
                                <div class="ui checkbox" style="margin-top: 0.4em;">
                                    <input type="checkbox" onchange="handleToggleRateLimitInput();" class="RequireRateLimit" ${rateLimitCheckState}>
                                    <label>Require Rate Limit<br>
@@ -399,15 +395,11 @@
        }
        
        var epttype = "host";
-        let newDomain =  $(row).find(".Domain").val();
-        let requireTLS = $(row).find(".RequireTLS")[0].checked;
-        let skipCertValidations = $(row).find(".SkipCertValidations")[0].checked;
+        let useStickySession =  $(row).find(".UseStickySession")[0].checked;
        let requireBasicAuth = $(row).find(".RequireBasicAuth")[0].checked;
        let requireRateLimit = $(row).find(".RequireRateLimit")[0].checked;
        let rateLimit = $(row).find(".RateLimit").val();
        let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
-        let bypassWebsocketOrigin = $(row).find(".SkipWebSocketOriginCheck")[0].checked;
-        console.log(newDomain, requireTLS, skipCertValidations, requireBasicAuth)

        $.ajax({
            url: "/api/proxy/edit",
@@ -415,11 +407,8 @@
            data: {
                "type": epttype,
                "rootname": uuid,
-                "ep":newDomain,
+                "ss":useStickySession,
                "bpgtls": bypassGlobalTLS,
-                "tls" :requireTLS,
-                "tlsval": skipCertValidations,
-                "bpwsorg" : bypassWebsocketOrigin,
                "bauth" :requireBasicAuth,
                "rate" :requireRateLimit,
                "ratenum" :rateLimit,
@@ -434,21 +423,6 @@
            }
        })
    }
-
-    //Clearn the proxy target value, make sure user do not enter http:// or https://
-    //and auto select TLS checkbox if https:// exists
-    function cleanProxyTargetValue(input){
-        let targetDomain = $(input).val().trim();
-        if (targetDomain.startsWith("http://")){
-            targetDomain = targetDomain.substr(7);
-            $(input).val(targetDomain);
-            $("#httpProxyList input.RequireTLS").parent().checkbox("set unchecked");
-        }else if (targetDomain.startsWith("https://")){
-            targetDomain = targetDomain.substr(8);
-            $(input).val(targetDomain);
-            $("#httpProxyList input.RequireTLS").parent().checkbox("set checked");
-        }
-    }
    
    /* button events */
    function editBasicAuthCredentials(uuid){
@@ -490,12 +464,12 @@
    }

    //Open the load balance option
-    function editLoadBalanceOptions(uuid){
+    function editUpstreams(uuid){
        let payload = encodeURIComponent(JSON.stringify({
            ept: "host",
            ep: uuid
        }));
-        showSideWrapper("snippet/loadBalancer.html?t=" + Date.now() + "#" + payload);
+        showSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload);
    }

    function handleProxyRuleToggle(object){
--- a/src/web/components/rproot.html
+++ b/src/web/components/rproot.html
@@ -122,7 +122,7 @@
    function initRootInfo(callback=undefined){
        $.get("/api/proxy/list?type=root", function(data){
            if (data == null){
-
+                msgbox("Default site load failed", false);
            }else{
                var $radios = $('input:radio[name=defaultsiteOption]');
                let proxyType = data.DefaultSiteOption;
@@ -140,8 +140,8 @@
                }
                updateAvaibleDefaultSiteOptions();
                
-                $("#proxyRoot").val(data.Domain);
-                checkRootRequireTLS(data.Domain);
+                $("#proxyRoot").val(data.ActiveOrigins[0].OriginIpOrDomain);
+                checkRootRequireTLS(data.ActiveOrigins[0].OriginIpOrDomain);
            }

            if (callback != undefined){
@@ -247,7 +247,9 @@
                    msgbox(data.error, false, 5000);
                }else{
                    //OK
+                    
                    initRootInfo(function(){
+                        
                        //Check if WebServ is enabled
                        isUsingStaticWebServerAsRoot(function(isUsingWebServ){
                            if (isUsingWebServ){
@@ -256,11 +258,7 @@
                                setWebServerRunningState(true);
                            }
                            
-                            setTimeout(function(){
-                                 //Update the checkbox
-                                msgbox("Default Site Updated");
-                            }, 100);
-                            
+                            msgbox("Default Site Updated");
                        })
                    });
                    
@@ -269,6 +267,9 @@
                if (btn != undefined){
                    $(btn).removeClass("disabled");
                }
+            },
+            error: function(){
+                msgbox("Unknown error occured", false);
            }
        });

--- a/src/web/components/rules.html
+++ b/src/web/components/rules.html
@@ -26,8 +26,8 @@
                    </div>
                    <div class="field">
                        <label>Target IP Address or Domain Name with port</label>
-                            <input type="text" id="proxyDomain" onchange="autoCheckTls(this.value);">
-                        <small>E.g. 192.168.0.101:8000 or example.com</small>
+                            <input type="text" id="proxyDomain" onchange="autoFillTargetTLS(this);">
+                        <small>e.g. 192.168.0.101:8000 or example.com</small>
                    </div>
                    <div class="field dockerOptimizations" style="display:none;">
                        <button style="margin-top: -2em;" class="ui basic small button" onclick="openDockerContainersList();"><i class="blue docker icon"></i> Pick from Docker Containers</button>
@@ -76,6 +76,12 @@
                                        <label>Allow plain HTTP access<br><small>Allow this subdomain to be connected without TLS (Require HTTP server enabled on port 80)</small></label>
                                    </div>
                                </div>
+                                <div class="field">
+                                    <div class="ui checkbox">
+                                        <input type="checkbox" id="useStickySessionLB">
+                                        <label>Sticky Session<br><small>Enable stick session on upstream load balancing</small></label>
+                                    </div>
+                                </div>
                                <div class="field">
                                    <div class="ui checkbox">
                                        <input type="checkbox" id="requireRateLimit">
@@ -259,7 +265,26 @@
        }
    }

+    //Clearn the proxy target value, make sure user do not enter http:// or https://
+    //and auto select TLS checkbox if https:// exists
+    function autoFillTargetTLS(input){
+        let targetDomain = $(input).val().trim();
+        if (targetDomain.startsWith("http://")){
+            targetDomain = targetDomain.substr(7);
+            $(input).val(targetDomain);
+            $("#reqTls").parent().checkbox("set unchecked");
+        }else if (targetDomain.startsWith("https://")){
+            targetDomain = targetDomain.substr(8);
+            $(input).val(targetDomain);
+            $("#reqTls").parent().checkbox("set checked");
+        }else{
+            //No http or https was given. Sniff it
+            autoCheckTls(targetDomain);
+        }
+    }
+    

+    //Automatic check if the site require TLS and check the checkbox if needed
    function autoCheckTls(targetDomain){
       $.ajax({
            url: "/api/proxy/tlscheck",
@@ -453,7 +478,25 @@
    }
    
    /* UI Element Initialization */
-    $("#advanceProxyRules").accordion();
-    $("#newProxyRuleAccessFilter").parent().dropdown();
+    function initAdvanceSettingsAccordion(){
+        function hasClickEvent(element) {
+            var events = $._data(element, "events");
+            return events && events.click && events.click.length > 0;
+        }
+
+        if (!hasClickEvent($("#advanceProxyRules"))){
+            // Not sure why sometime the accordion events are not binding
+            // to the DOM element. This makes sure the element is binded
+            // correctly by checking it again after 300ms
+            $("#advanceProxyRules").accordion();
+            $("#newProxyRuleAccessFilter").parent().dropdown();
+            setTimeout(function(){
+                initAdvanceSettingsAccordion();
+            }, 300);
+        }
+    }
+    initAdvanceSettingsAccordion();
+   
+ 
   
 </script>